Abstract image of a woman sitting on books and studying on a laptop

WEB DEVELOPMENT DIPLOMA v1.pdf

Anas Alpure, profile picture
Anas Alpure

هذا المستند يتناول موضوع تطوير الويب، حيث يحتوي على محتوى شامل يعرض أساسيات HTML5 وCSS3 وBootstrap 4. يتضمن المستند شرحًا مفصلًا عن العناصر المختلفة، وخصائص التصميم، وكيفية إنشاء صفحات ويب متجاوبة باستخدام Bootstrap. كما يحتوي على أمثلة عملية وتعليمات حول كيفية استخدام كل تقنية، مما يجعله مرجعًا مفيدًا للمطورين الجدد.

Software
1 of 443
Download to read offline
1
2
Most read
3
4
5
6
7
8
9
10
Most read
11
Most read
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
WEB DEVELOPMENT DIPLOMA V1 WEB DEVELOPMENT DIPLOMA version 1 Eng. Anas Alpure ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ WEB DEVELOPMENT DIPLOMA
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 2 ‫ا‬ ‫لفهرس‬ ‫الويب‬ ‫متصفحات‬ ________________________________ _____________ 22 ‫في‬ ‫مقدمة‬ HTML5 : ________________________________ ____________ 23 ‫عنصر‬ ‫هو‬ ‫ما‬ HTML ‫؟‬ ________________________________ __________ 24 ‫االكواد‬ ‫محرر‬ ________________________________ ________________ 26 HTML ‫بسيط‬ ‫كود‬ ________________________________ _____________ 28 ‫عناصر‬ HTML ________________________________ _______________ 30 ‫عناصر‬ HTML ( ‫المتداخلة‬ Nested ) ________________________________ __ 30 ‫خاصي‬ ‫المصدر‬ ‫ة‬ src ________________________________ _______________ 32 ‫واالرتفاع‬ ‫العرض‬ ‫خواص‬ ________________________________ ___________ 33 (‫البديل‬ ‫النص‬ ‫خاصية‬ alt Attribute ) ________________________________ ____ 33 ( ‫الستايل‬ ‫خاصية‬ style Attribute ) ________________________________ ___ 33 ‫الخاصية‬ lang ( lang Attribute ) ________________________________ ____ 33 (‫العنوان‬ ‫خاصية‬ title ) ________________________________ __________ 34 ‫في‬ ‫النصوص‬ ‫تنسيق‬ HTML ________________________________ _______ 34 <b> and <strong> Elements ________________________________ ________ 35 <i> and <em> Elements ________________________________ ___________ 35 <small> Element ________________________________ _______________ 35 <mark> Element ________________________________ _______________ 35 <del> Element ________________________________ _________________ 35 <ins> Element ________________________________ _________________ 35 <sub> Element ________________________________ _________________ 36 <sup> Element ________________________________ _________________ 36 ‫األلوان‬ ________________________________ ____________________ 36 ‫األلوان‬ ‫أسماء‬ ________________________________ __________________ 36 (‫الخلفية‬ ‫لون‬ Background Color ) ________________________________ ______ 36 (‫الخط‬ ‫لون‬ Text Color ) ________________________________ _____________ 37 ( ‫الحدود‬ ‫لون‬ Border Color ) ________________________________ _________ 37
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 3 ‫اللون‬ ‫قيم‬ ________________________________ _____________________ 38 ‫صورة‬ ‫العنصر‬ HTML ________________________________ __________ 38 ‫خاصية‬ (The src Attribute) src ________________________________ _______ 39 ‫خاصية‬ alt ( The alt Attribute ) ________________________________ _______ 39 ‫كرابط‬ ‫الصورة‬ ________________________________ _______________ 39 ‫الجداول‬ ________________________________ ___________________ 40 ‫جدول‬ ‫تعريف‬ HTML ________________________________ ______________ 40 ‫جدول‬ - ‫ًا‬‫د‬‫ح‬ ‫أضف‬ ________________________________ ________________ 41 ‫جدول‬ - ‫خلية‬ ‫مساحة‬ ‫إضافة‬ ________________________________ __________ 41 ‫جدول‬ - ‫عنا‬ ‫اليسار‬ ‫إلى‬ ‫محاذاة‬ ‫وين‬ ________________________________ ______ 41 ‫جدول‬ - ‫أعمدة‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ________________________________ ______ 42 ‫جدول‬ - ‫صفوف‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ________________________________ _____ 42 ‫جدول‬ - ‫توضيحية‬ ‫تسمية‬ ‫أضف‬ ________________________________ ________ 43 ‫القوائم‬ ________________________________ ____________________ 45 ‫قائمة‬ ( ‫مرتبة‬ ‫غير‬ Unordered List ) ________________________________ ____ 45 ‫مرتبة‬ ‫قائمة‬ ( Ordered List ) ________________________________ _________ 45 ‫الوصف‬ ‫قوائم‬ ________________________________ __________________ 46 ( ‫السطرية‬ ‫العناصر‬ inline ‫الكتلة‬ ‫عناصر‬ ‫و‬ ) (Block) ________________________ 47 (‫الكتلة‬ ‫عناصر‬ Block-level Elements ) ________________________________ ___ 47 ()‫(المضمنة‬ ‫السطرية‬ ‫العناصر‬ Inline Elements ) _____________________________ 47 ‫عنصر‬ <div> ________________________________ ___________________ 48 ‫العنصر‬ <span> ________________________________ _________________ 49 ‫الفئة‬ ‫أو‬ ‫الصف‬ ‫خاصية‬ class ________________________________ ______ 49 ‫الصف‬ ‫كتابة‬ ‫قواعد‬ Class ________________________________ ___________ 52 ‫متعدة‬ ‫صفوف‬ Classes ________________________________ _____________ 52 ‫المعرف‬ ‫خاصية‬ id ________________________________ _____________ 53 ‫مرجعية‬ ‫إشارات‬ HTML ‫والروابط‬ ‫المعرف‬ ‫مع‬ _______________________________ 54 ‫خاصية‬ ‫استخدام‬ id ‫في‬ JavaScript ________________________________ _____ 55 ‫المضمنة‬ ‫األطر‬ Iframes ________________________________ _________ 55 ‫كتابة‬ ‫قواعد‬ Iframe ________________________________ _______________ 55
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 4 ‫والعرض‬ ‫االرتفاع‬ ‫ضبط‬ Iframe ________________________________ _______ 55 ‫الحدود‬ ‫إزالة‬ Iframe ________________________________ ______________ 56 ‫الصفحة‬ ‫رأس‬ Head ________________________________ _______________ 56 ‫الكود‬ ‫عنصر‬ Code ________________________________ ____________ 59 ‫المتغير‬ ‫عنصر‬ <var> ________________________________ ___________ 59 ‫المتجاوب‬ ‫التصميم‬ Responsive ________________________________ _____ 60 ‫هو‬ ‫ما‬ ‫االستجابة؟‬ ‫سريع‬ ‫الويب‬ ‫تصميم‬ ________________________________ ___ 60 ‫العرض‬ ‫منفذ‬ ‫إعداد‬ ________________________________ _______________ 60 ( ‫متجاوبة‬ ‫صور‬ Responsive Images ) ________________________________ ___ 61 ‫ال‬ ‫الداللية‬ ‫عناصر‬ Semantic ________________________________ _______ 62 ‫عنصر‬ <section> ________________________________ ________________ 63 ‫عنصر‬ <article> ________________________________ ________________ 64 ‫عنصر‬ <header> ________________________________ ________________ 64 ‫عنصر‬ <footer> ________________________________ ________________ 65 ‫عنصر‬ <nav> ________________________________ __________________ 65 ‫النماذج‬ ________________________________ ___________________ 67 ‫عنصر‬ <form> ________________________________ _________________ 67 ‫عنصر‬ <input> ________________________________ _________________ 68 ( ‫النص‬ ‫حقول‬ Text Fields ) ________________________________ __________ 68 ‫عنصر‬ <label> ________________________________ _________________ 69 Radio Button ________________________________ __________________ 69 Checkboxes ________________________________ ___________________ 70 ‫لـ‬ ‫االسم‬ ‫خاصية‬ <input> ________________________________ ___________ 71 Action Attribute ________________________________ ________________ 71 Target Attribute ________________________________ ________________ 72 Canvas Graphics ________________________________ ____________ 73 ‫هو‬ ‫ما‬ HTML Canvas ‫؟‬ ________________________________ __________ 73 ‫مستقيم‬ ‫خط‬ ‫رسم‬ ________________________________ _________________ 74 ‫دائرة‬ ‫رسم‬ ________________________________ ____________________ 74 ‫نص‬ ‫رسم‬ ________________________________ _____________________ 75
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 5 ‫خطي‬ ‫تدرج‬ ‫رسم‬ ________________________________ _________________ 75 ‫هو‬ ‫ما‬ SVG ‫؟‬ ________________________________ ________________ 76 ‫دائرة‬ ‫رسم‬ SVG ________________________________ _________________ 76 ‫مستطيل‬ ‫رسم‬ SVG ________________________________ ________________ 76 ‫الزو‬ ‫ملتف‬ ‫مستطيل‬ ‫رسم‬ ‫ايا‬ SVG ________________________________ _______ 77 ‫المتعددة‬ ‫الوسائط‬ ________________________________ _____________ 78 ‫الفيديو‬ Video ________________________________ __________________ 78 ‫الصوت‬ Audio ________________________________ _________________ 79 ‫هو‬ ‫ما‬ CSS ‫؟‬ ________________________________ _________________ 82 ‫استخدام‬ CSS ________________________________ ________________ 83 ‫مضمنة‬ (Inline CSS) CSS ________________________________ ____________ 83 CSS ‫داخلي‬ ( Internal CSS ) ________________________________ __________ 84 CSS ‫خارج‬ ‫ي‬ ( External CSS ) ________________________________ _________ 85 ‫كتابة‬ ‫قواعد‬ CSS ________________________________ ______________ 88 ‫المحددات‬ CSS ________________________________ _______________ 89 ‫االسم‬ ‫محدد‬ ________________________________ ____________________ 89 ‫المعرف‬ ‫محدد‬ id Selector ________________________________ __________ 89 ‫الصف‬ ‫محدد‬ class Selector ________________________________ _________ 89 ‫العام‬ ‫المحدد‬ CSS The CSS Universal Selector) ) ___________________________ 90 ‫تجميع‬ ‫محدد‬ CSS ( The CSS Grouping Selector ) ____________________________ 90 ‫التعليقات‬ CSS Comments ________________________________ ________ 91 ( ‫الخط‬ ‫لون‬ Text Color ) ________________________________ _________ 93 ‫الخلفية‬ ‫ولون‬ ‫النص‬ ‫لون‬ ________________________________ _________ 93 ( ‫نص‬ ‫محاذاة‬ CSS Text Alignment ) ________________________________ _ 93 ‫النص‬ ‫اتجاه‬ ________________________________ _________________ 94 (‫عمودي‬ ‫انحياز‬ Vertical Alignment ) ________________________________ 94 ‫نص‬ ‫زخرفة‬ (CSS Text Decoration) ________________________________ _ 95 ‫تح‬ ‫النص‬ ‫ويل‬ ( CSS Text Transformation ) _____________________________ 95 ( ‫نص‬ ‫تباعد‬ CSS Text Spacing ) ________________________________ ____ 96
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 6 ( ‫األحرف‬ ‫تباعد‬ Letter Spacing ) ________________________________ ___ 96 ‫ارتف‬ ( ‫خط‬ ‫اع‬ Line Height ) ________________________________ ________ 97 ( ‫نص‬ ‫ظل‬ CSS Text Shadow ) ________________________________ _____ 97 ‫خط‬ ‫نمط‬ (CSS Font Style) ________________________________ ________ 98 ‫صندو‬ ‫نموذج‬ ‫ق‬ CSS Box Model ________________________________ ___ 99 ‫حدود‬ CSS ( CSS border ) ________________________________ __________ 100 ‫حشوة‬ CSS ( CSS Padding ) ________________________________ ________ 101 ‫هامش‬ CSS ( CSS Margin ) ________________________________ _________ 101 ‫إخفاء‬ ‫العناصر‬ ________________________________ ______________ 102 ‫أنواع‬ ‫عرض‬ ‫العناصر‬ ________________________________ __________ 103 display: inline-block ________________________________ ___________ 103 ‫التموضع‬ ‫خاصية‬ position ________________________________ ______ 105 position: static ________________________________ _______________ 106 position: relative ________________________________ _____________ 106 position: absolute ________________________________ ____________ 107 position: fixed; ________________________________ ______________ 108 position: sticky ________________________________ ______________ 108 ‫الطفو‬ ‫خاصية‬ float and clear ________________________________ ____ 108 CSS ‫ورأسية‬ ‫أفقية‬ ‫محاذاة‬ ________________________________ _______ 111 ‫النص‬ ‫توسيط‬ ________________________________ _________________ 111 ‫الصورة‬ ‫توسيط‬ ________________________________ _______________ 111 ‫ولليسار‬ ‫لليمين‬ ‫محاذاة‬ - ‫الموضع‬ ‫استخدام‬ Using position ____________________ 112 The clearfix Hack ________________________________ _____________ 113 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - (‫الحشو‬ ‫استخدام‬ padding ) _____________________________ 113 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫الخط‬ ‫ارتفاع‬ ‫استخدام‬ Using line-height _____________________ 114 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫استخدام‬ position & transform __________________________ 115 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫باستخدام‬ Flexbox ________________________________ __ 115 ‫العمودي‬ ‫التنقل‬ ‫شريط‬ ‫مثال‬ ________________________________ ______ 116 ‫االفقي‬ ‫التجوال‬ ‫شريط‬ ________________________________ __________ 117
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 7 )‫(النشط‬ ‫الحالي‬ ‫الرابط‬ ________________________________ ___________ 118 ‫الخلفيات‬ ________________________________ __________________ 120 ‫الخلفية‬ ‫لون‬ (CSS background-color) ________________________________ _ 120 ‫كخلفية‬ ‫صورة‬ ‫استخدم‬ ________________________________ ___________ 120 ‫خلفية‬ ‫تكرار‬ CSS ________________________________ _______________ 121 ‫الخلفية‬ ‫تموضع‬ ________________________________ _______________ 122 ( ‫المختصرة‬ ‫الخاصية‬ background - Shorthand property ) ___________________ 122 ‫الظل‬ Box Shadow ________________________________ __________ 123 ‫الحدود‬ ‫تدوير‬ CSS3 border-radius ________________________________ _ 124 ‫المرن‬ ‫الصندوق‬ CSS3- Flexbox ________________________________ ___ 125 ‫عناصر‬ Flexbox ________________________________ _______________ 126 The flex-direction Property ________________________________ ______ 127 The flex-wrap Property ________________________________ _________ 128 The flex-flow Property ________________________________ _________ 129 The justify-content Property ________________________________ _____ 129 The align-items Property ________________________________ ________ 130 CSS Flex Responsive ________________________________ ___________ 130 ‫مع‬ ‫ابدأ‬ Bootstrap 4 : ________________________________ _________ 133 ‫على‬ ‫تحصل‬ ‫أين‬ ‫من‬ Bootstrap 4 ‫؟‬ ________________________________ _ 134 Bootstrap 4 CDN ________________________________ _____________ 134 ‫تنزيل‬ Bootstrap 4 ________________________________ _____________ 134 ‫باستخدام‬ ‫ويب‬ ‫صفحة‬ ‫أول‬ ‫إنشاء‬ Bootstrap 4 ____________________________ 134 Containers ‫الحاويات‬ ________________________________ _________ 136 ‫ثابتة‬ ‫حاوية‬ ________________________________ __________________ 136 : ‫المرنة‬ ‫الحاوية‬ ________________________________ _______________ 136 ‫الحاوية‬ ‫حشو‬ Padding ________________________________ __________ 136 ‫حدود‬ ‫و‬ ‫الوان‬ ‫للحاوية‬ ________________________________ ___________ 136 ‫المتجاوبة‬ ‫الحاوية‬ ________________________________ ______________ 137 ‫في‬ ‫الشبكي‬ ‫النظام‬ Bootstrap 4 ________________________________ ___ 138 ‫صفوف‬ ‫الشبكة‬ ________________________________ ________________ 138
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 8 ‫متساوية‬ ‫أعمدة‬ ‫ثالث‬ ‫عمل‬ ________________________________ _________ 138 Bootstrap ‫الفقرات‬/‫النصوص‬ ________________________________ ____ 140 ‫في‬ ‫األلوان‬ Bootstrap ________________________________ _________ 141 ‫النصوص‬ ‫الوان‬ ________________________________ _______________ 141 ‫الخلفية‬ ‫الوان‬ ________________________________ _________________ 141 ‫في‬ ‫الجداول‬ Bootstrap ________________________________ ________ 142 ‫الحدود‬ ‫ذات‬ ‫الجداول‬ ________________________________ ____________ 142 ‫بح‬ ‫االسطر‬ ‫تاثر‬ ‫المرور‬ ‫دث‬ Hover ________________________________ ____ 143 ‫المعتمة‬ ‫الجداول‬ ________________________________ _______________ 143 ‫المخططة‬ ‫الجداول‬ ________________________________ ______________ 143 ‫السيا‬ ‫ذات‬ ‫الصفوف‬ ‫ق‬ ________________________________ ____________ 143 ‫المتجاوبة‬ ‫الجداول‬ ________________________________ ______________ 145 ‫في‬ ‫الصور‬ Bootstrap ________________________________ _________ 145 ‫الزوايا‬ ‫منحنية‬ ________________________________ ________________ 145 ‫مستديرة‬ ‫زوايا‬ ________________________________ ________________ 146 ‫المصغرة‬ ‫الصورة‬ Thumbnail ________________________________ ______ 146 ‫ا‬ ‫الصورة‬ ‫لمتجاوبة‬ ________________________________ ______________ 146 Bootstrap 4 Jumbotron ________________________________ _______ 147 ‫التن‬ ‫رسائل‬ ‫بيه‬ Alerts ________________________________ __________ 147 ‫ازرار‬ Bootstrap ________________________________ ____________ 149 ‫حدود‬ ‫ذات‬ ‫أزرار‬ ________________________________ _______________ 149 ‫الزر‬ ‫حجم‬ ________________________________ ___________________ 150 ‫الزر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ ________________________________ __________ 150 ‫األزار‬ ‫مجموعات‬ ________________________________ ______________ 151 ‫العمودية‬ ‫األزرار‬ ‫مجموعة‬ ________________________________ _________ 152 ‫المنسدلة‬ ‫القائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ ‫تداخل‬ _____________________________ 152 ‫الشارات‬ Bootstrap Badges ________________________________ _____ 153 ‫السياقية‬ ‫الشارات‬ ________________________________ ______________ 153 Pill Badges ________________________________ _________________ 154
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 9 ‫في‬ ‫التقدم‬ ‫شريط‬ Bootstrap ________________________________ ______ 155 ‫الصفحات‬ ‫ترقيم‬ Pagination ________________________________ _____ 158 ‫النشطة‬ ‫الصفحة‬ ________________________________ _______________ 158 ‫المعطلة‬ ‫الحالة‬ ________________________________ ________________ 158 Pagination Sizing ________________________________ _____________ 159 ‫القوائم‬ ‫مجموعات‬ ________________________________ ____________ 160 ‫روابط‬ ‫مع‬ ‫قائمة‬ ‫مجموعة‬ ________________________________ _________ 161 ‫عنصر‬ ‫تعطيل‬ ________________________________ _________________ 161 ‫االفقية‬ ‫القوائم‬ ‫مجموعات‬ ________________________________ _______ 162 ‫العالقة‬ ‫ذات‬ ‫الصفوف‬ ________________________________ ____________ 162 ‫م‬ ‫قوائم‬ ‫مجموعة‬ ‫اإلشارات‬ ‫ع‬ Badges ________________________________ __ 163 ‫او‬ ‫البطاقة‬ ‫الكارد‬ Cards ________________________________ ________ 164 ‫التذييل‬ ‫و‬ ‫الرأس‬ ________________________________ _______________ 164 ‫الممتد‬ ‫الرابط‬ ________________________________ _________________ 166 ‫وشاح‬ ‫عمل‬ Overlays ________________________________ ___________ 166 ‫االرتفاع‬ ‫المساوية‬ ‫البطاقات‬ Card Deck ________________________________ 167 ‫البطاقات‬ ‫مجموعة‬ ________________________________ ______________ 168 ‫المنسدلة‬ ‫القوائم‬ Dropdowns ________________________________ ____ 169 ‫المنسدل‬ ‫القائمة‬ ‫فاصل‬ ________________________________ ___________ 169 ‫القائمة‬ ‫رأس‬ ‫المنسدلة‬ ________________________________ ___________ 170 ‫العنصر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ ________________________________ ________ 170 ‫المنسدلة‬ ‫القائمة‬ ‫ضمن‬ ‫نص‬ ________________________________ ________ 171 ‫منسدلة‬ ‫قائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ ________________________________ ___ 171 ‫الطي‬ Collapse ________________________________ _____________ 172 ‫أكورديون‬ Accordion ________________________________ ___________ 173 ‫التجوال‬ ‫قائمة‬ Navs ________________________________ __________ 174 ‫التبويبات‬ tabs ________________________________ ______________ 174 ‫التجوال‬ ‫شريط‬ Navigation ________________________________ ______ 175 Vertical Navbar ________________________________ ______________ 176
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 10 Centered Navbar ________________________________ _____________ 176 Colored Navbar ________________________________ ______________ 177 Brand / Logo ________________________________ ________________ 178 Collapsing The Navigation Bar ________________________________ ____ 178 Navbar With Dropdown ________________________________ ________ 179 ‫المثبت‬ ‫التجوال‬ ‫شريط‬ ________________________________ ___________ 180 ‫النماذج‬ Forms ________________________________ _____________ 181 ‫واحد‬ ‫سطر‬ ‫على‬ ‫النموذج‬ ________________________________ __________ 182 ‫النموذج‬ ‫تدقيق‬ Validation ________________________________ ______ 183 ‫االدخال‬ ‫حقول‬ ________________________________ ________________ 185 ‫االختيار‬ ‫أزرار‬ Radio Buttons ________________________________ ______ 186 ‫الحقول‬ ‫مجموعة‬ Input Groups ________________________________ ___ 189 ‫المجموعات‬ ‫حجم‬ ________________________________ ______________ 189 Multiple Inputs and Helpers ________________________________ _____ 190 ‫ضمن‬ ‫االزرار‬ Input Group ________________________________ ________ 191 ‫تسميات‬ Input Group ________________________________ ___________ 191 ‫مخصص‬ ‫اختيار‬ ‫حقل‬ Checkbox ________________________________ _____ 192 ‫مخصص‬ ‫تبديل‬ ‫مفتاح‬ Switch ________________________________ ______ 192 ‫مخصص‬ ‫وحيد‬ ‫اختيار‬ ‫حقل‬ Radio buttons ______________________________ 192 ‫المعرض‬ Carousel ________________________________ ___________ 194 ‫التلميح‬ Tooltip ________________________________ _____________ 197 ‫التلميح‬ ‫تموضع‬ ________________________________ _______________ 197 ‫المنبثقة‬ ‫نوافذ‬ Modal ________________________________ _________ 198 ‫انميشن‬ ‫إضافة‬ animation ________________________________ ________ 199 ‫حجم‬ Modal ________________________________ _________________ 199 ‫المنبثقة‬ ‫النافذة‬ ‫توسيط‬ ________________________________ ___________ 199 Scrolling Modal ________________________________ ______________ 199 ‫األدوات‬ ‫صفوف‬ Utilities ________________________________ _______ 200 Borders ________________________________ ____________________ 200 Border Color ________________________________ ________________ 200
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 11 Float and Clearfix ________________________________ _____________ 200 Shadows ‫الظل‬ ________________________________ ________________ 201 Vertical Align ________________________________ ________________ 201 Responsive Embeds ________________________________ ___________ 201 Visibility ‫الرؤية‬ ________________________________ _______________ 202 Position ‫التموضع‬ ________________________________ ______________ 202 Colors ‫االلوان‬ ________________________________ ________________ 203 Background Colors ________________________________ ____________ 203 Block Elements ________________________________ ______________ 204 Flex ________________________________ ______________________ 204 ‫مقدمة‬ ________________________________ ___________________ 206 ‫لك‬ ‫سكربت‬ ‫جافا‬ ‫كود‬ ‫اول‬ ________________________________ ________ 208 ‫مل‬ ‫استخدام‬ ‫ف‬ JavaScript ‫خارجي‬ ________________________________ __ 209 ‫االحرف‬ ‫لحالة‬ ‫الحساسية‬ Case Sensitive _____________________________ 210 ‫التعليقات‬ ________________________________ _________________ 210 ‫المتغيرات‬ ________________________________ _________________ 211 Variable hoisting ________________________________ ___________ 213 :‫البيانات‬ ‫انواع‬ ________________________________ ______________ 214 ‫المعامالت‬ Operators ________________________________ _________ 215 ‫الشرطية‬ ‫التعابير‬ ________________________________ _____________ 217 ‫القيم‬ Falsy ________________________________ ________________ 219 ‫المنبثقة‬ ‫الصناديق‬ ________________________________ ____________ 220 ‫الدوال‬ functions ________________________________ ____________ 221 Function declarations ________________________________ __________ 221 Function expressions ________________________________ __________ 222 ‫المعادة‬ ‫القيمة‬ return ________________________________ ___________ 223 Arrow functions ________________________________ ______________ 223 rest parameter ________________________________ ______________ 223 ‫التكرار‬ ‫حلقات‬ ________________________________ ______________ 224
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 12 ‫الحلقة‬ for ________________________________ ___________________ 224 ‫الحلقة‬ do...while ________________________________ ______________ 225 ‫الحلقة‬ while ________________________________ _________________ 225 ‫الحلقة‬ for...in ________________________________ ________________ 226 ‫االستثناءات‬ ‫معالجة‬ ________________________________ ___________ 227 String ‫النصية‬ ‫السالسل‬ ________________________________ ________ 228 Array ‫المصفوفات‬ ________________________________ ___________ 233 Math Object ________________________________ ______________ 235 DOM ________________________________ ___________________ 238 ‫هو‬ ‫ما‬ jQuery ‫؟‬ ________________________________ _____________ 247 ‫تضمين‬ jQuery ________________________________ _____________ 248 ‫تنزيل‬ jQuery ________________________________ ________________ 248 ‫باستخدام‬ ‫تضمين‬ CDN ________________________________ ___________ 248 ‫الكتابة‬ ‫قواعد‬ jQuery ________________________________ __________ 249 The Document Ready Event ________________________________ ____ 250 ‫المحددات‬ Selectors ________________________________ __________ 250 ‫اسمه‬ ‫طريق‬ ‫عن‬ ‫عنصر‬ ‫تحديد‬ ________________________________ ______ 251 ‫المعرف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ________________________________ __________ 251 ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫الصف‬ ________________________________ ___________ 252 ‫الصف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ________________________________ ___________ 252 ‫االحداث‬ ________________________________ __________________ 254 ‫بالحداث‬ ‫الخاصة‬ ‫المساعدة‬ ‫الدوال‬ ________________________________ ____ 255 ‫الطريقة‬ on() ________________________________ _________________ 257 ‫التاثيرات‬ ________________________________ _________________ 258 ‫االخفاء‬ ‫و‬ ‫االظهار‬ ________________________________ ______________ 258 toggle() ________________________________ ____________________ 259 ‫السحب‬ Sliding ________________________________ _______________ 259 slideToggle ________________________________ _________________ 260 ‫التالشي‬ Fading ________________________________ ____________ 261
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 13 Animation ________________________________ _______________ 261 ‫نسبية‬ ‫قيم‬ ‫باستخدام‬ ‫التحريك‬ ________________________________ _______ 262 ‫التحريك‬ ‫او‬ ‫التأثير‬ ‫اقاف‬ ________________________________ __________ 262 ‫التسلسل‬ Chaining ________________________________ __________ 263 ‫مع‬ ‫التعامل‬ classes ________________________________ ___________ 264 addClass() ________________________________ __________________ 264 removeClass() ________________________________ _______________ 265 toggleClass() ________________________________ ________________ 265 css() ________________________________ ______________________ 265 ‫االجاكس‬ AJAX ________________________________ _____________ 267 ‫الطريقة‬ load() ________________________________ ________________ 267 ‫الدوال‬ get() and post() ________________________________ __________ 268 ‫الخصائص‬ ‫و‬ ‫بالمحتوى‬ ‫التحكم‬ ________________________________ ____ 270 ‫الوصول‬ ‫للمحتوى‬ ________________________________ ______________ 270 ‫الخصائص‬ ‫على‬ ‫الحصول‬ ________________________________ _________ 270 ‫عناصر‬ ‫إضافة‬ ________________________________ ______________ 271 ‫الطريقة‬ append() ________________________________ ______________ 271 ‫الطريقة‬ prepend() ________________________________ _____________ 271 ‫الطرائق‬ after() and before() ________________________________ ______ 271 ‫عنصر‬ ‫حذف‬ ________________________________ _______________ 272 ‫الطريقة‬ remove() ________________________________ ______________ 272 ‫الطريقة‬ empty() ________________________________ ______________ 272 ‫أو‬ ‫البيانات‬ ‫قاعدة‬ Database ________________________________ _____ 274 ‫ال‬ ‫لغة‬ SQL ________________________________ ________________ 274 ‫تثبيت‬ MySQL ________________________________ ______________ 274 ‫بيانات‬ ‫قاعدة‬ ‫إنشاء‬ Database ________________________________ ____ 275 ‫إنشا‬ ‫الجداول‬ ‫ء‬ Tables ________________________________ _________ 276 ‫ال‬ ‫داخل‬ ‫بيانات‬ ‫إضافة‬ Tables ________________________________ ____ 277 ‫االس‬ ‫الجداول‬ ‫داخل‬ ‫بيانات‬ ‫عن‬ ‫تعالم‬ ________________________________ _ 278
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 14 ‫شروط‬ ‫وضع‬ ‫مع‬ ‫البيانات‬ ‫عن‬ ‫االستعالم‬ ________________________________ _ 278 ‫المنطقية‬ ‫العمليات‬ ________________________________ ____________ 279 ‫جملة‬ order by ________________________________ _____________ 281 ‫جملة‬ Update ________________________________ ______________ 282 ‫االجماليات‬ ‫دوال‬ Aggregate ________________________________ _____ 283 ‫جملة‬ group by ________________________________ _______________ 285 ‫الحسابية‬ ‫الدوال‬ Mathematical ________________________________ ___ 286 ‫مقدم‬ ‫ة‬ ________________________________ ___________________ 289 ‫مع‬ ‫ابدأ‬ PHP ________________________________ _______________ 290 ‫في‬ ‫كود‬ ‫اول‬ PHP ________________________________ ____________ 290 ‫التكو‬ ‫معلومات‬ ‫صفحة‬ ‫ين‬ ________________________________ ________ 291 ‫اللغة‬ ‫أساسيات‬ ________________________________ ______________ 292 ‫لحالة‬ ‫الحساسية‬ ‫األ‬ ‫حرف‬ ________________________________ __________ 292 ‫الجمل‬ Statements ________________________________ _____________ 293 ‫األسطر‬ ‫وفواصل‬ ‫البيضاء‬ ‫المسافة‬ ________________________________ ____ 294 ‫ال‬ ‫تعليقات‬ ________________________________ ___________________ 294 ‫المعرفات‬ ________________________________ ___________________ 296 ‫المتغيرات‬ ‫أسماء‬ ________________________________ ______________ 296 ‫الدوال‬ ‫أسماء‬ ________________________________ _________________ 296 ‫الفئات‬ ‫أسماء‬ CLASS ________________________________ ____________ 297 Constants ‫الثوابت‬ ________________________________ _____________ 297 ‫الرئيس‬ ‫الكلمات‬ ‫ية‬ ________________________________ ______________ 297 ‫الصحيحة‬ ‫االعداد‬ ________________________________ ______________ 299 ‫العشرية‬ ‫األرقام‬ ________________________________ _______________ 299 ‫النصية‬ ‫السالسل‬ ________________________________ _______________ 300 ‫منطقية‬ ‫قيمة‬ ________________________________ _________________ 301 ‫المصفوفات‬ ________________________________ __________________ 302 . Objects ________________________________ ___________________ 303 ‫الموارد‬ ‫أو‬ ‫المصادر‬ ________________________________ _____________ 304
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 15 ‫االسترجاع‬ Callbacks ________________________________ ___________ 305 NULL ________________________________ _____________________ 305 Variable Variables ‫المتغيرة‬ ‫المتغيرات‬ ________________________________ 308 ‫المتغير‬ ‫نطاق‬ ________________________________ _________________ 308 ‫الدوال‬ ‫وسطاء‬ ________________________________ ________________ 311 ‫المعامل‬ ‫أسبقية‬ ________________________________ ________________ 315 ‫الضمني‬ ‫القصر‬ Implicit Casting ________________________________ ____ 316 ‫الحسابية‬ ‫العمليات‬ ________________________________ ______________ 316 ‫السلسلة‬ ‫دمج‬ ‫عامل‬ ________________________________ _____________ 317 ‫ال‬ ‫الزيادة‬ ‫عوامل‬ ‫تلقائية‬ (++) ‫التلقائي‬ ‫والتناقص‬ (--) __________________________ 318 ‫المقارنة‬ ‫عوامل‬ ________________________________ _______________ 318 (??) Null coalescing operator ________________________________ _____ 320 ‫ال‬ ‫المنطقية‬ ‫عمليات‬ ________________________________ ______________ 321 Flow-Control Statements ‫التدفق‬ ‫في‬ ‫التحكم‬ ‫جمل‬ _______________________ 322 ‫جملة‬ if ________________________________ ____________________ 322 ‫جملة‬ elseif . ________________________________ _________________ 324 switch ________________________________ ____________________ 325 while ________________________________ _____________________ 326 :‫كمثال‬ ________________________________ _____________________ 327 for ________________________________ _______________________ 328 foreach ________________________________ ____________________ 330 ‫تضمين‬ PHP ‫الويب‬ ‫صفحات‬ ‫في‬ ________________________________ ___ 334 ‫الدوال‬ ________________________________ ___________________ 335 ‫الدالة‬ ‫استدعاء‬ ________________________________ ________________ 335 ‫الدالة‬ ‫تعريف‬ ________________________________ _________________ 337 Variable Scope ‫متغير‬ ‫نطاق‬ ________________________________ _______ 339 ‫العالمية‬ ‫او‬ ‫العامة‬ ‫المتغيرات‬ ________________________________ _______ 340 ‫الثابتة‬ ‫المتغيرات‬ static ________________________________ __________ 341 ‫الدالة‬ ‫وسطاء‬ ________________________________ _______________ 342 ‫الوسطاء‬ ‫تمرير‬ ‫بالقيمة‬ ________________________________ ___________ 342
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 16 ‫المرجع‬ ‫حسب‬ ‫الوسطاء‬ ‫تمرير‬ ________________________________ ______ 342 ‫االفتراضية‬ ‫الوسطاء‬ ________________________________ ____________ 343 ‫المتغير‬ ‫وسطاء‬ ________________________________ ________________ 345 ‫تلميح‬ ‫كتابة‬ ________________________________ __________________ 347 ‫القيم‬ ‫إرجاع‬ ________________________________ __________________ 347 ‫مجهولة‬ ‫دوال‬ ________________________________ _________________ 348 ‫النصية‬ ‫السالسل‬ ________________________________ _____________ 349 Variable Interpolation ‫المتغير‬ )‫(تفسير‬ ‫توسيع‬ __________________________ 349 ‫واحدة‬ ‫اقتباس‬ ‫عالمة‬ ‫ذات‬ ‫سالسل‬ ________________________________ ____ 350 ‫المزدوجة‬ ‫االقتباس‬ ‫بعالمة‬ ‫سالسل‬ ________________________________ ____ 351 ‫جم‬ ‫السالسل‬ ‫طباعة‬ ‫ل‬ ________________________________ ____________ 352 echo ________________________________ ______________________ 352 print() ________________________________ _____________________ 353 printf() ________________________________ ____________________ 353 ‫التنسيق‬ ‫معدالت‬ FORMAT MODIFIERS ________________________________ 354 ‫النوع‬ ‫محددات‬ ________________________________ ________________ 355 var_dump() ‫و‬ print_r() ________________________________ _________ 358 ‫البيضاء‬ ‫المسافة‬ ‫إزالة‬ ________________________________ ___________ 360 : ‫نصية‬ ‫سلسلة‬ ‫في‬ ‫االحرف‬ ‫الحالة‬ ‫تغيير‬ ________________________________ 362 ‫والهروب‬ ‫الترميز‬ Encoding and Escaping ______________________________ 363 HTML ________________________________ _____________________ 363 ‫بلغة‬ ‫محددة‬ ‫كيانات‬ ‫اقتباس‬ HTML ________________________________ ____ 365 ‫أوسمة‬ ‫إزالة‬ ________________________________ _________________ 366 ‫الوصفية‬ ‫األوسمة‬ ‫استخراج‬ meta ________________________________ ____ 367 ‫عناوين‬ URL ________________________________ _________________ 368 SQL ________________________________ ____________________ 370 ‫السالسل‬ ‫مقارنة‬ ________________________________ _____________ 371 ‫دقيقة‬ ‫مقارنات‬ ________________________________ ________________ 371 ‫التقريبية‬ ‫المساواة‬ ________________________________ ______________ 372 ‫والبحث‬ ‫التالعب‬ ‫السالسل‬ ‫في‬ ________________________________ _____ 373
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 17 Substrings ‫الجزئية‬ ‫السالسل‬ ________________________________ _______ 373 ‫اخرى‬ ‫السالسل‬ ‫دوال‬ ________________________________ ____________ 375 Decomposing a String ‫سلسلة‬ ‫تحليل‬ ________________________________ _ 377 EXPLODING AND IMPLODING ________________________________ ____ 377 ‫السالسل‬ ‫في‬ ‫البحث‬ ‫دوال‬ ________________________________ __________ 378 ‫الب‬ ‫عمليات‬ ‫األماكن‬ ‫بإرجاع‬ ‫حث‬ ________________________________ ______ 379 ‫السلسلة‬ ‫بقية‬ ‫ترجع‬ ‫التي‬ ‫البحث‬ ‫عمليات‬ ________________________________ 379 ‫المواقع‬ ‫عناوين‬ ‫فك‬ DECOMPOSING URLS ______________________________ 380 ‫المصوفات‬ ________________________________ ________________ 381 ‫المترابطة‬ ‫المصفوفة‬ ‫و‬ ‫المفهرسة‬ ‫المصفوفات‬ ____________________________ 381 ‫المصفوفة‬ ‫عناصر‬ ‫تحديد‬ ________________________________ __________ 382 ‫المصفوفات‬ ‫في‬ ‫البيانات‬ ‫تخزين‬ ________________________________ ______ 382 ‫بمصفوفة‬ ‫القيم‬ ‫إلحاق‬ ________________________________ ____________ 384 ‫م‬ ‫نطاق‬ ‫تهيئة‬ ‫القيم‬ ‫ن‬ ________________________________ ____________ 384 ‫المصفوفة‬ ‫حجم‬ ‫على‬ ‫الحصول‬ ________________________________ ______ 384 Padding an Array ‫مصفوفة‬ ‫حشو‬ ________________________________ ___ 385 ‫األبعاد‬ ‫متعددة‬ ‫المصفوفات‬ ________________________________ _______ 385 ‫متعددة‬ ‫قيم‬ ‫استخراج‬ ________________________________ ____________ 386 ‫المصفوفة‬ ‫تشريح‬ Slicing an Array ________________________________ ___ 387 ‫أجزاء‬ ‫إلى‬ ‫المصفوفة‬ ‫تقسيم‬ ________________________________ ________ 387 ‫والقيم‬ ‫المفاتيح‬ ________________________________ ________________ 388 ‫عنصر‬ ‫وجود‬ ‫من‬ ‫التحقق‬ ________________________________ __________ 389 ‫وإدراج‬ ‫إزالة‬ ‫مصفوفة‬ ‫في‬ ‫العناصر‬ ________________________________ ___ 389 ‫والمتغيرات‬ ‫المصفوفات‬ ‫بين‬ ‫التحويل‬ ________________________________ 391 ‫مصفوفة‬ ‫من‬ ‫متغيرات‬ ‫تكوين‬ ________________________________ _______ 391 ‫الم‬ ‫عبور‬ ‫صفوفات‬ ________________________________ ____________ 393 ‫بناء‬ ‫جملة‬ foreach ________________________________ _____________ 393 ‫التكرار‬ ‫دوال‬ ________________________________ _________________ 394 ‫حلقة‬ ‫باستخدام‬ for ________________________________ _____________ 395 ‫المصفوفة‬ ‫اختزال‬ ________________________________ ______________ 395
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 18 ‫القيم‬ ‫عن‬ ‫البحث‬ ________________________________ _______________ 396 ‫الفرز‬ Sorting ________________________________ ________________ 398 ‫المصفوفات‬ ‫عكس‬ ________________________________ ______________ 398 ‫العشوائية‬ ‫ترتيب‬ ________________________________ _______________ 400 ‫المصفوفة‬ ‫مجموع‬ ‫حساب‬ ________________________________ _________ 400 ‫أساسيات‬ HTTP ________________________________ _____________ 402 ‫المتغيرات‬ ________________________________ ___________________ 404 ‫النماذج‬ ‫معالجة‬ ________________________________ ________________ 408 “Self-Processing Pages” ‫الذاتية‬ ‫المعالجة‬ ‫صفحات‬ _______________________ 410 “File Uploads” ‫الملف‬ ‫تحميالت‬ ________________________________ _____ 413 ” ‫النموذج‬ ‫صحة‬ ‫من‬ ‫التحقق‬ Form Validation “ _________________________ 416 ‫االستجابة‬ ‫رؤوس‬ ‫تعيين‬ ________________________________ ________ 420 Warning: Cannot add header information - headers already sent ____________ 421 ‫المختلفة‬ ‫المحتويات‬ ‫أنواع‬ Content Types ____________________________ 421 ‫التوجيه‬ ‫إعادة‬ ‫عمليات‬ Redirections ________________________________ 421 ‫الصالحية‬ ‫انتهاء‬ Expiration ________________________________ _____ 422 Authentication ‫المصادقة‬ ________________________________ ______ 423 ‫الحالة‬ ‫على‬ ‫الحفاظ‬ ________________________________ ____________ 424 ” ‫اإلرتباط‬ ‫تعريف‬ ‫ملفات‬ Cookies “ ________________________________ _ 426 “Sessions” ‫الجلسات‬ ________________________________ ____________ 430 “SESSION BASICS” ‫الجلسة‬ ‫أساسيات‬ ________________________________ _ 430 SSL ________________________________ _____________________ 434 ‫البيانات‬ ‫قواعد‬ ________________________________ ______________ 435 ‫الع‬ ‫البيانات‬ ‫قواعد‬ ‫و‬ ‫الئقية‬ SQL ________________________________ ____ 436 ‫كائن‬ ‫واجهة‬ MySQLi ________________________________ __________ 439 ‫للعرض‬ ‫البيانات‬ ‫استرجاع‬ ________________________________ _______ 440
+352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 19 ِ‫ـه‬ َّ ‫الل‬ ِ ‫م‬ ْ ‫س‬ِ‫ب‬ ِ ‫يم‬ ِ ‫ح‬َّ ‫الر‬ ِ ‫ن‬ٰ‫ـ‬ َ‫م‬ ْ ‫ح‬َّ ‫الر‬ ‫تكنولوجية‬ ‫طفرة‬ ‫العالم‬ ‫يعيش‬ ‫هائلة‬ ‫من‬ ‫نيت‬ ‫ر‬ ‫االنت‬ ‫شبكة‬ ‫تعد‬ ‫حيث‬ ‫أ‬ ‫عظم‬ ‫اال‬ ‫اعات‬ ‫ر‬ ‫خت‬ ‫ي‬ ‫ف‬ ‫تسهم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطفرة‬ ‫هذه‬ ‫حيث‬ ‫من‬ ‫إ‬ ‫و‬ ‫المعلومات‬ ‫تاحة‬ ‫سلس‬ ‫بشكل‬ ‫انتشارها‬ ‫مثل‬ ‫الخدمات‬ ‫من‬ ‫ر‬ ‫للكثت‬ ‫باإلضافة‬ ‫الناس‬ ‫تواصل‬ ‫البعض‬ ‫بعضهم‬ ‫مع‬ ‫بسهولة‬ ‫ر‬ ‫حت‬ ‫أ‬ ‫نقول‬ ‫صبحنا‬ ‫أ‬ ‫كوكب‬‫ن‬ ‫الجميل‬ ‫األزرق‬ ‫نا‬ ‫أ‬ ‫صبح‬ ‫قري‬ ‫ة‬ ‫ة‬ ‫ر‬ ‫صغت‬ . ‫من‬ ‫الويب‬ ‫قطاع‬ ‫يعد‬ ‫أ‬ ‫بشكل‬ ‫تنمو‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الخدمات‬ ‫هم‬ ‫ع‬ ‫ي‬‫رس‬ ‫وبشكل‬ ‫وتخلق‬ ‫فرص‬ ‫مستمر‬ ‫ة‬ ‫ر‬ ‫وممت‬ ‫ة‬ ‫ر‬ ‫كبت‬‫عمل‬ . ‫سيمدك‬ ‫الكتيب‬ ‫هذا‬ ‫عملية‬ ‫بمعلومات‬ ‫م‬ ‫وأكاديمية‬ ‫البدء‬ ‫من‬ ‫تمكنهم‬ ‫وع‬ ‫ر‬ ‫مش‬ ‫بناء‬ ‫بتجاه‬ ‫عملية‬ ‫بخطوات‬ . ‫ر‬ ‫ممت‬ ‫ويب‬ ‫من‬ :‫أنا‬ ‫برمجيات‬ ‫هندسة‬ ‫تخصص‬ ‫معلوماتية‬ ‫هندسة‬ ‫ج‬ ‫خري‬ ‫البيور‬ ‫أنس‬ ‫من‬ ‫الويب‬ ‫واجهات‬ ‫تطوير‬ ‫ي‬ ‫ف‬ ‫دكري‬‫النانو‬ ‫شهادة‬ ‫عىل‬ ‫حاصل‬ Udacity ‫ة‬ ‫ر‬ ‫خت‬ 5 ‫سنوات‬ ‫و‬ ‫مجيات‬ ‫ر‬ ‫الت‬ ‫مجال‬ ‫ي‬ ‫ف‬ ‫أ‬ ‫ويب‬‫تطوير‬ ‫فريق‬ ‫كقائد‬‫عمل‬ Web Development Team Leader ‫قمت‬ ‫وتحليل‬ ‫ببناء‬ ‫العديد‬ ‫الويب‬ ‫وتطبيقات‬ ‫ع‬ ‫مشاري‬ ‫من‬ ‫تدريب‬ ‫لدي‬ ‫كما‬ ‫عديدة‬ ‫ات‬ ‫مجال‬ ‫ي‬ ‫ف‬ ‫ال‬ IT ‫الصالحات‬ ‫تتم‬ ‫بنعمته‬ ‫الذي‬ ‫هلل‬ ‫الحمد‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 20 ‫ألول‬ ‫الفصل‬ HTML
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 21 ‫هو‬ ‫ما‬ HTML ‫؟‬ HTML ‫ل‬‫اختصار‬ Hyper Text Markup Language HTML ‫الويب‬ ‫صفحات‬ ‫إلنشاء‬ ‫القياسية‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬ ‫لغة‬ ‫ي‬ ‫ه‬ ‫يصف‬ HTML ‫الويب‬ ‫صفحة‬ ‫بنية‬ ‫بواسطة‬ ‫عناص‬ HTML ‫عناص‬ ‫ر‬ ‫تخت‬ HTML ‫المحتوى‬ ‫عرض‬ ‫بكيفية‬ ‫المتصفح‬ ‫عناص‬ ‫تقوم‬ HTML "‫فقرة‬ ‫"هذه‬ ، "‫عنوان‬ ‫"هذا‬ ‫مثل‬ ‫المحتوى‬ ‫من‬ ‫اء‬‫ز‬‫أج‬ ‫بتسمية‬ .‫إلخ‬ ، "‫ارتباط‬ ‫"هذا‬ ، ‫مستند‬ HTML ‫بسيط‬ ‫مثال‬ <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ‫المثال‬ ‫ح‬ ‫ر‬ ‫ش‬ ‫اإلعالن‬ ‫يحدد‬ <!DOCTYPE html> ‫مستند‬ ‫هو‬ ‫المستند‬ ‫هذا‬ ‫أن‬ HTML5 ‫عنرص‬ < html> ‫لصفحة‬ ‫الجذر‬‫العنرص‬‫هو‬ HTML ‫العنرص‬ ‫يحتوي‬ <head> ‫صفحة‬ ‫حول‬ ‫وصفية‬ ‫معلومات‬ ‫عىل‬ HTML ‫العنرص‬ ‫يحدد‬ < title> ‫ل‬ ‫ا‬ ً ‫عنوان‬ ‫ل‬ ‫صفحة‬ ‫أو‬ ‫المتصفح‬ ‫عنوان‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬‫يظهر‬ ‫والذي‬ ‫ي‬ ‫ف‬ ‫وسم‬ ‫الصفحة‬ ‫تبويب‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 22 ‫العنرص‬ ‫يحدد‬ <body> ‫المحتويات‬ ‫لجميع‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫وهو‬ ، ‫المستند‬ ‫جسم‬ ، ‫والجداول‬ ، ‫التشعبية‬ ‫واالرتباطات‬ ، ‫والصور‬ ، ‫ات‬‫ر‬‫والفق‬ ، ‫العناوين‬ ‫مثل‬ ، ‫المرئية‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ، ‫والقوائم‬ ‫العنرص‬ ‫يحدد‬ <h1> ‫ا‬ً ‫ر‬ ‫كبت‬‫ا‬ ً ‫عنوان‬ ‫العنرص‬ ‫يحدد‬ <p> ‫فقرة‬ ‫متصفحات‬ ‫الويب‬ ‫من‬ ‫الغرض‬ ( ‫الويب‬ ‫متصفح‬ Chrome ‫و‬ Edge ‫و‬ Firefox ‫و‬ ( Safari ‫اءة‬‫ر‬‫ق‬ ‫هو‬ ‫مستندات‬ HTML .‫صحيح‬ ‫بشكل‬ ‫وعرضها‬ ‫عالمات‬ ‫المستعرض‬ ‫يعرض‬ ‫ال‬ HTML ‫عرض‬ ‫كيفية‬‫لتحديد‬ ‫يستخدمها‬ ‫ولكنه‬ ، :‫المستند‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 23 ‫في‬ ‫مقدمة‬ HTML5 : HTML5 ‫مع‬ ‫من‬ ‫واألحدث‬ ‫الخامس‬ ‫اإلصدار‬‫هو‬ ‫ا‬ ‫ي‬ ‫ر‬ ‫ت‬ HTML ‫يقدم‬ ‫ال‬ ‫جديدة‬ ‫ات‬ ‫ر‬ ‫مت‬ ‫ويب‬ ‫تطبيقات‬ ‫إلنشاء‬ ‫الدعم‬ ‫ا‬ ً ‫أيض‬ ‫تعزز‬ ‫بل‬ ، ‫فحسب‬ ‫الغنية‬ ‫للوسائط‬ ‫ا‬ ً‫دعم‬ ‫توفر‬ ‫ر‬ ‫أكت‬ ‫وفعالية‬ ‫بسهولة‬ ‫والخوادم‬ ‫المحلية‬ ‫وبياناتهم‬ ‫ر‬ ‫المستخدمي‬ ‫مع‬ ‫التفاعل‬ ‫يمكنها‬ .‫السابق‬ ‫ي‬ ‫ف‬ ‫ا‬ ً ‫ممكن‬ ‫كان‬‫مما‬ HTML5 ‫تدعم‬ ‫جديدة‬ ‫متعددة‬ ‫وسائط‬ ‫مثل‬ ‫والفيديو‬ ‫الصوت‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫باستخدام‬ ‫الوسوم‬ <audio> ‫و‬ <video>. ‫الرسومات‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫جديدة‬ ‫رسومات‬ ‫عناص‬ ‫هناك‬ ‫الشعاعية‬ ‫لها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسوم‬ ‫و‬ ‫معت‬ ‫ي‬ ‫دالىل‬ <header> <footer> ‫و‬ <article> ‫و‬ <section> ( ‫الشعاعية‬ ‫الرسوميات‬ Vector ) ‫الهندسية‬ ‫لألشكال‬ ‫وصف‬ ‫تستعمل‬ ‫رسومات‬ ‫ي‬ ‫ه‬ ‫مثل‬ .‫الصور‬ ‫لتمثل‬ ‫للمنحنيات‬ ‫الرياضية‬ ‫والمعادالت‬ ‫والخطوط‬ ‫النقط‬ ‫إحداثيات‬ ( ‫النقطية‬ ‫الرسوميات‬ ‫عن‬ ‫تختلف‬ ‫بذلك‬ ‫ي‬ ‫وه‬ bitmap ) ‫البكسل‬ ‫عىل‬ ‫تعتمد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المربعة‬ ‫النقط‬ ‫من‬ ‫بمصفوفة‬ ‫الصورة‬ ‫وتمثل‬ ،‫الصورة‬ ‫ي‬ ‫ف‬ ‫عنرص‬‫كأصغر‬ ‫محتوى‬ ‫أن‬ ‫إىل‬ ‫لإلشارة‬ HTML ‫يستخدم‬ ‫بك‬ ‫الخاص‬ HTML5 :‫استخدم‬ ، <!DOCTYPE html>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 24 ‫باستخدام‬ ‫األحرف‬ ‫مجموعة‬ ‫عن‬ ‫ـح‬‫ـ‬‫ـ‬‫ـ‬‫ي‬‫الترص‬ <meta charset> ‫ي‬ ‫عنرص‬ ‫باستخدام‬ ‫ذلك‬ ‫تم‬ <meta> <meta charset="UTF-8"> ‫ضع‬ ‫ه‬ ‫بعد‬ ‫وسم‬ <head> ‫تحليل‬ ‫إعادة‬ ‫المتصفحات‬ ‫بعض‬ ‫تعيد‬ ‫حيث‬ ، ً ‫ة‬ ‫ر‬ ‫مبارس‬ ‫مستند‬ HTML . ‫ا‬ً‫حالي‬ ‫تستخدم‬ ‫ال‬ ‫كنت‬‫إذا‬ ،‫ا‬ ً ‫أيض‬ UTF-8 ‫إليه‬ ‫بالتبديل‬ ‫تقوم‬ ‫أن‬ ‫المستحسن‬ ‫فمن‬ ، ‫المستندات‬ ‫ي‬ ‫ف‬ ‫األحرف‬ ‫مع‬ ‫التعامل‬ ‫يبسط‬ ‫ألنه‬ ، ‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫ي‬ ‫ف‬ .‫مختلفة‬ ‫نصية‬ ‫امج‬‫ر‬‫ب‬ ‫باستخدام‬ ‫عنصر‬ ‫هو‬ ‫ما‬ HTML ‫؟‬ ‫عنرص‬ ‫تعريف‬ ‫يتم‬ HTML ‫بواسطة‬ ‫وسم‬ ‫و‬ ‫المحتوى‬ ‫وبعض‬ ‫البداية‬ ‫وسم‬ :‫النهاية‬ <tagname> ‫هنا‬ ‫يذهب‬ ‫المحتوى‬ ... </tagname> ‫عنرص‬ HTML ‫من‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬‫هو‬ ‫وسم‬ ‫إىل‬ ‫البداية‬ ‫وسم‬ :‫النهاية‬ <h1> ‫األول‬ ‫ي‬ ‫عنوان‬ </ h1> <p> ‫األوىل‬ ‫ي‬ ‫ر‬ ‫فقرن‬ </ p> ‫عناص‬ ‫بعض‬ :‫مالحظة‬ HTML ‫عنرص‬ ‫(مثل‬ ‫محتوى‬ ‫لها‬ ‫ليس‬ <br> ‫هذه‬ ‫تسىم‬ ‫لها‬ ‫ليس‬ ‫الفارغة‬ ‫العناص‬ .‫الفارغة‬ ‫بالعناص‬ ‫العناص‬ ‫وسم‬ )!‫نهاية‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 25 ‫صفحة‬ ‫هيكل‬ HTML ‫صفحة‬ ‫لهيكل‬ ‫تصور‬ ‫أدناه‬ ‫يوجد‬ HTML: ‫قسم‬ ‫داخل‬ ‫الموجود‬ ‫المحتوى‬ ‫عرض‬ ‫سيتم‬ :‫مالحظة‬ <body> ‫البيضاء‬ ‫المنطقة‬ ‫عنرص‬ ‫داخل‬ ‫الموجود‬ ‫المحتوى‬‫سيظهر‬ .‫المتصفح‬ ‫ي‬ ‫ف‬ ‫أعاله‬ <title> ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫ف‬ ‫أو‬ ‫المتصفح‬ ‫عنوان‬ ‫وسم‬ .‫الصفحة‬ ‫تبويب‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 26 ‫محرر‬ ‫االكواد‬ ‫كتابة‬‫يمكن‬ HTML ‫باستخدام‬ Notepad ‫أو‬ TextEdit ‫بسيط‬ ‫نصوص‬ ‫كمحرر‬ ‫تحرير‬ ‫امج‬‫ر‬‫ب‬ ‫باستخدام‬ ‫وتعديلها‬ ‫الويب‬ ‫صفحات‬ ‫إنشاء‬ ‫يمكن‬ ‫االكواد‬ Code Editors . ‫يمكنك‬ ‫استخدام‬ ‫أن‬ ‫أي‬ ‫محرر‬ ‫نصوص‬ ‫بسيط‬ ‫ننصح‬ ‫لكننا‬ ‫باستخدا‬ ‫م‬ ‫محرر‬ ‫االكواد‬ Visual Studio Code ‫الموقع‬ ‫ابط‬‫ر‬ ‫وهذا‬ ‫المحرر‬ ‫هذا‬ ‫يل‬‫لتت‬ ‫ي‬ ‫الرسىم‬ https://code.visualstudio.com / ‫باستخدام‬ ‫بك‬ ‫الخاصة‬ ‫األوىل‬ ‫الويب‬ ‫صفحة‬ ‫إلنشاء‬ ‫أدناه‬ ‫الخطوات‬ ‫اتبع‬ • ‫ملف‬ ‫انشأ‬ ‫جديد‬ new file
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 27 ‫الملف‬ ‫ضمن‬ ‫ي‬ ‫التاىل‬ ‫الكود‬ ‫اكتب‬ <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ‫احفظ‬ ‫ملف‬ ‫صفحة‬ HTML ‫حدد‬ .‫بك‬ ‫الخاص‬‫الكمبيوتر‬ ‫جهاز‬ ‫عىل‬ ‫الملف‬ ‫احفظ‬ file > save ‫قائمة‬ ‫ي‬ ‫ف‬ ‫المحرر‬ . " ‫الملف‬ ‫بتسمية‬ ‫قم‬ index.html" . ‫استخدام‬ ‫يمكنك‬ htm . ‫أو‬ html .‫لك‬ ‫وك‬ ‫ر‬ ‫مت‬ ‫األمر‬ ، ‫فرق‬ ‫يوجد‬ ‫ال‬ .‫للملف‬ ‫كملحق‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 28 ‫ملف‬ ‫افتح‬ HTML ‫الملف‬ ‫عىل‬ ‫ا‬ ً ‫مزدوج‬ ‫ا‬ً ‫نقر‬ ‫(انقر‬ ‫المفضل‬ ‫متصفحك‬ ‫ي‬ ‫ف‬ ‫المحفوظ‬ ‫األيمن‬ ‫الماوس‬‫بزر‬ ‫انقر‬‫أو‬ ، - .)"‫باستخدام‬ ‫"فتح‬ ‫ر‬ ‫واخت‬ ‫ر‬ ‫كبت‬‫حد‬ ‫إىل‬ ‫هذا‬ ‫مثل‬ ‫النتيجة‬‫تبدو‬ ‫سوف‬ HTML ‫بسيط‬ ‫كود‬ ‫مستندات‬ ‫جميع‬ ‫تبدأ‬ ‫أن‬ ‫يجب‬ HTML ‫بإعال‬ :‫المستند‬ ‫نوع‬ ‫ن‬ <!DOCTYPE html>. ‫مستند‬ ‫يبدأ‬ HTML ‫ب‬ ‫نفسه‬ <html> ‫ب‬ ‫ي‬ ‫وينته‬ </html>. ‫مستند‬ ‫من‬ ‫ي‬ ‫المرن‬ ‫الجزء‬ ‫يقع‬ HTML ‫ر‬ ‫بي‬ < body> ‫و‬ </body> ‫مثال‬ <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 29 ‫إعالن‬ <!DOCTYPE> ‫إعالن‬ ‫يمثل‬ <!DOCTYPE> ‫عرض‬ ‫عىل‬ ‫المستعرضات‬ ‫ويساعد‬ ‫المستند‬ ‫ع‬ ‫نو‬ ‫صحيح‬ ‫بشكل‬ ‫الويب‬ ‫صفحات‬ , ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ، ‫فقط‬ ‫واحدة‬ ‫مرة‬ ‫يظهر‬ ‫أن‬ ‫يجب‬ ‫عالمات‬ ‫أي‬ ‫قبل‬ HTML ‫وهو‬ , ً ‫حساسا‬ ‫ليس‬ .‫األحرف‬ ‫لحالة‬ ‫إعالن‬ <!DOCTYPE> ‫ل‬ HTML5 :‫هو‬ <!DOCTYPE html> ‫عناوين‬ HTML ‫عناوين‬ ‫تعريف‬ ‫يتم‬ HTML ‫بعالمات‬ <h1> ‫إىل‬ <h6>. ‫يحدد‬ <h1> ‫أهمية‬ ‫ر‬ ‫األكت‬ ‫العنوان‬ ‫يحدد‬ <h6> :‫أهمية‬ ‫األقل‬ ‫العنوان‬ <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> ‫ات‬‫ر‬‫فق‬ HTML ‫ات‬‫ر‬‫فق‬ ‫تعريف‬ ‫يتم‬ HTML ‫بال‬ ‫وسم‬ < p> <p>This is a paragraph.</p> <p>This is another paragraph.</p> ‫روابط‬ HTML ‫روابط‬ ‫تعريف‬ ‫يتم‬ HTML ‫ب‬ ‫وسم‬ <a> <a href="https://www.example.com">This is a link</a> ‫ي‬ ‫ف‬ ‫االرتباط‬ ‫وجهة‬ ‫تحديد‬ ‫يتم‬ ‫ال‬ ‫خاصية‬ href ‫ستخدم‬ ُ ‫ت‬ ‫الخواص‬ ‫عناص‬ ‫حول‬ ‫إضافية‬ ‫معلومات‬ ‫ر‬ ‫لتوفت‬ HTML
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 30 ‫صور‬ HTML ‫صور‬ ‫تعريف‬ ‫يتم‬ HTML ‫ب‬ ‫وسم‬ <img> ‫المصدر‬ ‫الملف‬ ‫ر‬ ‫توفت‬ ‫يتم‬ (src) ‫البديل‬ ‫والنص‬ (alt) ‫ك‬‫واالرتفاع‬ ‫والعرض‬ ‫خواص‬ <img src=" example.jpg" alt=" example.com" width="104" height="142"> ‫عناصر‬ HTML ‫عنرص‬ ‫تعريف‬ ‫يتم‬ HTML ‫النهاية‬ ‫ووسم‬ ‫المحتوى‬ ‫وبعض‬ ‫البداية‬ ‫وسم‬ ‫بواسطة‬ . ‫عنرص‬ HTML ‫النهاية‬ ‫وسم‬ ‫إىل‬ ‫البداية‬ ‫وسم‬ ‫من‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬‫هو‬ : <tagname> ‫هنا‬ ‫يذهب‬ ‫المحتوى‬ ... </tagname> ‫عناصر‬ HTML ( ‫المتداخلة‬ Nested ) ‫عناص‬ ‫تتداخل‬ ‫أن‬ ‫يمكن‬ HTML ‫عىل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ‫العناص‬ ‫أن‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ .‫أخرى‬ ‫عناص‬ ‫مستندات‬ ‫جميع‬ ‫تتكون‬ HTML ‫عناص‬ ‫من‬ HTML ‫متداخلة‬ . ‫عناص‬ ‫أربعة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحتوي‬ HTML <html> ‫و‬ <body> ‫و‬ <h1> ‫و‬ <p> : <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 31 ‫المثال‬ ‫ح‬ ‫ر‬ ‫ش‬ ‫عنرص‬ <html> ‫مستند‬ ‫ويحدد‬ ‫الجذر‬‫عنرص‬ ‫هو‬ HTML ‫بأكمله‬ . ‫بداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <html> ‫نهاية‬ ‫ووسم‬ </ html>. ‫عنرص‬ ‫داخل‬ ‫يوجد‬ ‫ثم‬ <html> ‫عنرص‬ <body> ‫العنرص‬ ‫يحدد‬ <body> ‫المستند‬ ‫جسم‬ . ‫بداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <body> ‫نهاية‬ ‫ووسم‬ </ body>. ‫عنرص‬ ‫داخل‬ ‫يوجد‬ ‫ثم‬ <body> :‫ان‬‫ر‬‫آخ‬ ‫ان‬‫رص‬‫عن‬ <h1> ‫و‬ <p> ‫العنرص‬ ‫يحدد‬ <h1> ‫العنوان‬ . ‫بداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <h1> ‫نهاية‬ ‫ووسم‬ </h1>: ‫العنرص‬ ‫يحدد‬ <p> ‫فقرة‬ . ‫البداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <p> ‫النهاية‬ ‫ووسم‬ </p> ‫ال‬ ‫تنىس‬ ‫النهاية‬ ‫وسم‬ ‫عناص‬ ‫بعض‬ ‫عرض‬ ‫سيتم‬ HTML ‫بشكل‬ ،‫صحيح‬ :‫النهاية‬ ‫وسم‬ ‫نسيت‬ ‫إذا‬ ‫ر‬ ‫حت‬ ‫عناص‬ HTML ‫فارغة‬ ‫عناص‬ ‫تسىم‬ HTML ‫الفارغة‬ ‫بالعناص‬ ‫محتوى‬ ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ . ‫الوسم‬ ‫يحدد‬ <br> ‫إغالق‬ ‫وسم‬ ‫بدون‬ ‫غ‬ ‫فار‬ ‫عنرص‬ ‫ي‬ ‫وه‬ ، ‫أسطر‬ ‫فاصل‬ <p>This is a <br> paragraph with a line break.</p>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 32 ‫عالمات‬ HTML :‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ليست‬ <P> ‫وسم‬ ‫نفس‬ ‫ي‬ ‫تعت‬ <p>. ‫خواص‬ HTML ( HTML Attributes ) ‫خواص‬‫توفر‬ HTML ‫عناص‬ ‫حول‬ ‫إضافية‬ ‫معلومات‬ HTML. ‫خواص‬ HTML ‫عناص‬ ‫جميع‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ HTML ‫خواص‬ ‫عىل‬ ‫العناص‬ ‫حول‬ ‫إضافية‬ ‫معلومات‬ ‫الخواص‬‫توفر‬ ‫البداية‬ ‫وسم‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫دائم‬ ‫الخواص‬ ‫تحديد‬ ‫يتم‬ ‫"القيمة‬ = ‫االسم‬ :‫مثل‬ ‫القيمة‬ / ‫االسم‬ ‫أزواج‬ ‫ي‬ ‫ف‬ ً ‫عادة‬ ‫الخواص‬ ‫ي‬ ‫ر‬ ‫تأن‬ " ‫الوسم‬ ‫يحدد‬ <a> ‫الخاصية‬ ‫تحدد‬ .‫ا‬ً‫تشعبي‬ ‫ا‬ ً ‫ارتباط‬ href ‫عنوان‬ URL ‫ي‬ ‫ر‬ ‫الت‬ ‫للصفحة‬ :‫االرتباط‬ ‫إليها‬ ‫ينتقل‬ <a href="https://www.yazan mona.com">Visit yazan mona </a> ‫خاصي‬ ‫المصدر‬ ‫ة‬ src ‫وسم‬ ‫ستخدم‬ ُ ‫ت‬ <img> ‫صفحة‬ ‫ي‬ ‫ف‬ ‫صورة‬ ‫ر‬ ‫لتضمي‬ HTML ‫الخاصية‬ ‫تحدد‬ src :‫عرضها‬ ‫اد‬‫ر‬‫الم‬ ‫الصورة‬ ‫إىل‬‫المسار‬ <img src="img_girl.jpg"> ‫عنوان‬ ‫لتحديد‬ ‫طريقتان‬ ‫هناك‬ URL ‫خاصية‬ ‫ي‬ ‫ف‬ src: 1 . URL ‫مطلق‬ - ‫خارجية‬ ‫صورة‬ ‫إىل‬ ‫روابط‬ ‫مستضاف‬ ‫مثال‬ .‫آخر‬ ‫ويب‬ ‫موقع‬ ‫عىل‬ : src = "https://www.example.com/images/img_girl.jpg". 2 . ‫عنوان‬ URL ‫ي‬ ‫ر‬ ‫النست‬ - ‫صورة‬ ‫إىل‬ ‫روابط‬ ‫مستضافة‬ ‫ال‬ ، ‫هنا‬ .‫الموقع‬ ‫داخل‬ ‫عنوان‬ ‫يتضمن‬ URL ‫عنوان‬ ‫بدأ‬ ‫إذا‬ .‫المجال‬ ‫اسم‬ URL ، ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫بدون‬ ‫مثال‬ .‫الحالية‬ ‫بالصفحة‬ ‫ا‬ ً ‫مرتبط‬ ‫فسيكون‬ : src = "img_girl.jpg". ‫عنوان‬ ‫بدأ‬ ‫إذا‬ URL ‫مثال‬ .‫بالمجال‬ ‫ا‬ ً ‫مرتبط‬ ‫فسيكون‬ ، ‫مائلة‬ ‫طة‬ ‫ر‬ ‫بش‬ : src = "/ images / img_girl.jpg".
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 33 ‫واالرتفاع‬ ‫العرض‬ ‫خواص‬ ‫يمكن‬ ‫أن‬ ‫ي‬ ‫وسم‬ ‫حتوي‬ <img> ‫تحدد‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫واالرتفاع‬ ‫العرض‬ ‫خواص‬ ‫عىل‬ ‫ا‬ ً ‫أيض‬ :)‫(بالبكسل‬ ‫وارتفاعها‬ ‫الصورة‬ ‫عرض‬ <img src="img_girl.jpg" width="500" height="600"> ‫خاصية‬ ‫البديل‬ ‫النص‬ ( alt Attribute ) ‫لوسم‬ ‫المطلوبة‬ ‫البديل‬ ‫النص‬ ‫خاصية‬ ‫تحدد‬ <img> ، ‫للصورة‬ ً ‫بديال‬ ‫ا‬ ً ‫نص‬ ‫تعذر‬ ‫إذا‬ ‫ي‬ ‫ف‬ ‫خطأ‬ ‫أو‬ ، ‫ء‬ ‫ي‬ ‫البط‬ ‫االتصال‬ ‫بسبب‬ ‫هذا‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ .‫ما‬ ‫لسبب‬ ‫الصورة‬ ‫عرض‬ ‫الخاصية‬ src ‫الشاشة‬ ‫قارئ‬ ‫يستخدم‬ ‫المستخدم‬ ‫كان‬‫إذا‬‫أو‬ ، <img src="img_girl.jpg" alt="Girl with a jacket"> ( ‫الستايل‬ ‫خاصية‬ style Attribute ) ‫عنرص‬ ‫إىل‬ ‫أنماط‬ ‫إلضافة‬ ‫النمط‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ ‫والحجم‬ ‫والخط‬ ‫اللون‬ ‫مثل‬ ، .‫والمزيد‬ <p style="color:red;">This is a red paragraph.</p> ‫الخاصية‬ lang ( lang Attribute ) ‫خاصية‬ ‫ر‬ ‫تضمي‬ ‫ا‬ ً‫دائم‬ ‫عليك‬ ‫يجب‬ lang ‫وسم‬ ‫داخل‬ <html> ‫لغة‬ ‫عن‬ ‫لإلعالن‬ ‫والمتصفحات‬ ‫البحث‬ ‫كات‬ ‫ر‬‫مح‬ ‫مساعدة‬ ‫إىل‬ ‫يهدف‬ ‫هذا‬ .‫الويب‬ ‫صفحة‬ . ‫المثال‬ ‫يحدد‬ :‫كلغة‬‫ية‬ ‫ر‬ ‫اإلنجلت‬ ‫اللغة‬ ‫ي‬ ‫التاىل‬ <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 34 (‫العنوان‬ ‫خاصية‬ title ) ‫العنرص‬ ‫حول‬ ‫اإلضافية‬ ‫المعلومات‬ ‫بعض‬ ‫العنوان‬ ‫خاصية‬ ‫تحدد‬ . :‫العنرص‬ ‫فوق‬ ‫الماوس‬ ‫تحريك‬ ‫عند‬ ‫أداة‬ ‫كتلميح‬‫العنوان‬ ‫خاصية‬ ‫قيمة‬ ‫عرض‬ ‫سيتم‬ <p title="I'm a tooltip">This is a paragraph.</p> ‫في‬ ‫النصوص‬ ‫تنسيق‬ HTML ‫يحتوي‬ HTML ‫عناص‬ ‫عدة‬ ‫عىل‬ ‫إلعطاء‬ ‫خاص‬ ‫معت‬ ‫ل‬ .‫لنص‬ This text is bold This text is italic This issubscript and superscript ‫تنسيق‬ ‫عناص‬ HTML ‫النص‬ ‫من‬ ‫خاصة‬ ‫أنواع‬ ‫لعرض‬ ‫التنسيق‬ ‫عناص‬ ‫تصميم‬ ‫تم‬ : <b> - ‫نص‬ ‫عريض‬ <strong> - ‫مهم‬ ‫نص‬ <i> - ‫مائل‬ ‫نص‬ <em> - ‫مؤكد‬ ‫نص‬ <mark> - ‫محدد‬ ‫نص‬ <small> - ‫أصغر‬ ‫نص‬ <del> - ‫محذوف‬ ‫نص‬ <ins> - ‫مدرج‬ ‫نص‬ <sub> - ‫منخفض‬ ‫نص‬ <sup> - ‫مرتفع‬ ‫نص‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 35 <b> and <strong> Elements ‫عنرص‬ ‫يحدد‬ <b> HTML .‫إضافية‬ ‫أهمية‬ ‫أي‬ ‫دون‬ ، ‫الغامق‬ ‫النص‬ <b>This text is bold</b> <i> and <em> Elements ‫عنرص‬ ‫يحدد‬ HTML <i> ‫مائل‬ ‫بخط‬ ‫ي‬ ‫الداخىل‬ ‫المحتوى‬ ‫عرض‬ ‫يتم‬ ‫النص‬ ‫من‬ ‫جزء‬ . ‫الوسم‬ ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫غالب‬ <i> ، ‫أخرى‬ ‫لغة‬ ‫من‬ ‫عبارة‬ ‫أو‬ ، ‫ي‬ ‫تقت‬ ‫مصطلح‬ ‫إىل‬ ‫لإلشارة‬ ‫ذلك‬ ‫إىل‬ ‫وما‬ ، ‫فكرة‬ ‫أو‬ <i>This text is italic</i> <small> Element ‫عنرص‬ ‫يحدد‬ <small> :‫ا‬ ً‫حجم‬‫أصغر‬ ‫ا‬ ً ‫نص‬ <small>This is some smaller text.</small> <mark> Element ‫عنرص‬ ‫يحدد‬ <mark> HTML :‫ه‬ ‫ر‬ ‫تميت‬ ‫أو‬ ‫ه‬ ‫ر‬ ‫تميت‬ ‫يجب‬ ‫الذي‬ ‫النص‬ <p>Do not forget to buy <mark>milk</mark> today.</p> <del> Element ‫عنرص‬ ‫يحدد‬ HTML <del> ‫من‬ ‫حذفه‬ ‫تم‬ ‫الذي‬ ‫النص‬ ‫تضع‬ ‫ما‬ ‫عادة‬ .‫المستند‬ :‫المحذوف‬ ‫النص‬ ‫ر‬ ‫بي‬ ‫ا‬ ً ‫خط‬ ‫المتصفحات‬ <p>My favorite color is <del>blue</del> red.</p> <ins> Element ‫عنرص‬ ‫يحدد‬ HTML <ins> ‫تقوم‬ ‫ما‬ ‫عادة‬ .‫المستند‬ ‫ي‬ ‫ف‬ ‫اجه‬‫ر‬‫إد‬ ‫تم‬ ‫الذي‬ ‫النص‬ :‫المدرج‬ ‫النص‬ ‫ر‬ ‫بتسطت‬ ‫المستعرضات‬ <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 36 <sub> Element ‫عنرص‬ ‫يحدد‬ HTML <sub> ‫بنصف‬ ‫المنخفض‬ ‫النص‬‫يظهر‬ .‫المنخفض‬ ‫النص‬ ‫استخدام‬ ‫يمكن‬ .‫أصغر‬ ‫بخط‬ ‫ا‬ ً ‫أحيان‬ ‫تقديمه‬ ‫ويتم‬ ، ‫العادي‬‫السطر‬ ‫أسفل‬ ‫حرف‬ ‫مثل‬ ، ‫الكيميائية‬ ‫للصيغ‬ ‫المنخفض‬ ‫النص‬ H2O: <p>This is <sub>subscripted</sub> text.</p> <sup> Element ‫عنرص‬ ‫يحدد‬ HTML <sup> ‫حرف‬ ‫بنصف‬ ‫المرتفع‬ ‫النص‬‫يظهر‬ .‫المرتفع‬ ‫النص‬ ‫النص‬ ‫استخدام‬ ‫يمكن‬ .‫أصغر‬ ‫بخط‬ ‫ا‬ ً ‫أحيان‬ ‫تقديمه‬ ‫ويتم‬ ، ‫العادي‬‫السطر‬ ‫فوق‬ ‫مثل‬ ، ‫السفلية‬ ‫ي‬ ‫ر‬ ‫للحواش‬ ‫المرتفع‬ WWW [1]: <p>This is <sup>superscripted</sup> text.</p> ‫األلوان‬ ‫تحديد‬ ‫يتم‬ ‫ألوان‬ HTML ‫بقيم‬ ‫أو‬ ، ‫ا‬ ً ‫مسبق‬ ‫محددة‬ ‫ألوان‬ ‫بأسماء‬ RGB ‫أو‬ HEX ‫أو‬ HSL ‫أو‬ RGBA ‫أو‬ HSLA. ‫األلوان‬ ‫أسماء‬ ‫ي‬ ‫ف‬ HTML :‫اللون‬ ‫اسم‬ ‫باستخدام‬ ‫اللون‬ ‫تحديد‬ ‫يمكن‬ ، (‫الخلفية‬ ‫لون‬ Background Color ) ‫لعناص‬ ‫الخلفية‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ HTML: <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 37 (‫الخط‬ ‫لون‬ Text Color ) :‫النص‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum......................................</p> <p style="color:MediumSeaGreen;">Ut wisi enim...................................</p> ( ‫الحدود‬ ‫لون‬ Border Color ) ‫الحدود‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ : <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 38 ‫اللون‬ ‫قيم‬ ‫ي‬ ‫ف‬ HTML ‫قيم‬ ‫باستخدام‬ ‫األلوان‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ ، RGB ‫وقيم‬ HEX ‫و‬ ‫قيم‬ HSL ‫وقيم‬ RGBA ‫وقيم‬ HSLA. ‫لعناص‬ ‫الخلفية‬ ‫لون‬ ‫ر‬ ‫تعيي‬ ‫تم‬ <div> ‫قيم‬ ‫مع‬ ‫التالية‬ ‫الثالثة‬ RGB ‫و‬ HEX ‫و‬ HSL: <h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> ‫صورة‬ ‫العنصر‬ HTML ‫وسم‬ ‫تستخدم‬ HTML <img> ‫ويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫صورة‬ ‫ر‬ ‫لتضمي‬ . <img src="pic_trulli.jpg" alt="Italian Trulli"> ‫ر‬ ‫تنىس‬ .‫الويب‬ ‫بصفحات‬ ‫مرتبطة‬ ‫الصور‬ ‫الويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫ا‬ً‫تقني‬ ‫الصور‬ ‫اج‬‫ر‬‫إد‬ ‫يتم‬ ‫ال‬ ‫وسم‬ <img> ‫إليها‬ ‫المشار‬ ‫للصورة‬ ‫تخزين‬ ‫مساحة‬ . ‫وسم‬ <img> ‫إغالق‬ ‫وسم‬ ‫عىل‬ ‫تحتوي‬ ‫وال‬ ، ‫فقط‬ ‫خواص‬ ‫عىل‬ ‫وتحتوي‬ ، ‫فارغة‬ . ‫الوسم‬ ‫تحتوي‬ <img> ‫ر‬ ‫مطلوبتي‬ ‫ر‬ ‫سمتي‬ ‫عىل‬ : o src - ‫الصورة‬ ‫إىل‬ ‫المسار‬ ‫تحدد‬ o alt - ‫ي‬ ‫للصورة‬ ً ‫بديًل‬ ‫ا‬ ً ‫نص‬ ‫حدد‬ <img src="url" alt="alternatetext">
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 39 ‫خاصية‬ (The src Attribute) src ‫خاصية‬ ‫تحدد‬ src ‫المسار‬ ‫المطلوبة‬ (URL) ‫للصورة‬ . ‫المتصفح‬ ‫ويب‬ ‫صفحة‬ ‫تحميل‬ ‫عند‬ :‫مالحظة‬ ‫يحصل‬ ‫الذي‬ ‫هو‬ ، ‫اللحظة‬ ‫تلك‬ ‫ي‬ ‫ف‬ ، ‫الصورة‬ ‫بقاء‬ ‫من‬ ‫تأكد‬ ، ‫لذلك‬ .‫الصفحة‬ ‫ي‬ ‫ف‬ ‫ويدرجها‬ ‫الويب‬ ‫خادم‬ ‫من‬ ‫الصورة‬ ‫عىل‬ ‫رمز‬ ‫عىل‬ ‫زوارك‬ ‫سيحصل‬ ‫وإال‬ ، ‫الويب‬ ‫صفحة‬ ‫إىل‬ ‫بالنسبة‬ ‫المكان‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫بالفعل‬ ‫المستعرض‬ ‫يتمكن‬ ‫لم‬ ‫إذا‬ ‫البديل‬ ‫والنص‬ ‫المعطل‬ ‫االرتباط‬‫رمز‬ ‫يظهر‬ .‫معطل‬ ‫ارتباط‬ ‫العثور‬ ‫من‬ .‫الصورة‬ ‫عىل‬ <img src="img_chania.jpg" alt="Flowers in Chania"> ‫خاصية‬ alt ( The alt Attribute ) ‫خاصية‬‫توفر‬ alt ‫ال‬ ‫ما‬ ‫لسبب‬ ‫المستخدم‬ ‫كان‬‫إذا‬ ، ‫للصورة‬ ً ‫بديال‬ ‫ا‬ ً ‫نص‬ ‫المطلوبة‬ ‫عرضها‬ ‫يمكنه‬ ‫الخاصية‬ ‫ي‬ ‫ف‬ ‫خطأ‬ ‫أو‬ ، ‫االتصال‬ ‫بطء‬ ‫بسبب‬ src ‫كان‬‫إذا‬ ‫أو‬ ، ‫ال‬ ‫قارئ‬ ‫يستخدم‬ ‫المستخدم‬ ‫شاشة‬ . :‫الصورة‬ ‫البديل‬ ‫النص‬ ‫خاصية‬ ‫قيمة‬ ‫تصف‬ ‫أن‬ ‫يجب‬ <img src="img_chania.jpg" alt="Flowers in Chania"> ‫النص‬ ‫خاصية‬ ‫قيمة‬ ‫فسيعرض‬ ، ‫صورة‬ ‫عىل‬ ‫العثور‬ ‫من‬ ‫المستعرض‬ ‫يتمكن‬ ‫لم‬ ‫إذا‬ :‫البديل‬ ‫الصورة‬ ‫حجم‬ - (‫واالرتفاع‬ ‫العرض‬ Image Size - Width and Height ) ‫استخدام‬ ‫يمكنك‬ .‫وارتفاعها‬ ‫الصورة‬ ‫عرض‬ ‫لتحديد‬ ‫النمط‬ ‫خاصية‬ <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" ‫كرابط‬ ‫الصورة‬ ‫وسم‬ ‫ضع‬ ، ‫ابط‬‫ر‬‫ك‬‫صورة‬ ‫الستخدام‬ <img> ‫وسم‬ ‫داخل‬ <a> <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 40 ‫الجداول‬ ‫جداول‬ ‫تسمح‬ HTML ‫وأعمدة‬ ‫صفوف‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫الويب‬ ‫لمطوري‬ . ‫جدول‬ ‫تعريف‬ HTML ‫الوسم‬ ‫يحدد‬ <table> ‫جدول‬ HTML. ‫بوسم‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫صف‬ ‫كل‬‫تعريف‬ ‫يتم‬ <tr>. ‫بوسم‬ ‫جدول‬ ‫أس‬‫ر‬ ‫كل‬‫تعريف‬ ‫يتم‬ <th>. ‫يتم‬ ‫بوسم‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫خلية‬ / ‫بيانات‬ ‫كل‬‫تعريف‬ <td>. ‫عناص‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫يكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ <th> ‫ا‬ ً ‫ومتوسط‬ ‫ا‬ ً ‫غامق‬ . < ‫عناص‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫يكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ td> .‫اليسار‬ ‫إىل‬ ‫ا‬ً‫ومحاذي‬ ‫ا‬ً‫عادي‬ <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 41 <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> ‫جدول‬ - ‫ًا‬‫د‬‫ح‬ ‫أضف‬ ‫خاصية‬ ‫استخدم‬ ، ‫جدول‬ ‫إىل‬ ‫حد‬ ‫إلضافة‬ CSS border table, th, td { border: 1px solid black; } ‫جدول‬ - ‫خلية‬ ‫مساحة‬ ‫إضافة‬ ‫وحدودها‬ ‫الخلية‬ ‫محتوى‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫الخلية‬ ‫مساحة‬ ‫تحدد‬ . ‫وكة‬ ‫ر‬ ‫مت‬ ‫مساحة‬ ‫بدون‬ ‫الجدول‬ ‫خاليا‬ ‫عرض‬ ‫فسيتم‬ ،‫وكة‬ ‫ر‬ ‫مت‬ ‫مساحة‬ ‫تحدد‬ ‫لم‬ ‫إذا‬ . ‫خاصية‬ ‫استخدم‬ ،‫وكة‬ ‫ر‬ ‫المت‬ ‫المساحة‬ ‫ر‬ ‫لتعيي‬ CSS padding: th, td { padding: 15px; } ‫جدول‬ - ‫اليسار‬ ‫إلى‬ ‫محاذاة‬ ‫عناوين‬ ‫وتتوسط‬ ‫غامقة‬ ‫الجدول‬ ‫عناوين‬ ‫تكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ . ‫خاصية‬ ‫استخدم‬ ،‫اليسار‬ ‫إىل‬ ‫الجدول‬ ‫عناوين‬ ‫لمحاذاة‬ text-align ‫ي‬ ‫ف‬ CSS: th { text-align: left; }
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 42 ‫جدول‬ - ‫أعمدة‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ‫الخاصية‬ ‫استخدم‬ ، ‫واحد‬ ‫عمود‬ ‫من‬ ‫ر‬ ‫ألكت‬ ‫تمتد‬ ‫الخلية‬ ‫لجعل‬ colspan: <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> ‫جدول‬ - ‫صفوف‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ‫الخاصية‬ ‫استخدم‬ ، ‫واحد‬ ‫صف‬ ‫من‬ ‫ر‬ ‫ألكت‬ ‫تمتد‬ ‫الخلية‬ ‫لجعل‬ rowspan: <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 43 ‫جدول‬ - ‫توضيحية‬ ‫تسمية‬ ‫أضف‬ ‫وسم‬ ‫استخدم‬ ، ‫جدول‬ ‫إىل‬ ‫تعليق‬ ‫إلضافة‬ <caption> : <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> ‫واحد‬ ‫لجدول‬ ‫خاص‬ ‫نمط‬ ‫خاصية‬ ‫أضف‬ ، ‫ر‬ ‫معي‬ ‫لجدول‬ ‫خاص‬ ‫نمط‬ ‫لتحديد‬ id :‫الجدول‬ ‫إىل‬ <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 44 :‫الجدول‬ ‫لهذا‬ ‫خاص‬ ‫نمط‬ ‫تحديد‬ ‫اآلن‬ ‫يمكنك‬ #t01 { width: 100%; background-color: #f1f1c1; } And add more styles: #t01 tr:nth-child(even) { background-color: #eee; } #t01 tr:nth-child(odd) { background-color: #fff; } #t01 th { color: white; background-color: black; }
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 45 ‫القوائم‬ ‫قوائم‬ ‫تسمح‬ HTML ‫ي‬ ‫ف‬ ‫الصلة‬ ‫ذات‬ ‫العناص‬ ‫من‬ ‫مجموعة‬ ‫بتجميع‬ ‫الويب‬ ‫لمطوري‬ .‫القوائم‬ ‫قائمة‬ ‫مرتبة‬ ‫غير‬ ( Unordered List ) ‫بوسم‬ ‫المرتبة‬ ‫ر‬ ‫غت‬ ‫القائمة‬ ‫تبدأ‬ <ul>. ‫بوسم‬ ‫بالقائمة‬ ‫عنرص‬ ‫كل‬‫يبدأ‬ <li>. :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ )‫ة‬ ‫ر‬ ‫صغت‬ ‫سوداء‬ ‫(دوائر‬ ‫نقطية‬ ‫برموز‬ ‫القائمة‬ ‫عناص‬ ‫ر‬ ‫تميت‬ ‫سيتم‬ <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ‫مرتبة‬ ‫قائمة‬ ( Ordered List ) ‫بوسم‬ ‫المرتبة‬ ‫القائمة‬ ‫تبدأ‬ <ol>. ‫بوسم‬ ‫بالقائمة‬ ‫عنرص‬ ‫كل‬‫يبدأ‬ <li>. :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫باألرقام‬ ‫القائمة‬ ‫عناص‬ ‫ر‬ ‫تميت‬ ‫سيتم‬ <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 46 ‫قوائم‬ ‫ال‬ ‫وصف‬ ‫يدعم‬ HTML ‫الوصف‬ ‫قوائم‬ ‫ا‬ ً ‫أيض‬ . ‫قائمة‬ ‫ي‬ ‫ه‬ ‫الوصف‬ ‫قائمة‬ ،‫بالمصطلحات‬ ‫مصطلح‬ ‫لكل‬ ‫وصف‬ ‫مع‬ . ‫الوسم‬ ‫يحدد‬ <dl> ‫و‬ ، ‫الوصف‬ ‫قائمة‬ ‫الوسم‬ ‫يحدد‬ <dt> ، )‫(االسم‬ ‫المصطلح‬ ‫الوسم‬ ‫وتصف‬ <dd> :‫مصطلح‬ ‫كل‬ <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 47 ( ‫السطرية‬ ‫العناصر‬ inline ‫الكتلة‬ ‫عناصر‬ ‫و‬ ) (Block) ‫عنرص‬ ‫يحتوي‬ HTML ‫العنرص‬ ‫نوع‬ ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ، ‫اضية‬ ‫ر‬ ‫افت‬ ‫عرض‬ ‫قيمة‬ ‫عىل‬ ‫ا‬ ً ‫جد‬ . ‫ومضمنة‬ ‫كتلة‬:‫العرض‬ ‫قيم‬ ‫من‬ ‫نوعان‬ ‫هناك‬ . (‫الكتلة‬ ‫عناصر‬ Block-level Elements ) ‫مستوى‬ ‫عنرص‬ ‫يبدأ‬ ‫جديد‬ ‫سطر‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫دائم‬ ‫الكتلة‬ . ‫ر‬ ‫واليمي‬ ‫اليسار‬ ‫إىل‬ ‫(يمتد‬ ‫المتاح‬ ‫الكامل‬ ‫العرض‬ ‫ا‬ ً‫دائم‬ ‫الكتلة‬ ‫مستوى‬ ‫عنرص‬ ‫يشغل‬ )‫اإلمكان‬‫بقدر‬ . ‫العنرص‬ ‫يحتوي‬ ‫ال‬ ‫بينما‬ ، ‫ي‬ ‫وسفىل‬ ‫علوي‬ ‫هامش‬ ‫عىل‬ ‫الكتلة‬ ‫مستوى‬ ‫عنرص‬ ‫يحتوي‬ ‫السطري‬ inline .‫الهامش‬ ‫هذا‬ ‫عىل‬ ‫عنرص‬ <div> ‫هو‬ .‫الكتلة‬ ‫مستوى‬ ‫عىل‬‫عنرص‬ <div>Hello World</div> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> ‫العناصر‬ ‫السطرية‬ ( ‫المضمنة‬ ) ( Inline Elements ) ‫العنرص‬ ‫يبدأ‬ ‫ال‬ ‫السطري‬ inline ‫جديد‬‫سطر‬ ‫ي‬ ‫ف‬ . ‫العنرص‬ ‫يأخذ‬ ‫السطري‬ inline ‫فقط‬ ‫ورة‬‫الرص‬‫بقدر‬ ‫ا‬ ً ‫عرض‬ . ‫عنرص‬ ‫هذا‬ <span> .‫فقرة‬ ‫داخل‬ <span>Hello World</span>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 48 <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> ‫العنرص‬ ‫يحتوي‬ ‫أن‬ ‫يمكن‬ ‫ال‬ :‫مالحظة‬ ‫السطري‬ inline ‫مستوى‬ ‫عىل‬‫عنرص‬ ‫عىل‬ !‫الكتلة‬ ‫عنصر‬ <div> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ ‫ما‬ ‫ا‬ً‫غالب‬ <div> ‫لعناص‬ ‫كحاوية‬ HTML ‫األخرى‬ . ‫عنرص‬ ‫يحتوي‬ ‫ال‬ <div> ‫والمعرف‬ ‫والصف‬ ‫النمط‬ ‫لكن‬ ، ‫مطلوبة‬ ‫خواص‬ ‫عىل‬ ‫شائعان‬ . ‫مع‬ ‫استخدامه‬ ‫عند‬ CSS ، ‫عنرص‬ ‫استخدام‬ ‫يمكن‬ <div> :‫المحتوى‬ ‫كتل‬‫لتصميم‬ <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 49 ‫العنصر‬ <span> ‫العنرص‬ <span> ‫من‬ ‫جزء‬‫أو‬ ‫نص‬ ‫من‬ ‫جزء‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫لت‬ ‫ستخدم‬ ُ ‫ت‬ ‫مضمنة‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫مستند‬ . ‫ال‬ ‫العنرص‬ ‫يحتوي‬ <span> ‫والمعرف‬ ‫والصف‬ ‫النمط‬ ‫ولكن‬ ، ‫مطلوبة‬ ‫خواص‬ ‫عىل‬ ‫شائعان‬ . ‫مع‬ ‫استخدامه‬ ‫عند‬ CSS ‫العنرص‬ ‫استخدام‬ ‫يمكن‬ ، <span> ‫من‬ ‫اء‬‫ز‬‫أج‬ ‫لتصميم‬ :‫النص‬ <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font- weight:bold">dark green</span> eyes. </p> ‫الصف‬ ‫خاصية‬ ‫أ‬ ‫الفئة‬ ‫و‬ class ‫لعناص‬ ‫يمكن‬ HTML ‫الصف‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫ك‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫المتعددة‬ . ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫غالب‬ class Attribute ‫إىل‬ ‫لإلشارة‬ class name ‫ي‬ ‫ف‬ style sheet . ‫بواسطة‬ ‫استخدامه‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ JavaScript ‫ومعالجتها‬ ‫العناص‬ ‫إىل‬ ‫للوصول‬ ‫باستخدام‬ class name ‫ر‬ ‫معي‬ .
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 50 ‫عناص‬ ‫ثالثة‬ ‫لدينا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <div> ‫بخاصية‬ class ‫بقيمة‬ "city" ‫سيتم‬ ‫عناص‬ ‫جميع‬ ‫تصميم‬ <div> ‫قسم‬ ‫ي‬ ‫ف‬ ‫المدينة‬ ‫نمط‬ ‫لتعريف‬ ‫ا‬ ً ‫وفق‬ ‫بالتساوي‬ ‫الثالثة‬ ‫ال‬ :‫أس‬‫ر‬ <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 51 ‫ا‬‫رص‬‫عن‬ ‫لدينا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <span> ‫خاصية‬ ‫مع‬ class ‫بقيمة‬ "note". ‫سيتم‬ ‫ين‬‫رص‬‫العن‬ ‫كال‬‫تصميم‬ <span> ‫قسم‬ ‫ي‬ ‫ف‬ ‫المالحظة‬ ‫نمط‬ ‫لتعريف‬ ‫ا‬ ً ‫وفق‬ ‫بالتساوي‬ :‫أس‬‫ر‬‫ال‬ <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> ‫استخدام‬ ‫يمكن‬ :‫مالحظة‬ ‫خاصية‬ class ‫عنرص‬ ‫أي‬ ‫ي‬ ‫ف‬ HTML. ‫ال‬ ‫اسم‬ :‫مالحظة‬ ‫صف‬ ‫األحرف‬ ‫لحالة‬ ‫حساس‬ !
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 52 ‫الصف‬ ‫كتابة‬ ‫قواعد‬ Class ‫إلنشاء‬ class , ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، ).( ‫نقطة‬ ‫حرف‬ ‫اكتب‬ class ‫حدد‬ ، ‫ذلك‬ ‫بعد‬ . ‫خصائص‬ CSS :}{ ‫المتعرجة‬ ‫األقواس‬ ‫داخل‬ Create a class named "city": <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html> ‫متعدة‬ ‫صفوف‬ Classes ‫عناص‬ ‫ي‬ ‫تنتىم‬ ‫أن‬ ‫يمكن‬ HTML ‫من‬ ‫ر‬ ‫أكت‬ ‫إىل‬ ‫صف‬ .‫واحدة‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ ، ‫بمسافة‬ ‫الفئات‬ ‫أسماء‬ ‫ر‬ ‫بي‬ ‫افصل‬ ، ‫متعددة‬ ‫فئات‬ ‫لتحديد‬ <div class = "city main">. .‫المحددة‬ ‫الفئات‬ ‫لجميع‬ ‫ا‬ ً ‫وفق‬ ‫العنرص‬ ‫تصميم‬ ‫سيتم‬ ‫عنرص‬ ‫ي‬ ‫ينتىم‬ ، ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <h2> ‫ك‬‫إىل‬ ‫األول‬ ‫من‬ ‫ل‬ ‫صف‬ ‫إىل‬ ‫ا‬ ً ‫وأيض‬ ‫المدينة‬ ‫ال‬ ‫صف‬ ‫أنماط‬ ‫عىل‬ ‫وسيحصل‬ ، ‫الرئيسية‬ CSS ‫ر‬ ‫الفئتي‬ ‫كال‬‫من‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 53 <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> ‫ال‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫المختلفة‬ ‫العناص‬ ‫ك‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫يمكن‬ ‫صف‬ ‫عناص‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫يمكن‬ HTML ‫ال‬ ‫اسم‬ ‫نفس‬ ‫إىل‬ ‫المختلفة‬ ‫صف‬ . ‫من‬ ‫كل‬ ‫ر‬ ‫يشت‬ ، ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <h2> ‫و‬ <p> ‫إىل‬ ‫صف‬ ‫ي‬ ‫ف‬ ‫كان‬ ‫ر‬ ‫وسيشت‬ "‫"المدينة‬ :‫النمط‬ ‫نفس‬ <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> ‫ي‬ ‫ف‬ ‫الصف‬ ‫خاصية‬ ‫استخدام‬ JavaScript ‫ل‬ ‫يمكن‬ JavaScript ‫باسم‬ ‫عناص‬ ‫إىل‬ ‫الوصول‬ ‫صف‬ ‫طريقة‬ ‫باستخدام‬ ‫محدد‬ getElementsByClassName () ‫المعرف‬ ‫خاصية‬ id ‫خاصية‬ ‫استخدام‬ ‫يتم‬ ‫ال‬ ‫معرف‬ id ‫لعنرص‬ ‫فريد‬ ‫معرف‬ ‫لتحديد‬ HTML. ‫بنفس‬ ‫واحد‬ ‫عنرص‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫ال‬ id ‫ي‬ ‫ف‬ ‫المعرف‬ ‫ال‬ ‫مستند‬ . • ‫ستخدم‬ ُ ‫ت‬ ‫خاصية‬ id ‫ر‬ ‫معي‬ ‫نمط‬ ‫إىل‬ ‫لإلشارة‬ style declaration ‫ي‬ ‫ف‬ style sheet . • ‫بواسطة‬ ‫ا‬ ً ‫أيض‬ ‫استخدامه‬ ‫يتم‬ JavaScript ‫ومعالجته‬ ‫العنرص‬ ‫إىل‬ ‫للوصول‬ .‫المحدد‬ ‫بالمعرف‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 54 ‫ما‬ ‫بمعرف‬ ‫لعنرص‬ ‫لإلشارة‬ ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، )#( ‫اكتب‬ : id ‫حدد‬ ، ‫ذلك‬ ‫بعد‬ . ‫خصائص‬ CSS .}{ ‫المتعرجة‬ ‫األقواس‬ ‫داخل‬ ‫عنرص‬ ‫لدينا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <h1> ‫المعرف‬ ‫اسم‬ ‫إىل‬ ‫ر‬ ‫يشت‬ "myHeader" ‫سيتم‬ ‫عنرص‬ ‫تصميم‬ <h1> ‫نمط‬ ‫لتعريف‬ ‫ا‬ ً ‫وفق‬ ‫هذا‬ myHeader # :‫أس‬‫ر‬‫ال‬ ‫قسم‬ ‫ي‬ ‫ف‬ <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html> :‫مالحظة‬ ‫المعرف‬ id !‫األحرف‬ ‫لحالة‬ ‫حساس‬ ‫كما‬ ‫اسم‬ ‫يحتوي‬ ‫أن‬ ‫يجب‬ id ‫عىل‬ ، ‫األقل‬ ‫عىل‬ ‫واحد‬ ‫حرف‬ ‫وعالمات‬ ، ‫(مسافات‬ ‫مسافات‬ ‫عىل‬ ‫يحتوي‬ ‫أال‬ ‫ويجب‬ .)‫ذلك‬ ‫إىل‬ ‫وما‬ ، ‫جدولة‬ ‫مرجعية‬ ‫إشارات‬ HTML ‫والروابط‬ ‫المعرف‬ ‫مع‬ ‫ات‬‫ر‬‫إشا‬ ‫ستخدم‬ ُ ‫ت‬ HTML ‫من‬ ‫معينة‬ ‫اء‬‫ز‬‫أج‬ ‫إىل‬ ‫باالنتقال‬ ‫اء‬‫ر‬‫للق‬ ‫للسماح‬ ‫المرجعية‬ .‫الويب‬ ‫صفحة‬ ‫طويلة‬ ‫صفحتك‬ ‫كانت‬‫إذا‬ ‫مفيدة‬ ‫المرجعية‬ ‫ات‬‫ر‬‫اإلشا‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ .‫ا‬ ً ‫جد‬ .‫إليها‬ ‫ارتباط‬ ‫إضافة‬ ‫ثم‬ ، ‫إنشاؤها‬ ً ‫أوال‬ ‫عليك‬ ‫يجب‬ ، ‫مرجعية‬ ‫إشارة‬ ‫الستخدام‬ ‫عىل‬ ‫يحتوي‬ ‫الذي‬ ‫الموقع‬ ‫إىل‬ ‫الصفحة‬ ‫ستنتقل‬ ، ‫ابط‬‫ر‬‫ال‬ ‫عىل‬ ‫النقر‬ ‫عند‬ ، ‫ذلك‬ ‫بعد‬ .‫المرجعية‬ ‫اإلشارة‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 55 <h2 id="C4">Chapter 4</h2> Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: <a href="#C4">Jump to Chapter 4</a> ‫خاصية‬ ‫استخدام‬ id ‫في‬ JavaScript ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ ‫خاصية‬ id ‫بواسطة‬ JavaScript ‫لهذا‬ ‫المهام‬ ‫بعض‬ ‫لتنفيذ‬ .‫المحدد‬‫العنرص‬ ‫ل‬ ‫يمكن‬ JavaScript ‫طريقة‬ ‫باستخدام‬ ‫محدد‬ ‫بمعرف‬ ‫عنرص‬ ‫إىل‬ ‫الوصول‬ getElementById () : <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> ‫المضمنة‬ ‫األطر‬ Iframes ‫إطار‬ ‫استخدام‬ ‫يتم‬ HTML iframe ‫داخل‬ ‫ويب‬ ‫صفحة‬ ‫لعرض‬ ‫ويب‬ ‫صفحة‬ . ‫كتابة‬ ‫قواعد‬ Iframe ‫تحدد‬ ‫وسم‬ HTML <iframe> .‫ا‬ ً ‫مضمن‬ ‫ا‬ً ‫إطار‬ ‫مستند‬ ‫داخل‬ ‫آخر‬ ‫مستند‬ ‫ر‬ ‫لتضمي‬ ‫المضمن‬ ‫اإلطار‬ ‫استخدام‬ ‫يتم‬ HTML . ‫ي‬ ‫الحاىل‬ <iframe src="url" title="description"> ‫والعرض‬ ‫االرتفاع‬ ‫ضبط‬ Iframe ‫استخدم‬ ‫خواص‬ ‫إطار‬ ‫حجم‬ ‫لتحديد‬ ‫والعرض‬ ‫الطول‬ iframe. :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫بالبكسل‬ ‫والعرض‬ ‫االرتفاع‬ ‫تحديد‬ ‫يتم‬ <iframe src="demo_iframe.htm" height="200" width="300" title="Ifram e Example"></iframe>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 56 ‫الحدود‬ ‫إزالة‬ Iframe ‫إطار‬ ‫يحتوي‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ iframe ‫حوله‬ ‫حدود‬ ‫عىل‬ . ، ‫الحد‬ ‫الة‬‫ز‬‫إل‬ ‫أضف‬ ‫خاصية‬ ‫خاصية‬ ‫واستخدم‬ ‫النمط‬ CSS border: <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> ‫الصفحة‬ ‫رأس‬ Head ‫عنرص‬ <head> :‫التالية‬ ‫للعناص‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ <title> ‫و‬ <style> ‫و‬ <meta> ‫و‬ <link> ‫و‬ <script> ‫و‬ <base>. ‫العنصر‬ <head> ‫عنرص‬ <head> ‫ويتم‬ )‫البيانات‬ ‫حول‬ ‫(بيانات‬ ‫الوصفية‬ ‫للبيانات‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫ر‬ ‫بي‬ ‫وضعه‬ ‫وسم‬ <html> ‫و‬ ‫وسم‬ <body> ‫بيانات‬ HTML ‫مستند‬ ‫حول‬ ‫بيانات‬ ‫ي‬ ‫ه‬ ‫الوصفية‬ HTML. ‫البيانات‬ ‫عرض‬ ‫يتم‬ ‫ال‬ .‫الوصفية‬ ‫األحرف‬ ‫ومجموعة‬ ‫المستند‬ ‫عنوان‬ ً ‫عادة‬ ‫الوصفية‬ ‫البيانات‬ ‫تحدد‬ ‫امج‬ ‫ر‬ ‫والت‬ ‫واألنماط‬ .‫األخرى‬ ‫التعريف‬ ‫ومعلومات‬ ‫النصية‬ ‫عنصر‬ <title> ‫عنرص‬ ‫يحدد‬ <title> ‫ويظهر‬ ، ‫فقط‬ ‫ا‬ً‫نصي‬ ‫العنوان‬ ‫يكون‬ ‫أن‬ ‫يجب‬ .‫المستند‬ ‫عنوان‬ ‫ي‬ ‫ف‬‫أو‬ ‫المتصفح‬ ‫عنوان‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫وسم‬ .‫الصفحة‬ ‫تبويب‬ ‫عنرص‬ <title> ‫مستندات‬ ‫ي‬ ‫ف‬ ‫مطلوب‬ HTML !
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 57 ‫مهمة‬ ‫الصفحة‬ ‫عنوان‬ ‫محتويات‬ ‫ر‬ ‫تعتت‬ ( ‫البحث‬ ‫كات‬ ‫ر‬‫مح‬ ‫ر‬ ‫لتحسي‬ ‫ا‬ ً ‫جد‬ SEO)! ‫يتم‬ ‫عند‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫لتحديد‬ ‫البحث‬ ‫محرك‬ ‫خوارزميات‬ ‫بواسطة‬ ‫الصفحة‬ ‫عنوان‬ ‫استخدام‬ .‫البحث‬ ‫نتائج‬ ‫ي‬ ‫ف‬ ‫الصفحات‬ ‫رسد‬ ‫مستند‬ HTML :‫بسيط‬ <!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html> ‫عنصر‬ <style> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <style> ‫لصفحة‬ ‫النمط‬ ‫معلومات‬ ‫لتحديد‬ HTML :‫واحدة‬ <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> ‫عنصر‬ <meta> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <meta> ‫لتحديد‬ ً ‫عادة‬ ‫الصفحة‬ ‫ووصف‬ ‫األحرف‬ ‫مجموعة‬ .‫العرض‬ ‫منفذ‬ ‫وإعدادات‬ ‫المستند‬ ‫ومؤلف‬ ‫األساسية‬ ‫والكلمات‬ ، ‫الصفحة‬ ‫عىل‬ ‫الوصفية‬ ‫البيانات‬ ‫عرض‬ ‫يتم‬ ‫لن‬ ‫بواسطة‬ ‫استخدامها‬ ‫يتم‬ ‫ولكن‬ ‫البحث‬ ‫كات‬ ‫ر‬‫ومح‬ )‫الصفحة‬ ‫تحميل‬ ‫إعادة‬‫أو‬ ‫المحتوى‬ ‫عرض‬ ‫(كيفية‬ ‫المستعرضات‬ .‫األخرى‬ ‫الويب‬ ‫وخدمات‬ )‫الرئيسية‬ ‫(الكلمات‬ <meta charset="UTF-8">
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 58 Define keywords for search engines: <meta name="keywords" content="HTML, CSS, JavaScript"> Define a description of your web page: <meta name="description" content="Free Web tutorials"> Define the author of a page: <meta name="author" content="John Doe"> ‫عنصر‬ <script> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <script> ‫لتعريف‬ JavaScripts ‫العميل‬ ‫جانب‬ ‫من‬ client . ‫الكود‬ ‫ي‬ ‫التاىل‬ ‫ي‬ ‫كتب‬ "Hello JavaScript!" ‫عنرص‬ ‫ي‬ ‫ف‬ HTML ‫المعرف‬‫ذو‬ demo <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> ‫عنصر‬ <base> ‫العنرص‬ ‫يحدد‬ <base> ‫عنوان‬ URL ‫عناوين‬ ‫لجميع‬ ‫الهدف‬‫أو‬ / ‫و‬ ‫ي‬ ‫األساش‬ URL ‫النسبية‬ relative URLs .‫الصفحة‬ ‫ي‬ ‫ف‬ ‫ال‬ ‫تحتوي‬ ‫أن‬ ‫يجب‬ ‫وسم‬ <base> ‫عىل‬ ‫خاصية‬ href ‫أو‬ ‫خاصية‬ target .‫كالهما‬‫أو‬ ، ‫يجب‬ ‫عنرص‬ ‫هناك‬ ‫يكون‬ ‫أن‬ <base> ‫فقط‬ ‫واحد‬ !‫المستند‬ ‫ي‬ ‫ف‬ <head> <base href="https://www.yazan.com/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 59 ‫الكود‬ ‫عنصر‬ Code ‫يحتوي‬ HTML .‫الكمبيوتر‬‫ورمز‬ ‫المستخدم‬ ‫إدخال‬ ‫لتحديد‬ ‫عناص‬ ‫عدة‬ ‫عىل‬ <code> x = 5; y = 6; z = x + y; </code> ‫المتغير‬ ‫عنصر‬ <var> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <var> ‫يتم‬ ‫ما‬ ً ‫عادة‬ . ‫ي‬ ‫رياض‬ ‫ر‬ ‫تعبت‬ ‫ي‬ ‫ف‬‫أو‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫متغت‬ ‫لتعريف‬ .‫مائل‬ ‫بخط‬ ‫ي‬ ‫الداخىل‬ ‫المحتوى‬ ‫عرض‬ <p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 60 ‫المتجاوب‬ ‫التصميم‬ Responsive ‫عىل‬ ‫جيدة‬‫تبدو‬ ‫ويب‬ ‫صفحات‬ ‫بإنشاء‬ ‫االستجابة‬ ‫ع‬ ‫ي‬‫رس‬ ‫الويب‬ ‫تصميم‬ ‫يتعلق‬ !‫األجهزة‬ ‫جميع‬ ‫ع‬ ‫ي‬‫رس‬ ‫الويب‬ ‫تصميم‬ ‫ضبط‬ ‫سيتم‬ ‫الشاشات‬ ‫أحجام‬ ‫حسب‬ ‫ا‬ً‫تلقائي‬ ‫االستجابة‬ .‫المختلفة‬ ‫العرض‬ ‫ات‬‫ر‬‫وإطا‬ ‫االستجابة؟‬ ‫سريع‬ ‫الويب‬ ‫تصميم‬ ‫هو‬ ‫ما‬ ‫باستخدام‬ ‫االستجابة‬ ‫ع‬ ‫ي‬‫رس‬ ‫الويب‬ ‫تصميم‬ ‫يتعلق‬ HTML ‫و‬ CSS ‫حجم‬ ‫ر‬ ‫لتغيت‬ ‫جميع‬ ‫عىل‬ ‫ا‬ ً ‫جيد‬‫يبدو‬ ‫لجعله‬ ‫ا‬ً‫تلقائي‬ ‫ه‬ ‫ر‬ ‫تكبت‬ ‫أو‬ ‫تقليصه‬ ‫أو‬ ‫إخفائه‬‫أو‬ ‫الويب‬ ‫موقع‬ :)‫والهواتف‬ ‫اللوحية‬ ‫واألجهزة‬ ‫المكتبية‬‫الكمبيوتر‬ ‫(أجهزة‬ ‫األجهزة‬ ‫العرض‬ ‫منفذ‬ ‫إعداد‬ ‫باختالف‬ ‫يختلف‬ .‫الويب‬ ‫لصفحة‬ ‫للمستخدم‬ ‫المرئية‬ ‫المنطقة‬‫هو‬ ‫العرض‬ ‫منفذ‬ ‫الجهاز‬ - ‫عىل‬ ‫أصغر‬ ‫سيكون‬ .‫الكمبيوتر‬ ‫شاشة‬ ‫عىل‬ ‫منه‬ ‫المحمول‬ ‫الهاتف‬ <‫عنرص‬ ‫ر‬ ‫تضمي‬ ‫عليك‬ ‫يجب‬ meta :‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫جميع‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التاىل‬ > ‫أضف‬ ‫وسم‬ <meta> :‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫جميع‬ ‫إىل‬ ‫التالية‬ <meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 61 ‫عرض‬‫إطار‬ ‫ر‬ ‫تعيي‬ ‫إىل‬ ‫هذا‬ ‫سيؤدي‬ ،‫صفحتك‬ ‫المتصفح‬ ‫تعليمات‬ ‫ي‬ ‫سيعط‬ ‫والذي‬ .‫وقياسها‬ ‫الصفحة‬ ‫أبعاد‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫كيفية‬‫حول‬ ‫ال‬ ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫ويب‬ ‫لصفحة‬ ‫مثال‬ ‫ي‬ ‫يىل‬ ‫فيما‬ ‫وسم‬ ‫ونفس‬ ، ‫العرض‬‫إلطار‬ ‫الوصفية‬ ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الويب‬ ‫صفحة‬ ‫وسم‬ :‫الوصفية‬ ‫العرض‬ ‫إطار‬ ‫صور‬ ‫متجاوبة‬ ( Responsive Images ) .‫متصفح‬ ‫حجم‬ ‫أي‬ ‫لتناسب‬ ‫جيد‬ ‫بشكل‬ ‫قياسها‬ ‫يتم‬ ‫صور‬ ‫ي‬ ‫ه‬ ‫المتجاوبة‬‫الصور‬ ‫العرض‬ ‫خاصية‬ ‫باستخدام‬ ‫عرض‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫تم‬ ‫إذا‬ CSS ‫عىل‬ 100 ‫االستجابة‬ ‫يعة‬‫رس‬ ‫الصورة‬ ‫فستكون‬ ، ٪ :‫وألسفل‬ ‫ألعىل‬ ‫وتتسع‬ <img src="img_girl.jpg" style="width:100%;"> ‫خاصية‬ ‫استخدام‬ max-width ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫تم‬ ‫إذا‬ max-width ‫إىل‬ 100 ‫األمر‬ ‫لزم‬ ‫إذا‬ ‫الصورة‬ ‫ر‬ ‫تصغت‬ ‫فسيتم‬ ، ٪ : ‫ي‬ ‫األصىل‬ ‫حجمها‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫لتصبح‬ ‫ا‬ ً ‫أبد‬ ‫ها‬ ‫ر‬ ‫تكبت‬ ‫يتم‬ ‫ال‬ ‫ولكن‬ ، <img src="img_girl.jpg" style="max-width:100%;height:auto;">
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 62 ‫الداللية‬ ‫العناصر‬ Semantic ‫ذات‬ ‫العناص‬ = ‫الداللية‬ ‫العناص‬ .‫المعت‬ .‫والمطور‬ ‫المتصفح‬ ‫من‬ ‫لكل‬ ‫معناه‬ ‫بوضوح‬ ‫ي‬ ‫الدالىل‬‫العنرص‬ ‫يصف‬ • :‫الداللية‬ ‫ر‬ ‫غت‬ ‫العناص‬ ‫عىل‬ ‫أمثلة‬ <div> ‫و‬ <span> - ‫عن‬ ‫ا‬ ً ‫شيئ‬ ‫ر‬ ‫تخت‬ ‫ال‬ .‫محتواها‬ • :‫الداللية‬ ‫العناص‬ ‫عىل‬ ‫أمثلة‬ <form> ، <table> ‫و‬ ، <article> - ‫تحدد‬ .‫بوضوح‬ ‫محتوياتها‬ ‫ي‬ ‫ف‬ ‫الداللية‬ ‫العنارص‬ HTML • ‫كود‬‫عىل‬ ‫الويب‬ ‫مواقع‬ ‫من‬ ‫العديد‬ ‫تحتوي‬ HTML :‫مثل‬ • <div id = "nav"> • <div class = "header"> • <div id = "footer"> .‫والتذييل‬ ‫والعنوان‬ ‫التنقل‬ ‫إىل‬ ‫لإلشارة‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 63 ‫ي‬ ‫ف‬ ‫توجد‬ HTML ‫خاصة‬ ‫و‬ 5 HTML ‫استخدامها‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الداللية‬ ‫العناص‬ ‫بعض‬ :‫الويب‬ ‫صفحة‬ ‫من‬ ‫مختلفة‬ ‫اء‬‫ز‬‫أج‬ ‫لتحديد‬ • <article> • <aside> • <details> • <figcaption> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time> ‫عنصر‬ <section> ‫العنرص‬ ‫يحدد‬ <section> .‫المستند‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫قسم‬ ‫ي‬ ‫موضوع‬ ‫تجميع‬ ‫عن‬ ‫عبارة‬ ‫القسم‬ ،‫للمحتوى‬ .‫بعنوان‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ .‫االتصال‬ ‫ومعلومات‬ ‫والمحتوى‬ ‫للمقدمة‬ ‫أقسام‬ ‫إىل‬ ‫الويب‬ ‫صفحة‬ ‫تقسيم‬ ً ‫عادة‬ <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, res earch and restoration of the environment, formerly named the W orld Wildlife Fund. WWF was founded in 1961.</p> </section> <section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well- known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 64 ‫عنصر‬ <article> ‫العنرص‬ ‫يحدد‬ <article> .‫بذاته‬ ‫ا‬ ً‫قائم‬ ً ‫مستقًل‬ ‫محتوى‬ ‫تلقاء‬ ‫من‬ ‫معت‬ ‫للمقال‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ،‫نفسه‬ ‫توزيعه‬ ‫الممكن‬ ‫من‬ ‫يكون‬ ‫أن‬ ‫ويجب‬ .‫الويب‬ ‫موقع‬ ‫ي‬ ‫ر‬ ‫باف‬ ‫عن‬ ‫مستقل‬ ‫بشكل‬ <article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> ‫عنصر‬ <header> ‫العنرص‬ ‫يمثل‬ <header> ‫روابط‬ ‫من‬ ‫مجموعة‬‫أو‬ ‫التمهيدي‬ ‫للمحتوى‬ ‫حاوية‬ .‫التنقل‬ ‫عنرص‬ ‫يحتوي‬ <header> :‫عىل‬ ً ‫عادة‬ • ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ ‫عنوان‬‫عنرص‬ (<h1> - <h6>) • logo or icon • ‫التأليف‬ ‫معلومات‬ ‫عناص‬ ‫عدة‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ :‫مالحظة‬ <header> ‫مستند‬ ‫ي‬ ‫ف‬ HTML .‫واحد‬ ‫وضع‬ ‫يمكن‬ ‫ال‬ ، ‫ذلك‬ ‫ومع‬ <header> ‫داخل‬ <footer> ‫أو‬ <address> ‫عنرص‬ ‫أو‬ <header> .‫آخر‬ <article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 65 ‫عنصر‬ <footer> ‫العنرص‬ ‫يحدد‬ <footer> .‫قسم‬ ‫أو‬ ‫لمستند‬ ً ‫تذييًل‬ ‫عنرص‬ ‫يحتوي‬ ‫ما‬ ً ‫عادة‬ <footer> :‫عىل‬ • ‫التأليف‬ ‫معلومات‬ • ‫ر‬ ‫والنش‬ ‫التأليف‬ ‫حقوق‬ ‫معلومات‬ • ‫االتصال‬ ‫معلومات‬ • ‫الموقع‬ ‫خريطة‬ • ‫الروابط‬ ‫أعىل‬ ‫إىل‬ ‫العودة‬ • ‫الصلة‬ ‫ذات‬ ‫الوثائق‬ ‫عناص‬ ‫عدة‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ <footer> .‫واحد‬ ‫مستند‬ ‫ي‬ ‫ف‬ <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p > </footer> ‫عنصر‬ <nav> ‫العنرص‬ ‫يحدد‬ <nav> .‫التنقل‬ ‫روابط‬ ‫من‬ ‫مجموعة‬ ‫عنرص‬ ‫داخل‬ ‫المستند‬ ‫روابط‬ ‫جميع‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫ال‬ ‫أنه‬ ‫الحظ‬ <nav>. ‫عنرص‬ <nav> .‫التنقل‬ ‫لروابط‬ ‫الرئيسية‬ ‫للكتلة‬ ‫فقط‬ ‫مخصص‬ <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 66 ‫عنارص‬ HTML <figure> ‫و‬ <figcaption> ‫ي‬ ‫حدد‬ ‫وسم‬ <figure> ‫والرسوم‬ ‫التوضيحية‬ ‫الرسوم‬ ‫مثل‬ ، ‫مستقل‬ ‫محتوى‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫والصور‬ ‫البيانية‬ ‫الوسم‬ ‫يحدد‬ <figcaption> ‫لعنرص‬ ‫توضيحية‬ ‫تسمية‬ <figure> ‫وضع‬ ‫يمكن‬ ‫عنرص‬ <figcaption> ‫لعنرص‬ ‫ر‬ ‫األخت‬ ‫أو‬ ‫األول‬‫العنرص‬ ‫باعتباره‬ <figure> . ‫ي‬ ‫العنرص‬ ‫حدد‬ <img> ‫ي‬ ‫التوضيح‬ ‫الرسم‬ / ‫الفعلية‬ ‫الصورة‬ <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 67 ‫النماذج‬ ‫نموذج‬ ‫استخدام‬ ‫يتم‬ HTML .‫المستخدم‬ ‫مدخالت‬ ‫لتجميع‬ ‫ا‬ ( ‫لنموذج‬ Form ‫جعل‬ ‫بهدف‬ ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫توضع‬ ‫عناص‬ ‫مجموعة‬ ‫عن‬ ‫عبارة‬ ) .‫فيها‬ ‫بيانات‬ ‫يدخل‬ ‫المستخدم‬ ‫مثل‬ ‫إنشاء‬ ‫صفحات‬ ,‫الدخول‬ ‫تسجيل‬ ‫صفحات‬ ,‫تعليق‬ ‫إضافة‬ ,‫جديد‬ ‫حساب‬ ... ‫إرسال‬ ‫يتم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ‫مدخالت‬ .‫للمعالجة‬ ‫الخادم‬ ‫إىل‬ ‫المستخدم‬ ‫عنصر‬ <form> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <form> ‫نموذج‬ ‫إلنشاء‬ HTML :‫المستخدم‬ ‫إلدخال‬ <form> . form elements . </form> ‫عنرص‬ <form> ، ‫اإلدخال‬ ‫عناص‬ ‫من‬ ‫مختلفة‬ ‫ألنواع‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫حقول‬ :‫مثل‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫اإلرسال‬ ‫ار‬‫ر‬‫وأز‬ ‫االختيار‬ ‫ار‬‫ر‬‫وأز‬ ‫االختيار‬ ‫ومربعات‬ ‫النص‬
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 68 ‫عنصر‬ <input> ‫عنرص‬ ‫يعد‬ <input> ‫ي‬ ‫ف‬ HTML .‫ا‬ ً‫استخدام‬ ‫النموذج‬ ‫عناص‬ ‫ر‬ ‫أكت‬ ‫عنرص‬ ‫عرض‬ ‫يمكن‬ <input> ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ، ‫طرق‬ ‫بعدة‬ ‫خاصية‬ .‫النوع‬ :‫األمثلة‬ ‫بعض‬ ‫وهنا‬ ‫النص‬ ‫حقول‬ ( Text Fields ) ‫يحدد‬ <input type = "text"> .‫النص‬ ‫إلدخال‬‫السطر‬ ‫أحادي‬ ‫إدخال‬ ‫حقل‬ <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 69 ‫عنصر‬ <label> ‫ي‬ ‫ال‬ ‫حدد‬ ‫وسم‬ <label> .‫النموذج‬ ‫عناص‬ ‫من‬ ‫للعديد‬ ‫تسمية‬ ‫عنرص‬ ‫يساعد‬ <label> ‫فوق‬ ‫النقر‬ ‫ي‬ ‫ف‬ ‫صعوبة‬ ‫يجدون‬ ‫الذين‬ ‫ر‬ ‫المستخدمي‬ ‫ا‬ ً ‫أيض‬ )‫االختيار‬ ‫مربعات‬ ‫أو‬ ‫االختيار‬ ‫ار‬‫ر‬‫أز‬ ‫(مثل‬ ‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫مناطق‬ - ‫ينقر‬ ‫عندما‬ ‫ألنه‬ ‫عنرص‬ ‫داخل‬ ‫النص‬ ‫عىل‬ ‫المستخدم‬ <label> ‫ع‬‫مرب‬ / ‫االختيار‬‫زر‬ ‫يبدل‬ ‫فإنه‬ ، .‫االختيار‬ ‫ال‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫خاصية‬ for ‫ب‬ ‫وسم‬ <label> ‫ل‬ ‫مساوية‬ ‫خاصية‬ id ‫لع‬ ‫نرص‬ <input> .‫ا‬ ً‫مع‬ ‫لربطهما‬ Radio Button ‫يحدد‬ <input type = "radio"> ‫اختيار‬‫زر‬ ‫المفرد‬ . .‫ات‬‫ر‬‫الخيا‬ ‫من‬ ‫محدود‬ ‫عدد‬ ‫من‬ ‫واحد‬ ‫تحديد‬ ‫للمستخدم‬ ‫االختيار‬‫ار‬‫ر‬‫أز‬ ‫تتيح‬ <form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 70 Checkboxes ‫يحدد‬ <input type = "checkbox"> ‫اختيار‬ ‫ع‬‫مرب‬ . ‫ات‬‫ر‬‫خيا‬ ‫تحديد‬ ‫للمستخدم‬ ‫االختيار‬ ‫مربعات‬ ‫تتيح‬ ‫واحد‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫محدود‬ ‫عدد‬ ‫من‬ ‫ا‬‫ر‬‫الخيا‬ ‫من‬ ‫خيار‬ ‫أي‬ ‫تحديد‬ ‫عدم‬ ‫ر‬ ‫حت‬ ‫أو‬ ‫ت‬ . <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> ‫االرسال‬ ‫زر‬ The Submit Button ‫يحدد‬ <input type = "submit"> ‫معالج‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬ ‫إلرسال‬ ‫ا‬ً ‫زر‬ .‫النموذج‬ ‫ي‬ ‫نص‬ ‫برنامج‬ ‫مع‬ ‫الخادم‬ ‫عىل‬ ‫ملف‬ ‫عن‬ ‫عبارة‬ ‫النموذج‬ ‫معالج‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ .‫اإلدخال‬ ‫بيانات‬ ‫لمعالجة‬ ‫ي‬ ‫ف‬ ‫تحديد‬ ‫يتم‬ form-handler ‫ر‬ ‫عت‬ ‫خاصية‬ action .‫بالنموذج‬ ‫الخاصة‬ <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 71 ‫لـ‬ ‫االسم‬ ‫خاصية‬ <input> ‫عىل‬ ‫يحتوي‬ ‫أن‬ ‫يجب‬ ‫إدخال‬ ‫حقل‬ ‫كل‬‫أن‬ ‫الحظ‬ ‫خاصية‬ .‫إرسالها‬ ‫ليتم‬ ‫اسم‬ ‫حذف‬ ‫تم‬ ‫إذا‬ ‫خاصية‬ .‫اإلطالق‬ ‫عىل‬ ‫اإلدخال‬ ‫حقل‬ ‫قيمة‬ ‫إرسال‬ ‫يتم‬ ‫فلن‬ ،‫االسم‬ <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> Action Attribute ‫تحدد‬ ‫هذه‬ ‫ال‬ ‫خاصية‬ ‫اء‬‫ر‬‫اإلج‬ Action .‫النموذج‬ ‫إرسال‬ ‫عند‬ ‫تنفيذه‬ ‫المطلوب‬ ‫عىل‬ ‫المستخدم‬ ‫ينقر‬ ‫عندما‬ ‫الخادم‬ ‫عىل‬ ‫ملف‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫يتم‬ ، ‫عادة‬ .‫اإلرسال‬‫زر‬ ‫المثال‬ ‫ي‬ ‫ف‬ ،‫أدناه‬ ‫يسىم‬ ‫ملف‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫يتم‬ "action_page.php" :‫النموذج‬ ‫بيانات‬ ‫يعالج‬ ‫الخادم‬ ‫جانب‬ ‫من‬ ‫ي‬ ‫نص‬ ‫برنامج‬ ‫عىل‬ ‫الملف‬ ‫هذا‬ ‫يحتوي‬ <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 72 Target Attribute ‫ال‬ ‫تحدد‬ ‫خاصية‬ .‫النموذج‬ ‫إرسال‬ ‫بعد‬ ‫تلقيها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫االستجابة‬ ‫عرض‬ ‫مكان‬ ‫الهدف‬ ‫ال‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ‫خاصية‬ :‫التالية‬ ‫القيم‬ ‫إحدى‬ ‫عىل‬ ‫الهدف‬ Value Description _blank ‫جديدة‬ ‫نافذة‬ ‫في‬ ‫االستجابة‬ ‫تعرض‬ _self ‫االفتارضية‬ ‫القيمة‬ ‫وهي‬ ‫الصفحة‬ ‫نفس‬ ‫في‬ ‫االستجابة‬ ‫تعرض‬ _parent parent frame ‫االب‬ ‫االطار‬ ‫في‬ ‫االستجابة‬ ‫تعرض‬ <form action="/action_page.php" target="_blank"> • The Method Attribute ‫تحدد‬ ‫ال‬ ‫خاصية‬ Method ‫ال‬ ‫طريقة‬ HTTP ‫بيانات‬ ‫إرسال‬ ‫عند‬ ‫الستخدامها‬ .‫النموذج‬ ‫ات‬ ‫ر‬ ‫كمتغت‬‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫يمكن‬ (with method="get")URL ‫أو‬ ‫كمعاملة‬ ‫جسم‬ ‫ي‬ ‫ف‬ HTTP method="post"). ) ‫طريقة‬ HTTP ‫ي‬ ‫ه‬ ‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫عند‬ ‫اضية‬ ‫ر‬ ‫االفت‬ GET. <form action="/action_page.php" method="get"> ‫طريقة‬ POST <form action="/action_page.php" method="post">
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 73 Canvas Graphics ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <canvas> ‫ي‬ ‫ف‬ HTML .‫الويب‬ ‫صفحة‬ ‫عىل‬ ‫الرسومات‬ ‫لرسم‬ ‫باستخدام‬ ‫اليسار‬ ‫عىل‬ ‫الموجود‬ ‫الرسم‬ ‫إنشاء‬ ‫تم‬ <canvas>. :‫عناص‬ ‫أربعة‬ ‫ظهر‬ُ‫ي‬ ‫متعدد‬ ‫ونص‬ ، ‫األلوان‬ ‫متعدد‬ ‫مستطيل‬ ، ‫متدرج‬ ‫مستطيل‬ ، ‫أحمر‬ ‫مستطيل‬ .‫األلوان‬ ‫هو‬ ‫ما‬ HTML Canvas ‫؟‬ • ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <canvas> ‫ي‬ ‫ف‬ HTML ‫ر‬ ‫عت‬ ‫فائقة‬ ‫بشعة‬ ‫الرسومات‬ ‫لرسم‬ JavaScript. • ‫ي‬ ‫ف‬ ‫يوجد‬ Canvas ‫والنص‬ ‫والدوائر‬ ‫والمربعات‬ ‫ات‬‫ر‬‫المسا‬ ‫لرسم‬ ‫طرق‬ ‫عدة‬ .‫الصور‬ ‫وإضافة‬ ‫عىل‬ ‫أمثلة‬ canvas canvas ‫صفحة‬ ‫عىل‬ ‫مستطيلة‬ ‫منطقة‬ ‫ي‬ ‫ه‬ HTML. ‫تحتوي‬ ‫ال‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ canvas .‫محتوى‬ ‫عىل‬ ‫تحتوي‬ ‫وال‬ ‫حدود‬ ‫عىل‬ : ‫ي‬ ‫التاىل‬ ‫النحو‬ ‫عىل‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬‫يبدو‬ <canvas id="myCanvas" width="200" height="100"></canvas> ‫لوحة‬ ‫عىل‬ ‫مثال‬ ‫ي‬ ‫يىل‬ ‫فيما‬ canvas :‫فارغة‬ ‫أساسية‬ <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 74 ‫أضف‬ JavaScript ‫إنشاء‬ ‫بعد‬ canvas ‫إضافة‬ ‫عليك‬ ‫يجب‬ ، ‫مستطيلة‬ JavaScript .‫بالرسم‬ ‫للقيام‬ :‫األمثلة‬ ‫بعض‬ ‫وهنا‬ ‫مستقيم‬ ‫خط‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script> ‫دائرة‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </script>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 75 ‫نص‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script> ‫خطي‬ ‫تدرج‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 76 ‫هو‬ ‫ما‬ SVG ‫؟‬ ‫يرمز‬ SVG ‫إىل‬ Scalable Vector Graphics ‫ف‬ّ ‫يعر‬ SVG ‫الرسومات‬ ‫المعتمدة‬ ‫عىل‬ ‫االشعة‬ ‫ب‬ ‫وتكون‬ ‫تنسيق‬ XML. ‫يستخدم‬ SVG ‫للويب‬ ‫الرسومات‬ ‫لتعريف‬ ‫عنرص‬ HTML <svg> ‫لرسومات‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ SVG. ‫يحتوي‬ SVG ‫والنصوص‬ ‫والدوائر‬ ‫والمربعات‬ ‫ات‬‫ر‬‫المسا‬ ‫لرسم‬ ‫طرق‬ ‫عدة‬ ‫عىل‬ .‫الرسومية‬‫والصور‬ ‫دائرة‬ ‫رسم‬ SVG <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html> ‫مستطيل‬ ‫رسم‬ SVG <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke- width:10;stroke:rgb(0,0,0)" /> </svg>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 77 ‫الزوايا‬ ‫ملتف‬ ‫مستطيل‬ ‫رسم‬ SVG <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 78 ‫المتعددة‬ ‫الوسائط‬ ‫وأفالم‬ ‫وفيديوهات‬ ‫ر‬ ‫وموسيق‬ ‫صوت‬ ‫عن‬ ‫عبارة‬ ‫الويب‬ ‫عىل‬ ‫المتعددة‬ ‫الوسائط‬ .‫كة‬ ‫متحر‬ ‫ورسوم‬ ‫أي‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ .‫المختلفة‬ ‫التنسيقات‬ ‫من‬ ‫العديد‬ ‫ي‬ ‫ف‬ ‫المتعددة‬ ‫الوسائط‬ ‫ي‬ ‫ر‬ ‫تأن‬ ‫ومقاطع‬ ‫والصوت‬ ‫ر‬ ‫والموسيق‬ ‫الصور‬ ‫مثل‬ ، ‫رؤيته‬ ‫أو‬ ‫سماعه‬ ‫يمكنك‬ ‫ا‬ً‫تقريب‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ .‫والمزيد‬ ‫كة‬ ‫المتحر‬ ‫والرسوم‬ ‫واألفالم‬ ‫والتسجيالت‬ ‫الفيديو‬ ‫أنواع‬ ‫من‬ ‫متعددة‬ ‫وسائط‬ ‫عناص‬ ‫عىل‬ ‫ا‬ً‫غالب‬ ‫الويب‬ ‫صفحات‬ ‫تحتوي‬ ‫وأشكال‬ .‫مختلفة‬ ‫الفيديو‬ Video ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ HTML <video> .‫ويب‬ ‫صفحة‬ ‫عىل‬‫فيديو‬ ‫مقطع‬ ‫لعرض‬ ‫بتنسيق‬ ‫فيديو‬ ‫مقطع‬ ‫إلظهار‬ HTML ‫عنرص‬ ‫استخدم‬ ، <video> : <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ‫تعمل‬ ‫كيف‬ ‫تضيف‬ ‫خاصية‬ ‫التشغيل‬ ‫مثل‬ ، ‫الفيديو‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫التحكم‬ ‫عناص‬ .‫والصوت‬ ‫المؤقت‬ ‫واإليقاف‬ ‫ر‬ ‫تضمي‬ ‫ا‬ ً‫دائم‬ ‫الجيد‬ ‫من‬ ‫خواص‬ ‫االرتفاع‬ ‫ضبط‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫واالرتفاع‬ ‫العرض‬ .‫الفيديو‬ ‫تحميل‬ ‫أثناء‬ ‫الصفحة‬ ‫تومض‬ ‫فقد‬ ، ‫والعرض‬ ‫عنرص‬ ‫لك‬ ‫يتيح‬ <source> ‫للمتصفح‬ ‫يمكن‬ ‫بديلة‬ ‫فيديو‬ ‫ملفات‬ ‫تحديد‬ .‫معروف‬ ‫تنسيق‬ ‫أول‬ ‫المتصفح‬ ‫سيستخدم‬ .‫بينها‬ ‫من‬ ‫االختيار‬ ‫ي‬ ‫ر‬ ‫عالمت‬ ‫ر‬ ‫بي‬ ‫الموجود‬ ‫النص‬ ‫عرض‬ ‫يتم‬ ‫لن‬ <video> ‫و‬ </video> ‫ي‬ ‫ف‬ ‫إال‬ ‫عنرص‬ ‫تدعم‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المتصفحات‬ <video>
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 79 HTML <video> Autoplay ‫استخدم‬ ، ‫ا‬ً‫تلقائي‬ ‫فيديو‬ ‫مقطع‬ ‫تشغيل‬ ‫لبدء‬ ‫خاصية‬ : ‫ي‬ ‫التلقان‬ ‫التشغيل‬ <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ‫أضف‬ muted ‫تشغيل‬ ‫ببدء‬ ‫للسماح‬ ‫ي‬ ‫التلقان‬ ‫التشغيل‬ ‫بعد‬ ‫الصوت‬ ‫كتم‬ :)‫الصوت‬ ‫كتم‬‫(ولكن‬ ‫ا‬ً‫تلقائي‬ ‫الفيديو‬ <video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ‫الصوت‬ Audio ‫عنرص‬ ‫استخدم‬ ‫ي‬ ‫ر‬ ‫صون‬ ‫ملف‬ ‫لتشغيل‬ <audio> : <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> ‫صوت‬ HTML - ‫يعمل‬ ‫كيف‬ • ‫تضيف‬ ‫خاصية‬ ‫التشغيل‬ ‫مثل‬ ، ‫الصوت‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫التحكم‬ ‫عناص‬ .‫الصوت‬ ‫ومستوى‬ ‫المؤقت‬ ‫واإليقاف‬ • ‫عنرص‬ ‫لك‬ ‫يتيح‬ <source> ‫يمكن‬ ‫بديلة‬ ‫صوتية‬ ‫ملفات‬ ‫تحديد‬ ‫للمتصفح‬ .‫معروف‬ ‫تنسيق‬ ‫أول‬ ‫المتصفح‬ ‫سيستخدم‬ .‫بينها‬ ‫من‬ ‫االختيار‬ • ‫ي‬ ‫ر‬ ‫عالمت‬ ‫ر‬ ‫بي‬ ‫الموجود‬ ‫النص‬ ‫عرض‬ ‫يتم‬ ‫لن‬ <audio> ‫و‬ </audio> ‫ي‬ ‫ف‬ ‫إال‬ ‫عنرص‬ ‫تدعم‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المتصفحات‬ <audio>.
HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 80 ‫ي‬ ‫التلقائ‬ ‫التشغيل‬ HTML <audio> Autoplay ‫استخدم‬ ، ‫ا‬ً‫تلقائي‬ ‫ي‬ ‫ر‬ ‫صون‬ ‫ملف‬ ‫تشغيل‬ ‫لبدء‬ ‫خاصية‬ : ‫ي‬ ‫التلقان‬ ‫التشغيل‬ <audio controls autoplay> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> ‫الصوت‬ ‫كتم‬‫أضف‬ muted ‫لملفك‬ ‫للسماح‬ ‫ي‬ ‫التلقان‬ ‫التشغيل‬ ‫بعد‬ ‫ببدء‬ ‫ي‬ ‫ر‬ ‫الصون‬ :)‫الصوت‬ ‫كتم‬‫(ولكن‬ ‫ا‬ً‫تلقائي‬ ‫التشغيل‬ <audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 81 ‫ي‬ ‫الثائ‬ ‫الفصل‬ CSS
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 82 CSS - ‫ل‬ ‫اختصار‬ ( Cascading Style Sheet ) ‫ي‬ ‫وه‬ ‫لغة‬ ‫توصيفيه‬ ‫بمنح‬ ‫تقوم‬ .‫الجميل‬ ‫شكله‬ ‫الويب‬ ‫موقع‬ CSS ‫مستند‬ ‫لتصميم‬ ‫نستخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اللغة‬ ‫ي‬ ‫ه‬ HTML. ‫يصف‬ CSS ‫عناص‬ ‫عرض‬ ‫كيفية‬ HTML. ‫هو‬ ‫ما‬ CSS ‫؟‬ CSS ‫ي‬ ‫تعت‬ Cascading Style Sheets ‫يصف‬ CSS ‫عناص‬ ‫عرض‬ ‫كيفية‬ HTML ‫أخرى‬ ‫وسائط‬ ‫أو‬ ‫الشاشة‬ ‫عىل‬ . ‫يمكنه‬ ‫واحدة‬ ‫دفعة‬ ‫الويب‬ ‫صفحات‬ ‫من‬ ‫العديد‬ ‫تخطيط‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫باستخدام‬ CSS ‫ر‬ ‫بي‬ ‫والتباعد‬ ، ‫النص‬ ‫وحجم‬ ، ‫والخط‬ ، ‫اللون‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫يمكنك‬ ، ‫ألوا‬ ‫أو‬ ‫الخلفية‬ ‫صور‬ ‫ي‬ ‫ه‬ ‫وما‬ ، ‫وتخطيطها‬ ‫العناص‬ ‫وضع‬ ‫وكيفية‬ ، ‫العناص‬ ‫ن‬ ‫وأحجام‬ ‫لألجهزة‬ ‫المختلفة‬ ‫العرض‬ ‫وشاشات‬ ، ‫استخدامها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الخلفية‬ ‫ر‬ ‫بكثت‬ ‫ر‬ ‫أكت‬ ‫و‬ ، ‫المختلفة‬ ‫الشاشات‬ ! ‫استخدام‬ ‫يتم‬ CSS ‫أنماط‬ ‫لتحديد‬ ‫تنسيق‬ ‫ي‬ ‫ف‬ ‫بما‬ ، ‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫واالختالفات‬ ‫والتخطيط‬ ‫التصميم‬ ‫ذلك‬ ‫العرض‬ ‫ي‬ ‫ف‬ ‫ل‬ ‫أل‬ ‫جهزة‬ ‫الشاشة‬ ‫وأحجام‬ .‫المختلفة‬ body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 83 ‫حل‬ CSS ‫ة‬ ‫ر‬ ‫كبي‬‫مشكلة‬ ‫من‬ ‫القصد‬ ‫يكن‬ ‫لم‬ HTML !‫ويب‬ ‫صفحة‬ ‫لتنسيق‬ ‫عالمات‬ ‫عىل‬ ‫يحتوي‬ ‫أن‬ ‫ا‬ ً ‫أبد‬ ‫إنشاء‬ ‫تم‬ HTML :‫مثل‬ ، ‫الويب‬ ‫صفحة‬ ‫محتوى‬ ‫لوصف‬ <h1> ‫عنوان‬ ‫<هذا‬/h1> <p> ‫فقرة‬ ‫<هذه‬/p> ‫مثل‬ ‫عالمات‬ ‫إضافة‬ ‫تم‬ ‫عندما‬ |<font> ‫مواصفات‬ ‫إىل‬ ‫اللون‬ ‫وسمات‬ HTML 3.2 ، ‫صفحة‬ ‫كل‬‫إىل‬ ‫األلوان‬ ‫ومعلومات‬ ‫الخطوط‬ ‫إضافة‬ ‫تمت‬ ‫حيث‬ ، ‫وهذه‬ ‫عملية‬ .‫ومكلفة‬ ‫طويلة‬ ، ‫المشكلة‬ ‫هذه‬ ‫لحل‬ ‫قامت‬ W3C ‫اتحاد‬ ‫العالمية‬ ‫الويب‬ ‫شبكة‬ ‫بانشاء‬ CSS. ‫ال‬‫ز‬‫أ‬ CSS ‫صفحة‬ ‫من‬ ‫النمط‬ ‫تنسيق‬ HTML ! ‫يوفر‬ CSS !‫العمل‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫ي‬ ‫ما‬ ً ‫عادة‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫األنماط‬ ‫تعريفات‬ ‫حفظ‬ ‫تم‬ css ) ‫ي‬ ‫ر‬ ‫منفصل(خارج‬ . ‫ملف‬ ‫باستخدام‬ css ‫طريق‬ ‫عن‬ ‫بأكمله‬ ‫ويب‬ ‫موقع‬ ‫مظهر‬ ‫ر‬ ‫تغيت‬ ‫يمكنك‬ ، ‫ي‬ ‫ر‬ ‫الخارج‬ !‫فقط‬ ‫واحد‬ ‫ملف‬ ‫ر‬ ‫تغيت‬ ‫استخدام‬ CSS ‫يمك‬ ‫إضافة‬ ‫ن‬ CSS ‫مستندات‬ ‫إىل‬ HTML ‫طرق‬ ‫بثالث‬ : • ‫مضمنة‬ - ‫باستخدام‬ ‫خاصية‬ ‫عناص‬ ‫داخل‬ ‫النمط‬ HTML • ‫ي‬ ‫داخىل‬ - ‫عنرص‬ ‫باستخدام‬ <style> ‫قسم‬ ‫ي‬ ‫ف‬ <head> • ‫ي‬ ‫ر‬ ‫خارج‬ - ‫عنرص‬ ‫باستخدام‬ <link> ‫بملف‬ ‫لالرتباط‬ CSS ‫ي‬ ‫ر‬ ‫خارج‬ ‫إلضافة‬ ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫الطريقة‬ CSS ‫ملفات‬ ‫ي‬ ‫ف‬ ‫باألنماط‬ ‫االحتفاظ‬ ‫ي‬ ‫ه‬ CSS .‫الخارجية‬ ‫مضمنة‬ (Inline CSS) CSS ‫استخدام‬ ‫يتم‬ CSS ‫عنرص‬ ‫عىل‬ ‫فريد‬ ‫نمط‬ ‫لتطبيق‬ ‫المضمن‬ HTML ‫واحد‬ . ‫يستخدم‬ CSS ‫المضمن‬ ‫الخاصية‬ style ‫لعنرص‬ HTML.
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 84 ‫العنرص‬ ‫نص‬ ‫لون‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يضبط‬ <h1> ‫النص‬ ‫ولون‬ ، ‫األزرق‬ ‫اللون‬ ‫عىل‬ ‫بالعنرص‬ ‫الخاص‬ <p> :‫األحمر‬ ‫اللون‬ ‫إىل‬ <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> CSS ‫داخلي‬ ( Internal CSS ) ‫استخدام‬ ‫يتم‬ CSS ‫لصفحة‬ ‫نمط‬ ‫لتحديد‬ ‫ي‬ ‫داخىل‬ HTML ‫واحدة‬ . ‫تعريف‬ ‫يتم‬ CSS ‫قسم‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫داخىل‬ <head> ‫لصفحة‬ HTML ‫عنرص‬ ‫داخل‬ ، <style>. ‫عناص‬ ‫لجميع‬ ‫النص‬ ‫لون‬ ‫ر‬ ‫بتعيي‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يقوم‬ <h1> ) ‫إىل‬ )‫الصفحة‬ ‫تلك‬ ‫ي‬ ‫ف‬ ‫عناص‬ ‫لجميع‬ ‫النص‬ ‫ولون‬ ، ‫األزرق‬ ‫اللون‬ <p> ‫إىل‬ ‫باإلضافة‬ .‫األحمر‬ ‫اللون‬ ‫إىل‬ ‫أزرق‬ " ‫خلفية‬ ‫بلون‬ ‫الصفحة‬ ‫عرض‬ ‫سيتم‬ ، ‫ذلك‬ ‫باهت‬ :" <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 85 CSS ‫خارجي‬ ( External CSS ) ‫من‬ ‫للعديد‬ ‫النمط‬ ‫لتحديد‬ ‫خارجية‬ ‫أنماط‬ ‫ورقة‬ ‫استخدام‬ ‫يتم‬ ‫صفحات‬ HTML. ‫قسم‬ ‫ي‬ ‫ف‬ ‫إليها‬ ‫ا‬ ً ‫ارتباط‬ ‫أضف‬ ، ‫خارجية‬ ‫أنماط‬ ‫ورقة‬ ‫الستخدام‬ <head> ‫لكل‬ ‫صفحة‬ HTML : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ‫الملف‬ ‫يحتوي‬ ‫أال‬ ‫يجب‬ .‫نصوص‬ ‫محرر‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫الخارجية‬ ‫األنماط‬ ‫ورقة‬ ‫كتابة‬‫يمكن‬ ‫كود‬‫أي‬ ‫عىل‬ HTML ‫بامتداد‬ ‫حفظه‬ ‫ويجب‬ ، .css ‫ملف‬ ‫عليه‬‫يبدو‬ ‫ما‬ ‫هذا‬ styles.css "styles.css": body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 86 ‫متعددة‬ ‫نمط‬ ‫اق‬‫ر‬‫أو‬ ( Multiple Style Sheets ) ‫أنماط‬ ‫اق‬‫ر‬‫أو‬ ‫ي‬ ‫ف‬ )‫(العنرص‬ ‫المحدد‬ ‫لنفس‬ ‫الخصائص‬ ‫بعض‬ ‫تحديد‬ ‫تم‬ ‫إذا‬ ،‫مختلفة‬ ‫أنماط‬ ‫ورقة‬ ‫آخر‬ ‫من‬ ‫القيمة‬ ‫استخدام‬ ‫فسيتم‬ style sheet . :‫مثال‬ ‫للعنرص‬ ‫ي‬ ‫التاىل‬ ‫النمط‬ ‫لها‬ ‫الخارجية‬ ‫األنماط‬ ‫ورقة‬ ‫أن‬ ‫ض‬ ‫ر‬ ‫افت‬ <h1> : h1 { color: navy; } ‫للعنرص‬ ‫ي‬ ‫التاىل‬ ‫النمط‬ ‫عىل‬ ‫ا‬ ً ‫أيض‬ ‫تحتوي‬ ‫الداخلية‬ ‫األنماط‬ ‫ورقة‬ ‫أن‬ ‫ض‬ ‫ر‬ ‫افت‬ ، ‫ذلك‬ ‫بعد‬ <h1>: h1 { color: orange; } ‫فستكون‬ ، ‫الخارجية‬ ‫األنماط‬ ‫بورقة‬ ‫االرتباط‬ ‫بعد‬ ‫ي‬ ‫الداخىل‬ ‫النمط‬ ‫تحديد‬ ‫تم‬ ‫إذا‬ ‫عناص‬ <h1> " ‫برتقالية‬ :" <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> <style> h1 { color: orange; } </style> </head> ‫ي‬ ‫الداخىل‬ ‫النمط‬ ‫تحديد‬ ‫تم‬ ‫إذا‬ ‫قبل‬ ‫فستكون‬ ، ‫الخارجية‬ ‫األنماط‬ ‫بورقة‬ ‫االرتباط‬ ‫عناص‬ <h1> " " navy
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 87 ‫ي‬ ‫متتال‬ ‫ترتيب‬ ( Cascading Order ) ‫لعنرص‬ ‫محدد‬ ‫نمط‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫هناك‬ ‫يكون‬ ‫عندما‬ ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫النمط‬‫هو‬ ‫ما‬ HTML ‫؟‬ " ‫سيتم‬ ‫ال‬ " ‫ي‬ ‫تتاىل‬ Cascading ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫األنماط‬ ‫جميع‬ ‫ترتب‬ ‫ا‬ ً ‫وفق‬ ، ‫التالية‬ ‫للقواعد‬ ‫االولوية‬ ‫حسب‬ : 1 . ‫عنرص‬ ‫داخل‬ ‫مضمن‬ ‫نمط‬ HTML) ) 2 . )‫أس‬‫ر‬‫ال‬ ‫قسم‬ ‫ي‬ ‫(ف‬ ‫والداخلية‬ ‫الخارجية‬ ‫األنماط‬ ‫اق‬‫ر‬‫أو‬ 3 . ‫المت‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫صفح‬ ‫الخارجية‬ ‫األنماط‬ ‫ي‬ ‫يلغ‬ ‫وسوف‬ ، ‫القصوى‬ ‫األولوية‬ ‫له‬ ‫المضمن‬ ‫النمط‬ ‫فإن‬ ، ‫لذلك‬ .‫المتصفح‬ ‫اضيات‬ ‫ر‬ ‫وافت‬ ‫والداخلية‬ ‫الربط‬ ‫ب‬ CSS ‫ي‬ ‫ر‬ ‫خارج‬ ( Link to External CSS ) ‫بعنوان‬ ‫الخارجية‬ ‫األنماط‬ ‫اق‬‫ر‬‫أو‬ ‫إىل‬ ‫الرجوع‬ ‫يمكن‬ URL ‫بمسار‬ ‫أو‬ ‫كامل‬ ‫ي‬ ‫ر‬ ‫نست‬ .‫الحالية‬ ‫الويب‬ ‫بصفحة‬ <link rel="stylesheet" href="https://www. .com/html/styles.css"> <link rel="stylesheet" href="/html/styles.css"> <link rel="stylesheet" href="styles.css">
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 88 ‫كتابة‬ ‫قواعد‬ CSS ‫قاعدة‬ ‫تتكون‬ CSS ‫محدد‬ ‫من‬ ( selector ) ‫إعالن‬ ‫وكتلة‬ ( declaration block ) . ‫عنرص‬ ‫إىل‬ ‫المحدد‬ ‫ر‬ ‫يشت‬ HTML .‫تنسيقه‬ ‫تريد‬ ‫الذي‬ ‫عىل‬ ‫ح‬ ‫ي‬‫رص‬‫الت‬ ‫كتلة‬‫تحتوي‬ ( ‫ح‬ ‫ي‬‫رص‬‫ت‬ declaration ) ‫بفواصل‬ ‫مفصولة‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ .‫منقوطة‬ ‫كل‬‫يتضمن‬ ‫ح‬ ‫ي‬‫رص‬‫ت‬ ‫خاصية‬ ‫اسم‬ CSS . ‫ر‬ ‫بنقطتي‬ ‫مفصولة‬ ‫وقيمة‬ ‫فصل‬ ‫يتم‬ ‫يحات‬‫رص‬‫ت‬ CSS ، ‫منقوطة‬ ‫بفواصل‬ ‫المتعددة‬ ‫كتل‬‫وتحيط‬ ‫ح‬ ‫ي‬‫رص‬‫الت‬ )‫(االعالن‬ .‫معقوفة‬ ‫بأقواس‬ ‫عناص‬ ‫جميع‬ ‫محاذاة‬ ‫ستتم‬ ، ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ <p> ‫أحمر‬ ‫بلون‬ ، ‫المنتصف‬ ‫إىل‬ :‫للنص‬ p { color: red; text-align: center; } ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ p ‫ي‬ ‫ف‬ ‫محدد‬ CSS ( ‫عنرص‬ ‫إىل‬ ‫ر‬ ‫يشت‬ HTML :‫تنسيقه‬ ‫تريد‬ ‫الذي‬ <p> ‫اللون‬ color ، ‫خاصية‬‫هو‬ ‫واألحمر‬ red ‫الخاصية‬ ‫قيمة‬ ‫هو‬ ‫النص‬ ‫محاذاة‬ text-align ، ‫خاصية‬ ‫الوسط‬‫و‬ center ‫الخاصية‬ ‫قيمة‬ ‫هو‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 89 ‫المحددات‬ CSS ‫محدد‬ ‫االسم‬ ‫ر‬ ‫يعي‬ ‫عناص‬‫العنرص‬ ‫محدد‬ HTML .‫العنرص‬ ‫اسم‬ ‫عىل‬ ً‫بناء‬ p { text-align: center; color: red; } ‫المعرف‬ ‫محدد‬ id Selector ‫محدد‬ ‫يستخدم‬ ‫المعرف‬ ‫ال‬ ‫خاصية‬ id ‫لعنرص‬ HTML . ‫ر‬ ‫معي‬ ‫عنرص‬ ‫لتحديد‬ ‫عنرص‬ ‫معرف‬ id ‫لتحديد‬ ‫الهوية‬ ‫محدد‬ ‫استخدام‬ ‫يتم‬ ‫لذلك‬ ، ‫الصفحة‬ ‫داخل‬ ‫فريد‬ !‫واحد‬ ‫فريد‬ ‫عنرص‬ ‫بمعرف‬ ‫عنرص‬ ‫لتحديد‬ id ‫بمعرف‬ ‫ا‬ ً‫متبوع‬ ، )#( ‫التجزئة‬ ‫حرف‬ ‫اكتب‬ ، ‫ر‬ ‫معي‬ id .‫العنرص‬ ‫قاعدة‬ ‫تطبيق‬ ‫سيتم‬ CSS ‫عنرص‬ ‫عىل‬ ‫أدناه‬ HTML ‫بالمعرف‬ para1 #para1 { text-align: center; color: red; } ‫الصف‬ ‫محدد‬ class Selector ‫محدد‬ ‫يحدد‬ ‫الصف‬ ‫عناص‬ HTML ‫ب‬ ‫ال‬ ‫واسطة‬ ‫خاصية‬ class ‫صف‬ . ‫عناص‬ ‫لتحديد‬ ‫بصف‬ ‫ر‬ ‫معي‬ ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، ).( ‫نقطة‬ ‫حرف‬ ‫اكتب‬ ، ‫الصف‬ . ‫عناص‬ ‫جميع‬ ‫ستكون‬ ، ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ HTML ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ class = "center" ‫للوسط‬ ‫ومحاذاة‬ ‫األحمر‬ ‫باللون‬ .center { text-align: center; color: red; } ‫عناص‬ ‫أن‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ HTML ‫محد‬ ‫تتأثر‬ ‫أن‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ه‬ ‫فقط‬ ‫دة‬ ‫ب‬ ‫الصف‬ .
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 90 ‫فقط‬ ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ <p> ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ class = "center" ‫ستكون‬ ‫للوسط‬ ‫ومحاذاة‬ ‫اء‬‫ر‬‫حم‬ : p.center { text-align: center; color: red; } ‫عناص‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫يمكن‬ HTML .‫واحدة‬ ‫فئة‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ <p class="center large">This paragraph refers to two classes.</p> ‫العام‬ ‫المحدد‬ CSS The CSS Universal Selector) ) ‫عناص‬ ‫جميع‬ )*( ‫العام‬ ‫المحدد‬ ‫يحدد‬ HTML .‫الصفحة‬ ‫عىل‬ * { text-align: center; color: blue; } ‫تجميع‬ ‫محدد‬ CSS ( The CSS Grouping Selector ) ‫عناص‬ ‫جميع‬ ‫التجميع‬ ‫محدد‬ ‫يحدد‬ HTML .‫األنماط‬ ‫تعريفات‬ ‫بنفس‬ ‫كود‬‫إىل‬‫انظر‬ CSS ‫(العناص‬ ‫ي‬ ‫التاىل‬ h1 ‫و‬ h2 ‫و‬ p :)‫النمط‬ ‫تعريفات‬ ‫نفس‬ ‫لها‬ h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center;
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 91 color: red; } .‫الكود‬ ‫لتقليل‬ ‫المحددات‬ ‫تجميع‬ ‫األفضل‬ ‫من‬ ‫سيكون‬ .‫بفاصلة‬ ‫محدد‬ ‫كل‬ ‫ر‬ ‫بي‬ ‫افصل‬ ، ‫المحددات‬ ‫لتجميع‬ :‫أعاله‬ ‫الكود‬ ‫من‬ ‫المحددات‬ ‫بتجميع‬ ‫قمنا‬ ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ h1, h2, p { text-align: center; color: red; } ‫التعليقات‬ CSS Comments ‫تساعد‬ ‫وقد‬ ، ‫الكود‬ ‫ح‬ ‫ر‬ ‫لش‬ ‫التعليقات‬ ‫ستخدم‬ ُ ‫ت‬ ‫ك‬ ‫وقت‬ ‫ي‬ ‫ف‬ ‫الكود‬‫بتحرير‬ ‫تقوم‬ ‫عندما‬ ‫الحق‬ . ‫المتصفحات‬ ‫قبل‬ ‫من‬ ‫التعليقات‬ ‫تجاهل‬ ‫يتم‬ . ‫تعليق‬ ‫وضع‬ ‫يتم‬ CSS < ‫عنرص‬ ‫داخل‬ style> :/ * ‫ب‬ ‫ي‬ ‫وينته‬ * / ‫ب‬ ‫ويبدأ‬ ، /* This is a single-line comment */ p { color: red; } ‫إضافة‬ ‫يمكنك‬ ‫الكود‬ ‫ي‬ ‫ف‬ ‫تريد‬ ‫أينما‬ ‫تعليقات‬ : p { color: red; /* Set text color to red */ } :‫أسطر‬ ‫عدة‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ ‫التعليقات‬ ‫تمتد‬ ‫أن‬ ‫يمكن‬ /* This is a multi-line comment */ p { color: red; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 92 ‫وأحجام‬ ‫وخطوط‬ ‫ألوان‬ CSS ‫خصائص‬ ‫بعض‬ ‫نوضح‬ ‫سوف‬ ، ‫هنا‬ CSS .‫االستخدام‬ ‫شائعة‬ ‫خاصية‬ ‫تحدد‬ color ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫النص‬ ‫لون‬ . ‫خاصية‬ ‫تحدد‬ font-family ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫الخط‬ . ‫خاصية‬ ‫تحدد‬ font-size ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫النص‬ ‫حجم‬ . <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 93 ( ‫الخط‬ ‫لون‬ Text Color ) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ Color ‫اللون‬ .‫النص‬ ‫لون‬ ‫ر‬ ‫لتعيي‬ :‫بواسطة‬ ‫محدد‬ • ‫لون‬ ‫اسم‬ - " ‫مثل‬ red " • ‫قيمة‬ ‫ية‬ ‫ر‬ ‫عش‬ ‫الست‬ - " ‫مثل‬ ff0000 # " • ‫قيمة‬ RGB - ‫الخلفية‬ ‫ولون‬ ‫النص‬ ‫لون‬ ‫اللون‬ ‫وخاصية‬ ‫الخلفية‬ ‫لون‬ ‫خاصية‬ ‫من‬ ً ‫كال‬‫نحدد‬ ، ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫لكامل‬ ‫النص‬ ‫الصفحة‬ : body { background-color: lightgrey; color: blue; } h1 { background-color: black; color: white; } ( ‫نص‬ ‫محاذاة‬ CSS Text Alignment ) .‫للنص‬ ‫األفقية‬ ‫المحاذاة‬ ‫ر‬ ‫لتعيي‬ ‫النص‬ ‫محاذاة‬ ‫خاصية‬ ‫استخدام‬ ‫يتم‬ .‫ضبطه‬ ‫أو‬ ‫توسيطه‬ ‫أو‬ ‫ر‬ ‫اليمي‬‫أو‬ ‫اليسار‬ ‫إىل‬ ‫النص‬ ‫محاذاة‬ ‫يمكن‬ ، ‫للوسط‬ ‫محاذاة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫إىل‬ ‫(المحاذاة‬ ‫ر‬ ‫واليمي‬ ‫لليسار‬ ‫ا‬ً‫محاذي‬ ‫ا‬ ً ‫ونص‬ ‫إىل‬ ‫والمحاذاة‬ ، ‫ر‬ ‫اليمي‬ ‫إىل‬‫اليسار‬ ‫من‬ ‫النص‬ ‫اتجاه‬ ‫كان‬‫إذا‬ ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫تكون‬ ‫اليسار‬ :)‫اليسار‬ ‫إىل‬ ‫ر‬ ‫اليمي‬ ‫من‬ ‫النص‬ ‫اتجاه‬ ‫كان‬‫إذا‬ ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫تكون‬ ‫ر‬ ‫اليمي‬ h1 { text-align: center; } h2 { text-align: left; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 94 h3 { text-align: right; } " ‫عىل‬ ‫النص‬ ‫محاذاة‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫عندما‬ justify ‫سطر‬ ‫كل‬‫تمديد‬ ‫يتم‬ ، " ‫مستقيمة‬ ‫واليشى‬ ‫اليمت‬ ‫الهوامش‬ ‫وتكون‬ ، ٍ ‫متساو‬ ‫عرض‬ ‫سطر‬ ‫لكل‬ ‫يكون‬ ‫بحيث‬ :)‫والصحف‬ ‫المجالت‬ ‫ي‬ ‫ف‬ ‫الحال‬ ‫هو‬ ‫(كما‬ div { text-align: justify; } ‫النص‬ ‫اتجاه‬ ‫خصائص‬ ‫استخدام‬ ‫يمكن‬ direction :‫للعنرص‬ ‫النص‬ ‫اتجاه‬ ‫ر‬ ‫لتغيت‬ p { direction: rtl; } (‫عمودي‬ ‫انحياز‬ Vertical Alignment ) .‫للعنرص‬ ‫أسية‬‫ر‬‫ال‬ ‫المحاذاة‬ ‫أسية‬‫ر‬‫ال‬ ‫المحاذاة‬ ‫خاصية‬ ‫تحدد‬ :‫النص‬ ‫ي‬ ‫ف‬ ‫لصورة‬ ‫أسية‬‫ر‬‫ال‬ ‫المحاذاة‬ ‫ضبط‬ ‫كيفية‬‫المثال‬ ‫هذا‬ ‫يوضح‬ img.top { vertical-align: top; } img.middle { vertical-align: middle; } img.bottom { vertical-align: bottom; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 95 ‫نص‬ ‫زخرفة‬ (CSS Text Decoration) ‫ستخدم‬ ُ ‫ت‬ text-decoration .‫النص‬ ‫من‬ ‫التها‬‫ز‬‫إ‬ ‫أو‬ ‫الزخارف‬ ‫ر‬ ‫لتعيي‬ text-decoration: none; ‫استخدامه‬ ‫يتم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ‫ا‬ :‫الروابط‬ ‫من‬ ‫ر‬ ‫التسطت‬ ‫الة‬‫ز‬‫إل‬ a { text-decoration: none; } The other text-decoration values are used to decorate text: h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } : ‫الزخرفة‬ ‫ولون‬ ‫شكل‬ ‫ر‬ ‫تغيت‬ ‫يمكن‬ ً ‫أيضا‬ text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: red; ‫النص‬ ‫تحويل‬ ( CSS Text Transformation ) ‫خاصية‬ ‫استخدام‬ ‫يتم‬ text-transform ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫والصغت‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫األحرف‬ ‫لتحديد‬ .‫النص‬ ‫كل‬‫لتحويل‬ ‫استخدامه‬ ‫يمكن‬ ‫األحرف‬ ‫الحرف‬ ‫ر‬ ‫تكبت‬ ‫أو‬ ، ‫ة‬ ‫ر‬ ‫صغت‬ ‫أو‬ ‫ة‬ ‫ر‬ ‫كبت‬‫أحرف‬ ‫إىل‬ :‫كلمة‬‫كل‬‫من‬ ‫األول‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 96 p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } ( ‫نص‬ ‫تباعد‬ CSS Text Spacing ) ‫للنص‬ ‫البادئة‬ ‫المسافة‬ ( Text Indentation ) ‫من‬ ‫األول‬‫للسطر‬ ‫البادئة‬ ‫المسافة‬ ‫لتحديد‬ ‫للنص‬ ‫البادئة‬ ‫المسافة‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ :‫النص‬ p { text-indent: 50px; } ( ‫األحرف‬ ‫تباعد‬ Letter Spacing ) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ .‫النص‬ ‫ي‬ ‫ف‬ ‫األحرف‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫لتحديد‬ ‫األحرف‬ ‫تباعد‬ :‫األحرف‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫تقليل‬ ‫أو‬ ‫زيادة‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 97 ( ‫خط‬ ‫ارتفاع‬ Line Height ) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ line-height :‫السطور‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫لتحديد‬ p.small { line-height: 0.8; } p.big { line-height: 1.8; } ( ‫نص‬ ‫ظل‬ CSS Text Shadow ) ‫خاصية‬ ‫تضيف‬ text-shadow .‫النص‬ ‫إىل‬ ‫الظل‬ ، ‫له‬ ‫استخدام‬ ‫أبسط‬ ‫ي‬ ‫ف‬ ( ‫ي‬ ‫ر‬ ‫األفق‬ ‫الظل‬ ‫تحديد‬ ‫فقط‬ ‫يمكنك‬ 2 ‫ي‬ ‫أش‬‫ر‬‫ال‬ ‫والظل‬ )‫بكسل‬ ( 2 :)‫بكسل‬ h1 { text-shadow: 2px 2px; } :‫الظل‬ ‫إىل‬ )‫(أحمر‬ ‫ا‬ ً ‫لون‬ ‫أضف‬ ، ‫ذلك‬ ‫بعد‬ h1 { text-shadow: 2px 2px red; } ‫الخطوط‬ ‫خاصية‬ ( The CSS font-family Property ) ‫ي‬ ‫ف‬ CSS ‫خاصية‬ ‫نستخدم‬ ، font-family .‫النص‬ ‫خط‬ ‫لتحديد‬ .p1 { font-family: "Times New Roman", Times, serif; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 98 ‫خط‬ ‫نمط‬ (CSS Font Style) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ font-style .‫مائل‬ ‫نص‬ ‫لتحديد‬ ‫الغالب‬ ‫ي‬ ‫ف‬ normal - ‫ي‬ ‫طبيغ‬ ‫بشكل‬ ‫النص‬ ‫عرض‬ ‫يتم‬ italic - ‫مائل‬ ‫بخط‬ ‫النص‬‫يظهر‬ p.normal { font-style: normal; } p.italic { font-style: italic; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 99 ‫صندوق‬ ‫نموذج‬ CSS Box Model ‫ي‬ ‫ف‬ CSS ‫التصميم‬ ‫عن‬ ‫الحديث‬ ‫عند‬ "‫الصندوق‬ ‫"نموذج‬ ‫مصطلح‬ ‫ستخدم‬ُ‫ي‬ ، .‫والتخطيط‬ ‫عنرص‬ ‫كل‬‫حول‬ ‫يلتف‬ ‫ع‬‫مرب‬ ‫األساس‬ ‫ي‬ ‫ف‬ ‫هو‬ HTML. ‫والحدود‬ ‫الهوامش‬ :‫من‬ ‫يتكون‬ ‫أدناه‬ ‫الصورة‬ . ‫ي‬ ‫الفعىل‬ ‫والمحتوى‬ ‫وكة‬ ‫ر‬ ‫المت‬ ‫والمساحة‬ :‫الصندوق‬ ‫نموذج‬ ‫توضح‬ :‫المختلفة‬ ‫اء‬‫ز‬‫األج‬ ‫ح‬ ‫ر‬ ‫رس‬ Content - ‫والصور‬ ‫النص‬ ‫يظهر‬ ‫حيث‬ ، ‫ع‬‫المرب‬ ‫محتوى‬ Padding - ‫شفاف‬ ‫الحشو‬ .‫المحتوى‬ ‫حول‬ ‫مساحة‬ ‫يزيل‬ Border ‫الحدود‬ - ‫والمحتوى‬ ‫وكة‬ ‫ر‬ ‫المت‬ ‫المساحة‬ ‫حول‬‫يدور‬ ‫حد‬ Margin ‫الهامش‬ - ‫الحد‬ ‫خارج‬ ‫منطقة‬ ‫يمسح‬ ‫ود‬ ‫شفاف‬ ‫الهامش‬ . ‫لنا‬ ‫يتيح‬ ‫حد‬ ‫إضافة‬ ‫الصندوق‬ ‫نموذج‬ ‫ود‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫وتحديد‬ ‫العناص‬ ‫حول‬ .‫العناص‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 100 div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } ‫حدود‬ CSS ( CSS border ) ‫خاصية‬ ‫تحدد‬ CSS border ‫عنرص‬ ‫حول‬ ‫ا‬ ً ‫حد‬ HTML. p { border: 2px solid powderblue; } ‫و‬ ‫ي‬ ‫اليميت‬ ‫و‬ ‫ي‬ ‫السفىل‬ ‫و‬ ‫العلوي‬ ‫الحدود‬ ‫من‬ ‫لكل‬ ‫مختلف‬ ‫بتنسيق‬ ‫حد‬ ‫عمل‬ ‫يمكن‬ ‫اليساري‬ border-top: 1px solid red; border-bottom: 3px solid green; border-right: 2px solid blue; border-left: 4px solid yellow; ‫المسمط‬ ‫النمط‬ ‫ر‬ ‫غت‬ ‫يكون‬ ‫ان‬ ‫يمكن‬ ‫الحدود‬ ‫نمط‬ ‫ان‬ ‫كما‬ solid ‫مثل‬ dotted ‫و‬ dashed ‫و‬ solid ‫و‬ double ‫و‬ groove ‫و‬ ridge ‫و‬ inset ‫و‬ outset ‫و‬ none ‫و‬ hidden
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 101 ‫حشوة‬ CSS ( CSS Padding ) ‫ي‬ ‫ف‬‫الحشو‬ ‫خاصية‬ ‫تحدد‬ CSS .‫والحد‬ ‫النص‬ ‫ر‬ ‫بي‬ )‫(المسافة‬ ‫وكة‬ ‫ر‬ ‫المت‬ ‫المساحة‬ ‫لكل‬ ‫هامش‬ ‫إعطاء‬ ‫فيمكن‬ ‫الجهات‬ ‫بكل‬ ‫موحد‬ ‫ر‬ ‫غي‬ ‫يكون‬ ‫ان‬ ‫يمكن‬ ‫الحشو‬ ‫ان‬ ‫كما‬ ‫ي‬ ‫كالتال‬‫اليسارية‬ ‫و‬ ‫السفلية‬ ‫و‬ ‫واليمينية‬ ‫العلوية‬ ‫الهوامش‬ ‫من‬ /* padding: top right bottom left; */ padding: 10px 20px 30px 40px; ‫هامش‬ CSS ( CSS Margin ) ‫هامش‬ ‫خاصية‬ ‫تحدد‬ CSS .‫الحدود‬ ‫خارج‬ )‫(مسافة‬ ‫ا‬ ً ‫هامش‬ p { border: 2px solid powderblue; margin: 50px; } ‫الصندوق‬ ‫من‬ ‫األربعة‬ ‫الجهات‬ ‫لكل‬ ‫ادي‬‫ر‬‫اف‬ ‫بشكل‬ ‫يعط‬ ‫ان‬ ‫يمكن‬ ‫الهامش‬ ً ‫أيضا‬ ‫ي‬ ‫كلتاىل‬ margin-top: 10; margin-right: 20; margin-bottom: 30; margin-left: 40; /* or margin: top right bottom left; */ margin: 10px 20px 30px 40px;
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 102 ‫مثال‬ .btn { background-color: purple; border: 3px solid transparent; color: #FFFFFF; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 16px; font-family: cursive; border-radius: 3px; } ‫إخفاء‬ ‫العناصر‬ ‫من‬ ‫الممكن‬ ‫إخفاء‬ ‫عناص‬ HTML ‫باستخدام‬ CSS ‫ر‬ ‫بطريقتي‬ : ‫إسناد‬ ‫القيمة‬ none ‫إىل‬ ‫الخاصية‬ display . ‫إسناد‬ ‫القيمة‬ hidden ‫إىل‬ ‫الخاصية‬ visibility . ‫واالختالف‬ ‫بينهما‬ ‫الطريقة‬ ‫أن‬ ‫الثانية‬ ‫ي‬ ‫تخق‬ ‫العنرص‬ ‫مع‬ ‫الحفاظ‬ ‫عىل‬ ‫ر‬ ‫الحت‬ ‫الذي‬ ‫يشغله‬ ً ‫فارغا‬ ‫أما‬ ‫الطريقة‬ ‫األوىل‬ ‫ي‬ ‫تخق‬ ‫العنرص‬ ‫مع‬ ‫عدم‬ ‫الحفاظ‬ ‫عىل‬ ‫ر‬ ‫الحت‬ ‫الذي‬ ‫يشغله‬ ‫مما‬ ‫يؤثر‬ ‫عىل‬ ‫تموضع‬ ‫العناص‬ . display: none; visibility: hidden;
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 103 ‫أنواع‬ ‫عرض‬ ‫العناصر‬ ‫يتم‬ ‫عرض‬ ‫العناص‬ ‫ي‬ ‫ف‬ HTML ‫ر‬ ‫بطريقتي‬ : ‫كتلة‬‫بشكل‬ block : ‫حيث‬ ‫يتم‬ ‫ول‬‫الت‬ ‫ا‬‫ر‬‫سط‬ ‫قبل‬ ‫العنرص‬ ‫و‬ ‫ول‬‫الت‬ ‫سطر‬ ‫بعد‬ ‫العنرص‬ ‫و‬ ‫هذه‬ ‫الحالة‬ ‫مع‬ ‫اها‬‫ر‬‫ن‬ ‫مثل‬ ‫عناص‬ <h1> ‫و‬ <p> ‫و‬ <div> ... ‫إلخ‬ . ‫سطري‬ ‫بشكل‬ inline : ‫حيث‬ ‫يتم‬ ‫وضع‬ ‫العنرص‬ ‫ضمن‬ ‫نفس‬ ‫السطر‬ ‫دون‬ ‫الحاجة‬ ‫ل‬ ‫ل‬ ‫ول‬‫ت‬ ‫س‬ ‫طر‬ ‫و‬ ‫هذه‬ ‫الحالة‬ ‫مع‬ ‫اها‬‫ر‬‫ن‬ ‫عناص‬ ‫مثل‬ <a> ‫و‬ <span> ... ‫إلخ‬ . ‫تسمح‬ CSS ‫ر‬ ‫بتغيت‬ ‫نوع‬ ‫العرض‬ ‫للعناص‬ ‫من‬ block ‫إىل‬ inline ‫و‬ ‫بالعكس‬ ‫عن‬ ‫طريق‬ ‫إسناد‬ ‫إحدى‬ ‫ر‬ ‫القيمتي‬ block ‫و‬ inline ‫إىل‬ ‫الخاصية‬ display . display: inline-block ‫قيمة‬ :‫العرض‬ ‫مضمنة‬ ‫كتلية‬ The display: inline-block Value ‫بالمقارنة‬ ‫بالنسبة‬ : inline-block :‫العرض‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ‫يتمثل‬ ، ‫تسمح‬ inline-bloc .‫العنرص‬ ‫عىل‬ ‫واالرتفاع‬ ‫العرض‬ ‫ر‬ ‫بتعيي‬ ‫مع‬ ، ‫ا‬ ً ‫أيض‬ inline-block ‫الهوامش‬ ‫ام‬ ‫ر‬ ‫احت‬ ‫يتم‬ ، / ‫والسفلية‬ ‫العلوية‬‫الحشو‬ . ‫بالمقارنة‬ block ، :‫العرض‬ ‫أن‬ ‫هو‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ‫فإن‬ inline-block ‫يضيف‬ ‫ال‬ ‫أن‬ ‫يمكن‬ ‫لذلك‬ ، ‫العنرص‬ ‫بعد‬ ‫سطر‬ ‫فاصل‬ ‫يتموضع‬ .‫األخرى‬ ‫العناص‬ ‫بجوار‬ ‫العنرص‬ :‫للعرض‬ ‫المختلف‬ ‫السلوك‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ inline ، display: inline-block and display: block:
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 104 span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 105 ‫خاصية‬ ‫التموضع‬ position ‫ال‬ ‫طريقة‬ ‫نوع‬ ‫الموضع‬ ‫خاصية‬ ‫تحدد‬ ‫ت‬ ‫أو‬ ‫(ثابت‬‫لعنرص‬ ‫المستخدمة‬ ‫موضع‬ ‫أو‬ ‫ي‬ ‫ر‬ ‫نست‬ .)‫ثابت‬ ‫أو‬ ‫مطلق‬ ‫أو‬ ‫ثابت‬ :‫للموضع‬ ‫مختلفة‬ ‫قيم‬ ‫خمس‬ ‫هناك‬ • static • relative • fixed • absolute • sticky .‫واليمت‬ ‫واليشى‬ ‫والسفلية‬ ‫العلوية‬ ‫الخصائص‬ ‫باستخدام‬ ‫العناص‬ ‫وضع‬ ‫يتم‬ ‫ثم‬ ‫أنها‬ ‫كما‬.ً ‫أوال‬ ‫الموضع‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫لم‬ ‫ما‬ ‫الخصائص‬ ‫هذه‬ ‫تعمل‬ ‫لن‬ ، ‫ذلك‬ ‫ومع‬ ‫مختل‬ ‫بشكل‬ ‫تعمل‬ .‫كز‬ ‫المر‬ ‫قيمة‬ ‫عىل‬ ً‫بناء‬ ‫ف‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 106 position: static ‫ال‬ ‫وضع‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفي‬ ‫ل‬ ‫عناص‬ HTML ‫هو‬ static ‫الستاتيكس‬ . ‫العناص‬‫تتأثر‬ ‫ال‬ static ‫واليمت‬ ‫واليشى‬ ‫والسفلية‬ ‫العلوية‬ ‫بالخصائص‬ (top,bottom,right,left) . :‫للصفحة‬ ‫ي‬ ‫الطبيغ‬ ‫للتدفق‬ ‫ا‬ ً ‫وفق‬ ‫ا‬ ً‫دائم‬ ‫وضعه‬ ‫يتم‬ div.static { position: static; border: 3px solid #73AD21; } position: relative ‫ي‬ ‫ر‬ ‫نست‬ :‫موقع‬ ‫ذو‬ ‫عنرص‬ , . ‫ي‬ ‫الطبيغ‬ ‫وضعه‬ ‫إىل‬ ‫بالنسبة‬ ‫وضعه‬ ‫يتم‬ ‫موضع‬ ‫ذي‬ ‫لعنرص‬ ‫واليشى‬ ‫والسفلية‬ ‫واليمت‬ ‫العلوية‬ ‫الخصائص‬ ‫ر‬ ‫تعيي‬ ‫سيؤدي‬ ‫تعديل‬ ‫يتم‬ ‫لن‬ . ‫ي‬ ‫الطبيغ‬ ‫موضعه‬ ‫عن‬ ‫ا‬ ً ‫بعيد‬ ‫تعديله‬ ‫إىل‬ ‫ا‬ً‫نسبي‬ ‫اآلخر‬ ‫المحتوى‬ .‫العنرص‬ ‫كها‬ ‫ر‬ ‫يت‬ ‫فجوة‬ ‫أي‬ ‫ليناسب‬ ‫الخاصيتان‬ ‫د‬ ِّ ‫حد‬ ُ ‫ت‬ top ‫و‬ bottom ، ‫ي‬ ‫األصىل‬ ‫مكانه‬ ‫من‬ ‫ا‬ ً ‫انطالق‬ ‫أسية‬‫ر‬‫ال‬ ‫احة‬‫ز‬‫اإل‬ ‫الخاصيتان‬ ‫د‬ ِّ ‫حد‬ ُ ‫وت‬ left ‫و‬ right . ‫ي‬ ‫األصىل‬ ‫مكانه‬ ‫من‬ ‫ا‬ ً ‫انطالق‬ ‫األفقية‬ ‫احة‬‫ز‬‫اإل‬ div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 107 position: absolute ‫سلف‬ ‫أقرب‬ ‫إىل‬ ‫بالنسبة‬ ‫وضعه‬ ‫يتم‬ ‫مطلق‬ :‫موقع‬ ‫ذو‬ ‫عنرص‬ )‫(اب‬ ( ‫وضعه‬ ‫تم‬ ‫بقيمة‬ ‫عن‬ ‫مخالفة‬ ‫موضع‬ static ) ، ‫واال‬ ‫يستخدم‬ ‫فإنه‬ body .‫المستند‬ :‫بسيط‬ ‫مثال‬ ‫اليك‬ div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 108 position: fixed; ‫ثابت‬ :‫موضع‬ ‫ذو‬ ‫عنرص‬ , ‫العرض‬‫إطار‬ ‫إىل‬ ‫بالنسبة‬ ‫وضعه‬ ‫يتم‬ viewport ‫مما‬ ، ‫استخدام‬ ‫يتم‬ .‫الصفحة‬‫تمرير‬ ‫تم‬ ‫إذا‬ ‫ر‬ ‫حت‬ ‫المكان‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫دائم‬ ‫يظل‬ ‫أنه‬ ‫ي‬ ‫يعت‬ .‫العنرص‬ ‫موضع‬ ‫لتحديد‬ ‫واليشى‬ ‫والسفلية‬ ‫واليمت‬ ‫العلوية‬ ‫الخصائص‬ ‫ا‬ ً ‫موجود‬ ‫يكون‬ ‫أن‬ ‫ي‬ ‫الطبيغ‬ ‫من‬ ‫حيث‬ ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫فجوة‬ ‫الثابت‬‫العنرص‬ ‫ك‬ ‫ر‬ ‫يت‬ ‫ال‬ .‫فيه‬ div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; } position: sticky ‫التموضع‬ ‫الملتصق‬ ‫من‬ ‫خليط‬ ‫هو‬ relative ‫و‬ fixed ‫ه‬ َّ ‫أن‬ ‫لو‬ ‫كما‬‫العنرص‬ ‫مع‬ ‫التعامل‬ ‫سيتم‬ relative ‫التمرير‬ ‫عند‬ ّ ‫ر‬ ‫معي‬ ‫حد‬‫تجاوز‬ ‫وبعد‬ ‫أنه‬ ‫عىل‬ ‫ل‬ َ‫عام‬ُ‫فسي‬ fixed div.sticky { position: sticky; top: 15px; } ‫الطفو‬ ‫خاصية‬ float and clear ‫خاصية‬ ‫تحدد‬ float .‫العنرص‬ ‫تعويم‬ ‫كيفية‬ ‫خاصية‬ ‫تحدد‬ clear ‫مسحه‬ ‫تم‬ ‫الذي‬‫العنرص‬ ‫بجانب‬ ‫تطفو‬ ‫أن‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ .‫جانب‬ ‫أي‬ ‫وعىل‬ ‫خاصية‬ ‫الطفو‬ ( The float Property ) ‫دع‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫وتنسيقه‬ ‫المحتوى‬ ‫موضع‬ ‫لتحديد‬ ‫الطفو‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ .‫الحاوية‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫عىل‬ ‫اليسار‬ ‫إىل‬ ‫تطفو‬ ‫الصورة‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 109 ‫الخاصية‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ float :‫التالية‬ ‫القيم‬ ‫إحدى‬ ‫عىل‬ left - ‫به‬ ‫الخاصة‬ ‫الحاوية‬‫يسار‬ ‫إىل‬ ‫العنرص‬‫يطفو‬ right - ‫به‬ ‫الخاصة‬ ‫الحاوية‬ ‫ر‬ ‫يمي‬ ‫عىل‬ ‫العنرص‬‫يطفو‬ none - ‫هو‬ ‫هذا‬ .)‫فقط‬ ‫النص‬ ‫ي‬ ‫ف‬ ‫ظهوره‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫عرضه‬ ‫(سيتم‬‫العنرص‬ ‫يطفو‬ ‫ال‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ inherit - ‫العائ‬ ‫القيمة‬ ‫العنرص‬ ‫يرث‬ ‫األصل‬‫للعنرص‬ ‫مة‬ ‫حول‬ ‫النص‬ ‫اللتفاف‬‫الطفو‬ ‫خاصية‬ ‫استخدام‬ ‫يمكن‬ ، ‫لها‬ ‫استخدام‬ ‫أبسط‬ ‫ي‬ ‫ف‬ .‫الصور‬ - float: right; :‫النص‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫تطفو‬ ‫أن‬ ‫يجب‬ ‫الصورة‬ ‫أن‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحدد‬ img { float: right; } - float: left; ‫أن‬ ‫يجب‬ ‫الصورة‬ ‫أن‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحدد‬ :‫النص‬ ‫ي‬ ‫ف‬‫اليسار‬ ‫إىل‬ ‫تطفو‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 110 img { float: left; } - No float ‫النص‬ ‫ي‬ ‫ف‬ ‫ظهورها‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫فقط‬ ‫الصورة‬ ‫عرض‬ ‫سيتم‬ ، ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ ( float: none :) img { float: none; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 111 CSS ‫ورأسية‬ ‫أفقية‬ ‫محاذاة‬ ‫كتلة‬‫عنرص‬ ‫لتوسيط‬ block ‫ا‬ً‫أفقي‬ ) ‫استخدم‬ margin: auto ) .‫به‬ ‫الخاصة‬ ‫الحاوية‬ ‫حواف‬ ‫إىل‬ ‫التمدد‬ ‫من‬ ‫منعه‬ ‫إىل‬‫العنرص‬ ‫عرض‬ ‫ضبط‬ ‫سيؤدي‬ ‫المتبقية‬ ‫المساحة‬ ‫تقسيم‬ ‫وسيتم‬ ، ‫المحدد‬ ‫العرض‬ ‫ذلك‬ ‫بعد‬ ‫العنرص‬ ‫سيأخذ‬ : ‫ر‬ ‫الهامشي‬ ‫ر‬ ‫بي‬ ‫بالتساوي‬ .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } ‫(أو‬ ‫العرض‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫لم‬ ‫إذا‬ ‫ر‬ ‫تأثت‬ ‫أي‬ ‫الوسط‬ ‫إىل‬ ‫للمحاذاة‬ ‫يكون‬ ‫ال‬ :‫مالحظة‬ ‫عىل‬ ‫تعيينها‬ ‫تم‬ 100 .)٪ ‫النص‬ ‫توسيط‬ ‫استخدم‬ ، ‫فقط‬ ‫عنرص‬ ‫داخل‬ ‫النص‬ ‫لتوسيط‬ text-align: center; .center { text-align: center; border: 3px solid green; } ‫الصورة‬ ‫توسيط‬ ‫ي‬ ‫ف‬ ‫واجعله‬ ‫ي‬ ‫التلقان‬ ‫الوضع‬ ‫عىل‬ ‫واأليش‬ ‫األيمن‬ ‫الهامش‬ ‫اضبط‬ ، ‫صورة‬ ‫لتوسيط‬ :‫كتلة‬‫عنرص‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 112 img { display: block; margin-left: auto; margin-right: auto; width: 40%; } ‫ولليسار‬ ‫لليمين‬ ‫محاذاة‬ - ‫الموضع‬ ‫استخدام‬ Using position ‫استخدام‬ ‫ي‬ ‫ف‬ ‫العناص‬ ‫محاذاة‬ ‫طرق‬ ‫إحدى‬ ‫تتمثل‬ position: absolute;: .right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } ‫واليسار‬ ‫ر‬ ‫لليمي‬ ‫محاذاة‬ - ‫تعويم‬ ‫استخدام‬ Using float ‫لمحاذاة‬ ‫أخرى‬ ‫طريقة‬ ‫هناك‬ ‫الطفو‬ ‫خاصية‬ ‫استخدام‬ ‫ي‬ ‫وه‬ ‫العناص‬ float : .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 113 ، ‫يحتويه‬ ‫الذي‬‫العنرص‬ ‫من‬ ‫أطول‬ ‫العناص‬ ‫أحد‬ ‫كان‬‫إذا‬ :‫مالحظة‬ ، ‫تعويمه‬ ‫وتم‬ " ‫استخدام‬ ‫يمكنك‬ .‫به‬ ‫الخاصة‬ ‫الحاوية‬ ‫خارج‬ ‫تجاوزه‬ ‫فسيتم‬ clearfix" ‫إلصالح‬ .)‫أدناه‬ ‫المثال‬ ‫(انظر‬ ‫ذلك‬ The clearfix Hack ‫او‬ ‫إضافة‬ ‫يمكننا‬ overflow: auto; :‫المشكلة‬ ‫هذه‬ ‫إلصالح‬ ‫المحتوي‬ ‫العنرص‬ ‫إىل‬ .clearfix { overflow: auto; } ‫توسيط‬ ‫ا‬ً‫ي‬‫عمود‬ - ‫الحشو‬ ‫استخدام‬ ( padding ) ‫ي‬ ‫ف‬ ‫ا‬ً‫عمودي‬‫عنرص‬ ‫لتوسيط‬ ‫عديدة‬ ‫طرق‬ ‫توجد‬ CSS. ‫استخدام‬‫هو‬ ‫البسيط‬ ‫الحل‬ :‫والسفلية‬ ‫العلوية‬ ‫الحشوة‬ .center { padding: 70px 0; border: 3px solid green; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 114 ‫استخدم‬ ، ‫ا‬ً‫وأفقي‬ ‫ا‬ً‫عمودي‬ ‫للتوسيط‬ padding and text-align: center: .center { padding: 70px 0; border: 3px solid green; text-align: center; } ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫الخط‬ ‫ارتفاع‬ ‫استخدام‬ Using line-height ‫خاصية‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫أخرى‬ ‫حيلة‬ line-height :‫االرتفاع‬ ‫خاصية‬ ‫تساوي‬ ‫بقيمة‬ .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* If the text has multiple lines, add the following: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 115 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫استخدام‬ position & transform ‫استخدام‬ ‫ي‬ ‫ف‬ ‫يتمثل‬ ‫آخر‬ ‫حل‬ ‫فهناك‬ ، ‫خيارين‬ ‫الخط‬ ‫وارتفاع‬ ‫الحشو‬ ‫يكن‬ ‫لم‬ ‫إذا‬ ‫الموضع‬ ‫تحديد‬ ‫خاصية‬ position ‫التحويل‬ ‫وخاصية‬ transform : .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫باستخدام‬ Flexbox ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ flexbox .‫األشياء‬ ‫لتوسيط‬ .center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 116 ‫العمودي‬ ‫التنقل‬ ‫شريط‬ ‫مثال‬ ‫خلفية‬ ‫لون‬ ‫ر‬ ‫بتغيت‬ ‫وقم‬ ‫رمادية‬ ‫خلفية‬ ‫بلون‬ ‫ي‬ ‫أساش‬ ‫عمودي‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫بإنشاء‬ ‫قم‬ :‫فوقها‬ ‫الماوس‬ ‫المستخدم‬ ‫يحرك‬ ‫عندما‬ ‫الروابط‬ ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* Change the link color on hover */ li a:hover { background-color: #555; color: white; } ‫ال‬ ‫ي‬ ‫الحال‬ / ‫النشط‬ ‫ابط‬‫ر‬ " ‫أضف‬ active " class ‫الصفحة‬ ‫بمعرفة‬ ‫للمستخدم‬ ‫للسماح‬ ‫ي‬ ‫الحاىل‬ ‫ابط‬‫ر‬‫ال‬ ‫إىل‬ :‫فيها‬ ‫يتواجد‬ ‫ي‬ ‫ر‬ ‫الت‬ .active { background-color: #4CAF50; color: white; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 117 ‫الروابط‬ ‫توسيط‬ ‫حدود‬ ‫وإضافة‬ ‫إىل‬‫كز‬ ‫مر‬ :‫النص‬ ‫محاذاة‬ ‫أضف‬ <li> ‫أو‬ <a> .‫الروابط‬ ‫لتوسيط‬ ‫خاصية‬ ‫أضف‬ border ‫إىل‬ <ul> ‫تريد‬ ‫كنت‬‫إذا‬ .‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫حول‬ ‫حد‬ ‫إلضافة‬ ‫العناص‬ ‫لجميع‬ ‫ا‬ً‫سفلي‬ ‫ا‬ ً ‫حد‬ ‫فأضف‬ ، ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫داخل‬ ‫ا‬ ً ‫حدود‬ ‫ا‬ ً ‫أيض‬ <li> ، : ‫ر‬ ‫األخت‬‫العنرص‬ ‫باستثناء‬ ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; } ‫االفقي‬ ‫التجوال‬ ‫شريط‬ ‫عندما‬ ‫الروابط‬ ‫خلفية‬ ‫لون‬ ‫ر‬ ‫بتغيت‬ ‫وقم‬ ‫داكن‬ ‫خلفية‬ ‫بلون‬ ‫ا‬ً‫أفقي‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ر‬ ‫أنىس‬ :‫فوقها‬ ‫الماوس‬ ‫المستخدم‬ ‫يحرك‬ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 118 li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; } )‫(النشط‬ ‫الحالي‬ ‫الرابط‬ ‫أضف‬ ‫صف‬ " active " ‫ي‬ ‫الحاىل‬ ‫ابط‬‫ر‬‫ال‬ ‫إىل‬ ‫للتيح‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الصفحة‬ ‫معرفة‬ ‫للمستخدم‬ :‫فيها‬ ‫يتواجد‬ .active { background-color: #4CAF50; } ‫محاذاة‬ ‫ر‬ ‫لليمي‬ ‫روابط‬ ‫قم‬ ( ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫القائمة‬ ‫عناص‬ ‫تعويم‬ ‫طريق‬ ‫عن‬ ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫الروابط‬ ‫بمحاذاة‬ float: right :) <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right"><a class="active" href="#about">About</ a></li> </ul>
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 119 ‫الحدود‬ ‫فواصل‬ ‫خاصية‬ ‫أضف‬ border-right ‫إىل‬ <li> :‫الروابط‬ ‫فواصل‬ ‫إلنشاء‬ /* Add a gray right border to all list items, except the last item (last-child) */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; } ‫الثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫ش‬ ‫عندما‬ ‫ر‬ ‫حت‬ ، ‫الصفحة‬ ‫من‬ ‫ي‬ ‫السفىل‬‫أو‬ ‫العلوي‬ ‫الجزء‬ ‫ي‬ ‫ف‬ ‫يظل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫اجعل‬ :‫الصفحة‬ ‫بتمرير‬ ‫المستخدم‬ ‫يقوم‬ Fixed Top ul { position: fixed; top: 0; width: 100%; } Fixed Bottom ul { position: fixed; bottom: 0; width: 100%; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 120 ‫الخلفيات‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫خصائص‬ ‫ستخدم‬ ُ ‫ت‬ CSS .‫للعناص‬ ‫الخلفية‬ ‫ات‬ ‫ر‬ ‫تأثت‬ ‫إلضافة‬ ‫الخلفية‬ ‫لون‬ (CSS background-color) .‫العنرص‬ ‫خلفية‬ ‫لون‬ ‫الخلفية‬ ‫لون‬ ‫خاصية‬ ‫تحدد‬ body { background-color: lightblue; } ‫باستخدام‬ CSS ، :‫بواسطة‬ ‫ا‬ً‫غالب‬ ‫اللون‬ ‫تحديد‬ ‫يتم‬ • ‫لون‬ ‫اسم‬ - "‫"أحمر‬ ‫مثل‬ • ‫قيمة‬ HEX - " ‫مثل‬ ff0000 # " • ‫قيمة‬ RGB - ‫أخرى‬ ‫عنارص‬ ‫عناص‬ ‫من‬ ‫ألي‬ ‫الخلفية‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ HTML: h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } ‫كخلفية‬ ‫صورة‬ ‫استخدم‬ .‫لعنرص‬ ‫كخلفية‬‫الستخدامها‬ ‫صورة‬ ‫الخلفية‬ ‫صورة‬ ‫خاصية‬ ‫تحدد‬ .‫بأكمله‬ ‫العنرص‬ ‫ي‬ ‫تغط‬ ‫بحيث‬ ‫الصورة‬ ‫تتكرر‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ body { background-image: url("paper.gif"); }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 121 ‫خلفية‬ ‫تكرار‬ CSS ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ .‫أسية‬‫ر‬‫و‬ ‫أفقية‬ ‫صورة‬ ‫الخلفية‬ ‫صورة‬ ‫خاصية‬‫تكرر‬ : ‫ي‬ ‫كالتاىل‬، ‫غريبة‬‫ستبدو‬ ‫وإال‬ ، ‫فقط‬ ‫ا‬ً‫أسي‬‫ر‬ ‫أو‬ ‫ا‬ً‫أفقي‬ ‫تتكرر‬ ‫أن‬ ‫يجب‬ ‫الصور‬ ‫بعض‬ body { background-image: url("gradient_bg.png"); } ( ‫فقط‬ ‫ا‬ً‫أفقي‬ ‫أعاله‬ ‫الصورة‬‫ار‬‫ر‬‫تك‬ ‫تم‬ ‫إذا‬ background-repeat: repeat-x ) ، ‫ستبدو‬ :‫أفضل‬ ‫الخلفية‬ body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } ‫عدم‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫ار‬‫ر‬‫تك‬ CSS: :‫الخلفية‬‫ار‬‫ر‬‫تك‬ ‫خاصية‬ ‫بواسطة‬ ‫فقط‬ ‫واحدة‬ ‫مرة‬ ‫الخلفية‬ ‫صورة‬ ‫عرض‬ ‫تحديد‬ ‫يتم‬ body { background-image: url("img_tree.png"); background-repeat: no-repeat; } ‫موضع‬ ‫ر‬ ‫تغيت‬ ‫نريد‬ .‫النص‬ ‫مكان‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫صورة‬ ‫وضع‬ ‫يتم‬ ، ‫أعاله‬ ‫المثال‬ ‫ي‬ ‫ف‬ .‫ا‬ً ‫ر‬ ‫كثت‬‫النص‬ ‫تزعج‬ ‫ال‬ ‫بحيث‬ ، ‫الصورة‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 122 ‫الخلفية‬ ‫تموضع‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ background-position .‫الخلفية‬ ‫صورة‬ ‫موضع‬ ‫لتحديد‬ body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } ‫ال‬ ‫خاصية‬ ( ‫المختصرة‬ background - Shorthand property ) ، ‫الكود‬ ‫ر‬ ‫لتقصت‬ ‫خاصية‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫خصائص‬ ‫جميع‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫الممكن‬ ‫من‬ .‫ال‬ ‫ر‬ ‫االخت‬ ‫خاصية‬ ‫يسىم‬ ‫ما‬ ‫وهذا‬ .‫واحدة‬ :‫الكتابة‬ ‫من‬ ً ‫بدال‬ body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } ‫استخدام‬ ‫يمكنك‬ :‫ال‬ ‫ر‬ ‫االخت‬ ‫خاصية‬ body { background: #ffffff url("img_tree.png") no-repeat right top; } ‫خاصية‬ ‫استخدام‬ ‫عند‬ ‫المخترصة‬ : ‫ي‬ ‫يىل‬ ‫كما‬‫الخاصية‬ ‫قيم‬ ‫ترتيب‬ ‫يكون‬ ، background-color background-image background-repeat background-attachment background-position
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 123 ‫الظل‬ Box Shadow ‫خاصية‬ ‫تطبق‬ CSS box-shadow .‫العناص‬ ‫عىل‬ ‫الظل‬ : ‫ي‬ ‫أش‬‫ر‬‫ال‬ ‫والظل‬ ‫ي‬ ‫ر‬ ‫األفق‬ ‫الظل‬ ‫تحديد‬ ‫فقط‬ ‫يمكنك‬ ، ‫له‬ ‫استخدام‬ ‫أبسط‬ ‫ي‬ ‫ف‬ div { box-shadow: 10px 10px; } :‫الظل‬ ‫إل‬ ‫ا‬ ً ‫لون‬ ‫أضف‬ ، ‫ذلك‬ ‫بعد‬ div { box-shadow: 10px 10px grey; } ‫ر‬ ‫تأثت‬ ‫أضف‬ ، ‫ذلك‬ ‫بعد‬ blur :‫الظل‬ ‫إىل‬ ‫تمويه‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 124 ‫الحدود‬ ‫تدوير‬ CSS3 border-radius ‫الخاصية‬ ‫ستخدم‬ ُ ‫ت‬ border-radius :‫عنرص‬ ‫إىل‬ ‫مستديرة‬ ‫حدود‬ ‫إلضافة‬ p { border: 2px solid red; border-radius: 5px; } ‫واالستخدام‬ ‫التعريف‬ ‫تحدد‬ ‫خاصية‬ border-radius ‫العنرص‬ ‫زوايا‬ ‫قطر‬ ‫نصف‬ . ‫عىل‬ ‫األوىل‬ ‫(القيمة‬ .‫قيم‬ ‫ع‬‫أرب‬ ‫إىل‬ ‫واحد‬ ‫من‬ ‫عىل‬ ‫الخاصية‬ ‫هذه‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ‫والقيمة‬ ، ‫اليمت‬ ‫العلوية‬ ‫اوية‬‫ز‬‫ال‬ ‫عىل‬ ‫تنطبق‬ ‫الثانية‬ ‫والقيمة‬ ، ‫اليشى‬ ‫العلوية‬ ‫اوية‬‫ز‬‫ال‬ ‫ابعة‬‫ر‬‫ال‬ ‫والقيمة‬ ، ‫السفلية‬ ‫اليمت‬ ‫اوية‬‫ز‬‫ال‬ ‫عىل‬ ‫تنطبق‬ ‫الثالثة‬ ‫اوية‬‫ز‬‫ال‬ ‫عىل‬ ‫تنطبق‬ :)‫السفلية‬ ‫اليشى‬ border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 125 ‫المرن‬ ‫الصندوق‬ CSS3- Flexbox ‫اص‬‫ز‬‫الخ‬ ‫اهم‬ ‫احد‬ ‫المرن‬ ‫الصندوق‬ ‫الثالث‬‫اإلصدار‬ ‫ي‬ ‫ف‬ ‫أضيفت‬ ‫ي‬ ‫ر‬ ‫الت‬ CSS3 ‫تخطيط‬ ‫وحدة‬ CSS Flexbox ‫وحدة‬ ‫قبل‬ Flexbox Layout :‫تخطيط‬ ‫أوضاع‬ ‫أربعة‬ ‫هناك‬ ‫كانت‬، Block ‫ويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫ألقسام‬ ، Inline ‫للنص‬ ‫مضمنة‬ Table Positioned ‫ما‬ ‫لعنرص‬ ‫واضح‬ ‫موضع‬ ‫عىل‬ ‫للحصول‬ ، ‫تخ‬ ‫هيكل‬ ‫تصميم‬ ‫المرن‬ ‫الصندوق‬ ‫تخطيط‬ ‫وحدة‬ ‫تسهل‬ ‫االستجابة‬ ‫ع‬ ‫ي‬‫رس‬ ‫طيط‬ .‫الموضع‬ ‫تحديد‬ ‫أو‬ ‫تعويم‬ ‫استخدام‬ ‫دون‬ ‫مرن‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 126 ‫عناصر‬ Flexbox ‫نموذج‬ ‫استخدام‬ ‫لبدء‬ Flexbox .‫مرنة‬ ‫حاوية‬ ‫تحديد‬ ‫إىل‬ ً ‫أوال‬ ‫تحتاج‬ ، .‫مرنة‬ ‫عناص‬ ‫بثالثة‬ )‫الزرقاء‬ ‫(المنطقة‬ ‫مرنة‬ ‫حاوية‬ ‫أعاله‬ ‫العنرص‬ ‫يمثل‬ A flex container with three flex items: <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> ‫عىل‬ ‫العرض‬ ‫خاصية‬ ‫ضبط‬ ‫طريق‬ ‫عن‬ ‫مرنة‬ ‫المرنة‬ ‫الحاوية‬ ‫تصبح‬ flex : .flex-container { display: flex; } : ‫ي‬ ‫ه‬ ‫المرنة‬ ‫الحاوية‬ ‫خصائص‬ • flex-direction • flex-wrap • flex-flow • justify-content • align-items • align-content
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 127 The flex-direction Property ‫خاصية‬ ‫تحدد‬ flex-direction .‫المرنة‬ ‫العناص‬ ‫تكديس‬ ‫الحاوية‬ ‫تريد‬ ‫اتجاه‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫قيمة‬ ‫تكدس‬ column )‫أسفل‬ ‫إىل‬ ‫أعىل‬ ‫(من‬ ‫ا‬ً‫عمودي‬ ‫المرنة‬ ‫العناص‬ : The column value stacks the flex items vertically (from top to bottom): .flex-container { display: flex; flex-direction: column; } ‫قيمة‬ ‫تقوم‬ column-reverse ‫أسفل‬ ‫من‬ ‫(ولكن‬ ‫ا‬ً‫عمودي‬ ‫المرنة‬ ‫العناص‬ ‫بتكديس‬ :)‫أعىل‬ ‫إىل‬ .flex-container { display: flex; flex-direction: column-reverse; } ‫قيمة‬ ‫تكدس‬ row :) ‫ر‬ ‫اليمي‬ ‫إىل‬‫اليسار‬ ‫(من‬ ‫ا‬ً‫أفقي‬ ‫المرنة‬ ‫العناص‬ .flex-container { display: flex; flex-direction: row; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 128 ‫قيمة‬ ‫تكدس‬ row-reverse :)‫اليسار‬ ‫إىل‬ ‫ر‬ ‫اليمي‬ ‫من‬ ‫(ولكن‬ ‫ا‬ً‫أفقي‬ ‫المرنة‬ ‫العناص‬ The flex-wrap Property ‫خاصية‬ ‫تحدد‬ flex-wrap .‫ال‬ ‫أم‬ ‫المرنة‬ ‫العناص‬ ‫التفاف‬ ‫يجب‬ ‫كان‬‫إذا‬ ‫ما‬ ‫عىل‬ ‫أدناه‬ ‫األمثلة‬ ‫تحتوي‬ 12 ‫بشكل‬ ‫المرن‬ ‫االلتفاف‬ ‫خاصية‬ ‫لتوضيح‬ ، ‫ا‬ ً ‫مرن‬ ‫ا‬ً ‫عنرص‬ .‫أفضل‬ The wrap value specifies that the flex items will wrap if necessary: .flex-container { display: flex; flex-wrap: wrap; } ‫قيمة‬ ‫تحدد‬ nowrap :) ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫(هذا‬ ‫تلتف‬ ‫لن‬ ‫المرنة‬ ‫العناص‬ ‫أن‬ The nowrap value specifies that the flex items will not wrap (this is default): .flex-container { display: flex; flex-wrap: nowrap; } ‫تيب‬ ‫ر‬ ‫بت‬ ، ‫األمر‬ ‫لزم‬ ‫إذا‬ ‫ستلتف‬ ‫المرنة‬ ‫العناص‬ ‫أن‬ ‫ي‬ ‫العكىس‬ ‫االلتفاف‬ ‫قيمة‬ ‫تحدد‬ : ‫ي‬ ‫عكىس‬ .flex-container { display: flex; flex-wrap: wrap-reverse; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 129 The flex-flow Property ‫خاصية‬ flex-flow .‫واللف‬ ‫االتجاه‬ ‫خصائص‬ ‫من‬ ‫كل‬‫إلعداد‬ ‫مخترصة‬ ‫خاصية‬ ‫ي‬ ‫ه‬ .flex-container { display: flex; flex-flow: row wrap; } The justify-content Property ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ justify-content :‫المرنة‬ ‫العناص‬ ‫لمحاذاة‬ .flex-container { display: flex; justify-content: center; } ‫قيمة‬ ‫تقوم‬ flex-start ‫العناص‬ ‫بمحاذاة‬ ‫المرنة‬ ‫(هذا‬ ‫الحاوية‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫المرنة‬ :) ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ .flex-container { display: flex; justify-content: flex-start; }
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 130 ‫قيمة‬ ‫تقوم‬ flex-end :‫الحاوية‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫المرنة‬ ‫العناص‬ ‫بمحاذاة‬ ‫المرن‬ .flex-container { display: flex; justify-content: flex-end; } The align-items Property .‫المرنة‬ ‫العناص‬ ‫لمحاذاة‬ ‫العناص‬ ‫محاذاة‬ ‫خاصية‬ ‫استخدام‬ ‫يتم‬ ‫بارتفاع‬ ‫حاوية‬ ‫نستخدم‬ ، ‫األمثلة‬ ‫هذه‬ ‫ي‬ ‫ف‬ 200 ‫محاذاة‬ ‫خاصية‬ ‫لتوضيح‬ ، ‫بكسل‬ .‫أفضل‬ ‫بشكل‬ ‫العناص‬ ‫قيمة‬ ‫تقوم‬ center :‫الحاوية‬ ‫منتصف‬ ‫ي‬ ‫ف‬ ‫المرنة‬ ‫العناص‬ ‫بمحاذاة‬ ‫كز‬ ‫المر‬ .flex-container { display: flex; height: 200px; align-items: center; } ‫قيمة‬ ‫تعمل‬ flex-start :‫الحاوية‬ ‫أعىل‬ ‫المرنة‬ ‫العناص‬ ‫محاذاة‬ ‫عىل‬ ‫المرنة‬ The flex-start value aligns the flex items at the top of the container: .flex-container { display: flex; height: 200px; align-items: flex-start; } CSS Flex Responsive ‫يمكن‬ ‫الشاشات‬ ‫ألحجام‬ ‫مختلفة‬ ‫تخطيطات‬ ‫إلنشاء‬ ‫الوسائط‬ ‫استعالمات‬ ‫استخدام‬ .‫المختلفة‬ ‫واألجهزة‬ ، ‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫أحجام‬ ‫لمعظم‬ ‫عمودين‬ ‫من‬ ‫تخطيط‬ ‫إنشاء‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫الهواتف‬ ‫(مثل‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الشاشات‬ ‫ألحجام‬ ‫واحد‬ ‫عمود‬ ‫من‬ ‫وتخطيط‬ ، ‫الشاشات‬ ‫نقطة‬ ‫عند‬ ‫عمود‬ ‫إىل‬ ‫صف‬ ‫من‬ ‫المرن‬ ‫االتجاه‬ ‫ر‬ ‫تغيت‬ ‫فيمكنك‬ ، )‫اللوحية‬ ‫واألجهزة‬ ( ‫توقف‬ 800 :)‫أدناه‬ ‫المثال‬ ‫ي‬ ‫ف‬ ‫بكسل‬
CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 131 .flex-container { display: flex; flex-direction: row; } @media (max-width: 800px) { .flex-container { flex-direction: column; } } ‫المرنة‬ ‫للعناص‬ ‫المرنة‬ ‫للخاصية‬ ‫المئوية‬ ‫النسبة‬ ‫ر‬ ‫تغيت‬ ‫ي‬ ‫وه‬ ‫أخرى‬ ‫طريقة‬ ‫هناك‬ ‫ا‬ ً ‫أيض‬ ‫علينا‬ ‫ر‬ ‫يتعي‬ ‫أنه‬ ‫الحظ‬ .‫مختلفة‬ ‫شاشات‬ ‫ألحجام‬ ‫مختلفة‬ ‫تخطيطات‬ ‫إلنشاء‬ ‫ر‬ ‫تضمي‬ flex-wrap: wrap :‫المثال‬ ‫هذا‬ ‫يعمل‬ ‫ي‬ ‫لك‬ ‫المرنة‬ ‫الحاوية‬ ‫عىل‬ .flex-container { display: flex; flex-wrap: wrap; } .flex-item-left { flex: 50%; } .flex-item-right { flex: 50%; } @media (max-width: 800px) { .flex-item-right, .flex-item-left { flex: 100%; } }
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 132 ‫الثالث‬ ‫الفصل‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 133 Bootstrap 4 ‫يعد‬ Bootstrap 4 ‫من‬ ‫إصدار‬ ‫ات‬‫ر‬‫اصدا‬ Bootstrap ‫عمل‬‫إطار‬ ‫ر‬ ‫أكت‬ ‫وهو‬ ، HTML ‫و‬ CSS ‫و‬ JavaScript ‫الويب‬ ‫مواقع‬ ‫لتطوير‬ ‫ا‬ ً ‫شيوع‬ ‫المتجاوبة‬ .‫المحمولة‬ ‫األجهزة‬ ‫مع‬ ‫والمتوافقة‬ Bootstrap 4 !‫واالستخدام‬ ‫يل‬‫للتت‬ ‫ا‬ ً‫تمام‬ ‫ي‬ ‫مجان‬ ‫مع‬ ‫ابدأ‬ Bootstrap 4 : ‫هو‬ ‫ما‬ Bootstrap ‫؟‬ Bootstrap ‫عمل‬‫إطار‬‫هو‬ ‫للواجه‬ ‫ي‬ ‫مجان‬ ‫ات‬ ‫وأسهل‬ ‫ع‬ ‫أرس‬ ‫بشكل‬ ‫الويب‬‫لتطوير‬ ‫األمامية‬ ‫يتضمن‬ Bootstrap ‫إىل‬ ‫تستند‬ ‫تصميم‬ ‫قوالب‬ HTML ‫و‬ CSS ‫ل‬ ، ‫والتنقل‬ ، ‫والجداول‬ ،‫ار‬‫ر‬‫واألز‬ ، ‫لنماذج‬ ‫مكونات‬ ‫إىل‬ ‫باإلضافة‬ ، ‫األخرى‬ ‫المكونات‬ ‫من‬ ‫والعديد‬ ، ‫والنماذج‬ JavaScript ‫االختيارية‬ ‫اإلضافية‬ ‫يمنحك‬ Bootstrap ‫تصميمات‬ ‫إنشاء‬ ‫عىل‬ ‫القدرة‬ ‫ا‬ ً ‫أيض‬ ‫متجاوبة‬ ‫بسهولة‬ ‫الويب‬ ‫تصميم‬‫هو‬ ‫ما‬ ‫المتجاوبة‬ ‫؟‬ ‫الويب‬ ‫تصميم‬ ‫يتعلق‬ ‫المتجاوبة‬ ‫من‬ ، ‫األجهزة‬ ‫جميع‬ ‫عىل‬ ‫جيدة‬ ‫لتبدو‬ ‫ا‬ً‫تلقائي‬ ‫نفسها‬ ‫تضبط‬ ‫ويب‬ ‫مواقع‬ ‫بإنشاء‬ .‫ة‬ ‫ر‬ ‫الكبت‬ ‫المكتبية‬‫الكمبيوتر‬ ‫أجهزة‬ ‫إىل‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الهواتف‬ • ‫ايا‬‫ز‬‫م‬ Bootstrap : o ‫ب‬ ‫فقط‬ ‫أساسية‬ ‫معرفة‬ ‫لديه‬ ‫شخص‬ ‫ألي‬ ‫يمكن‬ :‫االستخدام‬ ‫سهل‬ HTML ‫و‬ CSS ‫استخدام‬ ‫ي‬ ‫ف‬ ‫البدء‬ Bootstrap o :‫المتجاوبة‬ ‫ات‬ ‫ر‬ ‫المت‬ ‫ي‬ ‫تكيف‬ Bootstrap ‫المكتب‬ ‫سطح‬ ‫وأجهزة‬ ‫اللوحية‬ ‫واألجهزة‬ ‫الهواتف‬ ‫مع‬ o ‫ي‬ ‫ف‬ :ً ‫أوال‬ ‫الجوال‬ ‫نهج‬ Bootstrap ‫تعد‬ ، ‫نهج‬ ‫األساسي‬ ‫العمل‬‫إطار‬ ‫من‬ ‫ا‬ً‫جزء‬ ً ‫أوال‬ ‫الجوال‬ ‫ة‬ o :‫المتصفح‬ ‫توافق‬ Bootstrap 4 ( ‫الحديثة‬ ‫المتصفحات‬ ‫جميع‬ ‫مع‬ ‫متوافق‬ Chrome ‫و‬ Firefox ‫و‬ Internet Explorer 10 ‫و‬ + Edge ‫و‬ Safari ‫و‬ Opera )
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 134 ‫على‬ ‫تحصل‬ ‫أين‬ ‫من‬ Bootstrap 4 ‫؟‬ ‫استخدام‬ ‫لبدء‬ ‫طريقتان‬ ‫هناك‬ Bootstrap 4 ‫صفحات‬ ‫ي‬ ‫ف‬ ‫الخا‬ ‫الويب‬ .‫بك‬ ‫ص‬ 1 . ‫ر‬ ‫بتضمي‬ ‫قم‬ Bootstrap 4 ‫من‬ CDN 2 . ‫يل‬‫بتت‬ ‫قم‬ Bootstrap 4 ‫من‬ getbootstrap.com Bootstrap 4 CDN ‫يل‬‫تت‬ ‫تريد‬ ‫ال‬ ‫كنت‬‫إذا‬ Bootstrap 4 ‫واستضافته‬ ،‫بنفسك‬ ‫من‬ ‫تضمينه‬ ‫فيمكنك‬ CDN ‫توصيل‬ ‫(شبكة‬ .)‫المحتوى‬ ‫يوفر‬ MaxCDN ‫دعم‬ CDN ‫من‬ ‫لكل‬ Bootstrap's CSS ‫و‬ JavaScript ‫ر‬ ‫تضمي‬ ‫ا‬ ً ‫أيض‬ ‫عليك‬ ‫يجب‬ . jQuery : MaxCDN : <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5. 2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min. js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/po pper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.m in.js"></script> ‫استخدام‬ ‫ايا‬‫ز‬‫م‬ Bootstrap 4 CDN : ‫ي‬ ‫عندمت‬ ‫ق‬ ‫و‬ ‫يل‬‫بتت‬ ‫بالفعل‬ ‫ر‬ ‫المستخدمي‬ ‫من‬ ‫العديد‬ ‫م‬ Bootstrap 4 ‫من‬ MaxCDN .‫آخر‬ ‫موقع‬ ‫زيارة‬ ‫عند‬ ، ‫ا‬ ً ‫أيض‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫يؤدي‬ ‫مما‬ ، ‫موقعك‬ ‫يزورون‬ ‫عندما‬ ‫المؤقت‬ ‫التخزين‬ ‫ذاكرة‬ ‫من‬ ‫تحميله‬ ‫سيتم‬ ‫شبكات‬ ‫معظم‬ ‫ستتأكد‬ CDN ‫األقرب‬ ‫الخادم‬ ‫من‬ ‫تقديمه‬ ‫سيتم‬ ، ‫منه‬ ‫ا‬ ً ‫ملف‬ ‫المستخدم‬ ‫يطلب‬ ‫أن‬ ‫بمجرد‬ ‫أنه‬ ‫من‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ ‫يؤدي‬ ‫مما‬ ، ‫إليهم‬ ‫تنز‬ ‫يل‬ Bootstrap 4 ‫يل‬‫تت‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫كنت‬‫إذا‬ Bootstrap 4 ‫إىل‬ ‫فانتقل‬ ، ‫بنفسك‬ ‫واستضافته‬ https://getbootstrap.com / .‫هناك‬ ‫الموجودة‬ ‫التعليمات‬ ‫واتبع‬ ‫باستخدام‬ ‫ويب‬ ‫صفحة‬ ‫أول‬ ‫إنشاء‬ Bootstrap 4 1 ‫مستند‬ ‫أضف‬ . HTML5
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 135 ‫مستند‬ ‫نوع‬ ‫ر‬ ‫بتضمي‬ ‫قم‬ HTML5 ‫مع‬ ‫جنب‬ ‫إىل‬ ‫ا‬ً‫جنب‬ ، ‫الصفحة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫ال‬ ‫خاصية‬ lang ‫األحرف‬ ‫ومجموعة‬ :‫الصحيحة‬ <!DOCTYPE html> <html lang="en"> > head < > 8" - ="utf charset meta < > /head < </html> 2 ‫يعد‬ . Bootstrap 4 ً ‫أوال‬ ‫ال‬ ّ ‫الجو‬ ‫هو‬ ‫تصميم‬ ‫تم‬ Bootstrap 4 .‫المحمولة‬ ‫لألجهزة‬ ‫ا‬ً‫مستجيب‬ ‫ليكون‬ ‫ي‬ ‫عد‬ ‫نهج‬ ‫العمل‬‫إطار‬ ‫من‬ ‫ا‬ً‫جزء‬ ً ‫أوال‬ ‫الجوال‬ . ‫ي‬ ‫األساش‬ ‫ر‬ ‫والتكبت‬ ‫الصحيح‬ ‫العرض‬ ‫لضمان‬ ،‫باللمس‬ < ‫عالمة‬ ‫أضف‬ meta < ‫عنرص‬ ‫داخل‬ ‫التالية‬ > head :> > scale=1" - width, initial - ="width=device content ="viewport" name meta < (‫الجهاز‬ ‫شاشة‬ ‫عرض‬ ‫لمتابعة‬ ‫الصفحة‬ ‫عرض‬‫الجهاز‬ ‫عرض‬ ‫جزء‬ = ‫العرض‬ ‫يحدد‬ ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ‫سيختلف‬ ‫والذي‬ .)‫الجهاز‬ .‫المستعرض‬ ‫بواسطة‬ ‫مرة‬ ‫ألول‬ ‫الصفحة‬ ‫تحميل‬ ‫عند‬ ‫ي‬ ‫األوىل‬ ‫ر‬ ‫التكبت‬ ‫مستوى‬ ‫واحد‬ ‫جزء‬ = ‫ي‬ ‫األوىل‬ ‫المقياس‬ ّ ‫ر‬ ‫يعي‬ 3 . ‫اكود‬ ‫ر‬ ‫تضمي‬ Bootstrap ‫ر‬ ‫بتضمي‬ ‫قم‬ Bootstrap ‫من‬ CDN ً ‫محليا‬ ‫الملفات‬ ‫يل‬‫بتت‬ ‫قم‬ ‫او‬ .
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 136 Containers ‫الحاويات‬ ‫الحاويات‬ ‫من‬ ‫متاحتان‬ ‫فئتان‬ ‫وهناك‬ ، ‫بداخلها‬ ‫المحتوى‬ ‫لتغليف‬ ‫الحاويات‬ ‫ستخدم‬ ُ ‫ت‬ : • ‫الصف‬‫يوفر‬ .container ‫ثابتة‬ ‫عرض‬ ‫حاوية‬ ‫متجاوبة‬ • . ‫الصف‬‫يوفر‬ container-fluid ‫حاوية‬ ‫عرض‬ ‫العرض‬‫إلطار‬ ‫الكامل‬ ‫العرض‬ ‫ي‬ ‫تغط‬ ، ‫كاملة‬ ‫ثابتة‬ ‫حاوية‬ ‫استخدم‬ ‫ال‬ ‫صف‬ .container ‫حاوية‬ ‫إلنشاء‬ ‫متجاوبة‬ .‫ثابت‬ ‫عرض‬ ‫ذات‬ :‫المختلفة‬ ‫الشاشة‬ ‫ألحجام‬ ‫ا‬ ً ‫وفق‬ ‫ر‬ ‫سيتغت‬ )‫للعرض‬ ‫األقص‬ ‫(الحد‬ ‫عرضه‬ ‫أن‬ ‫الحظ‬ <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> : ‫المرنة‬ ‫الحاوية‬ ‫استخدم‬ ‫صف‬ .container-fluid ‫بالكامل‬ ‫الشاشة‬ ‫بعرض‬ ‫ا‬ ً‫دائم‬ ‫ستمتد‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫العرض‬ ‫كاملة‬‫حاوية‬ ‫إلنشاء‬ ‫ا‬ ً‫دائم‬ ‫العرض‬ ‫(يكون‬ 100 :)٪ <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> ‫الحاوية‬ ‫حشو‬ Padding ‫حشوة‬ ‫عىل‬ ‫الحاويات‬ ‫تحتوي‬ ‫يس‬ ‫ا‬ ‫ر‬ ‫ي‬ ‫ويم‬ ‫ي‬ ‫يت‬ 15 ‫بكسل‬ ً ‫اضيا‬ ‫ر‬ ‫افت‬ . ‫ي‬ ‫سفىل‬ ‫أو‬ ‫علوي‬ ‫حشوة‬ ‫وجود‬ ‫عدم‬ ‫مع‬ ، ،‫لذلك‬ ‫مساعدة‬ ‫أدوات‬ ‫نستخدم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ،‫للمسافات‬ ‫عىل‬ .‫أفضل‬ ‫تبدو‬ ‫لجعلها‬ ‫والهوامش‬ ‫ي‬ ‫اإلضاف‬ ‫الحشو‬ ‫مثل‬ . ‫ي‬ ‫تعت‬ ، ‫المثال‬ ‫سبيل‬ pt-3 ‫تبلغ‬ ‫علوية‬ ‫وكة‬ ‫ر‬ ‫مت‬ ‫مساحة‬ ‫"إضافة‬ 16 :"‫بكسل‬ <div class="container pt-3"></div> ‫للحاوية‬ ‫حدود‬ ‫و‬ ‫الوان‬ ‫المساعدة‬ ‫األدوات‬ ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫غالب‬ ،‫األخرى‬ ‫الحدود‬ ‫مثل‬ ،‫واأللوان‬ :‫الحاويات‬ ‫مع‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 137 <div class="container p-3 my-3 border"></div> <div class="container p-3 my-3 bg-dark text-white"></div> <div class="container p-3 my-3 bg-primary text-white"></div> ‫المتجاوبة‬ ‫الحاوية‬ ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ ‫الصفوف‬ .container-sm | md | lg | xl ‫حاويات‬ ‫إلنشاء‬ ‫متجاوبة‬ . ‫عىل‬ ‫الحاوية‬ ‫لعرض‬ ‫األقص‬ ‫الحد‬ ‫ر‬ ‫سيتغت‬ :‫المختلفة‬ ‫العرض‬ ‫منافذ‬ / ‫الشاشة‬ ‫أحجام‬ <div class="container-sm">.container-sm</div> <div class="container-md">.container-md</div> <div class="container-lg">.container-lg</div> <div class="container-xl">.container-xl</div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 138 ‫في‬ ‫الشبكي‬ ‫النظام‬ Bootstrap 4 ‫شبكة‬ ‫نظام‬ ‫إنشاء‬ ‫تم‬ ‫ي‬ ‫ف‬ Bootstrap ‫باستخدام‬ flexbox ‫ويسمح‬ ‫ب‬ 12 .‫الصفحة‬ ‫ر‬ ‫عت‬ ‫ا‬ ً ‫عمود‬ :‫أوسع‬ ‫أعمدة‬ ‫إلنشاء‬ ‫ا‬ ً‫مع‬ ‫األعمدة‬ ‫تجميع‬ ‫يمكنك‬ ، ‫فردي‬ ‫بشكل‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫االثت‬ ‫األعمدة‬ ‫استخدام‬ ‫تريد‬ ‫ال‬ ‫كنت‬‫إذا‬ ‫إىل‬ ‫يصل‬ ‫المجموع‬ ‫أن‬ ‫من‬ ‫تأكد‬ 12 ‫أقل‬ ‫أو‬ ‫ال‬ ‫األعمدة‬ ‫جميع‬ ‫تستخدم‬ ‫أن‬ ‫ا‬ً‫مطلوب‬ ‫(ليس‬ 12 .)‫المتوفرة‬ ‫الشبكة‬ ‫صفوف‬ ‫شبكة‬ ‫نظام‬ ‫يتكون‬ Bootstrap 4 ‫خمس‬ ‫من‬ ‫الصفوف‬ : col - ‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫(أجهزة‬ - ‫من‬ ‫أقل‬ ‫الشاشة‬ ‫عرض‬ 576 )‫بكسل‬ .col-sm - ‫ة‬ ‫ر‬ ‫الصغت‬ ‫(األجهزة‬ - ‫عن‬ ‫يزيد‬ ‫أو‬ ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 576 )‫بكسل‬ .col-md - ‫المتوسطة‬ ‫(األجهزة‬ - ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 768 ) ‫ر‬ ‫أكت‬ ‫أو‬ ‫بكسل‬ .col-lg - ‫ة‬ ‫ر‬ ‫الكبت‬ ‫(األجهزة‬ - ‫عن‬ ‫يزيد‬ ‫أو‬ ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 992 )‫بكسل‬ .col-xl - ‫(أجهزة‬ xlarge - ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 1200 )‫منها‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫بكسل‬ ‫دمج‬ ‫يمكن‬ ‫ال‬ ‫صفوف‬ .‫ومرونة‬ ‫ديناميكية‬ ‫ر‬ ‫أكت‬ ‫تخطيطات‬ ‫إلنشاء‬ ‫أعاله‬ ‫متساوية‬ ‫أعمدة‬ ‫ثالث‬ ‫عمل‬ <div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 139 Responsive Columns ‫أسطح‬ ‫إىل‬ ‫والتحجيم‬ ‫اللوحية‬ ‫األجهزة‬ ‫من‬ ‫ا‬ً‫بدء‬ ‫العرض‬ ‫متساوية‬ ‫أعمدة‬ ‫أربعة‬ ‫إنشاء‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫عن‬ ‫عرضها‬ ‫يقل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الشاشات‬ ‫أو‬ ‫المحمولة‬ ‫الهواتف‬ ‫عىل‬ .‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫المكتب‬ 576 ‫األعمدة‬ ‫اكم‬ ‫ر‬ ‫ستت‬ ، ‫بكسل‬ :‫ا‬ً‫تلقائي‬ ‫بعضها‬ ‫فوق‬ <div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> ‫أجهزة‬ ‫ي‬ ‫ف‬ ‫والتوسع‬ ‫اللوحية‬ ‫األجهزة‬ ‫من‬ ‫ا‬ً‫بدء‬ ‫العرض‬ ‫ر‬ ‫متنوعي‬ ‫عمودين‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫سطح‬ :‫ة‬ ‫ر‬ ‫الكبت‬ ‫اإلضافية‬ ‫المكتب‬ <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 140 Bootstrap ‫الفقرات‬/‫النصوص‬ ‫يستخدم‬ Bootstrap 4 ‫يبلغ‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫خط‬ ‫حجم‬ 16 ‫خطه‬ ‫ارتفاع‬ ‫ويبلغ‬ ، ‫بكسل‬ 1.5 . ‫الخطوط‬ ‫مجموعة‬ " ‫ي‬ ‫ه‬ ‫اضية‬ ‫ر‬ ‫االفت‬ Helvetica Neue ‫و‬ " Helvetica ‫و‬ Arial ‫و‬ sans-serif . < ‫عناص‬ ‫جميع‬ ‫تحتوي‬ ، ‫ذلك‬ ‫إىل‬ ‫باإلضافة‬ p ‫عىل‬ > margin-top: 0 ‫و‬ margin-bottom: 1rem ‫ا‬ً‫اضي‬ ‫ر‬ ‫(افت‬ 16 .)‫بكسل‬ Bootstrap 4 ‫عناوين‬ ‫أنماط‬ HTML < ‫(من‬ h1 < ‫إىل‬ > h6 : ‫ر‬ ‫أكت‬ ‫خط‬ ‫وحجم‬ ‫ر‬ ‫أكت‬ ‫خط‬ ‫وزن‬ ‫مع‬ )> h1 Bootstrap heading (2.5rem = 40px) h2 Bootstrap heading (2rem = 32px) h3 Bootstrap heading (1.75rem = 28px) h4 Bootstrap heading (1.5rem = 24px) h5 Bootstrap heading (1.25rem = 20px) h6 Bootstrap heading (1rem = 16px) Display Headings ‫ستخدم‬ ُ ‫ت‬ ‫ع‬‫أرب‬ ‫وهناك‬ ، )‫أخف‬ ‫خط‬ ‫ووزن‬ ‫ر‬ ‫أكت‬ ‫خط‬ ‫(حجم‬ ‫العادية‬ ‫العناوين‬ ‫من‬ ‫ر‬ ‫أكت‬‫ز‬ ‫ر‬ ‫لتت‬ ‫العرض‬ ‫عناوين‬ ‫الصفوف‬ . :‫بينها‬ ‫من‬ ‫لالختيار‬ display-1 ، .display-2 ، .display-3 ، .display- 4 <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> ‫ي‬ ‫ف‬ Bootstrap 4 < ‫عنرص‬ ‫استخدام‬ ‫يتم‬ ، small ‫ي‬ ‫ف‬ > HTML :‫عنوان‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫ثانوي‬ ‫نص‬ ‫إلنشاء‬ <h3> Fancy display heading <small class="text-muted">With faded secondary text</small> </h3>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 141 ‫في‬ ‫األلوان‬ Bootstrap ‫النصوص‬ ‫الوان‬ ‫صفوف‬ : ‫ي‬ ‫ه‬ ‫النص‬ ‫ألوان‬ .text-primary , .text-secondary , .text-success , .text-danger , .text- warning , .text-info , .text-light , .text-dark , .text-muted , .text- white <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> ‫الخلفية‬ ‫الوان‬ ‫صفوف‬ : ‫ي‬ ‫ه‬ ‫الخلفية‬ ‫ألوان‬ <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 142 ‫في‬ ‫الجداول‬ Bootstrap ‫جدول‬ ‫يحتوي‬ Bootstrap 4 ‫حشو‬ ‫عىل‬ ‫ي‬ ‫األساش‬ ‫خفيف‬ .‫أفقية‬ ‫وفواصل‬ ‫تضيف‬ ‫الصف‬ .table :‫الجدول‬ ‫إىل‬ ‫ا‬ً‫أساسي‬ ‫ا‬ ً ‫نمط‬ ‫الحدود‬ ‫ذات‬ ‫الجداول‬ ‫تضيف‬ ‫الصف‬ .table-bordered ‫ًا‬‫د‬‫حدو‬ ‫على‬ ‫جميع‬ ‫جوانب‬ ‫الجدول‬ ‫والخاليا‬ :
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 143 ‫المرور‬ ‫بحدث‬ ‫االسطر‬ ‫تاثر‬ Hover ‫تضيف‬ ‫الصف‬ . table-hover ‫تأثير‬ ‫التمرير‬ ( ‫لون‬ ‫الخلفية‬ ‫الرمادي‬ ) ‫على‬ ‫صفوف‬ ‫الجدول‬ : ‫المعتمة‬ ‫الجداول‬ ‫تضيف‬ ‫الصف‬ . table-dark ‫خلفية‬ ‫سوداء‬ ‫إلى‬ ‫الجدول‬ : ‫المخططة‬ ‫الجداول‬ ‫اجمع‬ ‫بين‬ . table-dark ‫و‬ . table-striped ‫إلنشاء‬ ‫جدول‬ ‫مخطط‬ ‫وفاتح‬ ‫داكن‬ : ‫السياق‬ ‫ذات‬ ‫الصفوف‬ ‫يمكن‬ ‫استخدام‬ ‫ال‬ ‫صفوف‬ ‫تابعة‬ ‫للسياق‬ ‫لتلوين‬ ‫الجدول‬ ‫بأكمله‬ <( table )> ، ‫أو‬ ‫صفوف‬ ‫الجدول‬ <( tr )> ‫أو‬ ‫خاليا‬ ‫الجدول‬ <( td .)> <!-- On rows --> <tr class="table-active">...</tr> <tr class="table-primary">...</tr> <tr class="table-secondary">...</tr> <tr class="table-success">...</tr> <tr class="table-danger">...</tr> <tr class="table-warning">...</tr> <tr class="table-info">...</tr> <tr class="table-light">...</tr>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 144 <tr class="table-dark">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="table-active">...</td> <td class="table-primary">...</td> <td class="table-secondary">...</td> <td class="table-success">...</td> <td class="table-danger">...</td> <td class="table-warning">...</td> <td class="table-info">...</td> <td class="table-light">...</td> <td class="table-dark">...</td> </tr>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 145 ‫المتجاوبة‬ ‫الجداول‬ ‫تضيف‬ ‫الصف‬ . table-responsive ‫شريط‬ ‫تمرير‬ ‫إلى‬ ‫الجدول‬ ‫عند‬ ‫الحاجة‬ ( ‫عندما‬ ‫يكون‬ ‫ا‬ً‫كبير‬ ‫ًا‬‫د‬‫ج‬ ‫ًا‬‫ي‬‫أفق‬ :) ‫اذا‬ ‫الصف‬ ‫اسنخدام‬ ‫يمكنك‬ ‫معينة‬ ‫نقطة‬ ‫عند‬ ‫متجاوب‬ ‫الجدول‬ ‫يصبح‬ ‫ان‬ ‫اردت‬ .table-responsive{-sm|-md|-lg|-xl} <div class="table-responsive-sm"> <table class="table"> ... </table> </div> ‫في‬ ‫الصور‬ Bootstrap ‫منحنية‬ ‫الزوايا‬ ‫تضيف‬ ‫الصف‬ .rounded ‫زوايا‬ ‫مستديرة‬ ‫للصورة‬ : <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 146 ‫مستديرة‬ ‫زوايا‬ ‫تشكل‬ ‫الصف‬ ‫الدائرة‬ ‫الدائرية‬ ‫الصورة‬ ‫على‬ ‫شكل‬ ‫دائرة‬ : <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> ‫المصغرة‬ ‫الصورة‬ Thumbnail ‫تشكل‬ ‫الصف‬ ‫الصور‬ ‫المصغرة‬ . img ‫الصورة‬ ‫في‬ ‫صورة‬ ‫مصغرة‬ ( ‫بحدود‬ :) <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> ‫المتجاوبة‬ ‫الصورة‬ .‫الشاشة‬ ‫حجم‬ ‫لتناسب‬ ‫ا‬ً‫تلقائي‬ ‫المتجاوبة‬‫الصور‬ ‫ضبط‬ ‫يتم‬ .‫الشاشات‬ ‫وكذلك‬ .‫األحجام‬ ‫بجميع‬ ‫ي‬ ‫ر‬ ‫تأن‬ ‫الصور‬ ‫ا‬ ً ‫صور‬ ‫ر‬ ‫أنىس‬ ‫متجاوبة‬ ‫إضافة‬ ‫طريق‬ ‫عن‬ ‫الصف‬ . img-fluid < ‫عالمة‬ ‫إىل‬ img ‫حجم‬ ‫ر‬ ‫تغيت‬ ‫ذلك‬ ‫بعد‬ ‫سيتم‬ .> . ‫ي‬ ‫األصىل‬ ‫العنرص‬ ‫مع‬ ‫جيد‬ ‫بشكل‬ ‫الصورة‬ ‫الصف‬ img-fluid . :‫عرض‬ ‫أقص‬ ‫تطبق‬ 100 :‫الصورة‬ ‫عىل‬ ‫ي‬ ‫تلقان‬ :‫واالرتفاع‬ ٪ <img class="img-fluid" src="img_chania.jpg" alt="Chania">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 147 Bootstrap 4 Jumbotron ‫ر‬ ‫يشت‬ jumbotron ‫ر‬ ‫كبت‬‫رمادي‬ ‫صندوق‬ ‫إىل‬ ‫ي‬ ‫بعط‬ ‫من‬ ‫مزيد‬ ‫االهمية‬ .‫الخاصة‬ ‫المعلومات‬ ‫أو‬ ‫المحتويات‬ ‫لبعض‬ < ‫عنرص‬ ‫استخدم‬ div ‫مع‬ > class .jumbotron ‫إلنشاء‬ jumbotron : <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS...</p> </div> ‫التنبيه‬ ‫رسائل‬ Alerts ‫يوفر‬ Bootstrap 4 :‫ا‬ ً ‫مسبق‬ ‫محددة‬ ‫تنبيه‬ ‫رسائل‬ ‫إلنشاء‬ ‫سهلة‬ ‫طريقة‬ ‫باستخدام‬ ‫التنبيهات‬ ‫إنشاء‬ ‫يتم‬ ‫الصف‬ . alert ‫بأحد‬ ‫متبوعة‬ ، ‫ال‬ ‫صفوف‬ ‫السياقية‬ . alert-Success . ‫و‬ alert-info . ‫و‬ alert-warning . ‫و‬ alert-danger ‫و‬ . alert-Primary . ‫و‬ alert-Secondary . ‫و‬ alert-light . ‫أو‬ alert-dark : <div class="alert alert-success"> <strong>Success!</strong> Indicates a successful or positive action. </div> ‫أضف‬ ‫الصف‬ alert-link ‫ملونة‬ ‫"روابط‬ ‫إلنشاء‬ ‫التنبيه‬ ‫ع‬‫مرب‬ ‫داخل‬ ‫روابط‬ ‫أي‬ ‫إىل‬ :"‫متطابقة‬ <div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 148 ‫رسالة‬ ‫إلغالق‬ ،‫التنبيه‬ ‫فوق‬ ‫النقر‬ ‫عند‬ ‫االغالق‬ ‫زر‬ ‫التنبيه‬ ‫ع‬‫مرب‬ ‫ي‬ ‫سيختق‬ <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Success!</strong> Indicates a successful or positive action. </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 149 ‫ازرار‬ Bootstrap Button Styles <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> ‫استخدام‬ ‫يمكن‬ ‫الصفوف‬ < ‫عناص‬ ‫ي‬ ‫ف‬ ‫ار‬‫ر‬‫األز‬ a < ‫أو‬ > button < ‫أو‬ > input :> <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> ‫حدود‬ ‫ذات‬ ‫أزرار‬ ‫يوفر‬ Bootstrap 4 :‫حدود‬ / ‫خارجية‬ ‫ار‬‫ر‬‫أز‬ ‫ثمانية‬ <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 150 ‫الزر‬ ‫حجم‬ ‫استخدم‬ ‫الصف‬ . btn-lg ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫ار‬‫ر‬‫لألز‬ ‫الصف‬ . btn-sm :‫ة‬ ‫ر‬ ‫الصغت‬ ‫ار‬‫ر‬‫لألز‬ <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button> ‫كتلة‬‫كعنرص‬‫الزر‬ ‫جعل‬ Block ‫بإضافة‬ ‫قم‬ .btn-block .‫بالكامل‬ ‫ي‬ ‫األصىل‬ ‫العنرص‬ ‫بعرض‬ ‫يمتد‬ ‫الذي‬ ‫الكتلة‬ ‫مستوى‬ ‫زر‬ ‫إلنشاء‬ <button type="button" class="btn btn-primary btn-block">Full-Width Button</button> ‫الزر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ :)‫للنقر‬ ‫قابلة‬ ‫ر‬ ‫(غت‬ ‫تعطيل‬ ‫حالة‬ ‫أو‬ )‫ا‬ ً ‫مضغوط‬ ‫(يظهر‬ ‫نشطة‬ ‫حالة‬ ‫عىل‬‫الزر‬ ‫ضبط‬ ‫يمكن‬ ‫يجعل‬ .active ‫وال‬ ، ‫ا‬ ً ‫مضغوط‬ ‫يظهر‬ ‫ا‬ً ‫زر‬ ‫خاصية‬ disabled ‫معطلة‬ ‫أن‬ ‫الحظ‬ .‫للنقر‬ ‫قابل‬ ‫ر‬ ‫غت‬‫الزر‬ ‫تجعل‬ < ‫العناص‬ a ‫ال‬ ‫تدعم‬ ‫ال‬ > ‫خاصية‬ disabled ‫تستخدم‬ ‫أن‬ ‫يجب‬ ‫ي‬ ‫وبالتاىل‬ ‫المعطلة‬ ‫الصف‬ . disabled ‫لجعلها‬ .‫معطلة‬ ‫ي‬ ‫مرن‬ ‫بشكل‬ ‫تظهر‬ <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> <a href="#" class="btn btn-primary disabled">Disabled Link</a>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 151 ‫األزار‬ ‫مجموعات‬ ‫لك‬ ‫يتيح‬ Bootstrap 4 :‫ار‬‫ر‬‫أز‬ ‫مجموعة‬ ‫ي‬ ‫ف‬ )‫واحد‬‫سطر‬ ‫(عىل‬ ‫ا‬ ً‫مع‬ ‫ار‬‫ر‬‫األز‬ ‫من‬ ‫سلسلة‬ ‫تجميع‬ < ‫عنرص‬ ‫استخدم‬ div ‫مع‬ > class .btn-group :‫ار‬‫ر‬‫أز‬ ‫مجموعة‬ ‫إلنشاء‬ <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> ‫مالحظة‬ ‫استخدم‬ ، ‫مجموعة‬ ‫ي‬ ‫ف‬‫زر‬ ‫كل‬‫عىل‬‫ار‬‫ر‬‫األز‬ ‫أحجام‬ ‫تطبيق‬ ‫من‬ ً ‫بدال‬ : class .btn-group-lg ‫لمجموعة‬ . ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬‫ار‬‫ر‬‫األز‬ btn-group-sm :‫ة‬ ‫ر‬ ‫الصغت‬ ‫ار‬‫ر‬‫األز‬ ‫لمجموعة‬ :‫ة‬ ‫ر‬ ‫كبت‬‫ار‬‫ر‬‫أز‬ :‫اضية‬ ‫ر‬ ‫االفت‬‫ار‬‫ر‬‫األز‬ :‫ة‬ ‫ر‬ ‫صغت‬‫ار‬‫ر‬‫أز‬ <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 152 ‫العمودية‬ ‫األزرار‬ ‫مجموعة‬ ‫يدعم‬ Bootstrap 4 :‫العمودية‬‫ار‬‫ر‬‫األز‬ ‫مجموعات‬ ‫ا‬ ً ‫أيض‬ ‫استخدم‬ ‫ال‬ ‫الصف‬ . btn-group-vertical :‫عمودية‬‫ار‬‫ر‬‫أز‬ ‫مجموعة‬ ‫إلنشاء‬ <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> ‫المنسدلة‬ ‫القائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ ‫تداخل‬ ‫ار‬‫ر‬‫أز‬ ‫مجموعات‬ Nest :)‫الحق‬ ‫فصل‬ ‫ي‬ ‫ف‬ ‫المنسدلة‬ ‫القوائم‬ ‫عن‬ ‫المزيد‬ ‫(ستتعلم‬ ‫منسدلة‬ ‫قوائم‬ ‫إلنشاء‬ <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data- toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 153 ‫الشارات‬ Bootstrap Badges heading New heading New heading New heading New heading New heading New ‫استخدم‬ .‫محتوى‬ ‫أي‬ ‫إىل‬ ‫إضافية‬ ‫معلومات‬ ‫إلضافة‬ ‫ات‬‫ر‬‫الشا‬ ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . badge ‫مع‬ ‫الصف‬ ‫سياقية‬ . ‫(مثل‬ badge-Secondary < ‫عناص‬ ‫داخل‬ ) span ‫ات‬‫ر‬‫الشا‬ ‫مقياس‬ ‫أن‬ ‫الحظ‬ .‫مستطيلة‬ ‫ات‬‫ر‬‫شا‬ ‫إلنشاء‬ > :)‫وجد‬ ‫(إن‬ ‫ي‬ ‫األصىل‬ ‫العنرص‬ ‫حجم‬ ‫مع‬ ‫يتناسب‬ <h1> heading <span class="badge badge-secondary">New</span></h1> <h2> heading <span class="badge badge-secondary">New</span></h2> <h3> heading <span class="badge badge-secondary">New</span></h3> <h4> heading <span class="badge badge-secondary">New</span></h4> <h5> heading <span class="badge badge-secondary">New</span></h5> <h6> heading <span class="badge badge-secondary">New</span></h6> ‫السياقية‬ ‫الشارات‬ ‫اال‬ ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ ‫لصفوف‬ .( ‫السياقية‬ badge - :‫الشارة‬ ‫لون‬ ‫ر‬ ‫لتغيت‬ )* <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 154 Pill Badges ‫استخدم‬ ‫الصف‬ badge-pill : ‫ر‬ ‫أكت‬ ‫مستديرة‬ ‫ات‬‫ر‬‫الشا‬ ‫لتجعل‬ <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> :‫زر‬ ‫داخل‬ ‫شارة‬ ‫استخدام‬ ‫عىل‬ ‫مثال‬ <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span> </button>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 155 ‫في‬ ‫التقدم‬ ‫شريط‬ Bootstrap .‫العملية‬ ‫ي‬ ‫ف‬ ‫المستخدم‬ ‫تقدم‬ ‫مدى‬ ‫إلظهار‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫استخدام‬ ‫يمكن‬ 25 ‫اكتمل‬ ٪ 50 ‫اكتمل‬ ٪ 100 ‫مكتمل‬ ٪ ‫أضف‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫تقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلنشاء‬ ‫الصف‬ . progress ‫وأضف‬ ‫حاوية‬ ‫عنرص‬ ‫إىل‬ ‫الصف‬ . progress-bar ‫إىل‬ ‫عرض‬ ‫خاصية‬ ‫استخدم‬ .‫به‬ ‫الخاص‬ ‫ي‬ ‫الفرع‬ ‫العنرص‬ CSS :‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫عرض‬ ‫ر‬ ‫لتعيي‬ <div class="progress"> <div class="progress-bar" style="width:70%"></div> </div> ‫االرتفاع‬ ‫تحديد‬ ‫هو‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ارتفاع‬ 16 ‫ارتفاع‬ ‫خاصية‬ ‫استخدم‬ .‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫بكسل‬ CSS ‫عليك‬ ‫يجب‬ ‫أنه‬ ‫الحظ‬ .‫ها‬ ‫ر‬ ‫لتغيت‬ :‫التقدم‬ ‫يط‬ ‫ر‬ ‫ورس‬ ‫التقدم‬ ‫لحاوية‬ ‫االرتفاع‬ ‫نفس‬ ‫ر‬ ‫تعيي‬ <div class="progress" style="height:20px"> <div class="progress-bar" style="width:40%;height:20px"></div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 156 ‫ي‬ ‫توضيح‬ ‫نص‬ ‫إضافة‬ :‫ئية‬‫ر‬‫الم‬ ‫المئوية‬ ‫النسبة‬‫إلظهار‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫داخل‬ ‫ا‬ ً ‫نص‬ ‫أضف‬ <div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div> ‫ملون‬ ‫تقدم‬ ‫يط‬ ‫ر‬ ‫ش‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ .) ‫ي‬ ‫(أساش‬ ‫األزرق‬ ‫باللون‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫يكون‬ ‫الصفوف‬ ‫ي‬ ‫ف‬ ‫السياقية‬ ‫الخلفية‬ Bootstrap 4 :‫لونها‬ ‫ر‬ ‫حت‬ <!-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div> <!-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div> <!-- Turquoise -->
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 157 <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div> <!-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div> ‫التالي‬ ‫الشكل‬ ‫على‬ ‫الحصول‬ ‫من‬ ‫تمكنك‬ ‫التي‬ ‫الصفوف‬ ‫عن‬ ‫ابحث‬ Striped Progress Bars
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 158 ‫الصفحات‬ ‫ترقيم‬ Pagination ‫أضف‬ ، ‫ي‬ ‫أساش‬ ‫صفحات‬ ‫ترقيم‬ ‫إلنشاء‬ ‫الصف‬ . pagination < ‫عنرص‬ ‫إىل‬ ul .> ‫أضف‬ ‫ثم‬ page-item ‫كل‬‫إىل‬ < li ‫و‬ > ‫الصف‬ page-link < ‫داخل‬ ‫ابط‬‫ر‬ ‫كل‬‫إىل‬ . li :> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> ‫النشطة‬ ‫الصفحة‬ ‫استخدام‬ ‫يتم‬ ‫الصف‬ . active :‫الحالية‬ ‫الصفحة‬ " ‫ر‬ ‫"لتميت‬ <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> ‫المعطلة‬ ‫الحالة‬ ‫استخدام‬ ‫يتم‬ ‫الصف‬ . disabled :‫للنقر‬ ‫القابلة‬ ‫ر‬ ‫غت‬ ‫للروابط‬ <ul class="pagination"> <li class="page-item disabled"><a class="page- link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 159 Pagination Sizing :‫أصغر‬ ‫أو‬ ‫ر‬ ‫أكت‬ ‫حجم‬ ‫إىل‬ ‫الصفحات‬ ‫ترقيم‬ ‫كتل‬‫حجم‬ ‫ر‬ ‫تغيت‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ ‫أضف‬ class .pagination-lg . ‫أو‬ ‫ر‬ ‫األكت‬ ‫للكتل‬ pagination-sm :‫األصغر‬ ‫للكتل‬ <ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 160 Breadcrumbs ‫ر‬ ‫تشت‬ ‫الصفوف‬ .breadcrumb ‫و‬ .breadcrumb-item ‫ي‬ ‫الهرم‬ ‫التسلسل‬ ‫ضمن‬ ‫الحالية‬ ‫الصفحة‬ ‫موقع‬ ‫إىل‬ ‫الويب‬ ‫لموقع‬ <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Summer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italy</a></li> <li class="breadcrumb-item active">Rome</li> </ul> ‫القوائم‬ ‫مجموعات‬ ‫عناصر‬ ‫على‬ ‫تحتوي‬ ‫مرتبة‬ ‫غير‬ ‫قائمة‬ ‫هي‬ ‫األساسية‬ ‫القائمة‬ ‫مجموعة‬ li : < ‫عنصر‬ ‫استخدم‬ ، ‫أساسية‬ ‫قائمة‬ ‫مجموعة‬ ‫إلنشاء‬ ul ‫مع‬ > .list-group < ‫و‬ li ‫مع‬ > .list-group-item ‫كالتال‬ ‫ي‬ : <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> Active State ‫استخدم‬ ‫الصف‬ .active : ‫ي‬ ‫الحاىل‬ ‫العنرص‬ ‫ر‬ ‫لتميت‬ <ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 161 ‫روابط‬ ‫مع‬ ‫قائمة‬ ‫مجموعة‬ ‫بالعناص‬ ‫قائمة‬ ‫مجموعة‬ ‫إلنشاء‬ ‫ابط‬‫ر‬‫ال‬ <a> < ‫استخدم‬ ، div < ‫من‬ ً ‫بدال‬ > ul < ‫و‬ > a < ‫من‬ ً ‫بدال‬ > li ، ‫ا‬ً‫اختياري‬ .> ‫أضف‬ ‫الصف‬ . list-group-item-action :‫التمرير‬ ‫عند‬ ‫رمادية‬ ‫خلفية‬ ‫لون‬ ‫تريد‬ ‫كنت‬‫إذا‬ <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a> </div> ‫عنصر‬ ‫تعطيل‬ ‫تضيف‬ ‫الصف‬ .disabled ‫ر‬ ‫تأثت‬ ‫يل‬ ‫ر‬ ‫ست‬ ، ‫الروابط‬ ‫عىل‬ ‫استخدامه‬ ‫وعند‬ .‫المعطل‬‫العنرص‬ ‫إىل‬ ‫أفتح‬ ‫نص‬ ‫لون‬ :‫التمرير‬ <div class="list-group"> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item">Third item</a> </div> ‫استخدم‬ ‫الصف‬ list-group-flush :‫المستديرة‬ ‫والزوايا‬ ‫الحدود‬ ‫بعض‬ ‫الة‬‫ز‬‫إل‬ <ul class="list-group list-group-flush"> …. </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 162 ‫االفقية‬ ‫القوائم‬ ‫مجموعات‬ ‫بعضها‬ ‫فوق‬ ‫تكون‬ ‫أن‬ ‫من‬ ً ‫بدال‬ ‫جنب‬ ‫إىل‬ ‫ا‬ً‫(جنب‬ ‫ا‬ً‫عمودي‬ ‫عرضها‬ ‫من‬ ً ‫بدال‬ ‫ا‬ً‫أفقي‬ ‫القائمة‬ ‫عناص‬ ‫عرض‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫اال‬ ‫فأضف‬ ، )‫البعض‬ ‫لصف‬ . list-group -orizontal . ‫إىل‬ list-group : <ul class="list-group list-group-horizontal"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul> ‫العالقة‬ ‫ذات‬ ‫الصفوف‬ ‫استخدام‬ ‫يمكن‬ ‫ال‬ ‫صفوف‬ :‫القائمة‬ ‫عناص‬ ‫لتلوين‬ ‫السياقية‬ ‫لتلوين‬ ‫استخدامها‬ ‫يمكن‬ ‫التي‬ ‫الصفوف‬ list-items : ‫هي‬ .list-group-item-success, list-group-item-secondary, list-group-item- info, list-group-item-warning, .list-group-item-danger, .list-group-item- primary, list-group-item-dark and list-group-item-light,: <ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 163 ‫اإلشارات‬ ‫مع‬ ‫قوائم‬ ‫مجموعة‬ Badges ‫ر‬ ‫بي‬ ‫اجمع‬ ‫الصفوف‬ . badge ‫و‬ ‫الصفوف‬ :‫القائمة‬ ‫مجموعة‬ ‫داخل‬ ‫ات‬‫ر‬‫شا‬ ‫إلضافة‬ ‫المساعدة‬ <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Inbox <span class="badge badge-primary badge-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Ads <span class="badge badge-primary badge-pill">50</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Junk <span class="badge badge-primary badge-pill">99</span> </li> </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 164 ‫او‬ ‫البطاقة‬ ‫الكارد‬ Cards ‫ي‬ ‫ف‬ ‫البطاقة‬ Bootstrap 4 ‫للرؤوس‬ ‫ات‬‫ر‬‫خيا‬ ‫يتضمن‬ .‫محتواه‬ ‫حول‬ ‫الحشو‬ ‫ببعض‬ ‫محاط‬ ‫صندوق‬ ‫عن‬ ‫عبارة‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫واأللوان‬ ‫والمحتوى‬ ‫والتذييالت‬ ‫باستخدام‬ ‫أساسية‬ ‫بطاقة‬ ‫إنشاء‬ ‫يتم‬ ‫الصف‬ card ‫عىل‬ ‫البطاقة‬ ‫داخل‬ ‫الموجود‬ ‫المحتوى‬ ‫ويحتوي‬ ، ‫الصف‬ . card-body : <div class="card"> <div class="card-body">Basic card</div> </div> ‫التذييل‬ ‫و‬ ‫الرأس‬ ‫ي‬ ‫ضيف‬ ‫الصف‬ card-header ‫و‬ ‫البطاقة‬ ‫إىل‬ ‫ا‬ ً ‫عنوان‬ ‫ي‬ ‫ضيف‬ ‫الصف‬ card-footer :‫البطاقة‬ ‫إىل‬ ً ‫تذييال‬ <div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> ‫استخدم‬ ، ‫للبطاقة‬ ‫الخلفية‬ ‫لون‬ ‫إلضافة‬ ‫ال‬ ‫صفوف‬ ‫السياقية‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 165 .bg-Primary , . bg-Success , . bg-info , . bg-warning , .bg-danger , . bg-… Titles, text, and links . ‫استخدم‬ card-title ‫ستخدم‬ ُ ‫ت‬ .‫عنوان‬ ‫عنرص‬ ‫أي‬ ‫إىل‬ ‫البطاقة‬ ‫عناوين‬ ‫إلضافة‬ ‫الصف‬ card-text ‫الة‬‫ز‬‫إل‬ < ‫لعنرص‬ ‫السفلية‬ ‫الهوامش‬ p . ‫داخل‬ )‫الوحيد‬ ‫(أو‬ ‫ي‬ ‫فرع‬ ‫عنرص‬‫آخر‬ ‫كان‬‫إذا‬ > card-body ‫تضيف‬ . ‫الصف‬ . card-link .‫الماوس‬‫تمرير‬ ‫ر‬ ‫وتأثت‬ ‫تباط‬‫ر‬‫ا‬ ‫أي‬ ‫إىل‬ ‫أزرق‬ ‫ا‬ ً ‫لون‬ <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some text. Some text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> Card Images . ‫أضف‬ card-img-top . ‫أو‬ card-img-bottom < ‫إىل‬ img ‫ي‬ ‫السفىل‬ ‫أو‬ ‫العلوي‬ ‫الجزء‬ ‫ي‬ ‫ف‬ ‫الصورة‬ ‫لوضع‬ > . ‫خارج‬ ‫الصورة‬ ‫أضفنا‬ ‫أننا‬ ‫الحظ‬ .‫البطاقة‬ ‫داخل‬ card-body ‫بالكامل‬ ‫بالعرض‬ ‫لتمتد‬ . <div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 166 ‫الممتد‬ ‫الرابط‬ ‫أضف‬ ‫الصف‬ . stretched-link ‫وقابلة‬ ‫عليها‬‫للنقر‬ ‫قابلة‬ ‫بأكملها‬ ‫البطاقة‬ ‫وستجعل‬ ، ‫البطاقة‬ ‫داخل‬ ‫ابط‬‫ر‬ ‫إىل‬ :)‫ابط‬‫ر‬ ‫بمثابة‬ ‫البطاقة‬ ‫(ستكون‬ ‫فوقها‬‫للتمرير‬ <a href="#" class="btn btn-primary stretched-link">See Profile</a> ‫وشاح‬ ‫عمل‬ Overlays . ‫واستخدم‬ ‫بطاقة‬ ‫خلفية‬ ‫إىل‬ ‫صورة‬ ‫ل‬ ّ ‫حو‬ card-img-overlay :‫الصورة‬ ‫أعىل‬ ‫نص‬ ‫إلضافة‬ <div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 167 ‫االرتفاع‬ ‫المساوية‬ ‫البطاقات‬ Card Deck ‫ر‬ ‫تنىس‬ ‫الصف‬ . card-deck ‫ا‬ً‫تلقائي‬ ‫التخطيط‬ ‫ضبط‬ ‫سيتم‬ . ‫ر‬ ‫متساويي‬ ‫وعرض‬ ‫ارتفاع‬ ‫ذات‬ ‫البطاقات‬ ‫من‬ ‫شبكة‬ .‫البطاقات‬ ‫من‬ ‫المزيد‬ ‫إدخال‬ ‫عند‬ ‫من‬ ‫(أقل‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫شاشات‬ ‫عىل‬ ‫ا‬ً‫عمودي‬ ‫البطاقات‬ ‫عرض‬ ‫يتم‬ :‫مالحظة‬ 576 :)‫بكسل‬ <div class="card-deck"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 168 ‫البطاقات‬ ‫مجموعة‬ ‫تشبه‬ ‫الصف‬ . card-group ‫الصف‬ . card-deck ‫أن‬‫هو‬ ‫الوحيد‬ ‫والفرق‬ . ‫الصف‬ . card-group ‫تزيل‬ .‫بطاقة‬ ‫كل‬ ‫ر‬ ‫بي‬ ‫واليشى‬ ‫اليمت‬ ‫الهوامش‬ ‫عىل‬ ‫ا‬ً‫عمودي‬ ‫البطاقات‬ ‫عرض‬ ‫يتم‬ :‫مالحظة‬ ‫من‬ ‫(أقل‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫شاشات‬ 576 : ‫ي‬ ‫وسفىل‬ ‫علوي‬ ‫بهامش‬ ، )‫بكسل‬ <div class="card-group"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 169 ‫المنسدلة‬ ‫القوائم‬ Dropdowns ‫القائمة‬ :‫ا‬ ً ‫مسبق‬ ‫محددة‬ ‫قائمة‬ ‫من‬ ‫واحدة‬ ‫قيمة‬ ‫باختيار‬ ‫للمستخدم‬ ‫تسمح‬ ‫للتبديل‬ ‫قابلة‬ ‫قائمة‬ ‫ي‬ ‫ه‬ ‫المنسدلة‬ <div class="dropdown"> <button type="button" class="btn btn-primary dropdown- toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ : ‫ر‬ ‫تشت‬ ‫الصف‬ . dropdown .‫منسدلة‬ ‫قائمة‬ ‫إىل‬ ‫أضف‬ ‫الصف‬ dropdown < ‫عنرص‬ ‫إىل‬ div ‫أضف‬ ‫ثم‬ .‫بالفعل‬ ‫المنسدلة‬ ‫القائمة‬ ‫إلنشاء‬ > ‫الصف‬ . dropdown-item .‫المنسدلة‬ ‫القائمة‬ ‫داخل‬ )‫ار‬‫ر‬‫أز‬ ‫أو‬ ‫(روابط‬ ‫عنرص‬ ‫كل‬‫إىل‬ ‫المنسدل‬ ‫القائمة‬ ‫فاصل‬ ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . dropdown-divider :‫رفيع‬ ‫ي‬ ‫ر‬ ‫أفق‬ ‫بحد‬ ‫المنسدلة‬ ‫القائمة‬ ‫داخل‬ ‫الروابط‬ ‫لفصل‬ <div class="dropdown-divider"></div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 170 ‫المنسدلة‬ ‫القائمة‬ ‫رأس‬ ‫استخدام‬ ‫يتم‬ ‫الصف‬ . dropdown-header :‫المنسدلة‬ ‫القائمة‬ ‫داخل‬ ‫رؤوس‬ ‫إلضافة‬ <div class="dropdown-header">Dropdown header 1</div> ‫العنصر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ ‫ا‬ ‫باستخدام‬ ‫محدد‬ ‫منسدلة‬ ‫قائمة‬ ‫عنرص‬ ‫ر‬ ‫بتميت‬ ‫قم‬ ‫لصف‬ active .)‫أزرق‬ ‫خلفية‬ ‫لون‬ ‫(يضيف‬ ‫استخدم‬ ، ‫المنسدلة‬ ‫القائمة‬ ‫ي‬ ‫ف‬ ‫عنرص‬ ‫لتعطيل‬ ‫الصف‬ . disabled ‫ورمز‬ ‫فاتح‬ ‫رمادي‬ ‫نص‬ ‫لون‬ ‫عىل‬ ‫(تحصل‬ :)‫التمرير‬ ‫عند‬ "‫الوقوف‬ ‫ممنوع‬ ‫"عالمة‬ <a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a> Dropdown Position " ‫قائمة‬ ‫إنشاء‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ dropright " ‫أو‬ " dropleft ‫إضافة‬ ‫طريق‬ ‫عن‬ ، " ‫الصف‬ . dropright ‫أو‬ . dropleft :‫ا‬ً‫تلقائي‬ ‫السهم‬ / ‫اإلقحام‬ ‫عالمة‬ ‫إضافة‬ ‫تتم‬ ‫أنه‬ ‫الحظ‬ .‫المنسدلة‬ ‫القائمة‬‫عنرص‬ ‫إىل‬ <div class="dropdown dropright"> <div class="dropdown dropleft">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 171 ‫األسفل‬ ‫من‬ ً ‫بدال‬ ‫ألعىل‬ ‫المنسدلة‬ ‫القائمة‬ ‫توسيع‬ ‫تريد‬ ‫كنت‬‫إذا‬ <div class="dropup"> ‫القائمة‬ ‫ضمن‬ ‫نص‬ ‫المنسدلة‬ ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . dropdown-item-text ‫عىل‬ ‫ستخدم‬ ُ ‫ت‬ ‫أو‬ ، ‫منسدلة‬ ‫قائمة‬ ‫عنرص‬ ‫إىل‬ ‫عادي‬ ‫نص‬ ‫إلضافة‬ . ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫االرتباط‬ ‫لتصميم‬ ‫الروابط‬ <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item-text" href="#">Text Link</a> <span class="dropdown-item-text">Just Text</span> </div> ‫منسدلة‬ ‫قائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data- toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 172 ‫الطي‬ Collapse :‫وإظهارها‬ ‫المحتوى‬ ‫من‬ ‫ة‬ ‫ر‬ ‫كبت‬‫كمية‬‫إخفاء‬ ‫تريد‬ ‫عندما‬ ‫مفيدة‬ ‫ي‬ ‫للط‬ ‫القابلة‬ ‫العناص‬ ‫تعد‬ <button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫ش‬ ‫ر‬ ‫تشت‬ ‫الصف‬ . collapse <( ‫ي‬ ‫للط‬ ‫قابل‬ ‫عنرص‬ ‫إىل‬ div ‫أو‬ ‫عرضه‬ ‫سيتم‬ ‫الذي‬ ‫المحتوى‬ ‫هو‬ ‫هذا‬ )‫مثالنا‬ ‫ي‬ ‫ف‬ > .‫واحدة‬‫زر‬ ‫بنقرة‬ ‫إخفاؤه‬ ‫أضف‬ ، ‫ي‬ ‫للط‬ ‫القابل‬ ‫المحتوى‬ )‫إخفاء‬ / ‫(إظهار‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ‫الخاصية‬ data-toggle = "collapse ‫عنرص‬ ‫إىل‬ " < a < ‫أو‬ > button ‫أضف‬ ‫ثم‬ .> ‫الخاصية‬ data-target = "# id" ‫ي‬ ‫للط‬ ‫القابل‬ ‫بالمحتوى‬ ‫الزر‬ ‫لربط‬ < ‫لعناص‬ ‫بالنسبة‬ :‫مالحظة‬ a ‫استخدام‬ ‫يمكنك‬ ، > ‫الخاصية‬ href ‫من‬ ً ‫بدال‬ ‫الخاصية‬ data-target : <a href="#demo" data-toggle="collapse">Collapsible</a> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> ‫إضافة‬ ‫يمكنك‬ ، ‫ذلك‬ ‫ومع‬ .‫ا‬ً‫مخفي‬ ‫ي‬ ‫للط‬ ‫القابل‬ ‫المحتوى‬ ‫يكون‬ ، ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫الصف‬ . show ‫المحتوى‬‫إلظهار‬ :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ <div id="demo" class="collapse show"> Lorem ipsum dolor text.... </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 173 ‫أكورديون‬ Accordion ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ Accordion .‫البطاقة‬ ‫مكون‬ ‫توسيع‬ ‫خالل‬ ‫من‬ ‫ا‬ ً ‫بسيط‬ ‫استخدم‬ :‫مالحظة‬ ‫الخاصية‬ data-parent ‫جميع‬ ‫إغالق‬ ‫من‬ ‫للتأكد‬ ‫العنرص‬ ‫ضمن‬ ‫ي‬ ‫للط‬ ‫القابلة‬ ‫العناص‬ . ‫ي‬ ‫للط‬ ‫القابلة‬ ‫العناص‬ ‫أحد‬ ‫عرض‬ ‫عند‬ ‫المحدد‬ ‫ي‬ ‫الرئيىس‬ <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data- toggle="collapse" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data- toggle="collapse" href="#collapseThree"> Collapsible Group Item #3
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 174 </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> </div> ‫التجوال‬ ‫قائمة‬ Navs ‫بإضافة‬ ‫فقم‬ ، ‫بسيطة‬ ‫أفقية‬ ‫قائمة‬ ‫إنشاء‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫الصف‬ . nav < ‫عنرص‬ ‫إىل‬ ul ، > . ‫ب‬ ‫ا‬ ً ‫متبوع‬ nav-item < ‫لكل‬ li ‫وإضافة‬ > ‫الصف‬ . nav-link :‫روابطها‬ ‫إىل‬ <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> ‫التبويبات‬ tabs <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 175 ‫التجوال‬ ‫شريط‬ Navigation :‫الصفحة‬ ‫أعىل‬ ‫وضعه‬ ‫يتم‬ ‫تنقل‬ ‫أس‬‫ر‬ ‫هو‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ Basic Navbar ‫باستخدام‬ Bootstrap .‫الشاشة‬ ‫حجم‬ ‫حسب‬ ،‫ينهار‬ ‫أو‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫يمتد‬ ‫أن‬ ‫يمكن‬ ، ‫باستخدام‬ ‫ي‬ ‫قياش‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إنشاء‬ ‫يتم‬ ‫الصف‬ . navbar ‫ب‬ ‫ا‬ ً ‫متبوع‬ ، ‫الصف‬ ‫ي‬ ‫للط‬ ‫قابلة‬ ‫متجاوبة‬ . : navbar- expand-xl | lg | md | sm ‫أو‬ ‫متوسطة‬ ‫أو‬ ‫ة‬ ‫ر‬ ‫كبت‬‫أو‬ ‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫كبت‬‫شاشات‬ ‫عىل‬ ‫ا‬ً‫عمودي‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫(يكدس‬ .)‫ة‬ ‫ر‬ ‫صغت‬ < ‫عنرص‬ ‫استخدم‬ ، ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫داخل‬ ‫روابط‬ ‫إلضافة‬ ul ‫مع‬ > class = "navbar-nav < ‫أضف‬ ‫ثم‬ ." li > ‫ب‬ ‫عناص‬ ‫الصف‬ . nav-item ‫م‬ < ‫بعنرص‬ ‫تبوعة‬ a ‫ب‬ > ‫الصف‬ . nav-link : <!-- A grey horizontal navbar that becomes vertical on small screens --> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 176 Vertical Navbar ‫الة‬‫ز‬‫بإ‬ ‫قم‬ ‫الصف‬ . navbar-expand-xl | lg | md | sm :‫عمودي‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلنشاء‬ <!-- A vertical navbar --> <nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> Centered Navbar ‫أضف‬ ‫الصف‬ . justify-content-center .‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫لتوسيط‬ ‫الشاشات‬ ‫عىل‬ .‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫والكبت‬ ‫ة‬ ‫ر‬ ‫والكبت‬ ‫المتوسطة‬ ‫الشاشات‬ ‫عىل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫بتوسيط‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيقوم‬ ‫(بسبب‬‫اليسار‬ ‫إىل‬ ‫ومحاذاة‬ ‫ا‬ً‫عمودي‬ ‫عرضها‬ ‫سيتم‬ ، ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الصف‬ . navbar-expand-sm :) <nav class="navbar navbar-expand-sm bg-light justify-content- center"> ... </nav>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 177 Colored Navbar ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ ‫الصفوف‬ . bg-color .( ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫خلفية‬ ‫لون‬ ‫ر‬ ‫لتغيت‬ bg-Primary . ‫و‬ bg-Success ‫و‬ . bg-info . ‫و‬ bg-warning . ‫و‬ bg-danger .‫و‬ bg-Secondary . ‫و‬ bg - . ‫و‬ ‫الظالم‬ bg-light ) . ‫مالحظة‬ ‫باستخدام‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫الروابط‬ ‫جميع‬ ‫إىل‬ ‫أبيض‬ ‫نص‬ ‫لون‬ ‫أضف‬ : ‫الصف‬ . navbar-dark ‫أو‬ ، ‫استخدم‬ ‫الصف‬ . navbar-light .‫أسود‬ ‫نص‬ ‫لون‬ ‫إلضافة‬ <!-- Grey with black text --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <!-- Black with white text --> <nav class="navbar navbar-expand-sm bg-dark navbar- dark">...</nav> <!-- Blue with white text --> <nav class="navbar navbar-expand-sm bg-primary navbar- dark">...</nav> ‫اال‬ ‫أضف‬ :‫المعطلة‬ / ‫النشطة‬ ‫الحالة‬ ‫لصف‬ . active < ‫عنرص‬ ‫إىل‬ a ‫أو‬ ، ‫ي‬ ‫الحاىل‬ ‫تباط‬‫ر‬‫اال‬ ‫ر‬ ‫لتميت‬ > ‫الصف‬ . disabled .‫للنقر‬ ‫قابل‬ ‫ر‬ ‫غت‬ ‫االرتباط‬ ‫أن‬ ‫إىل‬ ‫لإلشارة‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 178 Brand / Logo ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . navbar-brand :‫لصفحتك‬ ‫وع‬ ‫ر‬ ‫المش‬ / ‫الشعار‬ / ‫التجارية‬ ‫العالمة‬ ‫اسم‬ ‫از‬‫ر‬‫إلب‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav> ‫استخدام‬ ‫عند‬ ‫الصف‬ . ‫التجارية‬ ‫العالمة‬ navbar ‫سيقوم‬ ،‫الصور‬ ‫عىل‬ Bootstrap 4 ‫الصورة‬ ‫بتصميم‬ ‫ا‬ً‫تلقائي‬ .‫ا‬ً‫عمودي‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫لتالئم‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav> Collapsing The Navigation Bar ‫عنها‬ ‫يكشف‬‫بزر‬ ‫واستبدالها‬ ‫التنقل‬ ‫روابط‬ ‫إخفاء‬ ‫تريد‬ ، ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الشاشات‬ ‫عىل‬ ً ‫خاصة‬ ، ‫األحيان‬ ‫من‬ ‫ر‬ ‫كثت‬ ‫ي‬ ‫ف‬ .‫فوقها‬ ‫النقر‬ ‫عند‬ ‫به‬ ‫ا‬ً ‫زر‬ ‫استخدم‬ ، ‫ي‬ ‫للط‬ ‫قابل‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلنشاء‬ class = "navbar-toggler ‫و‬ " data-toggle = "collapse ‫و‬ " data-target = "# thetarget ‫داخل‬ )‫إلخ‬ ، ‫(الروابط‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫محتوى‬ ‫بلف‬ ‫قم‬ ‫ثم‬ ." ‫عنرص‬ div ‫باستخدام‬ class = "collapse navbar-collapse :‫للزر‬ ‫البيانات‬ ‫هدف‬ ‫يطابق‬ ‫بمعرف‬ ‫ا‬ ً ‫متبوع‬ ، " " thetarget ." <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsibleNavbar">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 179 <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> ‫مالحظة‬ ‫الة‬‫ز‬‫إ‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ : ‫الصف‬ . navbar-expand-md ‫زر‬ ‫وعرض‬ ‫ا‬ ً‫دائم‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ارتباطات‬ ‫إلخفاء‬ .‫التبديل‬ Navbar With Dropdown <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data- toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 180 ‫المثبت‬ ‫التجوال‬ ‫شريط‬ .‫أسفلها‬ ‫أو‬ ‫الصفحة‬ ‫أعىل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إصالح‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ .‫الصفحة‬‫تمرير‬ ‫عن‬ ‫مستقل‬ )‫أسفل‬ ‫أو‬ ‫(أعىل‬ ‫ثابت‬ ‫موضع‬ ‫ي‬ ‫ف‬ ‫ا‬ً‫مرئي‬ ‫الثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫يظل‬ ‫تجعل‬ ‫الصف‬ . fixed-top :‫األعىل‬ ‫ي‬ ‫ف‬ ‫ا‬ ً ‫ثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> ‫استخدم‬ ‫الصف‬ . fixed-bottom :‫الصفحة‬ ‫أسفل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلبقاء‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav> ‫استخدم‬ ‫الصف‬ . sticky-top :‫مالحظة‬ .‫بعده‬‫التمرير‬ ‫عند‬ ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫يظل‬ / ‫ا‬ ً ‫ثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫لجعل‬ ‫اال‬ ‫هذه‬ ‫لصف‬ ‫ي‬ ‫ف‬ ‫تعمل‬ ‫ال‬ IE11 .) ‫ي‬ ‫ر‬ ‫نست‬ :‫موضع‬ ‫أنها‬ ‫عىل‬ ‫(ستعاملها‬ ‫السابقة‬ ‫ات‬‫ر‬‫واإلصدا‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 181 ‫النماذج‬ Forms ‫باستخدام‬ ‫العام‬ ‫التصميم‬ ‫بعض‬ ‫ا‬ً‫تلقائي‬ ‫النموذج‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫ر‬ ‫تتلق‬ Bootstrap : < ‫النصية‬ ‫العناص‬ ‫جميع‬ input < ‫و‬ > textarea < ‫و‬ > select ‫مع‬ > class .form-control ‫عرض‬ ‫لها‬ 100 .٪ ‫يوفر‬ Bootstrap :‫النموذج‬ ‫تخطيطات‬ ‫من‬ ‫ر‬ ‫نوعي‬ )‫العرض‬ ‫(كامل‬ ‫مكدس‬ ‫نموذج‬ .‫إرسال‬‫وزر‬ ، ‫واحد‬‫اختيار‬ ‫ع‬‫ومرب‬ ، ‫إدخال‬ ‫ي‬ ‫حقىل‬ ‫عىل‬ ‫يحتوي‬ ‫ا‬ ً ‫مكدس‬ ‫ا‬ ً ‫نموذج‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ر‬ ‫ينىس‬ . ‫مع‬ ‫غالف‬ ‫عنرص‬ ‫أضف‬ form-group :‫المناسبة‬ ‫الهوامش‬ ‫لضمان‬ ، ‫النموذج‬ ‫ي‬ ‫ف‬ ‫تحكم‬ ‫عنرص‬ ‫كل‬‫حول‬ ، <form action="/action_page.php"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 182 ‫واحد‬ ‫سطر‬ ‫على‬ ‫النموذج‬ .‫اليسار‬ ‫إىل‬ ‫ومحاذاة‬ ‫مضمنة‬ ‫العناص‬ ‫جميع‬ ‫تكون‬ ، ‫مضمن‬ ‫نموذج‬ ‫ي‬ ‫ف‬ ‫عن‬ ‫عرضها‬ ‫يقل‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العرض‬ ‫ات‬‫ر‬‫إطا‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫النماذج‬ ‫عىل‬ ‫فقط‬ ‫هذا‬ ‫ينطبق‬ :‫مالحظة‬ 576 ‫عىل‬ .‫بكسل‬ ‫عن‬ ‫حجمها‬ ‫يقل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الشاشات‬ 576 .‫ا‬ً‫أفقي‬ ‫تكديسها‬ ‫سيتم‬ ، ‫بكسل‬ :‫المضمن‬ ‫للنموذج‬ ‫إضافية‬ ‫قاعدة‬ ‫أضف‬ class <‫عنرص‬ ‫إىل‬ ‫مضمنة‬ . form > ‫ي‬ ‫حقىل‬ ‫مع‬ ‫ا‬ ً ‫ن‬ ّ‫مضم‬ ‫ا‬ ً ‫نموذج‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ر‬ ‫ينىس‬ :‫واحد‬ ‫إرسال‬‫وزر‬ ، ‫واحد‬‫اختيار‬ ‫ع‬‫ومرب‬ ، ‫إدخال‬ <form class="form-inline" action="/action_page.php"> <label for="email">Email address:</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> <label for="pwd">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> Form Row/Grid ( ‫األعمدة‬ ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ col ‫أدوات‬ ‫استخدام‬ ‫دون‬ ‫النموذج‬ ‫مدخالت‬ ‫ومحاذاة‬ ‫عرض‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ) ‫حاوية‬ ‫داخل‬ ‫تضعها‬ ‫أن‬‫تذكر‬ ‫فقط‬ .‫التباعد‬ row . ، ‫أدناه‬ ‫المثال‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫ف‬ ‫والصفوف‬ ‫األعمدة‬ ‫عن‬ ‫المزيد‬ ‫تتعلم‬ ‫سوف‬ .‫جنب‬ ‫إىل‬ ‫ا‬ً‫جنب‬ ‫ان‬‫ر‬‫سيظه‬ ‫عمودين‬ ‫نستخدم‬ ‫الفصل‬ Bootstrap Grids . <form> <div class="row"> <div class="col"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pswd"> </div> </div> </form>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 183 . ‫فاستخدم‬ ، )‫اضية‬ ‫ر‬ ‫االفت‬ ‫العمود‬ ‫اريب‬‫ز‬‫م‬ ‫(تجاوز‬ ‫الشبكة‬ ‫هوامش‬ ‫تقليل‬ ‫تريد‬ ‫كنت‬‫إذا‬ form-row ‫من‬ ً ‫بدال‬ . row : <form> <div class="form-row"> <div class="col"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pswd"> </div> </div> </form> ‫النموذج‬ ‫تدقيق‬ Validation ‫استخدام‬ ‫يمكنك‬ ‫الصفوف‬ ‫من‬ ‫التحقق‬ ‫تم‬ .‫إما‬ ‫أضف‬ . ‫ر‬ ‫للمستخدمي‬ ‫قيمة‬ ‫مالحظات‬ ‫لتقديم‬ ‫مختلفة‬ ‫تحقق‬ < ‫عنرص‬ ‫إىل‬ ‫الصحة‬ ‫من‬ ‫التحقق‬ ‫إىل‬ ‫يحتاج‬ .‫أو‬ ‫صحته‬ form ‫مالحظات‬ ‫تقديم‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫ما‬ ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ، > ‫لإلشا‬ )‫صالح‬ ‫ر‬ ‫(غت‬‫أحمر‬ ‫أو‬ )‫(صالح‬ ‫أخرص‬ ‫حد‬ ‫اإلدخال‬ ‫لحقول‬ ‫سيكون‬ .‫بعده‬ ‫أو‬ ‫النموذج‬ ‫إرسال‬ ‫قبل‬ ‫التحقق‬ ‫رة‬ . ‫رسالة‬ ‫إضافة‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ .‫النموذج‬ ‫ي‬ ‫ف‬ ‫مفقود‬ ‫هو‬ ‫ما‬ ‫إىل‬ valid-feedback . ‫أو‬ invalid-feedback ‫إلخبار‬ .‫النموذج‬ ‫إرسال‬ ‫قبل‬ ‫به‬ ‫القيام‬ ‫يجب‬ ‫أو‬ ‫مفقود‬ ‫هو‬ ‫بما‬ ‫احة‬‫ص‬ ‫المستخدم‬ <form action="/action_page.php" class="was-validated"> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 184 <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check- input" type="checkbox" name="remember" required> I agree on blabla. <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ‫نستخدم‬ ، ‫المثال‬ ‫هذا‬ ‫في‬ .needs-validation ‫شيء‬ ‫أي‬ ‫هناك‬ ‫كان‬ ‫(إذا‬ ‫النموذج‬ ‫إرسال‬ ‫بعد‬ ‫التحقق‬ ‫تأثير‬ ‫سيضيف‬ ‫والذي‬ ، ‫أكواد‬ ‫بعض‬ ‫إضافة‬ ‫ًا‬‫ض‬‫أي‬ ‫عليك‬ ‫سيتعين‬ ‫أنه‬ ‫الحظ‬ .)‫مفقود‬ jQuery ‫صحيح‬ ‫بشكل‬ ‫لتعمل‬ ‫المثال‬ ‫لهذا‬: <form action="/action_page.php" class="needs-validation" novalidate> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check- input" type="checkbox" name="remember" required> I agree on blabla. <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <script> // Disable form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Get the forms we want to add validation styles to var forms = document.getElementsByClassName('needs-validation');
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 185 // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> ‫االدخال‬ ‫حقول‬ ‫يدعم‬ Bootstrap :‫التالية‬ ‫النموذج‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ • ‫إدخال‬ • ‫النص‬ ‫منطقة‬ • ‫االختيار‬ ‫خانة‬ • ‫تحديد‬ • ...... Input Bootstrap: Textarea ‫نصي‬ ‫حقل‬ <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> Bootstrap Checkboxes ‫ات؟‬‫ر‬‫الخيا‬ ‫قائمة‬ ‫ات‬‫ر‬‫خيا‬ ‫من‬ ‫تستخدمه‬ ‫أن‬ ‫تريد‬ ‫ما‬ :‫معطل‬ ‫ر‬ ‫األخت‬‫الخيار‬ .‫اختيار‬ ‫مربعات‬ ‫ثالثة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 186 <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check- input" value="" disabled>Option 3 </label> </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ ‫مع‬ ‫غالف‬ ‫عنرص‬ ‫استخدم‬ form-check ‫الهوامش‬ ‫لضمان‬ ‫أضف‬ ‫الصف‬ form-check-label ‫التسمية‬ ‫عناص‬ ‫إىل‬ label ‫و‬ ، form-check-input ‫إىل‬ input ‫استخدم‬ ‫الصف‬ . form-check-inline :‫السطر‬ ‫نفس‬ ‫عىل‬‫االختيار‬ ‫مربعات‬‫تظهر‬ ‫أن‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫االختيار‬ ‫أزرار‬ Radio Buttons ‫استخدام‬ ‫يتم‬ ‫تريد‬ ‫كنت‬‫إذا‬‫االختيار‬‫ار‬‫ر‬‫أز‬ ‫اجبار‬ ‫المحددة‬ ‫ات‬‫ر‬‫الخيا‬ ‫قائمة‬ ‫من‬ ‫فقط‬ ‫واحد‬‫اختيار‬ ‫عىل‬ ‫المستخدم‬ .‫ا‬ ً ‫مسبق‬ :‫معطل‬ ‫ر‬ ‫األخت‬‫الخيار‬ .‫اختيار‬ ‫ار‬‫ر‬‫أز‬ ‫ثالثة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحتوي‬ <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 187 <input type="radio" class="form-check- input" name="optradio" disabled>Option 3 </label> </div> ‫استخدم‬ ‫الصف‬ . form-check-inline :‫السطر‬ ‫نفس‬ ‫عىل‬‫االختيار‬‫ار‬‫ر‬‫أز‬‫تظهر‬ ‫أن‬ ‫تريد‬ ‫كنت‬‫إذا‬ <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check-inline disabled"> <label class="form-check-label"> <input type="radio" class="form-check- input" name="optradio" disabled>Option 3 </label> </div> Bootstrap Select List .‫متعددة‬ ‫ات‬‫ر‬‫خيا‬ ‫ر‬ ‫بي‬ ‫من‬ ‫باالختيار‬ ‫للمستخدم‬ ‫السماح‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫التحديد‬ ‫قوائم‬ ‫استخدام‬ ‫يتم‬ :)‫القائمة‬ ‫ر‬ ‫(اخت‬ ‫منسدلة‬ ‫قائمة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحتوي‬ <div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 188 Form Control Sizing . ‫باستخدام‬ ‫النموذج‬ ‫ي‬ ‫ف‬ ‫التحكم‬‫عنرص‬ ‫حجم‬ ‫ر‬ ‫بتغيت‬ ‫قم‬ form-control-sm . ‫أو‬ form-control-lg : <input type="text" class="form-control form-control-sm"> <input type="text" class="form-control form-control"> <input type="text" class="form-control form-control-lg"> Form Control File and Range ‫أضف‬ ‫الصف‬ . form-control-range " ‫اإلدخال‬ ‫نوع‬ ‫إىل‬ range . ‫أو‬ " form-control-file ‫اإلدخال‬ ‫نوع‬ ‫إىل‬ ‫تحكم‬ ‫عنرص‬ ‫لتصميم‬ "‫"ملف‬ ‫المجال‬ :‫الكامل‬ ‫بالعرض‬ ‫ملف‬ ‫حقل‬ ‫أو‬ <input type="range" class="form-control-range"> <input type="file" class="form-control-file border">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 189 ‫الحقول‬ ‫مجموعة‬ Input Groups ‫الصف‬ . input-group ‫خلف‬ ‫أو‬ ‫أمام‬‫زر‬ ‫أو‬ ‫نص‬ ‫أو‬‫رمز‬ ‫إضافة‬ ‫طريق‬ ‫عن‬ ‫اإلدخال‬ ‫ر‬ ‫لتحسي‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ."‫تعليمات‬ ‫"نص‬ ‫باعتباره‬ ‫اإلدخال‬ ‫حقل‬ . ‫استخدم‬ input-group-prepend .‫و‬ ، ‫اإلدخال‬ ‫أمام‬ ‫التعليمات‬ ‫نص‬ ‫إلضافة‬ input-group-append .‫اإلدخال‬ ‫خلف‬ ‫إلضافته‬ ‫أضف‬ ، ‫ا‬ً ‫ر‬ ‫أخت‬ ‫الصف‬ . input-group-text ‫لتصميم‬ .‫المحدد‬ ‫التعليمات‬ ‫نص‬ <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email"> <div class="input-group-append"> <span class="input-group-text">@.com</span> </div> </div> </form> ‫المجموعات‬ ‫حجم‬ ‫استخدم‬ ‫الصف‬ . input-group-sm . ‫و‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫اإلدخال‬ ‫لمجموعات‬ input-group-lg ‫لمجموعات‬ :‫ة‬ ‫ر‬ ‫الكبت‬ ‫اإلدخال‬ <form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control"> </div> </form>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 190 <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control"> </div> </form> Multiple Inputs and Helpers <!-- Multiple inputs --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Person</span> </div> <input type="text" class="form-control" placeholder="First Name"> <input type="text" class="form-control" placeholder="Last Name"> </div> </form> <!-- Multiple addons / help text --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input type="text" class="form-control"> </div> </form>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 191 ‫ضمن‬ ‫االزرار‬ Input Group <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button">Basic Button</button> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> ‫تسميات‬ Input Group ‫مجموعة‬ ‫خارج‬ ‫تسميات‬ ‫ضع‬ ،‫اإلدخال‬ ‫قيمة‬ ‫أن‬‫وتذكر‬ ‫الخاصية‬ for .‫اإلدخال‬ ‫معرف‬ ‫مع‬ ‫تتطابق‬ ‫أن‬ ‫يجب‬ :‫المدخالت‬ ‫عىل‬ ‫الضوء‬ ‫يسلط‬ ‫وسوف‬ ‫الملصق‬ ‫عىل‬‫انقر‬ :‫هنا‬ ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫بريدك‬ ‫اكتب‬ <label for="demo">Write your email here:</label> <div class="input-group mb-3"> <input type="text" class="form- control" placeholder="Email" id="demo" name="email"> <div class="input-group-append"> <span class="input-group-text">@.com</span> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 192 ‫مخصص‬ ‫اختيار‬ ‫حقل‬ Checkbox < ‫مثل‬ ، ‫حاوية‬ ‫عنرص‬ ‫بلف‬ ‫قم‬ ، ‫مخصص‬ ‫اختيار‬ ‫ع‬‫مرب‬ ‫إلنشاء‬ div ‫ب‬ ، > ‫الصف‬ . custom-control .‫و‬ custom-checkbox . ‫أضف‬ ‫ثم‬ .‫االختيار‬ ‫ع‬‫مرب‬ ‫حول‬ custom-control-input = ‫بالنوع‬ ‫اإلدخال‬ ‫إىل‬ " checkbox ." ‫بإضافة‬ ‫فقم‬ ، ‫المصاحب‬ ‫للنص‬ ‫تسميات‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ :‫تلميح‬ ‫الصف‬ . custom-control-label .‫إليه‬ ‫قيمة‬ ‫أن‬ ‫الحظ‬ ‫الخاصية‬ for :‫االختيار‬ ‫ع‬‫مرب‬ ‫معرف‬ ‫مع‬ ‫تتطابق‬ ‫أن‬ ‫يجب‬ <form> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control- input" id="customCheck" name="1"> <label class="custom-control-label" for="customCheck">Check this custom checkbox</label> </div> </form> ‫مخصص‬ ‫تبديل‬ ‫مفتاح‬ Switch < ‫مثل‬ ، ‫حاوية‬ ‫عنرص‬ ‫بلف‬ ‫قم‬ ، ‫مخصص‬ "‫تبديل‬ ‫"مفتاح‬ ‫إلنشاء‬ div ‫ب‬ ، > ‫الصف‬ . custom-control .‫و‬ custom-switch ‫أضف‬ ‫ثم‬ .‫اختيار‬ ‫ع‬‫مرب‬ ‫حول‬ ‫الصف‬ . custom-control-input :‫االختيار‬ ‫ع‬‫مرب‬ ‫إىل‬ <form> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="switch1"> <label class="custom-control-label" for="switch1">Toggle me</label> </div> </form> ‫مخصص‬ ‫وحيد‬ ‫اختيار‬ ‫حقل‬ Radio buttons < ‫مثل‬ ، ‫حاوية‬ ‫عنرص‬ ‫بلف‬ ‫قم‬ ، ‫مخصص‬ ‫اختيار‬‫زر‬ ‫إلنشاء‬ div ‫ب‬ ، > ‫الصف‬ ‫اديو‬‫ر‬‫وال‬ ‫المخصص‬ ‫التحكم‬ . ‫أضف‬ ‫ثم‬ .‫االختيار‬‫زر‬ ‫حول‬ ‫المخصص‬ custom-control-input " = ‫بالنوع‬ ‫اإلدخال‬ ‫إىل‬ radio ." ‫بإضافة‬ ‫فقم‬ ، ‫المصاحب‬ ‫للنص‬ ‫تسميات‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ :‫تلميح‬ ‫الصف‬ . custom-control-label .‫إليه‬ ‫قيمة‬ ‫أن‬ ‫الحظ‬ ‫الخاصية‬ for ‫اديو‬‫ر‬‫ال‬ ‫معرف‬ ‫مع‬ ‫تتطابق‬ ‫أن‬ ‫يجب‬ <form> <div class="custom-control custom-radio"> <input type="radio" class="custom-control- input" id="customRadio" name="1" value="customEx"> <label class="custom-control-label" for="customRadio">Custom radio</label> </div> </form>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 193 Custom Select Menu ‫أضف‬ ، ‫مخصصة‬ ‫تحديد‬ ‫قائمة‬ ‫إلنشاء‬ ‫الصف‬ custom-select < ‫عنرص‬ ‫إىل‬ select > ‫يوج‬ ‫ال‬ ‫عندما‬ ‫د‬ ‫مساحة‬ ‫تلقائيا‬ ‫لألعىل‬ ‫ترتفع‬ ‫للقائمة‬ : <form> <select name="cars" class="custom-select"> <option selected>Custom Select Menu</option> <option value="volvo">Volvo</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> ‫ة‬ ‫ر‬ ‫كبت‬ . Custom Range ‫إلنشاء‬ ‫حقل‬ ‫نطاق‬ ‫أضف‬ ، ‫مخصص‬ ‫الصف‬ custom-range ‫إىل‬ ‫حقل‬ <" = ‫بالنوع‬ ‫إدخال‬ range :"> <form> <label for="customRange">Custom range</label> <input type="range" class="custom- range" id="customRange" name="points1"> </form> Custom File Upload ‫قم‬ ، ‫مخصص‬ ‫ملف‬ ‫تحميل‬ ‫إلنشاء‬ ‫بتغليف‬ ‫ب‬ ‫حاوية‬ ‫عنرص‬ ‫الصف‬ . custom-file ‫حول‬ ‫حقل‬ ‫بالنوع‬ ‫اإلدخال‬ " = file . ‫بإضافة‬ ‫قم‬ ‫ثم‬ ." custom-file-input .‫إليه‬ ‫بإضافة‬ ‫فقم‬ ، ‫المصاحب‬ ‫للنص‬ ‫تسميات‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ :‫تلميح‬ ‫الصف‬ . custom-file-label ‫الحظ‬ .‫إليه‬ ‫قيمة‬ ‫أن‬ ‫الخاصية‬ for ‫تتط‬ ‫أن‬ ‫يجب‬ :‫االختيار‬ ‫ع‬‫مرب‬ ‫معرف‬ ‫مع‬ ‫ابق‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 194 <form> <div class="custom-file"> <input type="file" class="custom-file- input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label> </div> </form> <script> // Add the following code if you want the name of the file appear on select $(".custom-file-input").on("change", function() { var fileName = $(this).val().split("").pop(); $(this).siblings(".custom-file- label").addClass("selected").html(fileName); }); </script> ‫المعرض‬ Carousel Carousel .‫العناص‬ ‫ر‬ ‫بي‬ ‫للتنقل‬ ‫ائح‬ ‫ر‬ ‫رس‬ ‫عرض‬ ‫عن‬ ‫عبارة‬ <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="la.jpg" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="chicago.jpg" alt="Chicago"> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 195 <div class="carousel-item"> <img src="ny.jpg" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ :‫أعاله‬ ‫المثال‬ ‫من‬ ‫فصل‬ ‫كل‬‫يفعله‬ ‫لما‬ ‫وصف‬ . carousel ‫ر‬ ‫نىس‬ُ‫ي‬ ‫يطا‬ ‫ر‬ ‫رس‬ ‫ا‬ً‫دائري‬ . carousel-sources ‫ي‬ ‫ر‬ ‫(والت‬ ‫يحة‬ ‫ر‬ ‫رس‬ ‫كل‬‫أسفل‬ ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫النقاط‬ ‫ي‬ ‫ه‬ ‫هذه‬ .‫الدائري‬ ‫للعرض‬ ‫ات‬ ‫ر‬ ‫مؤرس‬ ‫يضيف‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫ائح‬ ‫ر‬ ‫الش‬ ‫عدد‬ ‫إىل‬ ‫ر‬ ‫تشت‬ )‫ا‬ً‫حالي‬ ‫المستخدم‬ ‫يشاهدها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫يحة‬ ‫ر‬ ‫والش‬ ‫الدائري‬ ‫الرف‬ . carousel-inner ‫الدائري‬ ‫الرف‬ ‫إىل‬ ‫ائح‬ ‫ر‬ ‫الش‬ ‫يضيف‬ . carousel-item ‫يحة‬ ‫ر‬ ‫رس‬ ‫كل‬‫محتوى‬ ‫يحدد‬ . carousel-control-prev ‫ر‬ ‫بي‬ ‫بالرجوع‬ ‫للمستخدم‬ ‫يسمح‬ ‫مما‬ ، ‫الدائري‬ ‫الرف‬ ‫إىل‬ )‫ا‬ ً ‫(سابق‬ ‫ا‬ً ‫يسار‬ ‫ا‬ً ‫زر‬ ‫يضيف‬ ‫ائح‬ ‫ر‬ ‫الش‬ . carousel-control-next ‫إىل‬ ‫باالنتقال‬ ‫للمستخدم‬ ‫يسمح‬ ‫مما‬ ، ‫الدائري‬ ‫الرف‬ ‫إىل‬ ) ‫ي‬ ‫(التاىل‬ ‫ا‬ ً ‫يمين‬ ‫ا‬ً ‫زر‬ ‫يضيف‬ ‫ائح‬ ‫ر‬ ‫الش‬ ‫ر‬ ‫بي‬ ‫األمام‬ carousel-control-prev-icon ‫مع‬ ‫ستخدم‬ُ‫ي‬ carousel-control-prev "‫"سابق‬‫زر‬ ‫إلنشاء‬ . carousel-control-next-icon ‫مع‬ ‫ستخدم‬ُ‫ي‬ carousel-control-next " ‫ي‬ ‫"التاىل‬‫زر‬ ‫إلنشاء‬ . slide ‫انتقال‬ ‫يضيف‬ CSS ‫اال‬ ‫هذه‬ ‫الة‬‫ز‬‫بإ‬ ‫قم‬ . ‫ي‬ ‫التاىل‬ ‫العنرص‬ ‫إىل‬ ‫عنرص‬ ‫من‬ ‫االنزالق‬ ‫عند‬ ‫كة‬ ‫الحر‬ ‫ر‬ ‫وتأثت‬ ‫لصف‬ ‫إذا‬ ‫ر‬ ‫التأثت‬ ‫هذا‬ ‫تريد‬ ‫ال‬ ‫كنت‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 196 Add Captions to Slides < ‫داخل‬ ‫عناص‬ ‫أضف‬ div class = "carousel-caption < ‫كل‬‫داخل‬ >" div class = "carousel-item >" :‫يحة‬ ‫ر‬ ‫رس‬ ‫لكل‬ ‫توضيحية‬ ‫تسمية‬ ‫إلنشاء‬ <div class="carousel-item"> <img src="la.jpg" alt="Los Angeles"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 197 ‫التلميح‬ Tooltip :‫عنرص‬ ‫فوق‬ ‫الماوس‬ ‫ر‬ ‫مؤرس‬ ‫المستخدم‬ ‫يحرك‬ ‫عندما‬‫يظهر‬ ‫ر‬ ‫صغت‬ ‫منبثق‬ ‫ع‬‫مرب‬ ‫عن‬ ‫عبارة‬ ‫األدوات‬ ‫تلميح‬ ‫مكون‬ ‫تلميح‬ ‫إنشاء‬ ‫كيفية‬ ‫أضف‬ ، ‫أداة‬ ‫تلميح‬ ‫إلنشاء‬ ‫الخاصية‬ data-toggle = "tooltip .‫عنرص‬ ‫إىل‬ " <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> ‫استخدم‬ ‫الخاصية‬ :‫األداة‬ ‫تلميح‬ ‫داخل‬ ‫عرضه‬ ‫يجب‬ ‫الذي‬ ‫النص‬ ‫لتحديد‬ ‫العنوان‬ <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> ‫التلميح‬ ‫تموضع‬ .‫العنرص‬ ‫أعىل‬ ‫األداة‬ ‫تلميح‬ ‫سيظهر‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫استخدم‬ ‫الخاصية‬ ‫من‬ ‫األيمن‬ ‫أو‬ ‫األيش‬ ‫أو‬ ‫ي‬ ‫السفىل‬ ‫أو‬ ‫العلوي‬ ‫الجانب‬ ‫عىل‬ ‫التلميح‬ ‫موضع‬ ‫ر‬ ‫لتعيي‬ ‫البيانات‬ ‫وضع‬ :‫العنرص‬ <a href="#" data-toggle="tooltip" data- placement="top" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data- placement="bottom" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data- placement="left" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data- placement="right" title="Hooray!">Hover</a>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 198 ‫المنبثقة‬ ‫نوافذ‬ Modal ‫هب‬ ‫المنبثقة‬ ‫النافذة‬ :‫الحالية‬ ‫الصفحة‬ ‫أعىل‬ ‫عرضها‬ ‫يتم‬ ‫منبثقة‬ ‫نافذة‬ / ‫حوار‬ ‫ع‬‫مرب‬ <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data- target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data- dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data- dismiss="modal">Close</button> </div> </div> </div> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 199 ‫انميشن‬ ‫إضافة‬ animation ‫استخدم‬ ‫الصف‬ . fade :‫النموذج‬ ‫وإغالق‬ ‫فتح‬ ‫عند‬ ‫ر‬ ‫يتالش‬ ‫ر‬ ‫تأثت‬ ‫إلضافة‬ <!-- Fading modal --> <div class="modal fade"></div> <!-- Modal without animation --> <div class="modal"></div> ‫حجم‬ Modal ‫إضافة‬ ‫طريق‬ ‫عن‬ ‫النموذج‬ ‫حجم‬ ‫ر‬ ‫بتغيت‬ ‫قم‬ ‫الصف‬ modal-sm ‫أو‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫وط‬ ‫ر‬ ‫للش‬ ‫الصف‬ modal-lg ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫للنماذج‬ modal-xl .‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫وط‬ ‫ر‬ ‫للش‬ ‫أضف‬ ‫الصف‬ < ‫عنرص‬ ‫إىل‬ ‫الحجم‬ div ‫مع‬ > class .modal - :‫الحوار‬ Small Modal <div class="modal-dialog modal-sm"> Large Modal <div class="modal-dialog modal-lg"> Extra Large Modal <div class="modal-dialog modal-xl"> .‫الحجم‬ ‫ي‬ ‫ف‬ "‫"متوسطة‬ ‫الوسائط‬ ‫تكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫المنبثقة‬ ‫النافذة‬ ‫توسيط‬ ‫باستخدام‬ ، ‫الصفحة‬ ‫داخل‬ ‫ا‬ً‫وأفقي‬ ‫ا‬ً‫عمودي‬ ‫النموذج‬ ‫بتوسيط‬ ‫قم‬ ‫الصف‬ modal - :‫الحوار‬ ‫عىل‬‫كز‬ ‫تر‬ ‫ي‬ ‫ر‬ ‫الت‬‫الحوار‬ <div class="modal-dialog modal-dialog-centered"> Scrolling Modal ، ‫النموذج‬ ‫داخل‬ ‫المحتوى‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫لديك‬ ‫يكون‬ ‫عندما‬ ‫أدناه‬ ‫األمثلة‬‫انظر‬ .‫الصفحة‬ ‫إىل‬‫تمرير‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إضافة‬ ‫تتم‬ :‫لفهمها‬ <div class="modal-dialog"> ‫إضافة‬ ‫طريق‬ ‫عن‬ ، ‫نفسها‬ ‫الصفحة‬ ‫من‬ ً ‫بدال‬ ، ‫فقط‬ ‫النموذج‬ ‫داخل‬‫التمرير‬ ‫الممكن‬ ‫من‬ ، ‫ذلك‬ ‫ومع‬ modal- dialog-scrollable . ‫إىل‬ modal - :‫الحوار‬ <div class="modal-dialog modal-dialog-scrollable">
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 200 ‫األدوات‬ ‫صفوف‬ Utilities ‫يحتوي‬ Bootstrap 4 ‫من‬ ‫ر‬ ‫الكثت‬ ‫عىل‬ ‫الصفوف‬ ‫أي‬ ‫استخدام‬ ‫دون‬ ‫بشعة‬ ‫العناص‬ ‫لتصميم‬ ‫المساعدة‬ ‫األدوات‬ ‫كود‬ CSS . Borders ‫استخدم‬ ‫الصفوف‬ :‫عنرص‬ ‫من‬ ‫حدود‬ ‫الة‬‫ز‬‫إ‬ ‫أو‬ ‫إلضافة‬ ‫الحدود‬ <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> Border Color <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> Float and Clearfix ‫باستخدام‬ ‫ر‬ ‫اليمي‬ ‫إىل‬‫عنرص‬ ‫بتحريك‬ ‫قم‬ ‫الصف‬ . float-right . ‫باستخدام‬ ‫اليسار‬ ‫إىل‬ ‫أو‬ float-left ‫وقم‬ ، ‫باستخدام‬ ‫العوامات‬ ‫تحديد‬ ‫بإلغاء‬ ‫الصف‬ . clearfix : <div class="clearfix"> <span class="float-left">Float left</span> <span class="float-right">Float right</span> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 201 Shadows ‫الظل‬ <div class="shadow-none p-4 mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div> <div class="shadow p-4 mb-4 bg-white">Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div> Vertical Align ‫استخدم‬ ‫الصفوف‬ ، ‫مضمنة‬ ‫ومكتلة‬ ، ‫مضمنة‬ ‫عناص‬ ‫عىل‬ ‫فقط‬ ‫(تعمل‬ ‫العناص‬ ‫محاذاة‬ ‫ر‬ ‫لتغيت‬ ‫المحاذاة‬ :)‫الجدول‬ ‫وخاليا‬ ، ‫مضمنة‬ ‫جدول‬ ‫وعناص‬ <span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> Responsive Embeds ‫ر‬ ‫تضمي‬ ‫أو‬ ‫متجاوب‬ ‫فيديو‬ ‫بإنشاء‬ ‫قم‬ .‫األصل‬ ‫عرض‬ ‫عىل‬ ً‫بناء‬ ‫ائح‬ ‫ر‬ ‫رس‬ ‫عرض‬ . ‫عنرص‬ ‫أضف‬ embed-responsive - < ‫(مثل‬ ‫ر‬ ‫تضمي‬ ‫عناص‬ ‫أي‬ ‫إىل‬ iframe < ‫أو‬ > video ‫ي‬ ‫رئيىس‬ ‫عنرص‬ ‫ي‬ ‫ف‬ )> . ‫مع‬ embed-response :‫تختارها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫االرتفاع‬ ‫إىل‬ ‫العرض‬ ‫ونسبة‬ <!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 202 <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div> Visibility ‫الرؤية‬ ‫اال‬ ‫استخدم‬ ‫لصفوف‬ ‫اال‬ ‫هذه‬ :‫مالحظة‬ .‫العناص‬ ‫رؤية‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ‫المرئية‬ ‫ر‬ ‫غت‬ ‫أو‬ ‫ئية‬‫ر‬‫الم‬ ‫لصفوف‬ ‫قيمة‬ ‫ر‬ ‫تغت‬ ‫ال‬ ‫عرض‬ CSS : ‫ي‬ ‫مخق‬ : ‫ي‬ ‫مرن‬ ‫أو‬ ‫ي‬ ‫مرن‬ :‫الرؤية‬ ‫فقط‬ ‫يضيفون‬ . <div class="visible">I am visible</div> <div class="invisible">I am invisible</div> Position ‫التموضع‬ ‫استخدم‬ ‫الصف‬ . fixed-top :‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫عنرص‬ ‫أي‬ ‫بقاء‬ / ‫إلصالح‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> ‫استخدم‬ ‫الصف‬ . fixed-bottom :‫الصفحة‬ ‫أسفل‬ ‫ي‬ ‫ف‬ ‫عنرص‬ ‫أي‬ ‫بقاء‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed- bottom"> ... </nav>
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 203 ‫استخدم‬ ‫الصف‬ . sticky-top ‫هذه‬ :‫مالحظة‬ .‫بعده‬‫التمرير‬ ‫عند‬ ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫يبق‬ / ‫ا‬ ً ‫ثابت‬ ‫عنرص‬ ‫أي‬ ‫لجعل‬ ‫اال‬ ‫لصف‬ ‫ي‬ ‫ف‬ ‫تعمل‬ ‫ال‬ IE11 .) ‫ي‬ ‫ر‬ ‫نست‬ :‫موضع‬ ‫أنها‬ ‫عىل‬ ‫(ستعاملها‬ ‫السابقة‬ ‫ات‬‫ر‬‫واإلصدا‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav> Colors ‫االلوان‬ ‫الصفوف‬ . : ‫ي‬ ‫ه‬ ‫النص‬ ‫ألوان‬ text-muted . ‫و‬ text-Primary . ‫و‬ text-Success . ‫و‬ text-info . ‫و‬ text- warning . ‫و‬ text-risk . ‫و‬ text-Secondary .‫و‬ text-white . ‫و‬ text - ‫النص‬ ‫(لون‬ ‫ي‬ ‫نص‬ ‫ونص‬ ، ‫غامق‬ . ‫و‬ )‫أسود‬ ‫ا‬ً‫غالب‬ / ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ text-light : Background Colors ‫الصفوف‬ . : ‫ي‬ ‫ه‬ ‫الخلفية‬ ‫ألوان‬ bg-Primary .‫و‬ bg-Success . ‫و‬ bg-info . ‫و‬ bg-warning .‫و‬ bg-danger . ‫و‬ bg-Secondary .‫و‬ bg-dark . ‫و‬ bg-light . ‫مع‬ ‫استخدامها‬ ‫ي‬ ‫ف‬ ‫غب‬ ‫ر‬ ‫ست‬ ‫الحاالت‬ ‫بعض‬ ‫ي‬ ‫ف‬ ‫لذا‬ ، ‫النص‬ ‫لون‬ ‫تحدد‬ ‫ال‬ ‫الخلفية‬ ‫ألوان‬ ‫أن‬ ‫الحظ‬ ‫الصف‬ .* ‫نصية‬
Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 204 Block Elements ‫عنرص‬ ‫إىل‬ ‫عنرص‬ ‫لتحويل‬ ‫أضف‬ ، ‫كتلة‬ ‫الصف‬ . d-block ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ . ‫الصفوف‬ d - * - block ‫ي‬ ‫ف‬ ‫للتحكم‬ : ‫ر‬ ‫معي‬ ‫شاشة‬ ‫عرض‬ ‫عىل‬ ‫كتلة‬‫عنرص‬ ‫العنرص‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫ر‬ ‫مت‬ <span class="d-block bg-success">d-block</span> <span class="d-sm-block bg-success">d-sm-block</span> <span class="d-md-block bg-success">d-md-block</span> <span class="d-lg-block bg-success">d-lg-block</span> <span class="d-xl-block bg-success">d-xl-block</span> Flex ‫استخدم‬ ‫الصفوف‬ . flex - ‫باستخدام‬ ‫التخطيط‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ * flexbox . <div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 205 ‫ابع‬‫ر‬‫ال‬ ‫الفصل‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 206 ‫مقدمة‬ ‫عام‬ ‫ايش‬ ‫برندان‬ ‫الجافا‬ ‫لغة‬ ‫ابتكر‬ 1995 ‫كة‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫عمله‬ ‫أثناء‬ ‫موكا‬ ‫اسم‬ ‫تحت‬ ‫نتسكيب‬ , ‫جافا‬ ‫لغة‬ ‫من‬ ‫إياها‬ ‫ا‬ ً‫مستلهم‬ Java ‫لكنها‬ , ‫من‬ ‫الجافا‬ ‫لغة‬ ‫عن‬ ‫تختلف‬ ‫كة‬ ‫ر‬ ‫رس‬ Sun Microsystems ،‫بعضهما‬ ‫مثل‬ ‫ألنهما‬ ‫يرجع‬ ‫ال‬ ‫االسم‬ ‫ي‬ ‫ف‬ ‫والتشابه‬ ‫الحياة‬ ّ ‫بث‬ ‫ي‬ ‫ه‬ ‫اللغة‬ ‫هذه‬ ‫وفائدة‬ ‫الويب‬ ‫صفحات‬ ‫ي‬ ‫ف‬ ‫إلنشاء‬ ‫تستخدم‬ ‫حيث‬ ، ‫صفحات‬ ‫ويب‬ ‫تفاعلية‬ ‫ر‬ ‫أكت‬ . ‫سكرب‬ ‫جافا‬ ‫لغة‬ : ‫مالحظة‬ ‫ت‬ ‫الويب‬ ‫واجهات‬ ‫ي‬ ‫ف‬ ‫أهمها‬ ‫عديدة‬ ‫مجاالت‬ ‫ي‬ ‫ف‬ ‫تستخدم‬ . ً ‫حاليا‬ ‫عنه‬ ‫نتكلم‬ ‫الذي‬ ‫الويب‬ ‫صفحات‬ ‫او‬ ‫االمامية‬ ‫لمواصفات‬ ‫تخضع‬ ‫المستوى‬ ‫عالية‬ ‫لفة‬ ‫سكربت‬ ‫جافا‬ ‫لغة‬ ECMAScript ‫انها‬ ‫كما‬ ‫التوجه‬ ‫كائنية‬ OOP ‫لغة‬ ‫تفعل‬ ‫أن‬ ‫يمكن‬ ‫ماذا‬ JavaScript ‫؟‬ ‫عىل‬ ‫لغة‬ ‫أن‬ ‫من‬ ‫الرغم‬ ‫سكربت‬ ‫الجافا‬ ‫برمجية‬ ‫لغة‬ ‫اجها‬‫ر‬‫اد‬ ‫يمكن‬ ‫لكن‬ ‫ب‬ ‫ب‬ ‫س‬ ‫ا‬ ‫ي‬ ‫ف‬ ‫طة‬ ‫صفحات‬ HTML .
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 207 ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫األ‬ ‫مع‬ ‫الخاصية‬ ‫هذه‬ ‫مع‬ : ‫حداث‬ ‫صفحات‬ ‫ي‬ ‫ف‬ ‫أحداث‬ ‫ارفاق‬ ‫يمكن‬ HTML ‫تحميل‬ ‫انتهاء‬ ‫مثل‬ ‫ما‬ ‫ر‬ ‫شت‬ ‫حدوث‬ ‫عند‬ ‫عنرص‬ ‫عىل‬ ‫المستخدم‬ ‫ضغط‬ ‫عند‬ ‫أو‬ ‫الصفحة‬ HTML . ‫الويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫معي‬ ‫للغة‬ ‫يمكن‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫عناص‬ ‫اءة‬‫ر‬‫وق‬ ‫كتابة‬ HTML ‫للغة‬ ‫يمكن‬ : ‫سكربت‬ ‫الجافا‬ ‫عناص‬ ‫محتوى‬ ‫ر‬ ‫وتغيت‬ ‫كتابة‬ HTML . ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫لغة‬ ‫تسمح‬ ‫حيث‬ : ‫النماذج‬ ‫مع‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫أجل‬ ‫من‬ ‫فر‬ ‫ر‬ ‫الست‬ ‫اىل‬ ‫ارساله‬ ‫قبل‬ ‫النموذج‬ ‫من‬ ‫بالتأكد‬ . ‫فر‬ ‫ر‬ ‫الست‬ ‫عىل‬ ‫تحميلها‬ ‫يتم‬ ‫اضافية‬ ‫عمليات‬ ‫تجنب‬ ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكرب‬ ‫الجافا‬ ‫ت‬ JavaScript : ‫المستخدم‬ ‫متصفح‬ ‫لمعرفة‬ ‫معينة‬ ‫صفحة‬ ‫فتح‬ ‫ثم‬ ‫ائر‬‫ز‬‫ال‬ ‫يستخدمه‬ ‫الذي‬ ‫المتصفح‬ ‫نوع‬ ‫تحديد‬ ‫يمكن‬ ‫حيث‬ . ‫لديه‬ ‫الذي‬ ‫المتصفح‬ ‫حسب‬ ‫مختلفة‬ ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكرب‬ ‫الجافا‬ ‫ت‬ JavaScript ‫المتصفح‬ ‫ر‬ ‫كوكت‬‫إلنشاء‬ cookies ‫ائر‬‫ز‬‫ال‬ ‫حاسوب‬ ‫عىل‬ ‫ومعلومات‬ ‫بيانات‬ ‫تحميل‬ ‫يمكن‬ ‫حيث‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 208 ‫ج‬ ‫كود‬ ‫اول‬ ‫لك‬ ‫سكربت‬ ‫افا‬ ‫الوسم‬ ‫استخدام‬ ‫<يمكن‬script> ‫كود‬‫اج‬‫ر‬‫إلد‬ ‫سكرب‬ ‫جافا‬ ‫ت‬ ‫صفحة‬ ‫داخل‬ HTML ‫كود‬ ‫سكربت‬ ‫الجافا‬ ‫يكتب‬ ‫ان‬ ‫يجب‬ ‫الوسم‬ ‫بداية‬ ‫ر‬ ‫بي‬ <script> ‫ونهايته‬</script> <script> // JavaScript goes here </script> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js</title> </head> <body> <h1 id="js-title">hello js</h1> <script> document.getElementById("js- title").innerHTML="hello php"; </script> </body> </html> ‫أننا‬ ‫الحظ‬ ‫وضع‬ ‫كود‬‫نا‬ ‫سكرب‬ ‫الجافا‬ ‫ت‬ ‫الصفحة‬ ‫أسفل‬ ‫ي‬ ‫ف‬ ‫اال‬‫و‬ ‫بشكل‬ ‫يعمل‬ ‫فلن‬ .‫جيد‬ ‫يمكنك‬ ‫وضع‬ ‫سكرب‬ ‫الجافا‬ ‫أكواد‬ ‫ت‬ ً‫كل‬ ‫من‬ <body> ‫و‬ <head> ‫الوقت‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫تالحظ؟‬ ‫ماذا‬, ‫الصفحة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫الكود‬ ‫وضع‬ ‫جرب‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 209 ‫ملف‬ ‫استخدام‬ JavaScript ‫خارجي‬ • . ‫منفصلة‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫الجافاسكربت‬ ‫أكواد‬ ‫استخدام‬ ‫يمكن‬ • ‫يمكن‬ ‫أكواد‬ ‫عىل‬ ‫ي‬ ‫ر‬ ‫الخارج‬ ‫الملف‬ ‫مايحتوي‬ ً ‫غالبا‬ ‫ي‬ ‫ف‬ ‫استخدامها‬ ‫صفحات‬ .‫متعددة‬ • ‫ي‬ ‫ه‬ ‫الجافاسكربت‬ ‫ملف‬ ‫صيغة‬ js < ‫وسوم‬ ‫استخدام‬ ‫اليجب‬ : ‫مالحظة‬ script></script ‫الملف‬ ‫استخدام‬ ‫عند‬ > ‫ي‬ ‫ر‬ ‫الخارج‬ ‫سكرب‬ ‫للجافا‬ ‫ت‬ . ‫كود‬‫الستخدام‬ ‫سكرب‬ ‫جافا‬ ‫ت‬ ‫باستخدام‬ ‫الملف‬ ‫ومكان‬ ‫اسم‬ ‫تحديد‬ ‫يجب‬ ‫منفصل‬ ‫الالحقة‬ src < ‫الوسم‬ ‫ضمن‬ script ‫صفحة‬ ‫ي‬ ‫ف‬ > HTML index.html <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js</title> </head> <body> <h1 id="js-title">hello js</h1> <script type="text/javascript" src="main.js"></scri pt> </body> </html> main.js document.getElementById("js-title").innerHTML="hello php";
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 210 ‫االحرف‬ ‫لحالة‬ ‫الحساسية‬ Case Sensitive ‫األكواد‬ ‫كتابة‬ ‫ي‬ ‫ف‬ ‫حساسة‬ ‫حاسة‬ ‫الجافاسكربت‬ ‫ر‬ ‫تعتت‬ , ‫استخدام‬ ‫عن‬ ً ‫ا‬‫ر‬‫حذ‬ ‫كن‬ ‫كتابة‬‫عند‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫األحرف‬ keywords, variables ‫استدعاء‬‫أو‬ function <!DOCTYPE html> <html> <body> <h3>My favorite subject</h3> <p id="demo"></p> <script> var subject, Subject; subject = "Java"; Subject = "Maths"; document.getElementById("demo").innerHTML = subject; </script> </body> </html> ‫التعليقات‬ ‫ح‬ ‫ر‬ ‫لش‬ ‫التعليقات‬ ‫اضافة‬ ‫يمكن‬ ‫الكود‬ ً ‫وضوحا‬ ‫ر‬ ‫أكت‬ ‫الكود‬ ‫لجعل‬ ‫أو‬ . ‫واحد‬ ‫سطر‬ ‫التعليق‬ ‫كان‬‫اذا‬ ‫البداية‬ ‫ي‬ ‫ف‬ // ‫استخدام‬ ‫يمكن‬ . // add title to page document.write("<h1>hello Javascript</h1>"); ‫ونجمة‬ ‫مائل‬ ‫بفاصل‬ ‫األسطر‬ ‫متعددة‬ ‫التعليقات‬ /* ‫فاصل‬ ‫ثم‬ ‫بنجمة‬ ‫ي‬ ‫تنته‬ ‫ثم‬ ‫مائل‬ */ . /* this is a longer, multi-line comment */
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 211 ‫المتغيرات‬ ‫قواعد‬ ‫كتابة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أسماء‬ ‫ي‬ ‫ف‬ JavaScript : o .)$( ‫دوالر‬ ‫عالمة‬ ‫أو‬ )_( ‫سفلية‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫أو‬ ‫بحرف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يبدأ‬ ‫أن‬ ‫يجب‬ o .‫برقم‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يبدأ‬ ‫أن‬ ‫يمكن‬ ‫ال‬ o ( ‫رقمية‬ ‫أبجدية‬ ‫أحرف‬ ‫عىل‬ ‫إال‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يحتوي‬ ‫أن‬ ‫يمكن‬ ‫ال‬ A-z ، 0 - 9 ) .‫سفلية‬ ‫طات‬ ‫ر‬ ‫ورس‬ o ‫عىل‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يحتوي‬ ‫أن‬ ‫يمكن‬ ‫ال‬ .‫مسافات‬ o ‫أساسية‬ ‫كلمة‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫ال‬ JavaScript ‫محجوزة‬ ‫كلمة‬‫أو‬ ‫ي‬ ‫ف‬ JavaScript . ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ :‫مالحظة‬ JavaScript ‫أن‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ ، ‫األحرف‬ ‫لحالة‬ ‫حساسة‬ $ myvar $‫و‬ myVar . ‫ر‬ ‫مختلفي‬ ‫ين‬ ‫ر‬ ‫متغت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫اسماء‬ ‫عن‬ ‫امثلة‬ Number_hits, temp99, $credit, and_name ‫ثالثة‬ ‫هناك‬ ‫ل‬ ‫طرق‬ ‫إلعالن‬ ‫ر‬ ‫متغت‬ ‫عن‬ .‫سكريبت‬ ‫جافا‬ ‫ي‬ ‫ف‬ var ‫المحجوزة‬ ‫الكلمة‬ var ‫ر‬ ‫المتغت‬ ‫باسم‬ ‫متبوعة‬ ( var x ،) ‫ويمكن‬ ‫له‬ ‫اولية‬ ‫قيمة‬ ‫اسناد‬ ،‫(اي‬ ‫تهيئته‬ var x = value ) ‫الصيغة‬ ‫هذه‬ ‫استخدام‬ ‫يمكن‬ ‫لإلعالن‬ ‫سواء‬ ‫حد‬ ‫عىل‬ ‫ي‬ ‫محىل‬ ‫ر‬ ‫ومتغت‬ ‫عام‬ ‫ر‬ ‫متغت‬ ‫عن‬ let ( ‫الكتلة‬ ‫نطاق‬ ‫ضمن‬ ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫عن‬ ‫االعالن‬ block .) const
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 212 ‫ثابت‬ ‫عن‬ ‫االعالن‬ ً ‫الحقا‬ ‫تعديلها‬ ‫يمكن‬ ‫وال‬ ‫له‬ ‫قيمة‬ ‫اسناد‬ ‫و‬ . ‫ر‬ ‫المتغت‬ ‫قواعد‬ ‫نفسها‬ ‫ي‬ ‫ه‬ ‫الثابت‬ ‫نطاق‬ ‫قواعد‬ let ‫ال‬ ‫نطاق‬ ‫يخص‬ ‫فيما‬ block . ‫ر‬ ‫متغت‬ ‫عن‬ ‫االعالن‬ ‫باستخدام‬ var ‫او‬ let ‫تهيئته‬ ‫سيتم‬ ،‫تهيئته‬ ‫دون‬ ‫من‬ ‫بالقيمة‬ undefined ‫ي‬ ‫تلقان‬ ‫بشكل‬ . ‫ال‬ ‫اىل‬ ‫سيؤدي‬ ‫عنه‬ ‫معلن‬ ‫ر‬ ‫غت‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫الوصول‬ ‫محاولة‬ ReferenceError. ‫استخدام‬ ‫يمكنك‬ undefined ‫ال‬ ‫ام‬ ‫مهيأ‬ ‫ر‬ ‫المتغت‬ ‫كان‬‫إذا‬ ‫ما‬ ‫الختبار‬ var input; if(input === undefined){ doThis(); } else { doThat(); } ‫ات‬ ‫ر‬ ‫المتغت‬ ‫نطاق‬ - Variable scope ‫متاحا‬ ‫سيصبح‬ ‫ألنه‬ ،‫عام‬ ‫ر‬ ‫متغت‬ ‫سيسىم‬ ‫دالة‬ ‫أي‬ ‫خارج‬ ‫ر‬ ‫متغت‬ ‫بتعريف‬ ‫سنقوم‬ ‫عندما‬ ‫داخل‬ ‫ر‬ ‫متغت‬ ‫بتعريف‬ ‫نقوم‬ ‫وعندما‬ . ‫ي‬ ‫الحاىل‬ ‫المستند‬ ‫ي‬ ‫ف‬ ‫أخرى‬ ‫برمجية‬ ‫تعليمات‬ ‫ألية‬ ‫فقط‬ ‫متاحا‬ ‫سيصبح‬ ‫ألنه‬ ، ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫سيسىم‬ ،‫دالة‬ ‫الدالة‬ ‫هذه‬ ‫داخل‬ . ‫داخل‬ ‫تعريفه‬ ‫يتم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ block ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫او‬ ‫للدالة‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫اما‬‫هو‬ ‫البلوك‬ ‫هذا‬ ‫تواجد‬ ‫حسب‬ ‫العام‬ ‫للنطاق‬ . if (true) { var x = 5; } console.log(x); // 5 if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined Keyword Scope Hoisting Can Be Reassigned Can Be Redeclared var Function scope Yes Yes Yes
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 213 let Block scope No Yes No const Block scope No No No Variable hoisting ‫الرفع‬ hoisting ‫سلوك‬ ‫هو‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫تلقان‬ ،‫سكريبت‬ ‫جافا‬ ‫يتم‬ ‫خيث‬ ‫جميع‬ ‫رفع‬ ‫التعليمة‬ ‫من‬ ‫العلوي‬ ‫الجزء‬ ‫ي‬ ‫(ف‬ ‫ي‬ ‫الحاىل‬ ‫النطاق‬ ‫أعىل‬ ‫إىل‬ ، ‫الدوال‬ ‫او‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أو‬ ‫الحالية‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫الدالة‬ .)‫الحالية‬ ‫لذلك‬ .‫عنه‬ ‫االعالن‬ ‫قبل‬ ‫ر‬ ‫المتغت‬ ‫استخدام‬ ‫يمكن‬ console.log(x === undefined); // logs "true" var x = 3; ‫ر‬ ‫المتغت‬ ‫باستخدا‬ ‫المعرف‬ ‫م‬ let ‫رفعه‬ ‫يتم‬ ‫لن‬ hoisting ‫ال‬ ‫نطاق‬ ‫اعىل‬ ‫اىل‬ block console.log(x); // ReferenceError let x = 3; ‫ال‬ ‫فقط‬ ،‫للدوال‬ ‫بالنسبة‬ function declaration ‫االعىل‬ ‫اىل‬ ‫فع‬ ‫ر‬ ‫ست‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ه‬ ‫ال‬ ‫وليست‬ function expression /* Function declaration */ foo(); // "bar" function foo() { console.log('bar'); } /* Function expression */ baz(); // TypeError: baz is not a function var baz = function() { console.log('bar2'); };
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 214 :‫البيانات‬ ‫انواع‬ • ‫يوجد‬ ‫ستة‬ ‫انواع‬ ‫اولية‬ primitives : 1 . Boolean ‫منطقية‬ 2 . null .‫خالية‬ ‫قيمة‬ ‫ي‬ ‫تعت‬ ،‫المحجوزة‬ ‫الكلمات‬ ‫من‬ 3 . undefined ‫ر‬ ‫الغت‬ ‫القيم‬ ‫عن‬ ‫ر‬ ‫يعت‬ ‫ال‬ ‫معرفة‬ 4 . ‫النوع‬ Number ‫مثل‬ ‫ي‬ ‫رقىم‬ . 42 ‫او‬ 3.14159 . 5 . ‫النوع‬ String " ‫مثل‬ ‫نصية‬ ‫سلسلة‬ . Anas " 6 . Symbol (ES6) ‫ر‬ ‫والغت‬ ‫نوعها‬ ‫من‬ ‫فريدة‬ ‫بيانات‬ . ‫ر‬ ‫للتغيت‬ ‫قابلة‬ . • ‫الكائنية‬ Object ‫أرقام‬ ‫إىل‬ ‫النصية‬ ‫القيم‬ ‫تحويل‬ )( parseInt )( parseFloat var str = "3.14"; console.log( typeof str ) // string var parse1 = parseInt(str) console.log( typeof parse1 ) // number. var parse2 = parseFloat(str) console.log( typeof parse2 ) // number. ‫العامل‬ ‫باستخدام‬ ،‫حرفية‬ ‫سلسلة‬ ‫شكل‬ ‫عىل‬ ‫رقمية‬ ‫قيمة‬ ‫لتحويل‬ ‫بديلة‬ ‫طريقة‬ (unary plus)+
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 215 ‫المعامالت‬ Operators ‫الحسابية‬ ‫المعامالت‬ ‫الرمز‬ ‫الوصف‬ ‫مثال‬ + ‫جمع‬ x=y+2 - ‫طرح‬ x=y-2 * ‫ب‬‫ص‬ x=y*2 / ‫قسمة‬ x=y/2 % ) ‫القسمة‬ ‫ي‬ ‫ر‬ ‫باف‬ ( ‫ي‬ ‫ر‬ ‫الباف‬ x=y%2 ++ ‫(إضافة‬ ‫إضافة‬ 1 ) x=++y x=y++ -- ‫(نقص‬ ‫نقص‬ 1 ) x=--y x=y-- ‫معامالت‬ ‫االسناد‬ ‫الحسابية‬ ‫الرمز‬ ‫المثال‬ ‫المطابقة‬ ‫العملية‬ = x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y ‫القيم‬ ‫مع‬ +‫الرمز‬ ‫يستخدم‬ Strings ‫إلضافة‬ ‫سلسلة‬ ‫أخرى‬ ‫قيم‬ ‫مع‬ ‫مع‬ ‫ودمجهم‬ . ‫بعض‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 216 ‫معامالت‬ ‫المقارنة‬ ‫المنطقية‬ ‫المعامالت‬ ‫و‬ var $age = 8; if ($age<10) document.write("you ara a child"); ‫ي‬ ‫ر‬ ‫الثالن‬ ‫المعامل‬ (condition) ? value1:value2 var msg = (age < 10) ? "you ara a child":"you ara a young"; ‫المنطقية‬ ‫المعامالت‬ var $age = 25; if ($age>10 && $age<40) document.write("you ara a young"); ‫الرمز‬ ‫ح‬ ‫ر‬ ‫الش‬ == ‫ل‬ ٍ ‫مساو‬ === ) ‫والنوع‬ ‫القيمة‬ ( ‫ل‬ ٍ ‫مساو‬ ً ‫تماما‬ != ‫ل‬ ٍ ‫مساو‬ ‫ر‬ ‫غت‬ > ‫من‬ ‫ر‬ ‫أكت‬ < ‫من‬ ‫أصغر‬ >= ‫يساوي‬ ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ <= ‫من‬ ‫أصغر‬ ‫يساوي‬ ‫أو‬ ‫؟‬ ternary operator ‫الرمز‬ ‫ح‬ ‫ر‬ ‫الش‬ && ‫و‬ / and || ‫أو‬ / or ! ‫ليس‬ / not
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 217 ‫الشرطية‬ ‫التعابير‬ ً ‫غالبا‬ ‫ر‬ ‫معي‬ ‫كود‬‫تكتب‬ ‫عندما‬ ‫تري‬ ‫ما‬ ‫د‬ ‫ولهذا‬ ‫مختلفة‬ ‫وط‬ ‫ر‬ ‫رس‬ ‫حسب‬ ‫ر‬ ‫معي‬ ‫أمر‬ ‫إنشاء‬ . ‫األمثلة‬ ‫ي‬ ‫ف‬ ‫كيف‬‫وسنتعلم‬ ‫ذلك‬ ‫لفعل‬ ‫طية‬ ‫ر‬ ‫الش‬ ‫ر‬ ‫التعابت‬ ‫خاصية‬ ‫استخدام‬ ‫يمكنك‬ ‫لدينا‬ 4 : ‫ي‬ ‫وه‬ ‫طية‬ ‫ر‬ ‫رس‬ ‫ر‬ ‫تعابت‬ ‫ر‬ ‫تعبت‬ if ‫صحيحة‬ ‫الحالة‬ ‫كانت‬‫حال‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫معي‬ ‫كود‬‫إلظهار‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ : . ً ‫تماما‬ ‫ر‬ ‫تعبت‬ if … else ‫ال‬ ‫هذا‬ ‫استخدام‬ ‫يمكن‬ : ‫حالة‬ ‫كانت‬‫اذا‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫الكود‬ ‫من‬ ‫نوع‬ ‫األول‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫جملة‬ ‫فينفذ‬ ‫صحيح‬ ‫ر‬ ‫غت‬ else . ‫ر‬ ‫تعبت‬ if … else if ….else ‫أي‬ ‫أكواد‬ ‫مجموعة‬ ‫من‬ ‫واحد‬ ‫مع‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ : ‫لم‬ ‫واذا‬ ‫آخر‬ ‫ط‬ ‫ر‬ ‫رس‬‫إظهار‬ ‫سيتم‬ ‫يتحقق‬ ‫لم‬ ‫واذا‬ ‫ر‬ ‫معي‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫تحقق‬ ‫عند‬ ‫يستخدم‬ ‫عند‬ ‫الكود‬ ‫تطبيق‬ ً ‫تلقائيا‬ ‫سيتم‬ ‫يتحقق‬ else . ‫ر‬ ‫تعبت‬ switch ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ : ‫لتنفيذ‬ ‫أكواد‬ ‫مجموعة‬ ‫من‬ ‫كود‬ ‫عىل‬ ‫اعتمادا‬ ‫ما‬ ‫قيمة‬ .
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 218 ‫ر‬ ‫تعبت‬ If . ً ‫تماما‬ ‫صحيحة‬ ‫الحالة‬ ‫كانت‬‫حال‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫معي‬ ‫كود‬‫إلظهار‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ ‫نستخدم‬ if ‫ر‬ ‫بي‬ ‫ثم‬ ‫استخدامه‬ ‫نود‬ ‫الذي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫بوضع‬ ‫نقوم‬ ‫ر‬ ‫قوسي‬ ‫ر‬ ‫بي‬ ‫ثم‬ ‫نقوم‬ ‫المنحنية‬ ‫األقواس‬ ‫اج‬‫ر‬‫بإد‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫هذا‬ ‫تحقق‬ ‫عند‬ ‫يظهر‬ ‫أن‬ ‫نود‬ ‫الذي‬ ‫الكود‬ . ‫نتيجة‬ ‫أي‬ ‫عرض‬ ‫يتم‬ ‫لن‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫يتحقق‬ ‫لم‬ ‫وإن‬ var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<strong>Good morning</strong>"); } ‫ر‬ ‫تعبت‬ if … else var d=new Date(); var time=d.getHours(); if (time<12) { document.write("<strong>Good morning</strong>"); } else { document.write("<strong>Good evening</strong>"); } ‫ر‬ ‫تعبت‬ if … else if ….else ‫ط‬ ‫ر‬ ‫رس‬ ‫تحقق‬ ‫عند‬ ‫يستخدم‬ ‫أي‬ ‫أكواد‬ ‫مجموعة‬ ‫من‬ ‫واحد‬ ‫مع‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ ‫تطبيق‬ ً ‫تلقائيا‬ ‫سيتم‬ ‫يتحقق‬ ‫لم‬ ‫واذا‬ ‫آخر‬ ‫ط‬ ‫ر‬ ‫رس‬‫إظهار‬ ‫سيتم‬ ‫يتحقق‬ ‫لم‬ ‫واذا‬ ‫ر‬ ‫معي‬ ‫عند‬ ‫الكود‬ else . var d=new Date(); var time=d.getHours(); if (time<12) { document.write("<strong>Good morning</strong>"); } else if (time<12 && time<14) { document.write("<strong>Good afternoon</strong>"); } else { document.write("<strong>Good evening</strong>"); }
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 219 ‫القيم‬ Falsy ‫قيم‬ ُ ‫ت‬ ‫التالية‬ ‫القيم‬ false ‫طية‬ ‫ر‬ ‫رس‬ ‫تعليمة‬ ‫ي‬ ‫ف‬ ‫اختباها‬ ‫عند‬ o false o undefined o null o 0 o NaN o )""( ‫الفارغة‬ ‫النصية‬ ‫السلسلة‬ ‫ر‬ ‫تعبت‬ switch var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("‫;)"الجمعة‬ break; case 6: document.write("‫;)"السبت‬ break; case 0: document.write("‫;)"األحد‬ break; default: document.write(" ‫قيمة‬ ‫افتراضية‬ "); }
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 220 ‫المنبثقة‬ ‫الصناديق‬ ‫التنبيه‬ ‫صندوق‬ ً ‫عادة‬ ‫التنبيه‬ ‫صندوق‬ ‫يستخدم‬ ‫الصال‬ ‫معلومات‬ ‫ل‬ ‫هامة‬ .‫لمستخدم‬ alert(" ً‫ا‬‫مرحب‬ ‫أنا‬ ‫صندوق‬ ‫تنبيه‬ ‫جديد‬ "); ‫التوكيد‬ ‫صندوق‬ . ‫ر‬ ‫معي‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫عىل‬ ‫المستخدم‬ ‫موافقة‬ ‫أردت‬ ‫اذا‬ ‫التوكيد‬ ‫صندوق‬ ً ‫عادة‬ ‫يستخدم‬ " ‫عىل‬ ‫الضغط‬ ‫اما‬ ‫للتوكيد‬ ‫المستخدم‬‫سيختار‬ ‫التوكيد‬ ‫صندوق‬ ‫ظهور‬ ‫عند‬ OK " "‫أو‬ ‫موافق‬ Cancel . ‫إلغاء‬ " var r=confirm(" ‫هل‬ ‫انت‬ ‫موافق؟‬ "); if (r==true) { alert(" ‫قمت‬ ‫بالضغط‬ ‫على‬ ‫موافق‬ "); } else { alert(" ‫قمت‬ ‫بالضغط‬ ‫على‬ ‫إلغاء‬ "); } ‫االدخال‬ ‫صندوق‬ ‫صندوق‬ ً ‫عادة‬ ‫يستخدم‬ ‫االدخال‬ ‫أردت‬ ‫اذا‬ ‫المستخدم‬ ‫من‬ ‫ما‬ ‫بيانات‬ ‫عىل‬ ‫الحصول‬ ‫صندوق‬ ‫ظهور‬ ‫عند‬ ‫االدخال‬ " ‫عىل‬ ‫اما‬ ‫الضغط‬ ‫المستخدم‬ ‫عىل‬ ‫سيتوجب‬ OK " "‫أو‬ ‫موافق‬ Cancel . ‫القيمة‬ ‫ادخال‬ ‫بعد‬ ‫العملية‬ ‫إلكمال‬ ‫إلغاء‬ " var fName=prompt(" ‫الرجاء‬ ‫ادخل‬ ‫اسمك‬ ‫هنا‬ ","‫;)"محمد‬ if (fName!=null && fName!="") { document.write("<p> ً‫ا‬‫مرحب‬ ‫بك‬ " + fName + " , ‫كيف‬ ‫حالك‬ ‫اليوم؟‬ </p>"); }
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 221 ‫الدوال‬ functions ‫عن‬ ‫عبارة‬ ‫ي‬ ‫ه‬ ،‫الدالة‬ .‫جافاسكريبت‬ ‫ي‬ ‫ف‬ ‫األساسية‬ ‫اللبنات‬ ‫من‬ ‫واحدة‬ ‫ي‬ ‫ه‬ ‫الدوال‬ ‫من‬ ‫تتمكن‬ ‫ر‬ ‫حت‬ .‫معينة‬ ‫وظيفة‬ ‫تؤدي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫مجموعة‬ ‫إستدعائها‬ ‫تود‬ ‫الذي‬ ‫النطاق‬ ‫من‬ ‫ما‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫تعريفها‬ ‫أوال‬ ‫عليك‬ ،‫الدالة‬ ‫إستخدام‬ .‫منه‬ Function declarations ‫المحجوزة‬ ‫الكلمة‬ ‫من‬ ‫الدالة‬ ‫تتكون‬ function : ‫ب‬ ‫متبوعة‬ ، • ‫اسم‬ .‫الدالة‬ • .‫بفواصل‬ ‫بينها‬ ‫ويفصل‬ ‫ر‬ ‫قوسي‬ ‫ر‬ ‫بي‬ ‫محصورة‬ ،‫الدالة‬ ‫ات‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫قائمة‬ • ‫تعليمات‬ ‫سكريب‬ ‫الجافا‬ ‫ت‬ .}{ ‫المتعرجة‬ ‫األقواس‬ ‫داخل‬ ،‫الدالة‬ ‫عرف‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫الت‬ function square(number) { return number * number; } ‫االولية‬ ‫ات‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬‫تمرير‬ ‫يتم‬ primitives ‫اىل‬ )‫الخ‬...‫االعداد‬ ،‫الحرفية‬ ‫(كالسالسل‬ ،‫بالقيمة‬ ‫االستدعاء‬ ،‫تسىم‬ ‫بوسيلة‬ ،‫الدالة‬ call by value var value = 10; square(value); document.write(value); // log: 10 ‫كتابة‬‫الصحيح‬ var value = 10; var res = square(value); document.write(res); // log: 100 ‫ك‬ ‫اولية‬ ‫ر‬ ‫غت‬ ‫قيمة‬ ،‫(مثال‬ ‫كائن‬‫بتمرير‬ ‫قمت‬ ‫اذا‬ Array ‫قبل‬ ‫من‬ ‫معرف‬ ‫كائن‬‫او‬ ‫ر‬ ‫التغيت‬ ‫هذا‬ ‫سيكون‬ ،‫الكائن‬ ‫خصائص‬ ‫ر‬ ‫بتغيت‬ ‫الدالة‬ ‫وقامت‬ ، ‫ر‬ ‫امت‬‫ر‬‫كبا‬)‫المستخدم‬ ‫الدالة‬ ‫خارج‬ ‫مرئيا‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 222 Function expressions ‫بصيغة‬ ‫عنها‬ ‫االعالن‬ ‫تم‬ ‫اعاله‬ ‫الدالة‬ ‫ان‬ ‫ر‬ ‫حي‬ ‫ي‬ ‫ف‬ function declaration ‫يمكن‬ ، ‫ال‬ ‫بصيغة‬ ‫الدوال‬ ‫انشاء‬ ‫ايضا‬ function expression ‫ان‬ ‫للدوال‬ ‫ايضا‬ ‫يمكن‬ ‫كما‬. ‫ال‬ ‫بصيغة‬ ‫تكون‬ anonymous ‫الدالة‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .)‫االسم‬ ‫مجهولة‬ ‫(دوال‬ square ‫ال‬ ‫بصيغة‬ ‫ايضا‬ ‫تعريفها‬ ‫يمكن‬ function expression ‫النحو‬ ‫عىل‬ :‫التاىل‬ var square = function(number) { return number * number }; var x = square(4) // x gets the value 16 ‫الدالة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬‫يظهر‬ .‫اخرى‬ ‫لدالة‬ ‫ر‬ ‫امت‬‫ر‬‫كبا‬‫دالة‬ ‫تمرير‬ ‫يمكنك‬ map ‫تستخدم‬ : ‫لها‬ ‫اول‬ ‫ر‬ ‫امت‬‫ر‬‫كبا‬‫اخرى‬ ‫دالة‬ function map(f,a) { var result = [], // Create a new Array i; for (i = 0; i != a.length; i++) result[i] = f(a[i]); return result; } ‫الصيغة‬ ‫مع‬ ‫استخدامها‬ ‫طريقة‬ function expression : var multiply = function(x) { return x * x * x; }; map(multiply, [0, 1, 2, 5, 10]); ‫الصيغة‬ ‫مع‬ ‫استخدامها‬ ‫طريقة‬ anonymous function :‫ة‬ ‫ر‬ ‫مبارس‬ map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]) ‫تقوم‬ ‫أن‬ ‫للدالة‬ ‫يمكن‬ ‫باستدعاء‬ ‫بحساب‬ ‫تقوم‬ ‫الدالة‬ ‫هذه‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫ذاتها‬ ‫بشكل‬ ‫وب‬‫المرص‬ :‫متكرر‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 223 function factorial(n){ if ((n === 0) || (n === 1)) return 1; else return (n * factorial(n - 1)); } ‫المعادة‬ ‫القيمة‬ return ‫باستخدا‬ ‫الدالة‬ ‫من‬ ‫خرج‬ ‫ارجاع‬ ‫يمكن‬ ‫م‬ return ‫تؤ‬ ‫الدالة‬ ‫تنفيذ‬ ‫إنهاء‬ ‫إىل‬ ‫دي‬ ‫يرجع‬ .‫استدعاها‬ ‫الذي‬ ‫ر‬ ‫التعبت‬ ‫إىل‬ ‫قيمة‬ var square = function(number) { return number * number }; Arrow functions ‫دوال‬ ‫ات‬ ‫ر‬ ‫تعبت‬ Arrow function ‫من‬ ً ‫ا‬‫ز‬‫إيجا‬ ‫ر‬ ‫أكت‬ ‫ا‬ ‫ر‬ ‫تعبت‬ ‫باستخدام‬ ‫لك‬ ‫تسمح‬ ‫والقيمة‬ .‫الكالسيكية‬ ‫الوظائف‬ ‫عن‬ ‫ر‬ ‫التعبت‬ this ‫نحوي‬ ‫بشكل‬ ‫ربطها‬ ‫يتم‬ Lexical . var fun = (x)=>{ return x*x } //or var fun = x=> x*x rest parameter ‫الصيغة‬ rest parameter ‫ال‬ ‫من‬ ‫محدود‬ ‫ر‬ ‫غت‬ ‫عدد‬ ‫بتمثيل‬ ‫تسمح‬ arguments ‫ال‬ ‫لتجميع‬ ‫ات‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬ ‫بقية‬ ‫نستخدم‬ ،‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ .‫كمصفوفة‬ arguments ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫باول‬ ‫ها‬‫ب‬‫برص‬ ‫نقوم‬ ‫ثم‬ .‫النهاية‬ ‫لغاية‬ ‫ي‬ ‫الثان‬ ‫ر‬ ‫امت‬ ‫ر‬ ‫الت‬ ‫من‬ ‫ابتداءا‬ function multiply(multiplier, ...theArgs) { return theArgs.map(x => multiplier * x); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6]
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 224 ‫التكرار‬ ‫حلقات‬ ‫تقوم‬ ‫انها‬‫هو‬ ‫والمهم‬ ،‫الحلقات‬ ‫من‬ ‫مختلفة‬ ‫أنواع‬ ‫هناك‬ ‫ي‬ ‫ر‬ ‫بىس‬ ‫ء‬ ‫ار‬‫ر‬‫تك‬ ‫وهو‬ :‫واحد‬ ‫مختلفة‬ ‫طرقا‬ ‫تقدم‬ ،‫انواعها‬ ‫بمختلف‬ ‫الحلقات‬ .‫ات‬‫ر‬‫م‬ ‫عدة‬ ‫اءات‬‫ر‬‫االج‬ ‫بعض‬ ‫من‬ ‫ر‬ ‫معي‬ ‫نوع‬ ‫استخدام‬ ‫يمكن‬ .‫للحلقة‬ ‫النهاية‬ ‫ونقطة‬ ‫البداية‬ ‫نقطة‬ ‫لتحديد‬ .‫المشاكل‬ ‫من‬ ‫ر‬ ‫معي‬ ‫نوع‬ ‫لحل‬ ،‫الحلقات‬ : ‫ي‬ ‫وه‬ ‫جافاسكريبت‬ ‫ي‬ ‫ف‬ ‫المتوفرة‬ ‫الحلقات‬ o for statement o do...while statement o while statement o for...in statement o for...of statement ‫الحلقة‬ for for ([initialExpression]; [condition]; [incrementExpression]) ‫التعليمة‬ for ‫ر‬ ‫المتغت‬ ‫عن‬ ‫تعلن‬ i ‫ب‬ ‫بتهيئته‬ ‫وتقوم‬ 0 ‫ان‬ ‫من‬ ‫وتتحقق‬ . i ‫من‬ ‫اصغر‬ ‫العدد‬ 5 ‫اذا‬ ‫الحلقة‬ ‫جسم‬ ‫تنفيذ‬ ‫يتم‬ ‫السابق‬ ‫الحلقة‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫تحقق‬ ‫قيمة‬ ‫يد‬ ‫ر‬ ‫وست‬ i ‫ار‬‫ر‬‫بالتك‬ ‫مستمرة‬ ‫الحلقة‬ ‫دامت‬ ‫ما‬ ‫بواحد‬ . for (let i = 0; i < 5; i++) { document.writeln('# '+i); }
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 225 ‫الحلقة‬ do...while ‫الحلقة‬ do...while ‫تتوق‬ ‫ال‬ ‫ف‬ ‫ب‬ ‫المحدد‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫تحقق‬ ‫يتم‬ ‫ر‬ ‫حت‬ ‫ار‬‫ر‬‫التك‬ ‫عن‬ false ‫للحلقة‬ ‫االساسية‬ ‫كيبة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫يوضح‬ . do...while do statement while (condition); statement ‫البدا‬ ‫عند‬ .‫ط‬ ‫ر‬ ‫الش‬ ‫من‬ ‫التحقق‬ ‫عملية‬ ‫تبدا‬ ‫أن‬ ‫قبل‬ ‫واحدة‬ ‫مرة‬ ‫تنفذ‬ : ( ‫ط‬ ‫ر‬ ‫الش‬ ‫كان‬‫اذا‬ ،‫التحقق‬ ‫بعملية‬ condition ‫يساوي‬ ) true ‫التعليمة‬ ‫تنفذ‬ ، ( ‫مجية‬ ‫ر‬ ‫الت‬ statement ‫من‬ ‫اخرى‬ ‫مرة‬ ‫التحقق‬ ‫يتم‬ ،‫التنفيذ‬ ‫انهاء‬ ‫بعد‬ .‫اخرى‬ ‫مرة‬ ) ‫يساوي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫يصبح‬ ‫ان‬ ‫اىل‬ .‫ط‬ ‫ر‬ ‫الش‬ false ‫التن‬ ‫يتوقف‬ ‫عندها‬ ، ‫انتقال‬ ‫ويتم‬ ‫فيذ‬ ‫ي‬ ‫تىل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمة‬ ‫اىل‬ ‫التحكم‬ do...while ‫برمجية‬ ‫تعليمات‬ ‫لتنفيذ‬ . .)} ... {( ‫بلوك‬ ‫التعليمة‬ ‫استخدم‬ ،‫متعددة‬ var i = 0; do { i += 1; console.log(i); } while (i < 5); ‫الحلقة‬ while ‫الحلقة‬ while ‫ستستمر‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫طالما‬ ‫بها‬ ‫المرتبطة‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمة‬ ‫بتنفيذ‬ ‫يساوي‬ ‫المحدد‬ true ‫للحلقة‬ ‫االساسية‬ ‫كيبة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫يوضح‬ . while while (condition) statement
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 226 var n = 0; var x = 0; while (n < 3) { n++; x += n; } ‫كل‬‫مع‬ ‫ار‬‫ر‬‫تك‬ ‫عىل‬ ‫بالزيادات‬ ‫الحلقة‬ ‫ستقوم‬ ، n ‫إىل‬ ‫قيمته‬ ‫وتضيف‬ x ‫لذالك‬ . x ‫و‬ n :‫التالية‬ ‫القيم‬ ‫ستمتلك‬ :‫األول‬‫المرور‬ ‫بعد‬ n = 1 ‫و‬ x = 1 : ‫ي‬ ‫الثان‬‫المرور‬ ‫بعد‬ n = 2 ‫و‬ x = 3 :‫الثالث‬‫المرور‬ ‫بعد‬ n = 3 ‫و‬ x = 6 ‫ط‬ ‫ر‬ ‫الش‬ ،‫الثالث‬‫المرور‬ ‫من‬ ‫االنتهاء‬ ‫بعد‬ ( n < 3 ) ‫يعد‬ ‫لم‬ ‫يساوي‬ true ‫لذلك‬ ، ‫الحلقة‬ ‫ي‬ ‫ستنته‬ . ‫تحذير‬ : ‫عن‬ ‫المتصفحات‬ ‫توقف‬ ‫ي‬ ‫ف‬ ‫سيتسبب‬ ‫نهاية‬ ‫ال‬ ‫ما‬ ‫اىل‬ ‫الحلقة‬‫ار‬‫ر‬‫تك‬‫ار‬‫ر‬‫استم‬ ‫العمل‬ . ‫الحلقة‬ for...in ‫الحلقة‬ ‫تستخدم‬ for...in ‫ار‬‫ر‬‫للتك‬ ‫القابلة‬ ‫الكائن‬ ‫خصائص‬ ‫جميع‬ ‫عىل‬‫ار‬‫ر‬‫للتك‬ enumerable ‫الجافا‬ ‫ستنفذ‬ ،‫ة‬ ‫ر‬ ‫ممت‬ ‫خاصية‬ ‫كل‬‫مقابل‬ ‫تعليمات‬ ‫سكريبت‬ ‫للحلقة‬ ‫االساسية‬ ‫كيبة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫يوضح‬ .‫محددة‬ ‫برمجية‬ for...in for (variable in object){ statements }
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 227 ‫االستثناءات‬ ‫معالجة‬ ‫التعليمة‬ try...catch ‫البلوك‬ ‫من‬ ‫تتكون‬ try ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ ‫عىل‬ ‫سيحتوي‬ ‫الذي‬ ‫والبلوك‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ catch ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫عىل‬ ‫سيحتوي‬ ‫البلوك‬ ‫من‬ ‫االستثناء‬ ‫قذف‬ ‫تم‬ ‫اذا‬ ‫فعله‬ ‫يجب‬ ‫ما‬ ‫تحدد‬ try ‫معظم‬ ‫ي‬ ‫ف‬ ،‫اخر‬ ‫بمعت‬ . ‫البلوك‬ ‫داخل‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫نريد‬ .‫الحاالت‬ try ، ‫ي‬ ‫طبيغ‬ ‫بشكل‬ ‫ر‬ ‫تست‬ ‫ان‬ ‫حالة‬ ‫ي‬ ‫وف‬ ‫البلوك‬ ‫اىل‬ ‫التحكم‬‫ر‬ ّ ‫يمر‬ ‫مشاكل‬ ‫حدوث‬ catch ‫احدى‬ ‫هناك‬ ‫كانت‬‫إذا‬ . ‫البلوك‬ ‫داخل‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ try ً ‫استثناءا‬ ‫تقذف‬ ‫إىل‬ ‫ا‬‫ر‬‫فو‬ ‫التحكم‬ ‫نقل‬ ‫سيتم‬ ، ‫البلوك‬ catch ‫البلوك‬ ‫داخل‬ ‫من‬ ‫استثناء‬ ‫أي‬ ‫إرسال‬ ‫يتم‬ ‫لم‬ ‫وإذا‬ . try ‫فالبلوك‬ ، catch ‫لن‬ ‫ينفذ‬ ‫تحت‬ ‫ان‬ ‫يمكن‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمة‬ ‫هذه‬ . ‫البلوك‬ ‫عىل‬ ‫وي‬ finally ‫تنفيذ‬ ‫بعد‬ ‫سينفذ‬ ‫والذي‬ ‫البلوك‬ try ‫و‬ catch ‫التعليمات‬ ‫تنفيذ‬ ‫قبل‬ ‫سينفذ‬ ‫وايضا‬ ، ‫التعليمة‬ ‫ي‬ ‫تىل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ try...catch ، ‫ان‬ .‫وجدت‬ function getMonthName(mo) { mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Ma y', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'De c']; if (months[mo]) { return months[mo]; } else { throw 'InvalidMonthNo'; //throw keyword is used here } } try { monthName = getMonthName(13); } catch (e) { console.log(e); }
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 228 String ‫النصية‬ ‫السالسل‬ ‫او‬ ‫المفردة‬ ‫االقتباس‬ ‫عالمة‬ ‫استخدام‬ ‫مثل‬ ‫طرق‬ ‫بعدة‬ ‫نصية‬ ‫سلسلة‬ ‫انشاء‬ ‫يمكن‬ ‫طريق‬ ‫عن‬ ‫او‬ ‫المزدوجة‬ ( Template literals ) .‫ا‬ً‫نصي‬ ‫ا‬ ً‫كالم‬‫ل‬ ِّ ‫مث‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫بالبيانات‬ ‫لالحتفاظ‬ ‫مفيدة‬ ‫النصية‬ ‫السالسل‬ ‫طولها‬ ‫من‬ ‫التحقق‬ ‫ي‬ ‫ه‬ ‫النصية‬ ‫السالسل‬ ‫عىل‬ ‫االستخدام‬ ‫شائعة‬ ‫العمليات‬ ‫ر‬ ‫أكت‬ ‫من‬ ‫الخاصية‬ ‫ر‬ ‫(عت‬ length ،+=‫و‬ + ‫ر‬ ‫المعاملي‬ ‫باستخدام‬ ‫النصية‬ ‫السالسل‬ ‫وجمع‬ ،) ‫الدالة‬ ‫باستخدام‬ ‫الفرعية‬ ‫النصية‬ ‫السالسل‬ ‫مكان‬ ‫أو‬ ‫وجود‬ ‫من‬ ‫والتحقق‬ indexOf() ‫المحارف‬ ‫إىل‬ ‫الوصول‬ var str = 'cat'; console.log(str.charAt(1));//a console.log(str[1]); //a ‫الدوال‬ String.prototype.charAt() .‫د‬ َّ ‫حد‬ ُ‫الم‬ ‫الفهرس‬ ‫عند‬ ‫الموجود‬ ‫المحرف‬ ‫إعادة‬ String.prototype.charCodeAt() .‫د‬ َّ ‫حد‬ ُ‫الم‬ ‫الفهرس‬ ‫عند‬ ‫الموجود‬ ‫المحرف‬ ‫إعادة‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 229 String.prototype.codePointAt() . ّ ‫ر‬ ‫عي‬ ُ‫الم‬ ‫الموضع‬ ‫ي‬ ‫ف‬ ‫يونيكود‬ ‫رمز‬ ‫ل‬ ِّ ‫مث‬ُ‫ي‬ ‫موجب‬ ‫صحيح‬ ‫عدد‬ ‫إعادة‬ String.prototype.concat() .‫جديدة‬ ‫نصية‬ ‫سلسلة‬ ‫وإعادة‬ ‫ر‬ ‫نصيتي‬ ‫ر‬ ‫سلسلتي‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫دمج‬ String.prototype.includes() ‫نص‬ ٍ‫سلسلة‬ ‫عىل‬ ٌ ‫نصية‬ ٌ ‫سلسلة‬ ‫تحتوي‬ ‫كانت‬‫إن‬ ‫معرفة‬ .‫أخرى‬ ٍ‫ية‬ String.prototype.endsWith() .‫أخرى‬ ٍ‫نصية‬ ٍ‫سلسلة‬ ‫بمحارف‬ ٌ ‫نصية‬ ٌ ‫سلسلة‬ ‫ي‬ ‫تنته‬ ‫كانت‬‫إن‬ ‫معرفة‬ String.prototype.indexOf() ‫كائن‬‫ضمن‬ ‫الموجود‬ ‫الفهرس‬ ‫إعادة‬ String ‫يكون‬ ‫والذي‬ ‫الدالة‬ ‫ي‬ ‫يستدع‬ ‫الذي‬ ‫القيمة‬‫أو‬ ،‫الدالة‬ ‫لهذه‬ ‫دة‬ َّ ‫حد‬ ُ‫الم‬ ‫للقيمة‬ ‫قة‬َ‫طاب‬ ُ‫م‬ ‫ل‬ ّ ‫أو‬ ‫موضع‬ -1 .‫عليها‬ َ‫ر‬ ‫عت‬ُ‫ي‬ ‫لم‬ ‫إن‬ String.prototype.lastIndexOf() ‫كائن‬‫ضمن‬ ‫الموجود‬ ‫الفهرس‬ ‫إعادة‬ String ‫يكون‬ ‫والذي‬ ‫الدالة‬ ‫ي‬ ‫يستدع‬ ‫الذي‬ ‫لهذه‬ ‫دة‬ َّ ‫حد‬ ُ‫الم‬ ‫للقيمة‬ ‫قة‬َ‫طاب‬ ُ‫م‬ ‫آخر‬ ‫موضع‬ ‫القيمة‬‫أو‬ ،‫الدالة‬ -1 .‫عليها‬ َ‫ر‬ ‫عت‬ُ‫ي‬ ‫لم‬ ‫إن‬ String.prototype.localeCompare() ‫مع‬ ‫أو‬ ‫بعد‬ ‫أو‬ ‫قبل‬ ‫تقع‬ ‫إليها‬ ‫شار‬ ُ‫الم‬ ‫النصية‬ ‫السلسلة‬ ‫كانت‬‫إن‬ ّ ‫ر‬ ‫يبي‬ ‫رقم‬ ‫إعادة‬ . ّ ‫ر‬ ‫معي‬ ٍ ‫ترتيب‬ ‫ي‬ ‫ف‬ ‫عطاة‬ ُ‫الم‬ ‫النصية‬ ‫السلسلة‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 230 String.prototype.match() ( ‫ي‬ ‫نمط‬ ‫ر‬ ‫تعبت‬ ‫قة‬َ‫طاب‬ ُ‫م‬ regular expression .‫نصية‬ ‫سلسلة‬ ‫عىل‬ ) String.prototype.repeat() .‫ات‬‫ر‬‫الم‬ ‫من‬ ٍ ‫د‬ ِّ ‫حد‬ ُ‫م‬ ٍ ‫لعدد‬ ‫ما‬ ‫نصية‬ ‫لسلسلة‬ ‫ار‬‫ر‬‫تك‬ ‫عىل‬ ‫تحتوي‬ ‫نصية‬ ‫سلسلة‬ ‫إعادة‬ String.prototype.replace() ( ‫ي‬ ‫نمط‬ ٍ ‫ر‬ ‫تعبت‬ ‫ر‬ ‫بي‬ ‫مطابقة‬ ‫عىل‬‫العثور‬ regular expression ،‫نصية‬ ‫وسلسلة‬ ) ‫من‬ ً ‫بدًل‬ ‫فرعية‬ ‫نصية‬ ‫سلسلة‬ ‫ووضع‬ .‫قة‬َ‫طاب‬ ُ‫الم‬ ‫النصية‬ ‫السلسلة‬ String.prototype.search() .‫المعطاة‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫النمط‬ ‫ر‬ ‫للتعبت‬ ‫مطابقة‬ ‫عن‬ ‫البحث‬ String.prototype.slice() .‫وإعادته‬ ‫النصية‬ ‫السلسلة‬ ‫من‬ ‫قسم‬ ‫اج‬‫ر‬‫استخ‬ String.prototype.split() ‫كائن‬‫تقسم‬ String .‫النصية‬ ‫السالسل‬ ‫من‬ ‫مصفوفة‬ ‫إىل‬ String.prototype.startsWith() .‫أخرى‬ ‫نصية‬ ‫سلسلة‬ ‫بمحارف‬ ‫تبدأ‬ ‫النصية‬ ‫السلسلة‬ ‫كانت‬‫إذا‬ ‫تحديد‬ String.prototype.substr() . ّ ‫ر‬ ‫معي‬ ٍ ‫مكان‬ ‫من‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المحارف‬ ‫د‬ َّ ‫محد‬ ‫عدد‬ ‫إعادة‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 231 String.prototype.substring() َّ ‫حد‬ ُ‫م‬ ‫ر‬ ‫فهرسي‬ ‫ر‬ ‫بي‬ ‫الموجودة‬ ‫المحارف‬ ‫إعادة‬ .‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫دين‬ String.prototype.toLocaleLowerCase() ( ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المحارف‬ ‫ل‬ ّ ‫ستحو‬ lower case ( ‫ة‬ّ‫المحلي‬ ‫مع‬ ‫يتوافق‬ ‫بما‬ ) locale ‫نتيجة‬ ‫نفس‬ ‫عيد‬ ُ ‫ست‬ ‫الدالة‬ ‫وهذه‬ ‫الحالية‬ ) ‫الدالة‬ toLowerCase() .‫اللغات‬ ‫أغلبية‬ ‫ي‬ ‫ف‬ String.prototype.toLocaleUpperCase() ( ‫ة‬ ‫ر‬ ‫الكبت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المحارف‬ ‫ل‬ ّ ‫ستحو‬ upper case ) ( ‫ة‬ّ‫المحلي‬ ‫مع‬ ‫يتوافق‬ ‫بما‬ locale ‫الدالة‬ ‫نتيجة‬ ‫نفس‬ ‫عيد‬ ُ ‫ست‬ ‫الدالة‬ ‫وهذه‬ ‫الحالية‬ ) toUpperCase() .‫اللغات‬ ‫أغلبية‬ ‫ي‬ ‫ف‬ String.prototype.toLowerCase() ‫السلس‬ ‫تحويل‬ .‫ة‬ ‫ر‬ ‫الصغت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫لة‬ String.prototype.toUpperCase() .‫ة‬ ‫ر‬ ‫الكبت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫السلسلة‬ ‫تحويل‬ String.prototype.trim() .‫النصية‬ ‫السلسلة‬ ‫ونهاية‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫اغات‬‫ر‬‫الف‬ ‫الة‬‫ز‬‫إ‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 232 String.prototype.trimLeft() ‫هذه‬ .‫النصية‬ ‫السلسلة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫اغات‬‫ر‬‫الف‬ ‫الة‬‫ز‬‫إ‬ ‫ل‬ َّ ‫فض‬ُ‫ي‬ ‫وال‬ ‫معيارية‬ ‫ر‬ ‫غت‬ ‫الدالة‬ .‫استخدامها‬ String.prototype.trimRight() ‫ل‬ َّ ‫فض‬ُ‫ي‬ ‫وال‬ ‫معيارية‬ ‫ر‬ ‫غت‬ ‫الدالة‬ ‫هذه‬ .‫النصية‬ ‫السلسلة‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫اغات‬‫ر‬‫الف‬ ‫الة‬‫ز‬‫إ‬ .‫استخدامها‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 233 Array ‫المصفوفات‬ ‫المصفوفة‬ ‫البيانات‬ ‫قيم‬ ‫من‬ ‫مجموعة‬ ‫ي‬ ‫ه‬ : . ‫نوع‬ ‫عىل‬ ‫المصفوفات‬ ‫قيم‬ ‫تقترص‬ ‫ال‬ ‫م‬ ‫واحد‬ ‫منطقية‬ ‫وقيم‬ ‫صحيحة‬ ‫وأعداد‬ ‫سالسل‬ ‫عىل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ .‫البيانات‬ ‫ن‬ ‫صفوفات‬ ‫عىل‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المصفوفات‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ،‫ذلك‬ ‫إىل‬ ‫باإلضافة‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫أخرى‬ . ‫ي‬ ‫ف‬ ‫(كما‬ ‫المصفوفات‬ ‫ي‬ ‫ف‬ ‫للعناص‬ ‫كفهارس‬‫النصية‬ ‫السالسل‬ ‫استخدام‬ ‫يمكن‬ ‫ال‬ ‫األعداد‬ ‫استخدام‬ ‫يجب‬ ‫وإنما‬ ،)‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفات‬ ‫فقط‬ ‫الصحيحة‬ ‫مصفوفة‬ ‫إنشاء‬ ‫مربعة‬ ‫االقواس‬ ‫استخدام‬ ‫][يمكن‬‫المصفوفات‬ ‫لتعريف‬ ‫الشكل‬ var fruits = ['Apple', 'Banana']; ‫طول‬ ‫عىل‬ ‫الحصول‬ ‫ال‬ ‫مصفوفة‬ console.log(fruits.length);// 2 ‫المصفوفة‬ ‫عناص‬ ‫من‬‫عنرص‬ ‫إىل‬ ‫الوصول‬ ‫ي‬ ‫ف‬ ‫العناص‬ ّ ‫عد‬ ‫يبدأ‬ JavaScript ‫الفهرس‬ ‫من‬ 0 ‫أي‬ ، ‫له‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫ل‬ ّ ‫أو‬ َّ ‫أن‬ ‫الفهرس‬ 0 ‫الخاصية‬ ‫قيمة‬ ‫هو‬ ‫عنرص‬ ‫آخر‬ ‫وفهرس‬ ، length ‫منها‬ ‫ا‬ ً ‫مطروح‬ 1 ‫الحظ‬ ‫القيمة‬ ‫إعادة‬ ‫إىل‬ ‫سيؤدي‬ ‫صالحة‬ ‫ر‬ ‫غت‬ ‫فهارس‬ ‫استخدام‬ َّ ‫أن‬ undefined. var first = fruits[0];// Apple var last = fruits[fruits.length - 1];// Banana ‫عىل‬ ‫المرور‬ ‫ار‬‫ر‬‫تك‬ ‫بحلقة‬ ‫المصفوفة‬ ‫عناص‬ fruits.forEach(function(item, index, array) { console.log(item, index); }); ‫المصفوفة‬ ‫نهاية‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫إضافة‬ var newLength = fruits.push('Orange'); ‫المصفوفة‬ ‫نهاية‬ ‫من‬‫عنرص‬ ‫الة‬‫ز‬‫إ‬ var last = fruits.pop();
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 234 ‫بداية‬ ‫من‬‫عنرص‬ ‫الة‬‫ز‬‫إ‬ ‫المصفوفة‬ var first = fruits.shift(); ‫المصفوفة‬ ‫بداية‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫إضافة‬ var newLength = fruits.unshift('Strawberry'); ‫المصفوفة‬ ‫عناص‬ ‫أحد‬ ‫فهرس‬ ‫عىل‬ ‫العثور‬ var pos = fruits.indexOf('Banana') ّ ‫ر‬ ‫معي‬ ‫فهرس‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫حذف‬ var removedItem = fruits.splice(pos, 1); ‫جمع‬ ‫نصية‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫المصفوفة‬ ‫عناص‬ ‫جميع‬ var str = fruits.join() ‫ال‬ ‫مصفوف‬ ‫ات‬ ‫األبعاد‬ ‫ثنائية‬ var mat = [ [1,2,3], [4,5,6], [7,8,9], ] console.log(mat[2][2]);//9
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 235 Math Object ‫الكائن‬ ،‫األخرى‬ ‫العامة‬ ‫الكائنات‬ ‫من‬ ‫النقيض‬ ‫عىل‬ Math ً ‫بانية‬ ً ‫دالة‬ ‫ليس‬ (constructor) ‫للكائن‬ ‫التابعة‬ ‫والدوال‬ ‫الخاصيات‬ ‫وجميع‬ ، Math ‫ساكنة‬ ‫ي‬ ‫ه‬ (static) ، ‫ي‬ ‫الرياض‬ ‫الثابت‬ π )‫(باي‬ ‫بواسطة‬ ‫له‬ ‫الوصول‬ ‫يمكنك‬ Math.PI ‫وتستطيع‬ ‫اوية‬‫ز‬‫ال‬ ‫جيب‬ ‫دالة‬ ‫استخدام‬ (sin) ‫ي‬ ‫يىل‬ ‫كما‬ Math.sin(x) ‫القيمة‬ َّ ‫إن‬ ‫إذ‬ ، x ‫ي‬ ‫ه‬ .‫الدالة‬ ‫إىل‬ ‫ر‬ َّ ‫مر‬ ُ‫الم‬ ‫الوسيط‬ ‫المثلثا‬ ‫دوال‬ ( ‫ت‬ sin() ‫و‬ cos() ‫و‬ tan() ‫و‬ asin() ‫و‬ acos() ‫و‬ atan() ‫(أو‬ ‫تتوقع‬ ) ( ‫اديان‬‫ر‬‫ال‬ ‫بواحدة‬ ‫الزوايا‬ )‫عيد‬ ُ ‫ت‬ radian ) . Math.abs(x) .‫للعدد‬ ‫المطلقة‬ ‫القيمة‬ ‫إعادة‬ Math.acos(x) ( ‫التجيب‬ ‫معكوس‬ ‫إعادة‬ arccosine .‫للعدد‬ ) Math.asin(x) ( ‫الجيب‬ ‫معكوس‬ ‫إعادة‬ arcsine .‫للعدد‬ ) Math.atan(x) ( ‫الظل‬ ‫معكوس‬ ‫إعادة‬ arctangent .‫للعدد‬ ) Math.ceil(x) ‫عدد‬ ‫ر‬ ‫أكت‬ ‫إىل‬ ‫التقريب‬ ‫(أي‬ ‫العدد‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫ا‬ً‫مساوي‬ ‫يكون‬ ‫صحيح‬ ‫عدد‬ ‫أصغر‬ ‫إعادة‬ .)‫صحيح‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 236 Math.cos(x) ( ‫تجيب‬ ‫إعادة‬ cosine .‫للعدد‬ ) Math.floor(x) ‫من‬ ‫أصغر‬ ‫أو‬ ‫ا‬ً‫مساوي‬ ‫يكون‬ ‫صحيح‬ ‫عدد‬ ‫ر‬ ‫أكت‬ ‫إعادة‬ ‫أصغر‬ ‫إىل‬ ‫التقريب‬ ‫(أي‬ ‫العدد‬ .)‫صحيح‬ ‫عدد‬ Math.max([x[, y[, …]]]) .‫الوسائط‬ ‫ر‬ ‫بي‬ ‫من‬ ‫قيمة‬ ‫ر‬ ‫أكت‬ ‫إعادة‬ Math.min([x[, y[, …]]]) .‫الوسائط‬ ‫ر‬ ‫بي‬ ‫من‬ ‫قيمة‬ ‫أصغر‬ ‫إعادة‬ Math.pow(x, y) ‫أي‬ ،‫األس‬ ‫قوة‬ ‫إىل‬ ‫األساس‬ ‫رفع‬ baseexponent . Math.random() ( ‫ائف‬‫ز‬ ‫ي‬ ‫عشوان‬ ‫عدد‬ ‫إعادة‬ pseudo-random number ‫ر‬ ‫بي‬ ) 0 ‫و‬ 1 . Math.round(x) .‫صحيح‬ ‫عدد‬ ‫أقرب‬ ‫إىل‬ ً ‫مقربة‬ ‫العدد‬ ‫قيمة‬ ‫إعادة‬
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 237 Math.sign(x) ‫العدد‬ ‫إشارة‬ ‫إعادة‬ x ‫العدد‬ َّ ‫أن‬ ‫إىل‬ ‫ر‬ ‫شت‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫الت‬ ، x .‫صفر‬ ‫أم‬ ٌ ‫سالب‬ ‫أم‬ ٌ ‫موجب‬ Math.sin(x) ( ‫جيب‬ ‫إعادة‬ sine .‫للعدد‬ ) Math.sqrt(x) ‫الجذر‬ ‫إعادة‬ .‫للعدد‬ ‫الموجب‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬ Math.tan(x) ( ‫ظل‬ ‫إعادة‬ tangent .‫العدد‬ )
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 238 DOM ‫المستند‬ ‫تمثيل‬ ‫نموذج‬ ‫ب‬ ‫كائن‬ Document Object Model ‫له‬ ‫يشار‬ ‫والذي‬ ‫ب‬ ‫ا‬‫ر‬‫اختصا‬ DOM ‫ر‬ ‫عتت‬ ُ ‫ت‬ ‫حيث‬ ، ‫متفاعلة‬ ‫مواقع‬ ‫بناء‬ ‫ي‬ ‫ف‬ ‫األساسية‬ ‫الطرق‬ ‫أحد‬ ‫ر‬ ‫يعتت‬ .‫وهيكليتها‬ ‫المواقع‬ ‫محتوى‬ ‫بمعالجة‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫للغات‬ ‫تسمح‬ ‫واجهة‬ ‫الطريقة‬ ‫هذه‬ ‫ببناء‬ ‫المتصفح‬ ‫يقوم‬ Document Object Model ‫و‬ ‫الصفحة‬ ‫تحميل‬ ‫عند‬ ‫عنه‬ ّ ‫ر‬ ‫عت‬ ُ‫الم‬ ‫المحتوى‬ ‫إىل‬ ‫بالوصول‬ ‫سكربت‬ ‫للجافا‬ ‫النموذج‬ ‫هذا‬ ‫يسمح‬ ‫كنص‬ text ‫كعناص‬‫أو‬ element ‫اض‬‫ر‬‫أغ‬ ‫شكل‬ ‫عىل‬ ‫ورؤيتها‬ ‫المستند‬ ‫ضمن‬ objects . ‫المستند‬ ‫كائن‬ Document ‫المستند‬ ‫كائن‬ document ‫الخصائص‬ ‫من‬ ‫عدد‬ ‫يملك‬ ‫دمج‬ ُ‫م‬ ‫كائن‬‫عن‬ ‫عبارة‬ ‫هو‬ properties ‫والطرق‬ methods ‫إىل‬ ‫للوصول‬ ‫استخدامها‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫خصائص‬ ‫الصفحة‬ ‫وتعديله‬ ‫ا‬ . ‫الصفحة‬ ‫خلفية‬ ‫جعل‬ ‫األحمر‬ ‫بالون‬ document.body.style.backgroundColor = '#f00';
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 239 ‫تعديله‬ ‫و‬ ‫لعنرص‬ ‫الوصول‬ ‫طرق‬ ‫بعدة‬ ‫لعنرص‬ ‫الوصول‬ ‫يمكن‬ getElementById ‫عنرص‬ ‫تجلب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطرق‬ ‫اسهل‬ ‫من‬ element ‫المعرف‬‫ذو‬ ‫وحيد‬ id ‫المحدد‬ getElementsByClassName <div id="demo">Access me by ID</div> getElementsByClassName ‫تملك‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫جميع‬ ‫بجلب‬ ‫تقوم‬ class ‫عىل‬ ‫ان‬‫ر‬‫الدو‬ ‫يمكن‬ ,‫محدد‬ ‫صف‬ ‫مثل‬ ‫حلقة‬ ‫بستخدام‬ ‫المعادة‬ ‫العناص‬ for <div class="demo">Access me by class (1)</div> Gets Method ID getElementById() Class getElementsByClassName() Tag getElementsByTagName() Selector (single) querySelector() Selector (all) querySelectorAll()
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 240 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> </head> <body> <h1>Title</h1> <div class="demo">Access me by class (1)</div> <div id="second">Access me by class (2)</div> <script> let element = document.getElementsByClassName('demo')[0]; element.style.border = '1px solid orange'; document.getElementById('second').style.color = '#ff0'; document.getElementsByTagName('h1')[0].style.color = '#0f0'; </script> </body> </html> querySelector ‫و‬ querySelectorAll ‫ال‬ ‫عناص‬ ‫اىل‬ ‫للوصول‬ ‫الطريقتان‬ ‫هاتان‬ ‫تستخدم‬ DOM ‫طريق‬ ‫عن‬ CSS selectors ‫حيث‬ querySelector ‫وحيد‬ ‫عنرص‬ ‫تعيد‬ ‫اما‬ querySelectorAll ‫للمحدد‬ ‫الموافقة‬ ‫العناص‬ ‫جميع‬ ‫فتعيد‬ selector <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> </head>
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 241 <body> <h1>Title</h1> <div class="demo">Access me by class (1)</div> <div id="second">Access me by class (2)</div> <script> let element = document.querySelector('.demo'); element.style.border = '1px solid orange'; document.querySelector('#second').style.color = '#f00'; document.querySelectorAll('h1')[0].style.color = '#0f0'; </script> </body> </html> Modifying Classes ‫الصفوف‬ ‫تعديل‬ Method/Property Description className ‫للخاصية‬ ‫قيم‬ ‫وضع‬ ‫او‬ ‫الحصول‬ class classList.add() ‫ر‬ ‫أكت‬ ‫صف‬ ‫إضافة‬ classList.toggle() ‫قلب‬ Toggles ‫كلس‬ classList.contains() ‫يملك‬ ‫العنرص‬ ‫كان‬‫إذا‬ ‫فيما‬ ‫فحص‬ class ‫ما‬ classList.replace() ‫اخر‬ ‫بصف‬ ‫صف‬ ‫استبدال‬ classList.remove() ‫ما‬ ‫صف‬ ‫حذف‬ <!DOCTYPE html>
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 242 <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <div>Div 1</div> <div class="active">Div 2</div> <script> // Select the first div const div = document.querySelector('div'); div.className = 'warning'; const activeDiv = document.querySelector('.active'); activeDiv.classList.add('hidden'); activeDiv.classList.remove('hidden'); activeDiv.classList.toggle('hidden'); activeDiv.classList.toggle('hidden'); activeDiv.classList.replace('active', 'warning'); </script> </body> </html>
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 243 Event Handlers and Event Listeners ‫لألحداث‬ ‫االستماع‬ ‫ما‬ ‫عنرص‬ ‫فوق‬ ‫بلقارة‬ ‫كة‬ ‫الحر‬‫او‬ ‫المفاتيح‬ ‫لوحة‬ ‫ي‬ ‫ف‬‫زر‬ ‫ضغط‬ ‫مثل‬ ‫ما‬ ‫حدث‬ ‫وقع‬ ‫عند‬ ‫بواسطة‬ ‫ذلك‬ ‫فيمننا‬ ‫ما‬ ‫استجابة‬ ‫حصول‬ ‫نريد‬ ‫وكنا‬ .... ‫ما‬ ‫عنرص‬ ‫عىل‬ ‫الضغط‬‫او‬ ‫الطريقة‬ addEventListener <!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <button>click here</button> <p>Hi</p> <script> const changeText = () => { const p = document.querySelector('p'); p.textContent = "Hello"; } // Add event handler as a property of the button element const button = document.querySelector('button');
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 244 button.onclick = changeText; </script> </body> </html> ------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <button>click here</button> <p>Hi</p> <script> const changeText = () => { const p = document.querySelector('p'); p.textContent = "Hello"; } // Add event handler as a property of the button element
JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 245 const button = document.querySelector('button'); button.addEventListener('click',changeText); </script> </body> </html>
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 246 ‫الخامس‬ ‫الفصل‬
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 247 jQuery Introduction ‫من‬ ‫الغرض‬ jQuery ‫استخدام‬ ‫تسهيل‬ ‫هو‬ JavaScript ‫ي‬ ‫ف‬ . ‫الويب‬ ‫موقع‬ ‫هو‬ ‫ما‬ jQuery ‫؟‬ jQuery ، ‫أقل‬ ‫"اكتب‬ ، ‫الوزن‬ ‫خفيفة‬ ‫سكريبت‬ ‫جافا‬ ‫مكتبة‬ ‫ي‬ ‫ه‬ ‫ر‬ ‫الكثت‬ ‫وفعل‬ ." ‫من‬ ‫الغرض‬ jQuery ‫استخدام‬ ‫تسهيل‬ ‫هو‬ JavaScript ‫الخاص‬ ‫الويب‬ ‫موقع‬ ‫عىل‬ .‫بك‬ ‫يأخذ‬ jQuery ‫تعليمات‬ ‫سطور‬ ‫من‬ ‫العديد‬ ‫تتطلب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الشائعة‬ ‫المهام‬ ‫من‬ ‫ر‬ ‫الكثت‬ JavaScript ‫مجية‬ ‫ر‬ ‫الت‬ ،‫إلنجازها‬ ‫وتغلفها‬ ‫يمكنك‬ ‫طرق‬ ‫ي‬ ‫ف‬ ‫استدعائها‬ .‫واحد‬ ‫بسطر‬ ‫يبسط‬ jQuery ‫من‬ ‫المعقدة‬ ‫األشياء‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫ا‬ ً ‫أيض‬ JavaScript ‫مثل‬ ، ‫استدعاءات‬ AJAX ‫التع‬ ‫و‬ ‫ال‬ ‫مع‬ ‫امل‬ DOM. ‫مكتبة‬ ‫تحتوي‬ jQuery :‫التالية‬ ‫ات‬ ‫ر‬ ‫المت‬ ‫عىل‬ • ‫معالجة‬ HTML / DOM • ‫ي‬ ‫ف‬ ‫التالعب‬ CSS • ‫االحداث‬ • ‫ات‬‫ر‬‫المؤث‬ Effects ‫كة‬ ‫المتحر‬ ‫والرسوم‬ • ‫أجاكس‬ AJAX • ‫خدمات‬ ‫أخرى‬ Utilities ‫إىل‬ ‫باإلضافة‬ ،‫ذلك‬ ‫ت‬ ‫حتوي‬ jQuery ‫إضافية‬ ‫مكونات‬ ‫عىل‬ ‫من‬ ‫ر‬ ‫للكثت‬ ‫المهام‬ . ‫مكتبات‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫هناك‬ JavaScript ‫يكون‬ ‫أن‬ ‫المحتمل‬ ‫من‬ ‫ولكن‬ ، ‫األخرى‬ jQuery ‫هو‬ ‫من‬ ‫للتمديد‬ ‫قابلية‬ ‫ر‬ ‫واألكت‬ ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫يزداد‬ ‫أخرى‬ ‫مكتبات‬ ‫وجود‬ ‫مع‬ ً ‫ايضا‬ ‫استخدامها‬ .
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 248 ‫تضمين‬ jQuery ‫استخدام‬ ‫لبدء‬ ‫طرق‬ ‫عدة‬ ‫هناك‬ jQuery ‫عىل‬ ‫صفحات‬ .‫الويب‬ ‫مثل‬ : 1 . ‫مكتبة‬ ‫يل‬‫بتت‬ ‫قم‬ jQuery ‫من‬ jQuery.com 2 . ‫ر‬ ‫بتضمي‬ ‫قم‬ jQuery ‫من‬ CDN ‫مثل‬ ، Google ‫تنزيل‬ jQuery ‫من‬ ‫ان‬‫ر‬‫إصدا‬‫يتوفر‬ jQuery :‫يل‬‫للتت‬ • ‫اإلنتاج‬‫إصدار‬ ( Production version ) - ‫بموقعك‬ ‫خاص‬ ‫هذا‬ ‫المنشور‬ ‫العام‬ ‫لالستخدام‬ ‫وضغطه‬ ‫ه‬ ‫ر‬ ‫تصغت‬ ‫تم‬ ‫ألنه‬ • ‫التطوير‬‫إصدار‬ ( Development version ) - ‫لالختبار‬ ‫مخصص‬ ‫هذا‬ ‫مضغوط‬ ‫ر‬ ‫غت‬‫(رمز‬‫والتطوير‬ ‫ائة‬‫ر‬‫للق‬ ‫قابل‬ ‫و‬ ) ‫من‬ ‫اإلصدارين‬ ‫كال‬‫يل‬‫تت‬ ‫يمكن‬ https://jquery.com/ ‫مكتبة‬ jQuery ‫ملف‬ ‫ي‬ ‫ه‬ JavaScript ‫ب‬ ‫إليه‬ ‫الرجوع‬ ‫ويمكنك‬ ، ‫واحد‬ ‫وسم‬ HTML <script> ‫ر‬ ‫تضمي‬ ‫يتم‬ ‫غالبا‬, JQuery ‫الجزء‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫األخت‬ ‫من‬ <body> ‫االنتباه‬ ‫مع‬ ‫طلب‬ ‫عدم‬ ‫اىل‬ ‫أي‬ . ‫ر‬ ‫التضمي‬ ‫هذا‬ ‫قبل‬ ‫دالة‬ ‫ويمكن‬ ‫أيضا‬ ‫تضمينها‬ ‫قسم‬ ‫داخل‬ <head> <head> <script src="jquery-3.5.1.min.js"></script> </head> ‫باستخدا‬ ‫تضمين‬ ‫م‬ CDN ‫يل‬‫تت‬ ‫تريد‬ ‫ال‬ ‫كنت‬‫إذا‬ jQuery ، ‫واستضافته‬ ‫من‬ ‫تضمينه‬ ‫فيمكنك‬ ‫توصيل‬ ‫"شبكة‬ "‫المحتوى‬ CDN Content Delivery Network) .) ‫عد‬ُ‫ي‬ Google ‫من‬‫خيار‬ SDN ‫يستضيف‬ jQuery
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 249 Google CDN: <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/j query.min.js"></script> </head> ‫الستخدام‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫ات‬ ‫ر‬ ‫المت‬ ‫إحدى‬ jQuery ‫المستضاف‬ ‫عىل‬ CDN ‫قام‬ ‫المستخدم‬ ‫يل‬‫بتت‬ ‫بالفعل‬ jQuery ‫من‬ CDN ‫نتيجة‬ .‫آخر‬ ‫موقع‬ ‫زيارة‬ ‫عند‬ ‫المؤقت‬ ‫التخزين‬ ‫ذاكرة‬ ‫من‬ ‫تحميله‬ ‫سيتم‬ ، ‫لذلك‬ cache ، ‫موقعك‬ ‫يزورون‬ ‫عندما‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫يؤدي‬ ‫مما‬ ‫شبكات‬ ‫معظم‬ ‫ستتأكد‬ ، ‫ا‬ ً ‫أيض‬ CDN ‫سيتم‬ ، ‫منه‬ ‫ا‬ ً ‫ملف‬ ‫المستخدم‬ ‫يطلب‬ ‫أن‬ ‫بمجرد‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ ‫يؤدي‬ ‫مما‬ ، ‫إليهم‬ ‫األقرب‬ ‫الخادم‬ ‫من‬ ‫تقديمه‬ ‫الكتابة‬ ‫قواعد‬ jQuery ‫باستخدام‬ jQuery ‫(ا‬ ‫تحديد‬ ‫يمكنك‬ ، ‫ال‬ ‫عناص‬ )‫ستعالم‬ HTML ‫وتنفيذ‬ .‫عليها‬ "‫اءات‬‫ر‬‫"اإلج‬ ‫ي‬ ‫ه‬ ‫األساسية‬ ‫الصيغة‬ : $(selector).action() • ‫العالمة‬ ‫إىل‬ ‫الوصول‬ / ‫لتعريف‬ $ jQuery • ( selector ) ‫المحدد‬ ")‫البحث‬ ‫(أو‬ ‫"االستعالم‬ ‫ل‬ ‫عناص‬ HTML • action() )‫(العناص‬ ‫العنرص‬ ‫عىل‬ ‫تنفيذه‬ ‫ليتم‬ $(this).hide() – ‫إخفاء‬ ‫الحالي‬ ‫العنصر‬ $("p").hide() – ‫إخفاء‬ ‫عناصر‬ ‫كل‬ <p> $(".test").hide() – ‫إخفاء‬ ‫صف‬ ‫تملك‬ ‫التي‬ ‫العناصر‬ ‫كل‬ test $("#test").hide() - ‫إخفاء‬ ‫معرفها‬ ‫التي‬ ‫العناصر‬ ‫كل‬ test
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 250 The Document Ready Event ‫اغلب‬ ‫األوقات‬ ‫اكود‬ ‫كتابة‬‫يتم‬ jQuery ‫حدث‬ ‫داخل‬ ready :‫للمستند‬ $(document).ready(function(){ // jQuery methods go here... }); ‫كود‬‫أي‬ ‫تشغيل‬ ‫لمنع‬ ‫هذا‬ jQuery .)‫(جاهز‬ ‫المستند‬ ‫تحميل‬ ‫من‬ ‫االنتهاء‬ ‫قبل‬ .‫معه‬ ‫التعامل‬ ‫قبل‬ ‫بالكامل‬ ‫المستند‬ ‫تحميل‬ ‫يتم‬ ‫ر‬ ‫حت‬ ‫االنتظار‬ ‫الجيد‬ ‫من‬ ‫الطرق‬ ‫تشغيل‬ ‫تم‬ ‫إذا‬ ‫تفشل‬ ‫أن‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اءات‬‫ر‬‫اإلج‬ ‫عىل‬ ‫األمثلة‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ :‫بالكامل‬ ‫المستند‬ ‫تحميل‬ ‫قبل‬ • ‫لم‬ ‫عنرص‬ ‫إخفاء‬ ‫محاولة‬ ‫بعد‬ ‫إنشاؤه‬ ‫يتم‬ • ‫بعد‬ ‫تحميلها‬ ‫يتم‬ ‫لم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الصورة‬ ‫حجم‬ ‫عىل‬ ‫الحصول‬ ‫محاولة‬ • ..... ‫المحددات‬ Selectors ‫محددات‬ ‫تعد‬ jQuery ‫مكتبة‬ ‫اء‬‫ز‬‫أج‬ ‫أهم‬ ‫أحد‬ jQuery. ‫محددات‬ ‫لك‬ ‫تسمح‬ jQuery )‫(عناص‬‫عنرص‬ ‫ومعالجة‬ ‫بتحديد‬ HTML. ‫محددات‬ ‫ستخدم‬ ُ ‫ت‬ jQuery " ‫عناص‬ )‫تحديد‬ ‫(أو‬ ‫إليجاد‬ " HTML ‫االسم‬ ‫عىل‬ ً‫بناء‬ ‫و‬ ‫والمعرف‬ ‫الصفوف‬ ‫وا‬ ‫واألنواع‬ ‫لخواص‬ ‫ال‬ ‫وقيم‬ ‫خواص‬ ‫يعتمد‬ . ‫ر‬ ‫الكثت‬ ‫ذلك‬ ‫ر‬ ‫وغت‬ ‫محددات‬ ‫عىل‬ CSS ‫المحددات‬ ‫بعض‬ ‫عىل‬ ‫يحتوي‬ ‫أنه‬ ‫إىل‬ ‫باإلضافة‬ ، ‫الحالية‬ .‫الخاصة‬ ‫ي‬ ‫ف‬ ‫المحددات‬ ‫جميع‬ ‫تبدأ‬ jQuery ‫ب‬ ‫وسم‬ .)( $ :‫واألقواس‬ ‫الدوالر‬
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 251 ‫عنص‬ ‫تحديد‬ ‫اسمه‬ ‫طريق‬ ‫عن‬ ‫ر‬ ‫عنرص‬ ‫محدد‬ ‫يحدد‬ jQuery .‫العنرص‬ ‫اسم‬ ‫عىل‬ ً‫بناء‬ ‫العناص‬ ‫العناص‬ ‫كل‬‫تحديد‬ ‫يمكنك‬ <p> ‫ي‬ ‫ف‬ ‫صفحة‬ ‫ي‬ ‫كلتاىل‬ : $("p") ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ ‫اي‬ ‫عناص‬ ‫جميع‬ ‫إخفاء‬ ‫سيتم‬ ، ‫زر‬ <p>: $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); ‫المعرف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫محدد‬ ‫يستخدم‬ #id ‫الخاصية‬ id ‫ل‬ ‫وسم‬ HTML ‫العنرص‬ ‫عىل‬‫للعثور‬ ‫المطلوب‬ . ‫محدد‬ ‫استخدام‬ ‫عليك‬ ‫يجب‬ ‫لذا‬ ، ‫الصفحة‬ ‫داخل‬ ‫ا‬ ً ‫فريد‬ ‫المعرف‬ ‫يكون‬ ‫أن‬ ‫يجب‬ # id .‫فريد‬ ‫واحد‬ ‫عنرص‬ ‫عن‬ ‫البحث‬ ‫تريد‬ ‫عندما‬ ، ‫محدد‬ ‫بمعرف‬ ‫عنرص‬ ‫عىل‬‫للعثور‬ ‫حرف‬ ‫اكتب‬ # ‫عنرص‬ ‫بمعرف‬ ‫ا‬ ً‫متبوع‬ HTML: $("#test") ‫المعرف‬ ‫ذي‬ ‫العنرص‬ ‫إخفاء‬ ‫سيتم‬ ، ‫زر‬ ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ "test" $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 252 ‫الصف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫د‬ ّ ‫محد‬ ‫يبحث‬ .class ‫ب‬ ‫عناص‬ ‫عن‬ ‫صف‬ class .‫معينة‬ ‫ب‬ ‫عناص‬ ‫عىل‬‫للعثور‬ ‫صف‬ ‫اكتب‬ ، ‫معينة‬ ". " ‫الحرف‬ ‫ال‬ ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، ‫صف‬ : $(".test") ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫فإن‬ ، ‫زر‬ ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ ‫صف‬ ‫تملك‬ test ‫ي‬ ‫ستختق‬ : $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); ‫الصف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫ة‬ ‫ر‬ ‫كثت‬‫بطرق‬ ‫التحديد‬ ‫يمكن‬ ‫أيضا‬ ‫الواصفات‬ ‫أحد‬ ‫طريق‬ ‫عن‬ ‫مثال‬ atteibutes $( "input[name='message']" ).val( "hello anas" ); ‫تحديد‬ ‫يمكن‬ ‫الفردي‬‫او‬ ‫ي‬ ‫ر‬ ‫الزج‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫ذات‬ ‫العناص‬ $( "p:even" ).text( "even" ); $( "p:odd" ).text( "odd" );
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 253 : ‫المزيد‬ ‫واكتشاف‬ ‫التالية‬ ‫االكواد‬ ‫تجريب‬ ‫يمكنك‬ $( "tr:first" ).css( "font-style", "italic" ); $( "tr" ).last().css({ fontWeight: "bolder" }); $( "div span:last-child" ).text('last item') $( "td:lt(4)" ).css( "backgroundColor", "yellow" ); $( "label + input" ).css( "color", "blue" ) $( "#prev ~ div" ).css( "border", "3px groove blue" ); $( "input:password" ).css({border: "3px red solid"}); $( "input[type=checkbox]" ).css({border: "3px blue solid"});
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 254 ‫االحداث‬ ‫تصميم‬ ‫تم‬ jQuery ‫صفحة‬ ‫ي‬ ‫ف‬ ‫لألحداث‬ ‫لالستجابة‬ ‫ا‬ ً ‫خصيص‬ HTML. ‫األحداث؟‬ ‫ي‬ ‫ه‬ ‫ما‬ ‫اءات‬‫ر‬‫إج‬ ‫جميع‬ ‫تسىم‬ ‫المستخدم‬ ‫االستجابة‬ ‫الويب‬ ‫لصفحة‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المختلفة‬ .‫باألحداث‬ ‫لها‬ ‫ما‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫يحدث‬ ‫عندما‬ ‫اللحظة‬ ‫الحدث‬ ‫يمثل‬ ‫مثل‬, : • ‫عنرص‬ ‫فوق‬ ‫الماوس‬ ‫تحريك‬ • ‫االختيار‬‫زر‬ ‫اختيار‬ • ‫فوق‬ ‫النقر‬ ‫عنرص‬ .‫األحداث‬ ‫مع‬ "‫أطلقت‬ / ‫ائق‬‫ر‬‫"ح‬ ‫مصطلح‬ ‫يستخدم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ."‫مفتاح‬ ‫عىل‬ ‫الضغط‬ ‫لحظة‬ ، ‫المفتاح‬ ‫عىل‬ ‫الضغط‬ ‫حدث‬ ‫تشغيل‬ ‫"يتم‬ :‫مثال‬ ‫أحداث‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ DOM :‫الشائعة‬ Mouse Keyboard Form Document/Window click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload ‫ما‬ ‫لحدث‬ ‫االستماع‬ ‫طريقة‬ ‫القيام‬ ‫يمكنك‬ ، ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫ات‬‫ر‬‫الفق‬ ‫لجميع‬ ‫نقرة‬ ‫حدث‬ ‫ر‬ ‫لتعيي‬ ‫ي‬ ‫يىل‬ ‫بما‬ : $("p").click(); ‫عليك‬ ‫يجب‬ .‫الحدث‬ ‫وقوع‬ ‫عند‬ ‫يحدث‬ ‫أن‬ ‫يجب‬ ‫ما‬ ‫تحديد‬ ‫ي‬ ‫ه‬ ‫التالية‬ ‫الخطوة‬ ‫تمرير‬ function :‫الحدث‬ ‫إىل‬
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 255 $("p").click(function(){ // action goes here!! }); ‫بالحداث‬ ‫الخاصة‬ ‫المساعدة‬ ‫الدوال‬ $(document).ready() ‫الطريقة‬ ‫لنا‬ ‫تتيح‬ $(document).ready() ‫تنفيذ‬ ‫دالة‬ ‫يتم‬ ‫عندما‬ ‫المستند‬ ‫تحميل‬ .‫بالكامل‬ click() ‫طريقة‬ ‫تقوم‬ click () ‫بإرفاق‬ ‫دالة‬ ‫معالج‬ ‫النقر‬ ‫حدث‬ ‫بعنرص‬ HTML. ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ HTML. ‫عند‬ : ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫انطالق‬ ‫عنرص‬ ‫عىل‬ ‫نقرة‬ ‫حدث‬ <p> ‫العنرص‬ ‫إخفاء‬ <p> : ‫ي‬ ‫الحاىل‬ $("p").click(function(){ $(this).hide(); }); dblclick() ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫فوق‬ ‫ا‬ ً ‫مزدوج‬ ‫ا‬ً ‫نقر‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ HTML: $("p").dblclick(function(){ $(this).hide(); }); Mouseenter () ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫إىل‬ ‫الماوس‬ ‫ر‬ ‫مؤرس‬ ‫يدخل‬ ‫عندما‬ HTML: $("#p1").mouseenter(function(){ alert("You entered p1!"); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 256 mouseleave () ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫الماوس‬ ‫ر‬ ‫مؤرس‬ ‫ك‬ ‫ر‬ ‫يت‬ ‫عندما‬ HTML: $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); mousedown () ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ، ‫ألسفل‬ ‫األيمن‬‫أو‬ ‫األوسط‬‫أو‬ ‫األيش‬ ‫الماوس‬‫زر‬ ‫عىل‬ ‫الضغط‬ ‫عند‬ ‫عنرص‬ ‫فوق‬ ‫الماوس‬ ‫يكون‬ ‫بينما‬ ، HTML: $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); mouseup () ‫طريقة‬ ‫تقوم‬ mouseup () ‫بإرفاق‬ ‫دالة‬ ‫بعنرص‬ ‫الحدث‬ ‫معالج‬ HTML. ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ، ‫يكون‬ ‫بينما‬ ، ‫األيمن‬‫أو‬ ‫األوسط‬‫أو‬ ‫األيش‬ ‫الماوس‬‫زر‬ ‫تحرير‬ ‫عند‬ ‫عنرص‬ ‫فوق‬ ‫الماوس‬ HTML: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); hover () ‫طريقة‬ ‫تأخذ‬ hover () ‫من‬ ‫ج‬ ‫مزي‬ ‫ي‬ ‫وه‬ ‫ر‬ ‫وظيفتي‬ Mouseenter() ‫و‬ mouseleave (). ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫الماوس‬ ‫يدخل‬ ‫عندما‬ ‫األوىل‬ HTML ‫ال‬ ‫تنفيذ‬ ‫ويتم‬ ، ‫دالة‬ ‫عندما‬ ‫الثانية‬ ‫يغادر‬ ‫عنرص‬ ‫الماوس‬ HTML: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 257 focus() ‫طريقة‬ ‫تقوم‬ focus() ‫بإرفاق‬ ‫دالة‬ ‫نموذج‬ ‫بحقل‬ ‫الحدث‬ ‫معالج‬ HTML. ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ :‫النموذج‬ ‫حقل‬ ‫عىل‬ ‫ر‬ ‫كت‬ ‫ر‬ ‫الت‬ ‫يتم‬ ‫عندما‬ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); ‫الطريقة‬ on() ‫تقوم‬ ‫ال‬ ‫طريقة‬ on () ‫بإرفاق‬ .‫المحددة‬ ‫للعناص‬ ‫األحداث‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ ‫بعنرص‬ ‫نقرة‬ ‫حدث‬ ‫أرفق‬ <p>: $("p").on("click", function(){ $(this).hide(); }); ‫عنرص‬ ‫إىل‬ ‫متعددة‬ ‫أحداث‬ ‫معالجات‬ ‫أرفق‬ <p>: $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 258 ‫التاثيرات‬ ‫االخفاء‬ ‫و‬ ‫االظهار‬ ‫باستخدام‬ jQuery ‫عناص‬ ‫إخفاء‬ ‫يمكنك‬ ، HTML ‫ر‬ ‫التابعي‬ ‫باستخدام‬ ‫وإظهارها‬ hide () ‫و‬ show (): $(selector).hide(speed,callback); $(selector).show(speed,callback); $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); ‫تحدد‬ ‫االختياري‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬ speed ‫القيم‬ ‫تأخذ‬ ‫أن‬ ‫ويمكن‬ ، ‫العرض‬ / ‫اإلخفاء‬ ‫رسعة‬ " :‫التالية‬ slow "‫أو‬ " fast ‫أو‬ " ‫ال‬ ‫عدد‬ .‫ثانية‬ ‫ي‬ ‫مىل‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬ callback ‫اختياري‬ ‫أيضا‬ ‫يدد‬ ‫دالة‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫يتم‬ ‫اإل‬ ‫أو‬ ‫خفاء‬ ‫اإل‬ ‫ظهار‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫الشعة‬ $("button").click(function(){ $("p").hide(1000); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 259 toggle() ‫التبديل‬ ‫طريقة‬ ‫باستخدام‬ ‫وإظهاره‬ ‫عنرص‬ ‫إخفاء‬ ‫ر‬ ‫بي‬ ‫التبديل‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ ( toggle .) ‫الظاهرة‬ ‫العناص‬ ‫اخفائها‬ ‫يتم‬ :‫المخفية‬ ‫العناص‬ ‫وتظهر‬ $(selector).toggle(speed,callback); $("button").click(function(){ $("p").toggle(); }); ‫تأخذ‬ ‫أن‬ ‫يمكن‬ ‫الدالة‬ toggle ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫الشعة‬ . ‫تأخذ‬ ‫أن‬ ‫يمكن‬ ‫الدالة‬ toggle ‫ر‬ ‫امت‬‫ر‬‫با‬ callback . ‫السحب‬ Sliding ‫طرق‬ ‫تعمل‬ slide .‫وألسفل‬ ‫ألعىل‬ ‫العناص‬ ‫تحريك‬ ‫عىل‬ ‫باستخدام‬ jQuery ‫ر‬ ‫تأثت‬ ‫إنشاء‬ ‫يمكنك‬ ، ‫السحب‬ .‫العناص‬ ‫عىل‬ ‫يحتوي‬ jQuery ‫طرق‬ ‫عىل‬ ‫السحب‬ slide :‫التالية‬ • slideDown() • slideUp() • slideToggle() slideDown() ‫طريقة‬ ‫ستخدم‬ ُ ‫ت‬ jQuery slideDown () .‫ألسفل‬‫عنرص‬ ‫لتحريك‬ $(selector).slideDown(speed,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ " :‫التالية‬ ‫القيم‬ ‫يأخذ‬ ‫أن‬ ‫يمكن‬ . ‫ر‬ ‫التأثت‬ ‫مدة‬ ‫االختياري‬ ‫الشعة‬ slow " ‫أو‬ " fast .‫ثانية‬ ‫ي‬ ‫ملىل‬ ‫أو‬ " ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫يتم‬ ‫ر‬ ‫التاثت‬ .
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 260 ‫طريقة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ slideDown (): $("#flip").click(function(){ $("#panel").slideDown(); }); slideUp() ‫طريقة‬ ‫ستخدم‬ ُ ‫ت‬ jQuery slideUp () ‫عنرص‬ ‫لتحريك‬ .‫ألعىل‬ $(selector).slideUp(speed,callback); $("#flip").click(function(){ $("#panel").slideUp(); }); slideToggle ‫طريقة‬ ‫تقوم‬ slideToggle () ‫ي‬ ‫ر‬ ‫طريقت‬ ‫ر‬ ‫بي‬ ‫بالتبديل‬ slideDown () ‫و‬ slideUp (). • ‫تم‬ ‫إذا‬ ‫سحب‬ ‫ل‬ ‫العناص‬ ‫أل‬ ‫فإن‬ ، ‫سفل‬ slideToggle () ‫إىل‬ ‫سيؤدي‬ ‫تحريكها‬ .‫ألعىل‬ • ‫تم‬ ‫إذا‬ ‫سحب‬ ‫فإن‬ ، ‫ألعىل‬ ‫العناص‬ slideToggle () ‫كها‬ ‫ستحر‬ .‫ألسفل‬ $(selector).slideToggle(speed,callback); $("#flip").click(function(){ $("#panel").slideToggle(); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 261 ‫التالشي‬ Fading ‫يحتوي‬ jQuery ‫طرق‬ ‫عىل‬ ‫ي‬ ‫ر‬ ‫التالش‬ fade :‫التالية‬ • fadeDown() • fadeUp() • fadeToggle() $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); Animation ‫ستخدم‬ ُ ‫ت‬ ‫طريقة‬ animate () ‫إلنشاء‬ ‫كة‬ ‫حر‬ .‫مخصصة‬ $(selector).animate({params},speed,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ params ‫خصائص‬ ‫المطلوبة‬ CSS .‫تحريكها‬ ‫ليتم‬ ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ " :‫التالية‬ ‫القيم‬ ‫يأخذ‬ ‫أن‬ ‫يمكن‬ . ‫ر‬ ‫التأثت‬ ‫مدة‬ ‫االختياري‬ ‫الشعة‬ slow ‫أو‬ " " fast ‫أو‬ " milliseconds . ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ ‫التحر‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫يتم‬ ‫ي‬ .‫ك‬ ً ‫بسيط‬ ‫ا‬ ً‫استخدام‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫لطريقة‬ ‫ا‬ animate () ‫عنرص‬ ‫ينقل‬ <div> ‫بمقدار‬ ‫اليسار‬ ‫خاصية‬ ‫إىل‬ ‫يصل‬ ‫ر‬ ‫حت‬ ، ‫ر‬ ‫اليمي‬ ‫إىل‬ 250 :‫بكسل‬ $("button").click(function(){ $("div").animate({left: '250px'}); }); :‫الوقت‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫الخصائص‬ ‫من‬ ‫العديد‬ ‫تحريك‬ ‫يمكن‬ ‫أنه‬ ‫الحظ‬
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 262 $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); ‫باستخدا‬ ‫التحريك‬ ‫م‬ ‫نسبية‬ ‫قيم‬ ‫الحالية‬ ‫بالقيمة‬ ‫مرتبطة‬ ‫إذن‬ ‫القيمة‬ ‫(تكون‬ ‫النسبية‬ ‫القيم‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫الممكن‬ ‫من‬ .)‫للعنرص‬ $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); ‫عنرص‬ ً ‫أوال‬ ‫أدناه‬ ‫المثال‬ ‫ينقل‬ <div> :‫النص‬ ‫خط‬ ‫حجم‬ ‫يزيد‬ ‫ثم‬ ، ‫ر‬ ‫اليمي‬ ‫إىل‬ $("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); }); ‫التحريك‬ ‫او‬ ‫التأثير‬ ‫اقاف‬ ‫طريقة‬ ‫ستخدم‬ ُ ‫ت‬ jQuery stop () .‫انتهائه‬ ‫قبل‬ ‫ر‬ ‫تأثت‬ ‫أو‬ ‫متحرك‬ ‫رسم‬ ‫إليقاف‬ ‫طريقة‬ ‫تعمل‬ stop () ‫ر‬ ‫تأثت‬ ‫وظائف‬ ‫جميع‬ ‫مع‬ jQuery ‫ا‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ، ‫لسحب‬ .‫المخصصة‬ ‫كة‬ ‫المتحر‬ ‫والرسوم‬ ‫ي‬ ‫ر‬ ‫والتالش‬ $(selector).stop(stopAll,goToEnd);
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 263 $("#stop").click(function(){ $("#panel").stop(); }); ‫التسلسل‬ Chaining ‫ات‬‫ر‬‫عبا‬ ‫نكتب‬ ‫كنا‬، ‫اآلن‬ ‫ر‬ ‫حت‬ jQuery ‫واحدة‬ ‫تلو‬ ‫ه‬ ‫األخرى‬ ‫ومع‬ ،‫ذلك‬ ‫لنا‬ ‫تتيح‬ ‫التسلسل‬ ‫تسىم‬ ‫تقنية‬ ‫هناك‬ ‫تنفيذ‬ ‫أوامر‬ jQuery ، ‫متعددة‬ .)‫(العناص‬‫العنرص‬ ‫نفس‬ ‫عىل‬ ، ‫األخرى‬‫تلو‬ ‫واحدة‬ ‫مالحظة‬ ، ‫الطريقة‬ ‫بهذه‬ : ‫العنرص‬ ‫نفس‬ ‫عىل‬‫العثور‬ ‫المتصفحات‬ ‫عىل‬ ‫ر‬ ‫يتعي‬ ‫ال‬ .‫مرة‬ ‫من‬ ‫ر‬ ‫أكت‬ )‫(العناص‬ .‫السابق‬ ‫اء‬‫ر‬‫باإلج‬ ‫اء‬‫ر‬‫اإلج‬ ‫إلحاق‬ ‫سوى‬ ‫عليك‬ ‫ما‬ ، ‫اء‬‫ر‬‫إج‬ ‫لتسلسل‬ ‫طرق‬ ‫مع‬ ‫التالية‬ ‫األمثلة‬ ‫ابط‬ ‫ر‬ ‫تت‬ css () ‫و‬ slideUp () ‫و‬ slideDown (). ‫ر‬ ‫يتغت‬ ‫عنرص‬ <p> ‫أ‬ ً ‫وال‬ ، ‫ألعىل‬ ‫لق‬‫يت‬ ‫ثم‬ ، ‫األحمر‬ ‫اللون‬ ‫إىل‬ :‫ألسفل‬ ‫لق‬‫يت‬ ‫ثم‬ $("#p1").css("color", "red").slideUp(2000).slideDown(2000); ‫الطريقة‬ ‫بهذه‬ ‫نكتبها‬ ‫وعادة‬ $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000);
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 264 ‫مع‬ ‫التعامل‬ classes ‫باستخدام‬ jQuery ‫مع‬ ‫التعامل‬ ‫السهل‬ ‫من‬ ، ‫ستايل‬ .‫العناص‬ ‫يحتوي‬ jQuery ‫لمعالجة‬ ‫طرق‬ ‫عدة‬ ‫عىل‬ CSS. :‫التالية‬ ‫الطرق‬ ‫ي‬ ‫ف‬‫سننظر‬ addClass () - ‫ضيف‬ ‫صف‬ ‫المحددة‬ ‫العناص‬ ‫إىل‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ removeClass () - ‫زيل‬ ‫صف‬ ‫المحددة‬ ‫العناص‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ toggleClass () - ‫الة‬‫ز‬‫إ‬ / ‫إضافة‬ ‫ر‬ ‫بي‬ ‫للتبديل‬ ‫الصفوف‬ ‫المحددة‬ ‫العناص‬ ‫من‬ css () - ‫إرجاع‬‫أو‬ ‫ر‬ ‫تعيي‬ ‫الخاصية‬ ‫النمط‬ ‫ر‬ ‫الصفي‬ ‫هذين‬ important ‫و‬ blue ‫االحقة‬ ‫األمثلة‬ ‫ي‬ ‫ف‬ ‫سنستعملهما‬ .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } addClass() ‫إضافة‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫صف‬ ‫تحديد‬ ‫يمكنك‬ ‫بالطبع‬ .‫مختلفة‬ ‫عناص‬ ‫إىل‬ ‫إضافة‬ ‫عند‬ ‫عناص‬ ‫عدة‬ ‫الصفوف‬ : $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); ‫طريقة‬ ‫ي‬ ‫ف‬ ‫متعددة‬ ‫فئات‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ addClass (): $("button").click(function(){ $("#div1").addClass("important blue"); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 265 removeClass() ‫الة‬‫ز‬‫إ‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫الخاصية‬ ‫صف‬ :‫مختلفة‬ ‫عناص‬ ‫من‬ ‫معينة‬ $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); toggleClass() ‫طريقة‬ ‫استخدام‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيوضح‬ jQuery toggleClass (). ‫تقوم‬ ‫الة‬‫ز‬‫إ‬ / ‫إضافة‬ ‫ر‬ ‫بي‬ ‫بالتبديل‬ ‫الطريقة‬ ‫هذه‬ ‫الصفوف‬ :‫المحددة‬ ‫العناص‬ ‫من‬ $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); }); css() ‫طريقة‬ ‫تقوم‬ css () .‫المحددة‬ ‫للعناص‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ ‫نمط‬ ‫خاصية‬ ‫إرجاع‬‫أو‬ ‫ر‬ ‫بتعيي‬ ‫إعادة‬ ‫خاصية‬ css ‫خاصية‬ ‫قيمة‬ ‫إلرجاع‬ CSS : ‫ي‬ ‫التاىل‬ ‫الجملة‬ ‫بناء‬ ‫استخدم‬ ، ‫محددة‬ css("propertyname"); :‫األول‬ ‫المطابق‬‫للعنرص‬ ‫الخلفية‬ ‫لون‬ ‫قيمة‬ ‫إىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيعود‬ $("p").css("background-color"); ‫خاصية‬ ‫قيمة‬ ‫ضبط‬ ss ‫خاصية‬ ‫ر‬ ‫لتعيي‬ CSS : ‫ي‬ ‫التاىل‬ ‫الجملة‬ ‫بناء‬ ‫استخدم‬ ، ‫محددة‬ css("propertyname","value"); :‫المتطابقة‬ ‫العناص‬ ‫لجميع‬ ‫الخلفية‬ ‫لون‬ ‫قيمة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيحدد‬ $("p").css("background-color", "yellow");
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 266 ‫خصائص‬ ‫عدة‬ ‫ضبط‬ css ‫خصائص‬ ‫عدة‬ ‫ر‬ ‫لتعيي‬ CSS : ‫ي‬ ‫التاىل‬ ‫الجملة‬ ‫بناء‬ ‫استخدم‬ ، css({"propertyname":"value","propertyname":"value",...}); :‫المتطابقة‬ ‫العناص‬ ‫لجميع‬ ‫الخط‬ ‫وحجم‬ ‫الخلفية‬ ‫لون‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيحدد‬ $("p").css({ "background-color": "yellow", "font-size": "200%" });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 267 ‫االجاكس‬ AJAX AJAX ‫هو‬ ‫ل‬ ‫تقنية‬ ‫الويب‬ ‫صفحة‬ ‫من‬ ‫اء‬‫ز‬‫أج‬ ‫وتحديث‬ ‫الخادم‬ ‫مع‬ ‫البيانات‬ ‫تبادل‬ - .‫بأكملها‬ ‫الصفحة‬ ‫تحميل‬ ‫إعادة‬ ‫دون‬ AJAX ‫ل‬‫اختصار‬ AJAX = Asynchronous JavaScript and XML. ‫الطريقة‬ load() ‫طريقة‬ load () ‫طريقة‬ ‫ي‬ ‫ه‬ AJAX .‫فعالة‬ ‫لكنها‬ ‫بسيطة‬ ‫طريقة‬ ‫تقوم‬ load () ‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫وتضع‬ ‫الخادم‬ ‫من‬ ‫البيانات‬ ‫بتحميل‬ .‫المحدد‬‫العنرص‬ ‫ي‬ ‫ف‬ $(selector).load(URL,data,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ URL ‫االجبارية‬ ‫عنوان‬ URL .‫تحميله‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫الذي‬ ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫سلسلة‬ ‫قيمة‬ / ‫مفتاح‬ ‫أزواج‬ ‫من‬ ‫مجموعة‬ ‫االختياري‬ ‫البيانات‬ ‫االستعالم‬ .‫الطلب‬ ‫مع‬ ‫إلرسالها‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ال‬ ‫االختياري‬ ‫دالة‬ ‫طريقة‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ load ‫ي‬ ‫التاىل‬ ‫الملف‬ ‫لدينا‬ ‫ليكن‬ ‫مثال‬ demo_test.txt <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p> ‫الملف‬ ‫محتوى‬ ‫بتحميل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يقوم‬ demo_test.txt ‫عنرص‬ ‫ي‬ ‫ف‬ ‫المحدد‬ $("#div1").load("demo_test.txt");
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 268 ‫الدوال‬ get() and post() ‫استخدام‬ ‫يتم‬ ‫ر‬ ‫الطريقتي‬ get () ‫و‬ post () ‫بطلب‬ ‫الخادم‬ ‫من‬ ‫البيانات‬ ‫لطلب‬ HTTP GET ‫أو‬ POST. ‫طلب‬ HTTP: GET ‫مقابل‬ POST :‫هما‬ ‫والخادم‬ ‫العميل‬ ‫ر‬ ‫بي‬ ‫للطلب‬ ‫لالستجابة‬ ‫شائعتان‬ ‫طريقتان‬ ‫هناك‬ GET ‫و‬ POST. GET - ‫محدد‬ ‫مورد‬ ‫من‬ ‫بيانات‬ ‫يطلب‬ POST - ‫محدد‬ ‫مورد‬ ‫إىل‬ ‫معالجتها‬ ‫لتتم‬ ‫البيانات‬ ‫يرسل‬ ‫يستخدم‬ GET .‫الخادم‬ ‫من‬ ‫البيانات‬ ‫بعض‬ )‫داد‬ ‫ر‬ ‫(است‬ ‫عىل‬ ‫للحصول‬ ‫ا‬ ً ‫أساس‬ ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ POST ‫ب‬ ‫عىل‬ ‫للحصول‬ ، ‫ذلك‬ ‫ومع‬ .‫الخادم‬ ‫من‬ ‫البيانات‬ ‫عض‬ ‫طريقة‬ ‫فإن‬ POST ‫مع‬ ‫البيانات‬ ‫إلرسال‬ ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫وغالب‬ ، ‫ا‬ ً ‫مؤقت‬ ‫البيانات‬ ‫تخزن‬ ‫ال‬ .‫الطلب‬ ‫الطريقة‬ $.get() ‫طريقة‬ ‫تطلب‬ get () ‫بطلب‬ ‫الخادم‬ ‫من‬ ‫بيانات‬ HTTP GET. $.get(URL,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ URL ‫عنوان‬ ‫المطلوبة‬ URL .‫طلبه‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫الذي‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ال‬ ‫اسم‬ ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ .‫الطلب‬ ‫نجاح‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫تنفيذها‬ ‫اد‬‫ر‬‫الم‬ ‫طريقة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يستخدم‬ get () ‫عىل‬ ‫موجود‬ ‫ملف‬ ‫من‬ ‫البيانات‬ ‫داد‬ ‫ر‬ ‫الست‬ :‫الخادم‬ $("button").click(function(){ $.get("demo_test.php", function(data, status){ alert("Data: " + data + "nStatus: " + status); }); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 269 ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫ل‬ ‫األوىل‬ get () ‫عنوان‬ ‫ي‬ ‫ه‬ URL ‫طلبه‬ ‫ي‬ ‫ف‬ ‫نرغب‬ ‫الذي‬ ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫ي‬ ‫ه‬ ‫الثانية‬ ‫الدالة‬ callback ‫يحتفظ‬ . ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫األول‬ ‫يحتفظ‬ ‫بينما‬ ، ‫المطلوبة‬ ‫الصفحة‬ ‫بمحتوى‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ .‫الطلب‬ ‫بحالة‬ ‫ي‬ ‫الثان‬ ‫الطريقة‬ $.post() ‫طريقة‬ ‫تطلب‬ post () ‫طلب‬ ‫باستخدام‬ ‫الخادم‬ ‫من‬ ‫بيانات‬ HTTP POST. $.post(URL,data,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ URL ‫عنوان‬ ‫المطلوبة‬ URL .‫طلبه‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫الذي‬ ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ .‫الطلب‬ ‫مع‬ ‫إلرسالها‬ ‫البيانات‬ ‫بعض‬ ‫االختياري‬ ‫البيانات‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ال‬ ‫اسم‬ ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ .‫الطلب‬ ‫نجاح‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫تنفيذها‬ ‫اد‬‫ر‬‫الم‬ ‫طريقة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يستخدم‬ post () :‫الطلب‬ ‫مع‬ ‫البيانات‬ ‫بعض‬ ‫إلرسال‬ $("button").click(function(){ $.post("demo_test_post.php", { name: "anas alpure", city: "Mara" }, function(data, status){ alert("Data: " + data + "nStatus: " + status); }); }); ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ . $ ‫ل‬ ‫األوىل‬ post () ‫عنوان‬ ‫ي‬ ‫ه‬ URL ‫طلبه‬ ‫ي‬ ‫ف‬ ‫نرغب‬ ‫الذي‬ ‫إلرسا‬ ‫البيانات‬ ‫بعض‬ ‫بتمرير‬ ‫نقوم‬ ‫ثم‬ .)‫والمدينة‬ ‫(االسم‬ ‫الطلب‬ ‫مع‬ ‫لها‬ ‫ل‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫يقوم‬ PHP " ‫ي‬ ‫ف‬ demo_test_post.php" ‫المعلمات‬ ‫اءة‬‫ر‬‫بق‬ .‫نتيجة‬ ‫وإرجاع‬ ‫ومعالجتها‬ ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫ي‬ ‫ه‬ ‫الثالثة‬ ‫دالة‬ callback ‫يحتفظ‬ . ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫بمحتوى‬ ‫األول‬ ‫يحتفظ‬ ‫بينما‬ ، ‫المطلوبة‬ ‫الصفحة‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ .‫الطلب‬ ‫بحالة‬ ‫ي‬ ‫الثان‬
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 270 ‫الخصائص‬ ‫و‬ ‫بالمحتوى‬ ‫التحكم‬ ‫يحتوي‬ jQuery ‫عناص‬ ‫ر‬ ‫لتغيت‬ ‫فعالة‬ ‫طرق‬ ‫عىل‬ ‫وخصائص‬ HTML .‫ومعالجتها‬ ‫ي‬ ‫ف‬ ‫ا‬ ً ‫جد‬ ‫المهمة‬ ‫اء‬‫ز‬‫األج‬ ‫أحد‬ jQuery ‫معالجة‬ ‫إمكانية‬‫هو‬ DOM. ‫ي‬ ‫ر‬ ‫يأن‬ jQuery ‫من‬ ‫مجموعة‬ ‫مع‬ ‫الطرق‬ ‫ب‬ ‫الصلة‬ ‫ذات‬ DOM ‫السهل‬ ‫من‬ ‫تجعل‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫وال‬ ‫العناص‬ ‫إىل‬ ‫الوصول‬ ‫خواص‬ .‫ومعالجتها‬ ‫للمحتوى‬ ‫الوصول‬ ‫لمعالجة‬ ‫مفيدة‬ ‫ولكنها‬ ‫بسيطة‬ ‫طرق‬ ‫ثالث‬ DOM : ‫ي‬ ‫ه‬ text () - ‫إرجاعه‬‫أو‬ ‫المحددة‬ ‫للعناص‬ ‫النص‬ ‫محتوى‬ ‫ر‬ ‫لتعيي‬ html () - ‫ر‬ ‫تعيي‬ ‫ر‬ ‫ترمت‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫(بما‬ ‫المحددة‬ ‫العناص‬ ‫محتوى‬ ‫إرجاع‬ ‫أو‬ HTML ) val () - ‫النموذج‬ ‫حقول‬ ‫قيمة‬ ‫إرجاع‬ ‫أو‬ ‫ر‬ ‫تعيي‬ ‫باستخدام‬ ‫محتوى‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫الطرق‬ text () ‫و‬ html (): $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); ‫طريقة‬ ‫باستخدام‬ ‫اإلدخال‬ ‫حقل‬ ‫قيمة‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ jQuery val (): $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); ‫الخصائص‬ ‫على‬ ‫الحصول‬ ‫طريقة‬ ‫استخدام‬ ‫يتم‬ attr () ‫قيم‬ ‫عىل‬ ‫للحصول‬ ‫الخواص‬ . ‫قيمة‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫الخاصية‬ href :‫ارتباط‬ ‫ي‬ ‫ف‬ $("button").click(function(){ alert($("#site").attr("href")); });
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 271 ‫عناصر‬ ‫إضافة‬ ‫باستخدام‬ jQuery ، .‫جديد‬ ‫محتوى‬ / ‫عناص‬ ‫إضافة‬ ‫السهل‬ ‫من‬ ‫محتوى‬ ‫أضف‬ HTML ‫جديد‬ ‫طرق‬ ‫ع‬‫أرب‬ ‫ي‬ ‫ف‬‫سننظر‬ jQuery :‫جديد‬ ‫محتوى‬ ‫إلضافة‬ ‫ستخدم‬ ُ ‫ت‬ 1 . append() - ‫المحددة‬ ‫العناص‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ ‫درج‬ُ‫ي‬ 2 . prepend () - ‫المحددة‬ ‫العناص‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫محتوى‬ ‫اج‬‫ر‬‫إد‬ 3 . after () - ‫العناص‬ ‫بعد‬ ‫المحتوى‬ ‫اج‬‫ر‬‫إلد‬ ‫المحددة‬ 4 . before() - ‫المحددة‬ ‫العناص‬ ‫قبل‬ ‫المحتوى‬ ‫اج‬‫ر‬‫إد‬ ‫الطريقة‬ append() ‫طريقة‬ ‫درج‬ ُ ‫ت‬ append () ‫عناص‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ HTML .‫المحددة‬ $("p").append("Some appended text."); ‫الطريقة‬ prepend() ‫طريقة‬ ‫درج‬ ُ ‫ت‬ jQuery prepend () ‫عناص‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ HTML .‫المحددة‬ $("p").prepend("Some prepended text."); ‫الطرائق‬ after() and before() ‫طريقة‬ ‫تقوم‬ jQuery after () ‫عناص‬ ‫بعد‬ ‫المحتوى‬ ‫اج‬‫ر‬‫بإد‬ HTML .‫المحددة‬ ‫طريقة‬ ‫درج‬ ُ ‫ت‬ jQuery before () ‫عناص‬ ‫قبل‬ ‫المحتوى‬ HTML .‫المحددة‬ $("img").after("Some text after"); $("img").before("Some text before");
jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 272 ‫عنصر‬ ‫حذف‬ ‫باستخدام‬ jQuery ‫عناص‬ ‫الة‬‫ز‬‫إ‬ ‫السهل‬ ‫من‬ ، HTML .‫الموجودة‬ ‫المحتوى‬ / ‫العناص‬ ‫الة‬‫ز‬‫إ‬ ‫ل‬ ‫أساسيتان‬ ‫طريقتان‬ ‫توجد‬ ، ‫والمحتوى‬ ‫العناص‬ ‫الة‬‫ز‬‫إل‬ jQuery: 1 . remove() - ‫له‬ ‫التابعة‬ ‫(والعناص‬ ‫المحدد‬‫العنرص‬ ‫يزيل‬ ) 2 . empty() - ‫المحدد‬ ‫العنرص‬ ‫من‬ ‫الفرعية‬ ‫العناص‬ ‫يزيل‬ ‫الطريقة‬ remove() ‫طريقة‬ ‫تزيل‬ jQuery remove () .‫الفرعية‬ ‫وعناصها‬ ‫المحددة‬ )‫(العناص‬‫العنرص‬ $("#div1").remove(); ‫الطريقة‬ empty() ‫األسلوب‬ ‫يزيل‬ ‫العناص‬ .‫المحددة‬ )‫(العناص‬ ‫للعنرص‬ ‫الفرعية‬ $("#div1").empty(); ‫التها‬‫ز‬‫إ‬ ‫اد‬‫ر‬‫الم‬ ‫العناص‬ ‫تصفية‬ ‫طريقة‬ ‫تقبل‬ remove () ‫ا‬ ً ‫أيض‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫العناص‬ ‫بتصفية‬ ‫لك‬ ‫يسمح‬ ‫مما‬ ، ‫واحدة‬ .‫التها‬‫ز‬‫إ‬ ‫اد‬‫ر‬‫الم‬ ‫ال‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫محدد‬ ‫صيغ‬ ‫من‬ ‫ا‬ً‫أي‬ jQuery. ‫عناص‬ ‫جميع‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يزيل‬ <p> ‫مع‬ class = "test": $("p").remove(".test"); ‫العناص‬ ‫كل‬‫المثال‬ ‫هذا‬ ‫يزيل‬ <p> ‫الصف‬ ‫ذات‬ "test" ‫و‬ "demo" $("p").remove(".test, .demo");
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 273 ‫السادس‬ ‫الفصل‬ ‫البيانات‬ ‫قواعد‬
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 274 ‫أو‬ ‫البيانات‬ ‫قاعدة‬ Database ‫تعريف‬ ‫يمكن‬ ‫ي‬ ‫وبالتاىل‬ ،‫المعلومات‬ ‫لتخزين‬ ‫منظمة‬ ‫طريقة‬ ‫أنها‬ ‫عىل‬ ‫البيانات‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫معلومات‬ ‫عدة‬ ‫أو‬ ‫المعلومة‬ ‫وضع‬ ‫كيفية‬‫إىل‬ ‫ر‬ ‫يشت‬ ‫البيانات‬ ‫قاعدة‬ ‫مصطلح‬ ‫فإن‬ .‫معها‬ ‫التعامل‬ ‫يسهل‬ ‫مرتبة‬ ‫صورة‬ ‫ال‬ ‫لغة‬ SQL SQL ‫يرمز‬ Structured Query Language ‫ي‬ ‫ف‬ ‫تستخدم‬ ‫لغة‬ ‫عن‬ ‫عبارة‬ ‫وه‬ ‫ب‬ ‫يعرف‬ ‫فيما‬ ‫أو‬ ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ ‫إدارة‬ ‫نظم‬ ‫ي‬ ‫ف‬ ‫المخزنة‬ ‫البيانات‬ ‫معالجة‬ RDBMS ‫أو‬ Relational Database Management System . ‫مصطلح‬ Relational ‫جداول‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫تخزين‬ ‫تستطيع‬ ‫أنك‬ ‫يعت‬ ،‫مختلفة‬ ‫البعض‬ ‫ببعضها‬ ‫مرتبطة‬ ‫الجدول‬ ‫تلك‬ ‫تكون‬ ‫بصورة‬ ،‫معينة‬ ‫أن‬ ‫القول‬ ‫نستطيع‬ ‫أو‬ ‫الجداول‬ ‫تلك‬ ‫متعلقة‬ ‫تكون‬ .‫البعض‬ ‫ببعضها‬ ‫أن‬ ‫يمكن‬ ‫تستخدم‬ SQL ‫مثل‬ ‫مختلفة‬ ‫بيانات‬ ‫قواعد‬ ‫إدارة‬ ‫أنظمة‬ ‫مع‬ MySQL ، PostgreSQL ، Oracle ، Microsoft SQL Server ، Access ‫ها‬ ‫ر‬ ‫وغت‬ ، . ‫وجمل‬ ‫أوامر‬ ‫معظم‬ SQL ‫قبل‬ ‫من‬ ‫مدعومة‬ ‫تكون‬ RDBMS ، ‫لكن‬ ‫بعض‬ ‫توجد‬ ‫االختالفا‬ ‫ت‬ ‫ال‬ ‫ر‬ ‫بي‬ RDBMS ‫عىل‬ ‫منها‬ ‫كل‬‫تخص‬ ‫جديدة‬‫أوامر‬ ‫ي‬ ‫ف‬ ‫يتضح‬ ‫وذلك‬ ‫حده‬ . ‫تثبيت‬ MySQL ‫تثبيت‬ ‫يمكن‬ MySQL ‫التشغيل‬ ‫نظام‬ ‫سنستخدم‬ ،‫التشغيل‬ ‫نظم‬ ‫مختلف‬ ‫عىل‬ ‫وندز‬ Windows ‫حزمة‬‫و‬ XAMPP ‫لك‬ ‫تتيح‬ ‫األنظمة‬ ‫مختلف‬ ‫عىل‬ ‫يعمل‬ ‫المصدر‬ ‫مفتوحة‬ ‫مجانية‬ ‫برمجية‬ ‫وهو‬ ‫مثل‬ ‫الخدمات‬ ‫من‬ ‫مجموعة‬ ‫فر‬ ‫ر‬ ‫ست‬ Apache ‫و‬ ‫البيانات‬ ‫قواعد‬ MySQL ‫ها‬ ‫ر‬ ‫وغت‬ ‫أي‬ ‫استخدام‬ ‫يمكنك‬ ‫كما‬‫و‬ ‫عىل‬ ‫نعتمد‬ ‫سوف‬ ,‫استعالماتك‬ ‫اء‬‫ر‬‫إلج‬ ‫أداة‬ ‫أي‬ ‫أو‬ ‫أخرى‬ ‫برمجية‬ phpMyAdmin ‫برمجية‬ ‫عن‬ ‫عبارة‬‫وهو‬ , ‫ح‬ ‫ر‬ ‫الش‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫بالغة‬ ‫مكتوبة‬ ‫مجانية‬ PHP ‫بقواعد‬ ‫للتحكم‬ ‫بيانات‬ MYSQL
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 275 https://www.apachefriends.org/download.html ‫بيانات‬ ‫قاعدة‬ ‫إنشاء‬ Database ‫خالل‬ ‫من‬ ‫الحالية‬ ‫البيانات‬ ‫قواعد‬ ‫لعرض‬ SQL SHOW DATABASES;
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 276 ‫إل‬ ‫باستخدا‬ ‫بيانات‬ ‫قاعدة‬ ‫نشاء‬ ‫م‬ ‫أوامر‬ SQL ‫كتابة‬‫يمكن‬ CREATE DATABASE library; ‫فتح‬ ‫يمكن‬ phpMyAdmin ‫يمكنك‬ ‫وأيضا‬ ‫الجديدة‬ ‫البيانات‬ ‫قاعدة‬ ‫ومالحظة‬ ‫موجودة‬ ‫بيانات‬ ‫قاعدة‬ ‫حذف‬ ‫او‬ ‫جديدة‬ ‫بيانات‬ ‫لقاعدة‬ ‫إضافة‬ ‫لعمل‬ ‫استخدامه‬ ‫الجداول‬ ‫إنشاء‬ Tables ‫ال‬ ‫أو‬ ‫الجدول‬ Table ‫ه‬ ‫عن‬ ‫عبارة‬ ‫صفوف‬ ‫من‬ ‫مكون‬ ‫يكل‬ rows ‫وأعمدة‬ columns ‫أو‬ ‫البيانات‬ ‫من‬ ‫ر‬ ‫معي‬ ‫نوع‬ ‫بتعريف‬ ‫يقوم‬ ‫عمود‬ ‫وكل‬ data type ‫أما‬ ، ‫وتسىم‬ ‫تخزينها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫مجموع‬ ‫عىل‬ ‫فتحتوى‬ ‫الصفوف‬ ‫سجل‬ records ‫باستخدا‬ ‫جدول‬ ‫انشاء‬ ‫يمكنك‬ ‫م‬ phpMyAdmin ‫كود‬‫استخدام‬ ‫ويمكن‬ SQL ‫ي‬ ‫التاىل‬ CREATE TABLE library.books ( id int unsigned not null auto_increment primary key, name varchar(90), auther varchar(90), pages_count int unsigned ); create table ‫ت‬ ‫ر‬ ‫نىس‬ ‫ء‬ ‫اسم‬ ‫إلحاق‬ ‫ويتم‬ ‫عليها‬ ‫نعمل‬ ‫بيانات‬ ‫قاعدة‬ ‫داخل‬ ‫جدول‬ ‫األ‬ ‫بعد‬ ‫إنشاؤه‬ ‫اد‬‫ر‬‫الم‬ ‫الجدول‬ ‫مر‬ create table . ‫ال‬ ‫عمود‬ ‫األول‬ ‫ي‬ ‫ف‬ ‫الجدول‬ ‫ب‬ ‫اسم‬ id ‫ال‬ ‫عىل‬ ‫يحتوى‬ ‫سوف‬ ‫والذي‬ ‫المعرف‬ ‫الخاص‬ ‫بكل‬ ‫كتاب‬ ‫العمود‬ ‫ذلك‬ ‫بتعريف‬ ‫قمنا‬ ‫وهنا‬ ‫بالنوع‬ integer ‫أو‬ int ‫ر‬ ‫المتغت‬ ‫أن‬ ‫أي‬ id ‫صحيحة‬ ‫قيم‬ ‫يأخذ‬ ‫سوف‬ ، attribute ‫وه‬ ‫به‬ ‫الخاصة‬ unsigned ‫رقم‬ ‫أن‬ ‫أي‬ ‫الكتاب‬ ‫وه‬ ‫أخرى‬ ‫خاصية‬ ‫أضفنا‬ ‫ثم‬ ، ‫موجب‬ ‫صحيح‬ ‫عدد‬ ‫سيكون‬ not null ‫أي‬ ‫العمود‬ ‫أن‬ id ‫وال‬ ‫الدوام‬ ‫عىل‬ ‫قيمة‬ ‫يأخذ‬ ‫سوف‬ ، ً ‫فارغا‬ ‫يكون‬ ‫أن‬ ‫يمكن‬
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 277 ‫الخاصية‬ ‫أضفنا‬ ‫ذلك‬ ‫بعد‬ auto_increment ‫بشكل‬ ‫العضوية‬ ‫رقم‬ ‫زيادة‬ ‫تعت‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫ي‬ ‫تلقان‬ ‫ال‬ ً ‫أبدا‬ ‫نحتاج‬ ‫لن‬ ‫ي‬ ‫وبالتاىل‬ ، ‫منا‬ ‫تدخل‬ ‫دون‬ ‫أن‬ ‫طالما‬ ‫العمود‬ ‫لهذا‬ ‫قيم‬ ‫ضافة‬ MySQL ‫ب‬ ‫تقوم‬ ‫سوف‬ ‫ذلك‬ ‫أن‬ ‫كما‬، ‫ت‬ ‫ان‬ ‫يجب‬ ‫العمود‬ ‫قيم‬ ‫كون‬ id ‫قيم‬ ‫فريدة‬ ‫ال‬ ‫الصفة‬ ً ‫ا‬ ‫ر‬ ‫أخت‬ ‫ثم‬ ، ‫تتكرر‬ primary key ‫لتسه‬ ‫العمود‬ ‫فهرسة‬ ‫ي‬ ‫ف‬ ‫تساعد‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫ي‬ ‫ل‬ .‫معينة‬ ‫قيمة‬ ‫عن‬ ‫البحث‬ ‫عملية‬ ‫العمود‬ ‫ي‬ ‫الثائ‬ ‫ب‬ ‫خاص‬ ‫وهو‬ ‫ا‬ ‫سم‬ ‫الكتاب‬ ‫ذلك‬ ‫سيتضمنها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫نوع‬ ‫وعرفنا‬ ‫نوع‬ ‫من‬ ‫الحقل‬ varchar ‫ب‬ ‫حد‬ ‫ا‬ ‫قص‬ ‫ل‬ ‫عدد‬ ‫المحارف‬ 90 ، ‫كل‬‫لعرض‬ ‫اكتب‬ ‫المنشأة‬ ‫الجداول‬ : show tables; ‫المر‬ ‫وهو‬ ‫بداخله‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الحقول‬ ً ‫أو‬ ‫الجدول‬ describe : ‫ي‬ ‫يىل‬ ‫كما‬ ‫ال‬ ‫داخل‬ ‫بيانات‬ ‫إضافة‬ Tables ‫الضافة‬ ‫التعليمة‬ ‫نستخدم‬ ‫البيانات‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫جدول‬ ‫اىل‬ ‫بيانات‬ INSERT ‫ي‬ ‫يىل‬ ‫كما‬ INSERT into table_name (column1, column2....) values (value1, value2...); table_name ‫إضافة‬ ‫ويكون‬ ‫فيه‬ ‫البيانات‬ ‫إضافة‬ ‫سيتم‬ ‫الذي‬ ‫الجدول‬ ‫اسم‬ ‫اال‬ ‫داخل‬ ‫البيانات‬ ‫و‬ ‫التحديد‬ ‫وجه‬ ‫عىل‬ ‫نريدها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫عمدة‬ ‫العمود‬ ‫اسم‬ ‫ي‬ ‫ف‬ ‫تتمثل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اال‬ ‫والعمود‬ ‫ول‬ ‫ا‬ ‫ل‬ ‫ثا‬ ‫إضافتها‬ ‫ي‬ ‫ينبغ‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫القيم‬ ‫ر‬ ‫تأن‬ ‫ذلك‬ ‫بعد‬ ‫ثم‬ .... ‫وهكذا‬ ‫ي‬ ‫ن‬ INSERT INTO `books`(`name`, `auther`,`pages_count`) V ALUES ('php', 'anas', '100');
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 278 ‫الجداول‬ ‫داخل‬ ‫بيانات‬ ‫عن‬ ‫االستعالم‬ ‫ال‬ ‫أو‬ ‫بيانات‬ ‫اج‬‫ر‬‫ستخ‬ ‫االستعالم‬ ‫عنها‬ ‫ن‬ ‫األ‬ ‫ستخدم‬ ‫مر‬ select ‫وتكون‬ ‫ال‬ ‫العامة‬ ‫صيغته‬ : ‫ي‬ ‫كالتاىل‬ SELECT column_names from table_name [WHERE ...conditi ons]; column_names ‫اسم‬ ‫اء‬ ‫الحق‬ ‫و‬ ‫اج‬‫ر‬‫استخ‬ ‫اد‬‫ر‬‫الم‬ ‫ل‬ ‫ها‬ ‫الجدول‬ ‫من‬ ‫وذلك‬ table_name [ ‫جملة‬ ‫أما‬ ، WHERE ...conditions ‫ف‬ ] ‫حها‬ ‫ر‬ ‫نش‬ ‫سوف‬ ً ‫الحقا‬ SELECT name, auther FROM books; ‫الحظ‬ ‫ا‬ ‫لفاصلة‬ colon ‫وعمود‬ ‫عمود‬ ‫اسم‬ ‫كل‬ ‫ر‬ ‫بي‬ ‫و‬ ‫جملة‬ ‫آخر‬ ‫ي‬ ‫ف‬ ‫االستعال‬ ‫م‬ ‫نضع‬ ; ‫األ‬ ‫كل‬‫تعت‬ ‫ي‬ ‫ر‬ ‫والت‬ * ‫ال‬ ‫استخدام‬ ‫أيضا‬ ‫وتستطيع‬ ‫الحقول‬ ‫كل‬‫لجلب‬ ‫عمدة‬ ‫ك‬ : ‫ي‬ ‫التاىل‬ SELECT * FROM books ‫االستعال‬ ‫م‬ ‫شروط‬ ‫وضع‬ ‫مع‬ ‫البيانات‬ ‫عن‬ ‫جملة‬ ‫ي‬ ‫ف‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫وضع‬ select ‫بجملة‬ where ‫اد‬‫ر‬‫الم‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫بعدها‬ ‫ي‬ ‫ر‬ ‫يأن‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫عىل‬ ‫وضعه‬ ‫االستعال‬ ‫م‬ . SELECT column_names from table_name [WHERE ...condi tions]; : ‫مثال‬ - ‫صفحاتها‬ ‫عدد‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ 320 SELECT name, auther FROM books WHERE pages_count = 32 0;
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 279 - ‫عدد‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫أكبر‬ ‫صفحاتها‬ ‫من‬ ً‫م‬‫تما‬ 160 SELECT name, auther FROM books WHERE pages_count > 16 0; - ‫أكبر‬ ‫صفحاتها‬ ‫عدد‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫يساوي‬ ‫او‬ 200 SELECT name, auther FROM books WHERE pages_count >= 2 00; - ‫هو‬ ‫مؤلفها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ Kahlil Gibran SELECT * FROM books WHERE auther = 'Kahlil Gibran'; - ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫هو‬ ‫مؤلفها‬ ‫ليس‬ Kahlil Gibran SELECT * FROM books WHERE auther != 'Kahlil Gibran'; - ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫بالكلمة‬ ‫يبدأ‬ ‫مؤلفها‬ Kahlil SELECT * FROM books WHERE auther LIKE 'Kahlil%'; ‫العمليات‬ ‫المنطقية‬ ‫استخدام‬ ‫العلميا‬ ‫ت‬ ‫أو‬ ‫المنطقية‬ Logical Operators ‫أمر‬ ‫جملة‬ ‫داخل‬ select ، ‫والمعلما‬ ‫ت‬ :‫الواحدة‬ ‫الجملة‬ ‫داخل‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫تطبيق‬ ‫من‬ ‫مكننا‬ ُ ‫ت‬ ‫المنطقية‬ - 1 and - 2 or - 3 not
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 280 - ‫هو‬ ‫مؤلفها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ Kahlil Gibran ‫من‬ ‫اكبر‬ ‫صفحاته‬ ‫عدد‬ ‫و‬ 200 SELECT * FROM books WHERE auther = 'Kahlil Gibran' AN D pages_count > 200; - ‫هو‬ ‫مؤلفها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ Kahlil Gibran ‫من‬ ‫اكبر‬ ‫صفحاته‬ ‫عدد‬ ‫أو‬ 200 SELECT * FROM books WHERE auther = 'Kahlil Gibran' OR pages_count > 200; ‫العم‬ ‫أما‬ ‫لي‬ ‫ة‬ not ‫واال‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫لنق‬ ‫فتستخدم‬ ‫بنقيضه‬ ‫تيان‬ SELECT * FROM books WHERE auther NOT LIKE 'Kahlil%' A ND pages_count > 200; - ‫من‬ ‫واحد‬ ‫ضمن‬ ‫اسمها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ php ‫او‬ MySQL SELECT * FROM books WHERE name IN('MySQL ','php') ‫استخدام‬ ‫يمكننا‬ ‫كما‬ not ‫مع‬ In ‫لالستعالم‬ ‫األ‬ ‫بداخل‬ ‫ما‬ ‫نقيض‬ ‫عن‬ ‫قواس‬ SELECT * FROM books WHERE name NOT IN('MySQL ','php') ‫ال‬ ‫أما‬ ‫عملي‬ ‫ة‬ between ‫لتحديد‬ ‫فتستخدم‬ ‫مجال‬ ‫القيم‬ ‫من‬ ‫الصحيحة‬ SELECT * FROM books WHERE pages_count BETWEEN 100 AND 300; ‫استخدام‬ ‫أيضا‬ ‫تستطيع‬ ‫أنك‬ ‫كما‬ not ‫مع‬ between SELECT * FROM books WHERE pages_count NOT BETWEEN 100 AND 300;
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 281 ‫جملة‬ order by ‫أردنا‬ ‫اذا‬ ‫ترتيب‬ ‫الصفحات‬ ‫عدد‬ ‫حسب‬ ‫الكتب‬ ‫ي‬ ‫تنازىل‬ ‫أو‬ ‫تصاعدي‬ ‫بشكل‬ ‫فيجب‬ ‫استخدام‬ ‫علينا‬ order by . SELECT * FROM books ORDER BY pages_count; ‫ال‬ ‫تيب‬ ‫ر‬ ‫ت‬ ً ‫اضيا‬ ‫ر‬ ‫افت‬ ‫أو‬ ‫نصية‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫تشمل‬ ‫الحقول‬ ‫تلك‬ ‫كانت‬‫سواء‬ ‫تصاعدي‬ ( Strings (‫أو‬ ‫صحيحة‬ ‫عددية‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أو‬ ) Integers ‫حالة‬ ‫ي‬ ‫فق‬ ، ) ‫ا‬ ‫ال‬ ‫رقام‬ ‫سيكون‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫الحروف‬ ‫حالة‬ ‫وف‬ ، ‫ر‬ ‫أكت‬ ‫إىل‬ ‫أقل‬ ‫من‬ ‫عىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫سيعتمد‬ ‫فع‬ ، ‫نفسها‬ ‫اللغة‬ ‫حروف‬ ‫داخل‬ ‫ي‬ ‫ر‬ ‫تيت‬ ‫ر‬ ‫الت‬ ‫موقعها‬ ‫اللغة‬ ‫حروف‬ ‫المثال‬ ‫سبيل‬ ‫ىل‬ ‫من‬ ‫ستبدأ‬ ‫ية‬ ‫ر‬ ‫النجلت‬ a ‫ثم‬ b ‫ثم‬ c ‫ب‬ ً‫انتهاء‬ ....... z . ‫ال‬ ‫عمل‬ ‫يمكن‬ ‫األ‬ ‫أي‬ ‫ي‬ ‫تنازىل‬ ‫تيب‬ ‫ر‬ ‫ت‬ ‫األ‬ ‫ثم‬ ‫ر‬ ‫كت‬ ‫قل‬ : ‫ي‬ ‫كالتاىل‬ SELECT * FROM books ORDER BY pages_count DESC ‫الخيار‬ ‫بوضع‬ ‫قم‬ ‫الجملة‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫مالحظة‬ : ‫الوضع‬‫هو‬ ‫التصاعدي‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫لجملة‬ ‫بالنسبة‬ order by ‫بوضع‬ ‫وذلك‬ ‫الجملة‬ ‫داخل‬ ‫أيضا‬ ‫تستخدمه‬ ‫أن‬ ‫ويمكنك‬ ASC : ‫ي‬ ‫التاىل‬ ‫بالشكل‬ SELECT * FROM books ORDER BY pages_count ASC; ‫كيف‬ ‫يمكن‬ ‫عدد‬ ‫تحديد‬ ‫السجالت‬ ‫لجملة‬ ‫نتيجة‬ ‫تظهر‬ ‫ي‬ ‫ر‬ ‫الت‬ select , ‫الجملة‬ ‫جملة‬ ‫ي‬ ‫ه‬ ‫ذلك‬ ‫فعل‬ ‫من‬ ‫تمكننا‬ ‫ي‬ ‫ر‬ ‫الت‬ limit ‫تريد‬ ‫الذي‬ ‫الرقم‬ ‫ة‬ ‫ر‬ ‫مبارس‬ ‫ويتبعها‬ ‫النتائج‬ ‫عدد‬ ‫فيه‬ ‫تحديد‬ . SELECT * FROM books ORDER BY pages_count limit 8;
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 282 ‫جملة‬ Update Update ‫عىل‬ ‫العامة‬ ‫الصيغة‬ : ‫ي‬ ‫كالتاىل‬ UPDATE table_name SET column_name1 = value1, column_n ame2 = value2, column_name3 = value3 ... [WHERE condi tions]; ‫حيث‬ column_name1 ‫و‬ column_name2 ‫و‬ column_name3 ‫أسماء‬ ‫ي‬ ‫ه‬ ‫األ‬ ‫البيانات‬ ‫تحديث‬ ‫اد‬‫ر‬‫الم‬ ‫عمدة‬ ‫فيها‬ ‫أما‬ ، value1 ‫و‬ value2 ‫و‬ value3 ‫ي‬ ‫ه‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الجديدة‬ ‫القيم‬ ‫تستبدل‬ ، ‫القديمة‬ ‫القيم‬ ً ‫ا‬ ‫ر‬ ‫وأخت‬ where ‫وط‬ ‫ر‬ ‫الش‬ ‫لوضع‬ ‫تمريرها‬ ‫اد‬‫ر‬‫الم‬ ‫بشكل‬ ‫الجدول‬ ‫بيانات‬ ‫نفسد‬ ‫ال‬ ‫ي‬ ‫ك‬‫بعناية‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫وضع‬ ‫يجب‬ ‫حيث‬, . ‫ي‬ ‫عشوان‬ ‫المعرف‬ ‫ذو‬ ‫الكتاب‬ ‫صفحات‬ ‫عدد‬ ‫بتعديل‬ ‫لنقوم‬ ً ‫مثال‬ 120 UPDATE books SET pages_count = 400 WHERE 120;
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 283 ‫االجماليات‬ ‫دوال‬ Aggregate ‫توفر‬ MySQL ‫الجدول‬ ‫بيانات‬ ‫تلخيص‬ ‫من‬ ‫مكننا‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫الدوال‬ ‫من‬ ‫مجموعة‬ ‫بدون‬ ‫االستعال‬ ‫م‬ ً ‫مثال‬ ‫تستطيع‬ ‫بمعت‬ ، ‫حده‬ ‫عىل‬ ‫حقل‬ ‫كل‬‫عن‬ ‫االستعال‬ ‫م‬ ‫ر‬ ‫أكت‬ ‫عن‬ ‫عمود‬ ‫داخل‬ ‫قيمة‬ ‫أقل‬ ‫و‬ ‫قيمة‬ . ‫عدد‬ ‫دوال‬ ‫االجماليات‬ : ‫ي‬ ‫ه‬ ✓ MIN ✓ MAX ✓ SUM ✓ AVG ✓ COUNT ‫ي‬ ‫تعط‬ )( ‫الدالة‬ min )( ‫والدالة‬ ، ‫ر‬ ‫معي‬ ‫عمود‬ ‫داخل‬ ‫قيمة‬ ‫أقل‬ max ‫ر‬ ‫أكت‬ ‫بإيجاد‬ ‫تقوم‬ )( ‫الدالة‬ ‫أما‬ ، ‫قيمة‬ sum ‫بجمع‬ ‫فتقوم‬ ‫ال‬ )( ‫والدالة‬ ‫قيم‬ avg ‫بإيجاد‬ ‫تقوم‬ ‫ال‬ ‫متوسط‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫و‬ )( ‫الدالة‬ count ‫تقوم‬ ‫ب‬ ‫عد‬ ‫ال‬ ‫قيم‬ ‫الكتب‬ ‫جدول‬ ‫ضمن‬ ‫صفحات‬ ‫عدد‬ ‫اقل‬‫هو‬ ‫ما‬ SELECT MIN(pages_count) FROM `books` ‫ه‬ ‫ما‬ ‫و‬ ‫الكتب‬ ‫جدول‬ ‫ضمن‬ ‫صفحات‬ ‫عدد‬ ‫ر‬ ‫أكت‬ SELECT MAX(pages_count) FROM `books` ‫الصفحات‬ ‫لعدد‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫المتوسط‬‫هو‬ ‫ما‬ SELECT AVG(pages_count) FROM `books`
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 284 ‫ي‬ ‫الكىل‬ ‫الكتب‬ ‫عدد‬ ‫هو‬ ‫ما‬ SELECT COUNT(id) FROM `books` ‫من‬ ‫ر‬ ‫اكت‬ ‫صفحاتها‬ ‫عدد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الكتب‬ ‫عدد‬ ‫هو‬ ‫ما‬ 200 SELECT COUNT(id) FROM `books` WHERE pages_count > 200 :‫الحسابية‬ ‫العمليات‬ ‫استخدام‬ o . ‫القسمة‬ ‫عملية‬ ‫إىل‬ ‫ر‬ ‫تشت‬ / ‫العلمة‬ o . ‫ب‬‫الرص‬ ‫عملية‬ ‫إىل‬ ‫ر‬ ‫تشت‬ * ‫العلمة‬ o ‫العلمة‬ - . ‫الطرح‬ ‫عملية‬ ‫إىل‬ ‫ر‬ ‫تشت‬ o ‫العلمة‬ + ‫ر‬ ‫تشت‬ ‫عملية‬ ‫إىل‬ ‫الجمع‬ . SELECT COUNT(id)*2 FROM `books` ‫استخدام‬ ‫يمكن‬ as :‫للعمود‬ ‫بديل‬ ‫اسم‬ ‫العطاء‬ SELECT COUNT(id)*2 AS new_name FROM `books`
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 285 ‫جملة‬ group by )( ‫الدالة‬ count ‫مع‬ ‫استخدمت‬ ‫حال‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫اكت‬ ‫معلومات‬ ‫و‬ ‫ات‬ ‫ر‬ ‫مت‬ ‫تعطينا‬ ‫سوف‬ group by ‫جملة‬ group by ‫بعمل‬ ‫تقوم‬ ‫تجميع‬ group ‫متشابهة‬ ‫لقيم‬ ‫ي‬ ‫ف‬ ، ‫الجدول‬ ‫المؤلف‬ ‫اسم‬ ‫حسب‬ ‫ذات‬ ‫الكتب‬ ‫تجميع‬ ‫مثال‬ select auther , COUNT(id) from books group by auther ; ‫جملة‬ ‫استخدام‬ group by ‫جملة‬ ‫مع‬ order by select auther , COUNT(id) AS pages from books GROUP B Y auther ORDER BY 'pages'; ‫جملة‬ ‫استخدام‬ group by ‫جملة‬ ‫مع‬ order by ‫جملة‬ ‫مع‬ having select auther , COUNT(id) AS pages from books GROUP BY auther HAVING pages > 20 ORDER BY 'pages' ;
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 286 ‫الحسابية‬ ‫الدوال‬ Mathematical ‫توفر‬ MySQL ‫مرفوع‬ ‫رقم‬ ‫كحساب‬، ‫الحسابية‬ ‫الدوال‬ ‫من‬ ‫مجموعة‬ ‫لألس‬ ‫أو‬ ، ، ‫ات‬ً‫العملي‬ ‫تلك‬ ‫من‬ ‫إلخ‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬‫الجذر‬ ‫كحساب‬ mod(x,y) ‫ي‬ ‫تعط‬ . ‫القسمة‬ ‫ناتج‬ ‫ي‬ ‫ر‬ ‫باف‬ ABS(x) ‫ي‬ ‫تعط‬ ‫قيمة‬ ‫بتمرير‬ ‫قمت‬ ‫لو‬ ‫بمعت‬ ، ‫ما‬ ‫لعدد‬ ‫المطلقة‬ ‫القيمة‬ ‫ر‬ ‫للمتغت‬ x ‫لهذا‬ ‫المطلقة‬ ‫القيمة‬ ‫بحساب‬ ‫الدالة‬ ‫ستقوم‬ ‫سالبة‬ ‫قيمة‬ ‫وكانت‬ ‫القيمة‬ ‫كذلك‬، ‫موجبة‬ ‫قيمة‬ ‫إىل‬ ‫السالبة‬ ‫القيمة‬ ‫تلك‬ ‫تحول‬ ‫طريق‬ ‫عن‬ ‫ر‬ ‫المتغت‬ .‫موجبة‬ ‫قيمة‬ ‫ي‬ ‫ه‬ ‫كما‬‫تظل‬ ‫الموجبة‬ select abs(89); select abs( - 35 ); )( power ‫حساب‬ ‫تريد‬ ً‫مثل‬ ‫أي‬ ‫آخر‬ ‫رقم‬ ُ ‫لس‬ ‫مرفوع‬ ‫رقم‬ ‫بحساب‬ x ‫أس‬ y ، ‫ر‬ ‫المتغت‬ ‫ٍمن‬ ‫كل‬‫مكان‬ ‫وبالطبع‬ x ‫و‬ y : ‫مثال‬ : ‫التالية‬ ‫بالمثلة‬ ‫ذلك‬ ‫ونوضح‬ ، ‫أرقام‬ ‫حساب‬ ‫تريد‬ 2 ‫أس‬ 3 ‫ي‬ ‫ه‬ ‫العملية‬ ‫نتيجة‬ ‫أن‬ ‫المعلوم‬ ‫من‬ ‫ي‬ ‫ر‬ ‫والت‬ 8 : select power(5,4); )( SQRT ‫توجد‬ ‫ر‬ ‫للمتغت‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬‫الجذر‬ x ‫للرقم‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬‫الجذر‬ ‫تريد‬ ً‫فمثل‬ ، 25 : select sqrt(25);
‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 287 )( Round ‫ر‬ ‫المتغت‬ ‫بتقريب‬ x ‫رقم‬ ‫أقرب‬ ‫إىل‬ ‫ية‬ ‫ر‬ ‫عش‬‫كسور‬‫عىل‬ ‫يحتوى‬ ‫والذي‬ . ‫صحيح‬ )( Floor ‫أ‬ ‫تعيد‬ ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫تساوى‬ ‫أو‬ ‫من‬ ‫أقل‬ ‫تكون‬ ‫صحيحة‬ ‫قيمة‬ ‫ر‬ ‫أكت‬ x . select floor(99.6); 99 )( ceiling ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫تساوى‬ ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫تكون‬ ‫صحيحة‬ ‫قيمة‬ ‫أقل‬ ‫جاع‬ ‫ر‬ ‫باست‬ x . select ceiling(99.6); 100
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 288 ‫الفصل‬ ‫السابع‬ PHP ‫لغة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 289 ‫مقدمة‬ ‫تصميم‬ ‫تم‬ PHP ‫ويب‬ ‫محتوى‬ ‫إلنشاء‬ ‫األصل‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫ديناميك‬ ‫وال‬ ، ‫ت‬ ‫ال‬‫ز‬ ‫تستخدم‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫المجال‬ . ‫تعمل‬ PHP ،‫الرئيسية‬ ‫التشغيل‬ ‫أنظمة‬ ‫جميع‬ ‫عىل‬ Linux ‫و‬ Windows ‫و‬ macOS . ‫خوادم‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ،‫المعروفة‬ ‫الويب‬ ‫خوادم‬ ‫جميع‬ ‫مع‬ ‫استخدامه‬ ‫يمكن‬ Apache ‫و‬ Nginx ‫المثال‬ ‫سبيل‬ ‫عىل‬ ، . ‫تقترص‬ ‫ال‬ PHP ‫اج‬‫ر‬‫إخ‬ ‫عىل‬ HTML ‫فقط‬ ‫أخرى‬ ‫نصية‬ ‫ملفات‬ ‫أو‬ - ‫أي‬ ‫إنشاء‬ ‫يمكن‬ ‫يحتوي‬ .‫مستند‬ ‫تنسيق‬ PHP ‫ملفات‬ ‫لتوليد‬ ‫دعم‬ ‫عىل‬ PDF ‫وصور‬ GIF ‫و‬ JPEG ‫و‬ PNG . ‫الو‬ ‫صفحات‬ ‫إنشاء‬ ‫ي‬ ‫الديناميك‬ ‫المحتوى‬ ‫ذات‬ ‫يب‬ ‫المحتو‬ ‫أي‬ ‫ى‬ ‫ي‬ ‫ف‬ ‫المخزن‬ ‫قاعدة‬ .‫للغاية‬ ً ‫بسيطا‬ ‫ا‬ً ‫أمر‬ ‫البيانات‬ ‫تدعم‬ ‫حيث‬ PHP ‫جميع‬ ‫البيانات‬ ‫قواعد‬ ‫الرئيسية‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫ذلك‬ MySQL ‫و‬ PostgreSQL ‫و‬ Oracle ‫و‬ MS-SQL ‫و‬ ‫ها‬ ‫ر‬ ‫غت‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 290 ‫مع‬ ‫ابدأ‬ PHP PHP ‫ا‬ ‫عىل‬ ‫تعمل‬ ‫التشغيل‬ ‫أنظمة‬ ‫من‬ ‫لعديد‬ ‫لمعرفة‬ ‫التوثيق‬ ‫اىل‬ ‫الرجوع‬ ‫يمكن‬ ‫و‬ ‫جهازك‬ ‫عىل‬ ‫تنصيب‬ ‫كيفية‬ ‫التشغيل‬ ‫نظام‬ ‫عىل‬ ‫الدبلوم‬ ‫هذه‬ ‫خالل‬ ‫بالعمل‬ ‫سنقوم‬ Windows . ‫مع‬ ‫للعمل‬ ‫المستخدمة‬ ‫األدوات‬ ‫ر‬ ‫اكت‬ ‫من‬ PHP ‫هو‬ XAMPP ‫لك‬ ‫تتيح‬ ‫األنظمة‬ ‫مختلف‬ ‫عىل‬ ‫يعمل‬ ‫المصدر‬ ‫مفتوحة‬ ‫مجانية‬ ‫برمجية‬ ‫وهو‬ ‫ا‬ ‫من‬ ‫مجموعة‬ ‫مثل‬ ‫لخدمات‬ ‫فر‬ ‫ر‬ ‫ست‬ Apache ‫و‬ ‫البيانات‬ ‫قواعد‬ MySQL ‫ها‬ ‫ر‬ ‫وغت‬ https://www.apachefriends.org/download.html ‫في‬ ‫كود‬ ‫اول‬ PHP ‫صفحات‬ PHP ‫صفحات‬ ‫ي‬ ‫ه‬ HTML ‫أوامر‬ ‫عىل‬ ‫تحتوي‬ PHP ‫خادم‬ ‫يعالج‬ .‫فيها‬ ‫أوام‬ ‫الويب‬ ‫ر‬ PHP .‫المتصفح‬ ‫إىل‬ ‫مخرجاتها‬ ‫ويرسل‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 291 hello_world.php <!DOCTYPE html> <html> <head> <title>Midmar</title> </head> <body> <?php echo "Hello, world!"; ?> </body> </html> ‫المسار‬ ‫ي‬ ‫ف‬ ‫السابق‬ ‫الملف‬ ‫بتخزين‬ ‫قم‬ C:xampphtdocstesthello_world.php ‫اىل‬ ‫الذهاب‬‫و‬ ‫المتصفح‬ ‫بفتح‬ ‫قم‬ localhost/test/hello_world.php ‫ي‬ ‫ف‬ ‫لك‬ ‫كود‬‫أول‬ ‫هذا‬ ‫وك‬ ‫ر‬ ‫مت‬ php ‫التكوين‬ ‫معلومات‬ ‫صفحة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 292 ‫ملف‬ ‫انشأ‬ php ‫فقط‬ ‫ي‬ ‫التاىل‬ ‫الكود‬ ‫فيه‬ ‫وضع‬ <?php phpinfo();?> ‫صفحة‬ ‫ر‬ ‫تنىس‬ HTML ‫حول‬ ‫بالمعلومات‬ ‫مليئة‬ ‫نسخة‬ PHP ‫وتهيئته‬ .‫الحالية‬ ‫اللغة‬ ‫أساسيات‬ ‫لحالة‬ ‫الحساسية‬ ‫األحرف‬ ‫والكلمات‬ ‫كيبات‬ ‫ر‬ ‫الت‬ ‫وكذلك‬ ،‫المستخدم‬ ‫قبل‬ ‫من‬ ‫المعرفة‬ ‫والدوال‬ ‫الفئات‬ ‫أسماء‬ :‫مثل‬ ‫المضمنة‬ ‫الرئيسية‬ class ،while ،echo .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ر‬ ‫غت‬ ،‫إلخ‬ ، ‫أن‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫فإن‬ ،‫أخرى‬ ‫ناحية‬ ‫من‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 293 $user ‫و‬ $uSer ‫و‬ $USER .‫مختلفة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫ثالثة‬ ‫ي‬ ‫ه‬ ‫الجمل‬ Statements ‫كود‬‫من‬ ‫مجموعة‬ ‫عن‬ ‫عبارة‬ ‫الجملة‬ PHP ‫يقوم‬ ‫بأمر‬ ‫مثل‬ ‫بسيطة‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ .‫ما‬ ‫حلقة‬ :‫مثل‬ ‫معقدة‬ ‫أو‬ ‫ر‬ ‫متغت‬ ‫تخصيص‬ ‫ارية‬‫ر‬‫تك‬ . ‫تستخدم‬ PHP ‫الجمل‬ ‫تحتاج‬ ‫ال‬ .‫البسيطة‬ ‫الجمل‬ ‫ر‬ ‫بي‬ ‫للفصل‬ ‫المنقوطة‬ ‫الفاصلة‬ ‫ا‬ ‫األقواس‬ ‫تستخدم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫كبة‬ ‫المر‬ ‫مثل‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫كتلة‬ ‫ر‬ ‫لتميت‬ ‫لمعكوفة‬ ‫ط‬ ‫ر‬ ‫رس‬ .‫إغالق‬ ‫قوس‬ ‫بعد‬ ‫منقوطة‬ ‫فاصلة‬ ‫إىل‬ ،‫طية‬ ‫ر‬ ‫رس‬ ‫حلقة‬‫أو‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 294 ‫األسطر‬ ‫وفواصل‬ ‫البيضاء‬ ‫المسافة‬ ‫ي‬ ‫ف‬ ‫البيضاء‬ ‫المسافات‬ ‫تهم‬ ‫ال‬ ،‫عام‬ ‫بشكل‬ ‫كود‬ PHP ‫عدد‬ ‫أي‬ ‫ر‬ ‫عت‬ ‫جمل‬ ‫ر‬ ‫نش‬ ‫يمكنك‬ . ‫م‬ ‫الجمل‬ ‫من‬ ‫مجموعة‬ ‫تجميع‬ ‫أو‬ ،‫األسطر‬ ‫من‬ ‫ع‬ .‫واحد‬ ‫سطر‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ‫التعليقات‬ ،‫بك‬ ‫الخاصة‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫أوا‬‫ر‬‫ق‬ ‫الذين‬ ‫لألشخاص‬ ‫معلومات‬ ‫التعليقات‬ ‫ي‬ ‫تعط‬ ‫بواسطة‬‫تجاهلها‬ ‫يتم‬ ‫ولكن‬ PHP ‫الشخص‬ ‫أنك‬ ‫تعتقد‬ ‫كنت‬‫إذا‬ ‫ر‬ ‫حت‬ .‫التنفيذ‬ ‫وقت‬ ‫ي‬ ‫ف‬ ‫عىل‬ ‫كودك‬‫أ‬‫ر‬‫سيق‬ ‫الذي‬ ‫الوحيد‬ ‫فمن‬ ،‫اإلطالق‬ ‫كودك‬ ‫ي‬ ‫ف‬ ‫التعليقات‬ ‫ر‬ ‫تضمي‬ ‫الجيد‬ , ‫يب‬ ‫أن‬ ‫يمكن‬ ‫لو‬ ‫كما‬‫بسهولة‬ ‫شهور‬ ‫منذ‬ ‫كتبته‬‫الذي‬ ‫الكود‬‫دو‬ .‫غريب‬ ‫شخص‬ ‫كتبه‬ ‫توفر‬ PHP ‫اللغات‬ ‫من‬ ‫مستعارة‬ ‫وكلها‬ ، ‫التعليقات‬ ‫ر‬ ‫لتضمي‬ ‫طرق‬ ‫عدة‬ .Unix shell ‫و‬ C++ ‫و‬ C ++ ‫تعليقات‬ C ‫تصادف‬ ‫عندما‬ PHP // ‫ر‬ ‫مائلتي‬ ‫ر‬ ‫يحتي‬ ‫ر‬ ‫رس‬ ‫من‬ ً ‫بدءا‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫فإن‬ ،‫كود‬ ‫ال‬ ‫داخل‬ ‫طتان‬ ‫ر‬ ‫الش‬ . ً ‫ا‬ ً ‫تعليق‬ ‫ر‬ ‫يعتت‬ ، ‫السطر‬ ‫نهاية‬ ‫إىل‬ ‫المائلة‬ //////////////////////// // this is C++ comment //////////////////////// $x = 10; if($x > 5) { }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 295 ‫تعليقات‬ C ++ ‫بنمط‬ ‫التعليقات‬ ‫أن‬ ‫ر‬ ‫حي‬ ‫ي‬ ‫ف‬ C ‫مالحظات‬ ‫لعمل‬ ‫مفيدة‬ , ‫تدعم‬ PHP ‫تعليقات‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫لغة‬ ‫من‬ ‫كيبها‬ ‫تر‬ ‫ي‬ ‫ر‬ ‫يأن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الكتلة‬ C ‫تصادف‬ ‫عندما‬ . PHP ‫متبوعة‬ ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ /* ‫النجمة‬ ‫بعالمة‬ ‫متبوعة‬ ‫النجمة‬ ‫عالمة‬ ‫يصادف‬ ‫ر‬ ‫حت‬ ،‫ذلك‬ ‫بعد‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫فإن‬ ، ‫النوع‬ ‫هذا‬ . ً ‫ا‬ ً ‫تعليق‬ ‫ر‬ ‫يعتت‬ ، */‫مائلة‬ ‫طة‬ ‫ر‬ ‫بش‬ ‫التعليقات‬ ‫من‬ ‫سطور‬ ‫إىل‬ ‫يمتد‬ ‫أن‬ ‫يمكن‬ .‫متعددة‬ :‫تريد‬ ‫كما‬‫للتعليقات‬ ‫بادئة‬ ‫مسافة‬ ‫وضع‬ ‫يمكنك‬ /* this is multi line comments this is C comment */ $x = 10; $y = 'hello'; ‫النمط‬ ‫عىل‬ ‫التعليقات‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ C .‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫أقسام‬ ‫لتعطيل‬ ‫مفيدة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 296 ‫ال‬ ‫معرفات‬ ‫ي‬ ‫ف‬ .‫اسم‬ ‫مجرد‬ ‫هو‬ ‫المعرف‬ PHP ‫والدوال‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫لتسمية‬ ‫المعرفات‬ ‫تخدم‬ ُ ‫س‬ ُ ‫ت‬ ، ‫حرف‬ ّ ‫ف‬ّ ‫للمعر‬ ‫األول‬ ‫الحرف‬ ‫يكون‬ ‫أن‬ ‫يجب‬ .‫والفئات‬ ‫والثوابت‬ ASCII ‫ة‬ ‫ر‬ ‫كبت‬‫أحرف‬ ،‫األول‬ ‫الحرف‬ ‫بعد‬ ‫السفلية‬ ‫طة‬ ‫ر‬ ‫الش‬ ‫حرف‬‫أو‬ ،‫ة‬ ‫ر‬ ‫صغت‬‫أو‬ ‫نستخدم‬ ‫ان‬ ‫يمكن‬ ‫األحرف‬ ‫من‬ ‫واألرقام‬ 2 ‫إىل‬ 9 . ‫المتغيرات‬ ‫أسماء‬ ً ‫ا‬ ً‫دائم‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫تبدأ‬ ‫فيما‬ .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫وتكون‬ $ ‫الدوالر‬ ‫بعالمة‬ :‫الصالحة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫بعض‬ ‫ي‬ ‫يىل‬ $user $user_name $A $a $_a ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ ‫الخاطئة‬ : $user name $8user ‫الدوال‬ ‫أسماء‬ ‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ليست‬ ‫الدوال‬ ‫أسماء‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 297 ‫الفئات‬ ‫أسماء‬ CLASS ‫ات‬ ّ ‫ف‬ّ ‫لمعر‬ ‫القياسية‬ ‫القواعد‬ ‫الفئات‬ ‫أسماء‬ ‫تتبع‬ PHP ‫لحالة‬ ‫حساسة‬ ‫ليست‬ ‫أنها‬ ‫كما‬ .‫األحرف‬ Constants ‫الثوابت‬ ، ‫العددية‬ ‫القيم‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ ‫وسلسلة‬ ،‫ي‬ ‫ر‬ ‫وعش‬، ‫صحيح‬ ‫وعدد‬ ،‫منطقية‬ ، ‫ر‬ ‫التعيي‬ ‫بمجرد‬ .‫ثوابت‬ ‫والمصفوفات‬ ‫تعيينها‬ ‫ويتم‬ .‫الثابت‬ ‫قيمة‬ ‫ر‬ ‫تتغت‬ ‫أن‬ ‫يمكن‬ ‫ال‬ ‫دالة‬ ‫باستخدام‬ define() define('SITENAME', "MIDMAR"); echo SITENAME; ‫الرئيسية‬ ‫الكلمات‬ ‫الرئيسية‬ ‫الكلمة‬ keyword ‫المحجوزة‬ ‫الكلمة‬ ‫أو‬ reserved word ‫كلمة‬ ‫ي‬ ‫ه‬ ‫األساسية‬ ‫لدوالها‬ ‫اللغة‬ ‫تخصصها‬ - ‫اسم‬ ‫نفس‬ ‫ثابت‬ ‫أو‬ ‫فئة‬ ‫أو‬ ‫دالة‬ ‫إعطاء‬ ‫يمكنك‬ ‫ال‬ ‫الجدول‬ ‫يشد‬ .‫رئيسية‬ ‫كلمة‬ ‫ي‬ ‫التاىل‬ ‫ي‬ ‫ف‬ ‫الرئيسية‬ ‫الكلمات‬ PHP ‫بحالة‬ ‫تتأثر‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫والت‬ ، .‫األحرف‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 298 __CLASS__ __DIR__ __FILE__ __FUNCTION__ __LINE__ __METHOD__ __NAMESPACE__ __TRAIT__ __halt_compiler() abstract And array() as break Callable Case Catch Class Clone Const Continue Declare Default die() do Echo Else elseif empty() enddeclare endfor endforeach endif endswitch endwhile eval() exit() extends final finally for foreach function global goto if implements include insteadof interface isset() list() namespace new Or Print private protected public require require_once return static Switch Throw Trait Try unset() Use Var While Xor Yield yield from include_once instanceof
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 299 ‫البيانات‬ ‫أنواع‬ ‫توفر‬ PHP ‫أنواع‬ ‫أربعة‬ .‫البيانات‬ ‫أنواع‬ ‫أو‬ ‫القيم‬ ‫من‬ ‫أنواع‬ ‫ثمانية‬ ‫بسيطة‬ ( ‫قيمة‬ ‫ذات‬ ‫واحدة‬ ) ‫من‬ ‫نوعان‬ ‫هناك‬ .‫والمنطقية‬ ،‫والسالسل‬ ،‫ية‬ ‫ر‬ ‫عش‬ ‫وأرقام‬ ،‫الصحيحة‬ ‫األعداد‬ : :‫خاصان‬ ‫نوعان‬ ‫هما‬ ‫المتبقيان‬ ‫النوعان‬ .‫والكائنات‬ ‫المصفوفات‬ :‫كبة‬ ‫المر‬ ‫أنواع‬ resource ‫و‬ NULL . ‫اال‬ ‫عد‬ ‫ا‬ ‫د‬ ‫ال‬ ‫صحيح‬ ‫ة‬ ‫مثل‬ ‫الصحيحة‬ ‫األعداد‬ 1 ‫و‬ 5 ‫و‬ 22 . ‫يمكن‬ ‫الدالة‬ ‫استخدم‬ is_int() ‫االسم‬‫أو‬ ‫المستعار‬ is_integer() ‫بها‬ ‫الخاص‬ ً ‫ا‬ ً ‫عدد‬ ‫القيمة‬ ‫إذاكانت‬ ‫ما‬ ‫الختبار‬ : ً ‫ا‬ ً ‫صحيح‬ if (is_int($x)) { // $x is an integer } ‫العشرية‬ ‫األرقام‬ "‫"الحقيقية‬ ‫باألرقام‬ ً ‫ا‬ً‫غالب‬ ‫إليها‬ ‫يشار‬ ‫العائمة‬ ‫الفاصلة‬ ‫أرقام‬ ‫تمثل‬ ‫مثل‬ 3.14 ‫و‬ 9.2 ‫يمكن‬ ‫الدالة‬ ‫استخدم‬ is_float() ‫المستعار‬ ‫االسم‬‫أو‬ is_real() ‫الختبار‬ ‫بها‬ ‫الخاص‬ :‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ ‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ if (is_float($x)) { // $x is a floating-point number }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 300 ‫ال‬ ‫سالسل‬ ‫النصية‬ ‫تتضمن‬ ،‫الويب‬ ‫تطبيقات‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ً ‫جد‬ ‫شائعة‬ ‫السالسل‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ PHP ‫عىل‬ ً ‫ا‬ ً‫دعم‬ ‫من‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ‫السلسلة‬ .‫ومعالجتها‬ ‫السالسل‬ ‫إلنشاء‬ ‫ي‬ ‫األساش‬ ‫المستوى‬ ‫اقتباس‬ ‫بعالمات‬ ‫للسلسلة‬ ‫الحرفية‬ ‫القيم‬ ‫تحديد‬ ‫يتم‬ . ‫ي‬ ‫عشوان‬ ‫طول‬ ‫ذات‬ ‫األحرف‬ :‫مزدوجة‬ ‫أو‬ ‫مفردة‬ 'big dog' "fat hog" ‫من‬ ‫الهروب‬ ‫عمليات‬ ‫من‬ ‫متنوعة‬ ‫مجموعة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المزدوجة‬ ‫االقتباس‬ ‫عالمات‬ ‫تدعم‬ . ‫الجدول‬ ‫ي‬ ‫ف‬ ‫موضح‬ ‫هو‬ ‫كما‬،‫السلسلة‬ Escape sequence Character represented " ‫مزدوجة‬ ‫تنصيص‬ ‫عالمة‬ n ‫جديد‬ ‫سطر‬ r Carriage return t ‫جدول‬ ‫مسافة‬ Backslash $ ‫الدوالر‬ ‫عالمة‬ { Left brace } Right brace [ Left bracket ] Right bracket
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 301 ‫عىل‬ ‫مفردة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سلسلة‬ ‫تتعرف‬ ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫عىل‬ ‫للحصول‬ '‫و‬ ‫عكسية‬ :‫مفرد‬ ‫اقتباس‬ ‫عىل‬ ‫للحصول‬ == ‫المقارنة‬ ‫عامل‬ ‫استخدم‬ ، ‫ر‬ ‫متساويتي‬ ‫سلسلتان‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if ($a == $b) { echo "a and b are equal"; } ‫الدالة‬ ‫استخدم‬ is_string() ‫كانت‬‫إذا‬ ‫ما‬‫الختبار‬ :‫ال‬ ‫أم‬ ‫سلسلة‬ ‫القيمة‬ if (is_string($x)) { // $x is a string } ‫منطقية‬ ‫قيمة‬ ّ ‫ف‬ّ ‫تعر‬ PHP ‫أنها‬ ‫عىل‬ ‫القيم‬ ‫بعض‬ true ‫اآلخر‬ ‫والبعض‬ false ‫والخطأ‬ ‫الصدق‬ . :‫مثل‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫كود‬‫ال‬ ‫نتيجة‬ ‫يحددان‬ if ($alive) { ... } ‫ي‬ ‫ف‬ PHP ‫أنها‬ ‫عىل‬ ‫التالية‬ ‫القيم‬ ‫جميع‬ ‫تقييم‬ ‫يتم‬ ، false : • ‫الرئيسية‬ ‫الكلمة‬ false • ‫الصحيح‬ ‫العدد‬ 2 • ‫العائمة‬ ‫النقطة‬ ‫قيمة‬ 2 . 2 • ‫الفارغة‬ ‫السلسلة‬ "‫والسلسلة‬ ("") 2 " • ‫صفرية‬ ‫بعناص‬ ‫مصفوفة‬ • ‫القيمة‬ NULL
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 302 ‫توفر‬ PHP ‫رئيسية‬ ‫كلمات‬ true ‫و‬ false :‫للتوضيح‬ $x = 5; // $x has a true value $x = true; // clearer way to write it $y = ""; // $y has a false value $y = false; // clearer way to write it ‫الدالة‬ ‫استخدم‬ is_bool() :‫منطقية‬ ‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if (is_bool($x)) { // $x is a Boolean } ‫المصفوفا‬ ‫ت‬ ‫رقم‬ ‫خالل‬ ‫من‬ ‫تحديدها‬ ‫يمكنك‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫القيم‬ ‫من‬ ‫مجموعة‬ ‫عىل‬ ‫المصفوفة‬ ‫تحتوي‬ ‫األول‬ ‫الموضع‬ ‫هو‬ ‫الصفر‬ ‫كون‬‫مع‬ ، ‫الموضع‬ ‫أو‬ ‫وضع‬ ‫يمكن‬ ، ‫تعريفية‬ ‫أسماء‬ ” ‫ي‬ ‫ابط‬ ‫ر‬ ‫الت‬ ‫الفهرس‬ ‫تسىم‬ associative index :“ $person[0] = "Anas"; $person[1] = "Ahmad"; $person[2] = "Sami"; $creator['js'] = "Anas"; $creator['php'] = "Ahmad"; $creator['mysql'] = "Sami"; ‫باستخدا‬ ‫مصفوفة‬ ‫بناء‬ ‫يمكن‬ ‫م‬ array() : $person = array("Anas", "Midmar", "Sami");
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 303 . Objects ‫يدعم‬ PHP ‫الشيئية‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫ا‬ ً ‫أيض‬ OOP . ‫يعزز‬ OOP ‫النظيف‬ ‫المعياري‬ ‫التصميم‬ ‫اللبنات‬ ‫ي‬ ‫ه‬ ‫الفئات‬ .‫كود‬‫ال‬ ‫استخدام‬ ‫إعادة‬ ‫ي‬ ‫ف‬ ‫ويساعد‬ ‫والصيانة‬ ‫التصحيح‬ ‫يبسط‬ . ‫للكائنات‬ ‫الموجه‬ ‫للتصميم‬ ‫األساسية‬ class Person { public $name = ''; function name ($newname = NULL) { if (!is_null($newname)) { $this->name = $newname; } return $this->name; } } ‫الرئيسية‬ ‫الكلمة‬ ‫باستخدام‬‫منها‬ ‫الكائنات‬ ‫من‬‫عدد‬ ‫أي‬ ‫إنشاء‬ ‫يمكن‬ ،‫فئة‬ ‫تحديد‬ ‫بمجرد‬ new ‫باستخدام‬ ‫وطرقه‬ ‫الكائن‬ ‫خصائص‬ ‫إىل‬ ‫الوصول‬ ‫ويمكن‬ ، - :> $ed = new Person; $ed->name('Anas'); echo "Hello, {$ed- >name}
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 304 ‫الدالة‬ ‫استخدم‬ is_object() : ً ‫ا‬ ً ‫كائن‬‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if (is_object($x)) { // $x is an object } ‫ال‬ ‫أو‬ ‫مصادر‬ ‫ال‬ ‫موارد‬ ‫سبيل‬ ‫عىل‬ . ‫ي‬ ‫ر‬ ‫الخارج‬ ‫العالم‬ ‫مع‬ ‫للتعامل‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫الوحدات‬ ‫من‬ ‫العديد‬‫توفر‬ ‫بقاعدة‬ ‫لالتصال‬ ‫دالة‬ ‫عىل‬ ‫األقل‬ ‫عىل‬ ‫بيانات‬ ‫قاعدة‬ ‫ملحق‬ ‫كل‬ ‫يحتوي‬ ،‫المثال‬ ‫بقاعدة‬ ‫االتصال‬ ‫إلغالق‬ ‫ووظيفة‬ ،‫البيانات‬ ‫قاعدة‬ ‫عن‬ ‫لالستعالم‬ ‫ووظيفة‬ ،‫البيانات‬ ‫اتصاال‬ ‫فتح‬ ‫إلمكانية‬ ً ‫ا‬ً ‫نظر‬ .‫البيانات‬ ‫تمنحك‬ ،‫واحد‬ ‫وقت‬ ‫ي‬ ‫ف‬ ‫متعددة‬ ‫بيانات‬ ‫قاعدة‬ ‫ت‬ ‫استدعاء‬ ‫عند‬ ‫الفريد‬ ‫االتصال‬ ‫هذا‬ ‫تحديد‬ ‫خالله‬ ‫من‬ ‫يمكن‬ ً ‫ا‬ ً ‫شيئ‬ ‫االتصال‬ ‫دالة‬ ‫مورد‬ :‫الدوال‬ ‫وإغالق‬ ‫االستعالم‬ resource ‫مقبض‬ ‫أو‬ handle . ‫بحث‬ ‫جدول‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫رقىم‬ ‫فهرس‬‫هو‬ ‫معرف‬ ‫كل‬.‫فريد‬ ‫معرف‬ ‫نشط‬ ‫مورد‬ ‫لكل‬ PHP ‫ي‬ ‫داخىل‬ ‫حو‬ ‫معلومات‬ ‫عىل‬ ‫يحتوي‬ ‫تحتفظ‬ .‫النشطة‬ ‫الموارد‬ ‫جميع‬ ‫ل‬ PHP ‫حول‬ ‫بمعلومات‬ ‫جميع‬ ‫ي‬ ‫ف‬ ‫المورد‬ ‫استخدامات‬ ‫أو‬ ‫اجع‬‫ر‬‫الم‬ ‫عدد‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ،‫الجدول‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫مورد‬ ‫كل‬ ‫الذي‬ ‫الملحق‬ ‫استدعاء‬ ‫يتم‬ ،‫مورد‬ ‫لقيمة‬ ‫ر‬ ‫األخت‬ ‫المرجع‬ ‫ي‬ ‫يختق‬ ‫عندما‬ .‫الكود‬ ‫أنحاء‬ ‫ل‬ ‫اتصال‬ ‫أي‬ ‫إغالق‬ ‫أو‬ ‫ذاكرة‬ ‫أي‬ ‫تحرير‬ ‫مثل‬ ‫مهام‬ ‫ألداء‬ ‫المورد‬ ‫أنشأ‬ :‫المورد‬ ‫هذا‬ ً ‫ا‬ً‫أسلوب‬ ‫ر‬ ‫تت‬ ُ‫ع‬ُ‫وي‬ ،‫إغالق‬ ‫دالة‬‫أو‬ ‫محدد‬ ‫تشغيل‬ ‫إيقاف‬ ‫اإلضافات‬ ‫معظم‬‫توفر‬ ،‫ذلك‬ ‫ومع‬ .‫الحاجة‬ ‫عند‬ ‫ح‬ ‫ي‬‫ص‬ ‫بشكل‬ ‫الدالة‬ ‫هذه‬ ‫الستدعاء‬ ً ‫ا‬ ً ‫جيد‬ ‫الدالة‬ ‫استخدم‬ is_resource() : ً ‫ا‬ ً ‫مورد‬ ‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if (is_resource($x)) { // $x is a resource }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 305 ‫االسترجاع‬ Callbacks Callbacks :‫مثل‬ ،‫الدوال‬ ‫بعض‬ ‫بواسطة‬ ‫مستخدمة‬ ‫كائن‬‫طرق‬ ‫أو‬ ‫دوال‬ ‫ي‬ ‫ه‬ call_user_func() . $callback = function() { echo "callback achieved"; }; call_user_func($callback); NULL ‫البيانات‬ ‫لنوع‬ ‫فقط‬ ‫واحدة‬ ‫قيمة‬ ‫هناك‬ NULL ‫الكلمة‬ ‫خالل‬ ‫من‬ ‫القيمة‬ ‫هذه‬ ‫تتوفر‬ . ‫األساسية‬ NULL ‫القيمة‬ ‫تمثل‬ .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ر‬ ‫غت‬ NULL ‫له‬ ‫ليس‬ ً ‫ا‬ً ‫ر‬ ‫متغت‬ ‫قيمة‬ $aleph = Null; // same $aleph = NULL; // same ‫الدالة‬ ‫استخدم‬ is_null() ‫فارغة‬ ‫القيمة‬ ‫كانت‬‫إذا‬‫ما‬‫الختبار‬ - ،‫المثال‬ ‫سبيل‬ ‫عىل‬ :‫ال‬ ‫أم‬ ‫قيمة‬ ‫ر‬ ‫للمتغت‬ ‫كان‬‫إذا‬ ‫ما‬ ‫لمعرفة‬ if (is_null($x)) { // $x is NULL }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 306
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 307 ‫ات‬ ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ PHP ‫مسبوقة‬ ‫معرفات‬ ‫ي‬ ‫ه‬ :‫فمثال‬ .$‫الدوالر‬ ‫بعالمة‬ $name $User $_items $MAXIMUM_IMPACT ‫نوع‬ ‫من‬ ‫بأخرى‬ ‫ر‬ ‫متغت‬ ‫قيمة‬ ‫استبدال‬ ‫يمكنك‬ .‫نوع‬ ‫أي‬ ‫من‬ ‫قيمة‬ ‫ر‬ ‫المتغت‬ ‫يحمل‬ ‫قد‬ :‫مختلف‬ $what = "Fred"; $what = 35; $what = array("Fred", 35, "Wilma"); ‫القيمة‬ ‫مثل‬ ‫يترصف‬ ‫قيمته‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫لم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ NULL : if ($uninitializedVariable === NULL) { echo "Yes!"; }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 308 Variable Variables ‫المتغيرة‬ ‫المتغيرات‬ ‫طريق‬ ‫عن‬ ‫آخر‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ف‬ ‫اسمه‬ ‫تخزين‬ ‫تم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫إىل‬ ‫اإلشارة‬ ‫يمكنك‬ :‫فمثال‬ .$ ‫إضافية‬ ‫دوالر‬ ‫بعالمة‬ ‫ر‬ ‫المتغت‬ ‫مرجع‬ ‫تقديم‬ $foo = "bar"; $$foo = "baz"; ‫ر‬ ‫المتغت‬ ،‫الثانية‬ ‫الجملة‬ ‫تنفيذ‬ ‫بعد‬ $bar "‫القيمة‬ ‫له‬ baz ." ‫المتغير‬ ‫نطاق‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫اء‬‫ز‬‫األج‬ ‫تلك‬ ‫يحدد‬ ، ‫ر‬ ‫المتغت‬ ‫إعالن‬ ‫موقع‬ ‫فيه‬ ‫يتحكم‬ ‫الذي‬ ، ‫ر‬ ‫المتغت‬ ‫نطاق‬ .‫إليه‬ ‫الوصول‬ ‫يمكنه‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغي‬ ‫نطاقات‬ ‫من‬ ‫أنواع‬ ‫أربعة‬ ‫هناك‬ PHP : • ‫ي‬ ‫المحىل‬ local • ‫ي‬ ‫والعالىم‬ global • ‫والثابت‬ static • ‫و‬ ‫وسطاء‬ ‫الدوال‬ function . ‫ي‬ ‫المحىل‬ ‫النطاق‬ ‫الدالة‬ ‫تلك‬ ‫ي‬ ‫ف‬ ‫للكود‬ ‫فقط‬ ‫ي‬ ‫مرن‬ ‫أنه‬ ‫أي‬ .‫الدالة‬ ‫لتلك‬ ‫ي‬ ‫محىل‬ ‫دالة‬ ‫ي‬ ‫ف‬ ‫المعلن‬ ‫ر‬ ‫المتغت‬ ‫الدوال‬ ‫تعريفات‬ ‫باستثناء‬ ‫ال‬ ‫المتداخلة‬ ‫إىل‬ ‫باإلضافة‬ .‫الدالة‬ ‫خارج‬ ‫إليه‬ ‫الوصول‬ ‫يمكن‬ ‫تسىم‬ ‫دالة‬ ‫خارج‬ ‫المحددة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الوصول‬ ‫يمكن‬ ‫ال‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ،‫ذلك‬ ‫الدالة‬ ‫داخل‬ ‫العامة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫تحديث‬ ‫عىل‬ ‫تعمل‬ ‫دالة‬ ‫إليك‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ . :‫عام‬ ‫ر‬ ‫متغت‬ ‫من‬ ً ‫بدال‬ ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 309 function updateCounter() { $counter++; } $counter = 10; updateCounter(); echo $counter; //10 $counter ‫عىل‬ ‫الدالة‬ ‫تعمل‬ .‫ذلك‬ ‫ر‬ ‫غت‬ ‫نقل‬ ‫لم‬ ‫ألننا‬ ‫الدالة‬ ‫لهذه‬ ‫ي‬ ‫محىل‬ ‫الدالة‬ ‫داخل‬ ‫ر‬ ‫متغت‬ ‫زيادة‬ $counter . ‫ي‬ ‫الفرع‬ ‫اء‬‫ر‬‫اإلج‬ ‫انتهاء‬ ‫عند‬ ‫إتالفه‬ ‫يتم‬ ‫والذي‬ ،‫بها‬ ‫الخاص‬ ‫ي‬ ‫ف‬ ،‫األخرى‬ ‫اللغات‬ ‫عكس‬ ‫عىل‬ . ‫ي‬ ‫المحىل‬ ‫النطاق‬ ‫توفر‬ ‫أن‬ ‫يمكن‬ ‫الدوال‬ ‫فقط‬ PHP ‫ال‬ ‫عن‬ ‫عبارة‬ ‫نطاقه‬ ‫يكون‬ ‫ر‬ ‫متغت‬ ‫إنشاء‬ ‫يمكنك‬ ‫من‬ ‫آخر‬ ‫نوع‬ ‫أي‬ ‫أو‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫ع‬ ‫فر‬ ‫أو‬ ‫حلقة‬ .‫الكتل‬ ‫ي‬ ‫العالىم‬ ‫النطاق‬ )‫(العام‬ ‫جزء‬ ‫أي‬ ‫من‬ ‫إليها‬ ‫الوصول‬ ‫يمكن‬ ‫أنه‬ ‫أي‬ .‫عالمية‬ ‫تكون‬ ‫دالة‬ ‫خارج‬ ‫المعلنة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫لدالة‬ ‫للسماح‬ .‫الدالة‬ ‫داخل‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫متوفرة‬ ‫ر‬ ‫غت‬ ‫ي‬ ‫فه‬ ،‫ذلك‬ ‫ومع‬ .‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫األساسية‬ ‫الكلمة‬ ‫استخدام‬ ‫يمكنك‬ ،‫عام‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫بالوصول‬ ‫ما‬ global ‫داخل‬ ‫إ‬ .‫الدالة‬ ‫داخل‬ ‫ر‬ ‫المتغت‬ ‫لتعريف‬ ‫الدالة‬ ‫دالة‬ ‫كتابة‬ ‫إعادة‬ ‫كيفية‬ ‫ليك‬ updateCounter() ‫ر‬ ‫متغت‬ ‫إىل‬ ‫بالوصول‬ ‫لها‬ ‫للسماح‬ $counter :‫العام‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 310 function updateCounter() { global $counter; $counter++; } $counter = 10; updateCounter(); echo $counter; //11 ‫الثابتة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ( static ) ‫ر‬ ‫المتغت‬ ‫الثابت‬ ( static ) ‫فقط‬ ‫ي‬ ‫مرن‬ ‫ولكنه‬ ‫الدالة‬ ‫استدعاءات‬ ‫ر‬ ‫بي‬ ‫بقيمته‬ ‫يحتفظ‬ ‫األساسية‬ ‫الكلمة‬ ‫باستخدام‬ ‫ثابت‬ ‫ر‬ ‫متغت‬ ‫بتعريف‬ ‫تقوم‬ .‫الدالة‬ ‫تلك‬ ‫داخل‬ static function updateCounter() { static $counter = 0; $counter++; echo "Static counter is now {$counter}<br/>"; } $counter = 10; updateCounter(); updateCounter(); echo "Global counter is {$counter}"; // Static counter is now 1 // Static counter is now 2 // Global counter is 10
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 311 ‫وسطاء‬ ‫الدوال‬ : function greet($name) { echo "Hello, {$name}"; } greet("Janet"); // Hello, Janet ‫وسطاء‬ ‫ال‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫دوالها‬ ‫داخل‬ ‫فقط‬ ‫متاحة‬ ‫أنها‬ ‫ي‬ ‫يعت‬ ‫مما‬ ،‫محلية‬ ‫الدالة‬ ‫إىل‬ ‫الوصول‬ ‫يمكن‬ $name . ‫خارج‬ ‫من‬ greet()
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 312 ‫الرياضية‬ ‫والعمليات‬ ‫ات‬ ‫ر‬ ‫التعبت‬ ” ‫ر‬ ‫التعبت‬ expression ‫كود‬‫من‬ ‫جزء‬ ‫هو‬ “ PHP .‫قيمة‬ ‫إلنتاج‬ ‫تقييمه‬ ‫يمكن‬ ” ‫العملية‬ ‫تأخذ‬ operator ‫القيم‬ ‫بعض‬ “ ( ‫المعامالت‬ ) ‫سبيل‬ ‫)عىل‬ ً ‫ا‬ ً ‫شيئ‬ ‫ويفعل‬ ( . ً ‫ا‬ ً‫مع‬ ‫يجمعهم‬ ،‫المثال‬ ‫و‬ + ،‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫كرموز‬ ً ‫ا‬ ً ‫أحيان‬ ‫العوامل‬ ‫كتابة‬‫تتم‬ - . ‫الجدول‬ ‫يلخص‬ ‫ي‬ ‫التاىل‬ ‫ي‬ ‫ف‬ ‫التشغيل‬ ‫عوامل‬ PHP ،‫األسبقية‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫العوامل‬ ‫رسد‬ ‫يتم‬ ، "‫المسىم‬ ‫العمود‬ ‫ي‬ ‫يعط‬ .‫األدن‬ ‫إىل‬ ‫األعىل‬ ‫من‬ A ” ‫المشغل‬ ‫ارتباط‬ " operator’s associativity ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫والذي‬ ،“ L ‫إىل‬ ‫اليسار‬ ‫من‬ ‫أو‬ ،( ‫ر‬ ‫اليمي‬ R ‫ر‬ ‫اليمي‬ ‫)من‬ ‫أو‬ ،(‫اليسار‬ ‫إىل‬ N ” ‫ارتباط‬ ‫ر‬ ‫)غت‬ nonassociative .“ P A ‫العامل‬ ‫أو‬ ‫المشغل‬ ‫العملية‬ 24 N clone, new ‫جديد‬ ‫كائن‬‫إنشاء‬ 23 L [ Array subscript
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 313 P A ‫العامل‬ ‫أو‬ ‫المشغل‬ ‫العملية‬ 22 R ** ‫األس‬ 21 R ~ Bitwise Not R ++ ‫زيادة‬ R −− ‫نقصان‬ R (int), (bool), (float), (string ), (array), (object), (unset) Cast R @ Inhibit errors 20 N instanceof Type testing 19 R ! ‫ي‬ ‫نق‬ ( ‫ي‬ ‫ر‬ ‫المنطق‬ ) 18 L * ‫ب‬‫الرص‬ L / ‫القسمة‬ L % ‫القسمة‬ ‫ي‬ ‫ر‬ ‫باف‬ 17 L + ‫الجمع‬ 15 N <, <= ‫أو‬ ‫من‬ ‫أقل‬ ،‫من‬ ‫أقل‬ ‫يساوي‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 314 N >, >= ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ ،‫من‬ ‫ر‬ ‫أكت‬ ‫يساوي‬ 14 N == ‫القيمة‬ ‫ي‬ ‫ف‬ ‫المساواة‬ N !=, <> ‫المساواة‬ ‫عدم‬ N === ‫النوع‬ ‫ي‬ ‫ف‬ ‫المساواة‬ ‫والقيمة‬ N !== ‫النوع‬ ‫اليساوي‬ ‫والقيمة‬ N <=> ً‫بناء‬ ً ‫صحيحا‬ ً ‫عددا‬ ‫جع‬ُ ‫تر‬ ‫عىل‬ : ‫ر‬ ‫معاملي‬ ‫مقارنة‬ 0 ‫ر‬ ‫واليمي‬ ‫اليسار‬ ‫يكون‬ ‫عندما‬ ‫و‬ ، ‫ر‬ ‫متساويي‬ - 1 ‫يكون‬ ‫عندما‬ ‫و‬ ، ‫ر‬ ‫اليمي‬ ‫من‬ ‫أقل‬ ‫اليسار‬ 1 ‫عندما‬ . ‫ر‬ ‫اليمي‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫اليسار‬ ‫يكون‬ 13 L & Bitwise AND 12 L ^ Bitwise XOR
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 315 11 L | Bitwise OR 10 L && ‫و‬ ( ‫ي‬ ‫ر‬ ‫المنطق‬ ) 9 L || ‫أو‬ ( ‫ي‬ ‫ر‬ ‫المنطق‬ ) 8 R ?? Null Coalescing Operator 7 L ?: ‫ي‬ ‫ر‬ ‫الثالن‬ ‫العامل‬ ‫ال‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫ش‬ 6 R = Assignment R +=, −=, *=, /=, .=, %=, &=, |=, ^=, ~=, <<=, >>= Assignment with operation ‫المعامل‬ ‫أسبقية‬ ❖ .‫والطرح‬ ‫الجمع‬ ‫من‬ ‫أعىل‬ ‫أسبقية‬ ‫لهما‬ ‫والقسمة‬ ‫ب‬‫الرص‬ ❖ .‫آخر‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫ألي‬ ‫األقواس‬ ‫استخدم‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫األسبقية‬ ‫ترتيب‬ ‫نفس‬ ‫لها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العمليات‬ ‫تقييم‬ : 2 / 2 * 2 ‫الصحيحة‬ ‫النتيجة‬ ‫تكون‬ ،‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ . ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫اليسار‬ ‫من‬ ‫العمليات‬ ‫تقييم‬ ‫يتم‬ ‫ي‬ ‫ه‬ 2 . 2 / (2 * 2) // 0.5 (2 / 2) * 2 // 2
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 316 ‫القصر‬ ‫الضمني‬ Implicit Casting ‫معامالتهم‬ ‫بشأن‬ ‫توقعات‬ ‫لديها‬ ‫العمليات‬ ‫من‬ ‫العديد‬ - ‫سبيل‬ ‫عىل‬ ‫تتطلب‬ ،‫المثال‬ ً ‫عادة‬ ‫الثنائية‬ ‫الرياضيات‬ ‫عمليات‬ ‫يمكن‬ .‫النوع‬ ‫نفس‬ ‫من‬ ‫ر‬ ‫المعاملي‬ ‫كال‬ ‫يكون‬ ‫أن‬ ‫ات‬ ‫ر‬ ‫لمتغت‬ PHP ‫والسالسل‬ ‫العائمة‬ ‫الفاصلة‬ ‫وأرقام‬ ‫الصحيحة‬ ‫األعداد‬ ‫تخزين‬ ‫تحول‬ ،‫والمزيد‬ PHP .‫ورة‬‫الرص‬ ‫حسب‬‫آخر‬ ‫إىل‬ ‫نوع‬ ‫من‬ ‫القيم‬ ‫الحسابية‬ ‫العمليات‬ ‫عمليات‬ ‫ي‬ ‫ه‬ ‫الحسابية‬ ‫العمليات‬ ‫تعرفها‬ ‫ي‬ ‫ف‬ . ‫ي‬ ‫اليوم‬ ‫االستخدام‬ )+(:‫الجمع‬ . ‫ر‬ ‫المعاملي‬ ‫مجموع‬ ‫هو‬ ‫الجمع‬ ‫عامل‬ ‫نتيجة‬ ‫الطرح‬ ( - ) : ‫ر‬ ‫المعاملي‬ ‫ر‬ ‫بي‬ ‫الفرق‬‫هو‬ ‫الطرح‬ ‫عامل‬ ‫نتيجة‬ - ‫من‬ ‫مطروح‬ ‫ي‬ ‫الثان‬ ‫المعامل‬ ‫قيمة‬ ‫أي‬ ‫األول‬ - . )*(:‫ب‬‫الرص‬ :‫المثال‬ ‫سبيل‬ ‫عىل‬ . ‫ر‬ ‫المعاملي‬ ‫ب‬‫ص‬ ‫حاصل‬ ‫هو‬ ‫ب‬‫الرص‬ ‫عامل‬ ‫نتيجة‬ 4 * 3 ‫ي‬ ‫ه‬ 12 . )/(:‫القسمة‬ ‫قس‬ ‫حاصل‬ ‫ي‬ ‫ه‬ ‫القسمة‬ ‫عامل‬ ‫نتيجة‬ . ‫ر‬ ‫المعاملي‬ ‫مة‬ )%(:‫القسمة‬ ‫ي‬ ‫ر‬ ‫باف‬ ‫من‬ ‫ر‬ ‫تبق‬ ‫ما‬ ‫ويعيد‬ ‫صحيحة‬ ‫أعداد‬ ‫إىل‬ ‫ر‬ ‫المعاملي‬ ‫كال‬‫المقياس‬ ‫عامل‬ ‫يحول‬ . ‫ي‬ ‫الثان‬ ‫المعامل‬ ‫بواسطة‬ ‫األول‬ ‫المعامل‬ ‫قسمة‬ 10%3 ‫ي‬ ‫ر‬ ‫الباف‬ ‫ي‬ ‫تعط‬ 1 .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 317 ‫ي‬ ‫الحسائ‬ ‫السالب‬ ) – ( ‫ي‬ ‫ف‬ ً ‫ا‬ً‫وب‬‫مرص‬ ‫المعامل‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫السالب‬ ‫عامل‬ ‫يعيد‬ 1 - ‫ر‬ ‫تغيت‬ ‫إىل‬ ‫يؤدي‬ ‫مما‬ ، ‫اشارته‬ )+( ‫ي‬ ‫الحسائ‬ ‫الموجب‬ ‫ي‬ ‫ف‬ ً ‫ا‬ً‫وب‬‫مرص‬ ‫المعامل‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫الموجب‬ ‫عامل‬ ‫يعرض‬ 1 ‫أي‬ ‫له‬ ‫ليس‬ ‫والذي‬ ،+ . ‫ر‬ ‫تأثت‬ ‫س‬ ُ ‫األ‬ ( ** ) ‫رفع‬ ‫نتيجة‬ ‫س‬ ُ ‫األ‬ ‫معامل‬ ‫جع‬ُ ‫ير‬ $var1 ‫األس‬ ‫إىل‬ var2 . <?php $var1 = 2; $var2 = 3; echo $var1 ** $var2; // outputs 8 ‫عامل‬ ‫دمج‬ ‫السلسلة‬ ‫عامل‬ ‫يلحق‬ ‫الدمج‬ ‫يتم‬ .‫الناتجة‬ ‫السلسلة‬ ‫ويعيد‬ ‫األيش‬ ‫بالمعامل‬ ‫األيمن‬ ‫المعامل‬ :‫فمثال‬ .‫األمر‬ ‫لزم‬ ‫إذا‬ ،‫سالسل‬ ‫إىل‬ ً ‫أوال‬ ‫المعامالت‬ ‫تحويل‬ $n = 80; $s = 'your mark is ' . $n . ' %.'; // your mark is 80 %.'
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 318 ‫التلقائية‬ ‫الزيادة‬ ‫عوامل‬ (++) ‫التلقائي‬ ‫والتناقص‬ (--) ‫ر‬ ‫متغت‬ ‫قيمة‬ ‫تقليل‬ ‫أو‬ ‫زيادة‬ ‫ي‬ ‫ف‬ ً ‫شيوعا‬ ‫ر‬ ‫األكت‬ ‫العمليات‬ ‫إحدى‬ ‫تتمثل‬ ،‫مجة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ .‫واحد‬ ‫بمقدار‬ ‫إذا‬ .‫ات‬ ‫ر‬ ‫التعبت‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التلقان‬ ‫التناقص‬ ‫أو‬ ‫التلقائية‬ ‫الزيادة‬ ‫الستخدام‬ ‫طريقتان‬ ‫هناك‬ ‫للمعامل‬ ‫الجديدة‬ ‫القيمة‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫فإنه‬ ،‫المعامل‬ ‫قبل‬ ‫العامل‬ ‫وضعت‬ ) ‫تناقص‬‫أو‬ ‫زيادة‬ ( . ‫ا‬ ‫وضعت‬ ‫إذا‬ ‫للمعامل‬ ‫األصلية‬ ‫القيمة‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫فإنه‬ ،‫المعامل‬ ‫بعد‬ ‫لعامل‬ ) ‫أو‬ ‫الزيادة‬ ‫قبل‬ ‫اإلنقاص‬ ( . ‫المقارنة‬ ‫عوامل‬ ‫ت‬ ‫إما‬ ً ‫ا‬ ً‫دائم‬ ‫النتيجة‬ ‫تكون‬ .‫المعامالت‬ ‫المقارنة‬ ‫عوامل‬ ‫قارن‬ true ‫المقارنة‬ ‫كانت‬‫إذا‬ ، ‫و‬ ،‫صحيحة‬ false ‫عىل‬ .‫ذلك‬ ‫خالف‬ ‫مالحظ‬ ‫ة‬ ‫سلسلتان‬ ‫لديك‬ ‫كان‬ ‫إذا‬ .‫أرقام‬ ‫كانتا‬‫لو‬ ‫كما‬ ‫ر‬ ‫رقميتي‬ ‫ر‬ ‫سلسلتي‬ ‫مقارنة‬ ‫يتم‬ ‫الدالة‬ ‫فاستخدم‬ ، ً ‫ا‬ ً‫معجم‬ ‫مقارنتها‬ ‫إىل‬ ‫وتحتاج‬ ‫رقمية‬ ‫أحرف‬ ‫من‬ ً ‫ا‬ً‫كلي‬ ‫تتكونان‬ strcmp() . : ‫ي‬ ‫ه‬ ‫المقارنة‬ ‫عوامل‬ ‫المساواة‬ ( == ) : ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ، ‫ر‬ ‫متساويي‬ ‫ر‬ ‫المعاملي‬ ‫كال‬‫كان‬‫إذا‬ true ‫فإنه‬ ،‫وإال‬ ‫ترجع‬ ‫ا‬ false .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 319 )===(:‫التطابق‬ ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫النوع‬ ‫نفس‬ ‫من‬ ‫وكانا‬ ‫ر‬ ‫متساويي‬ ‫ر‬ ‫المعاملي‬ ‫كال‬ ‫كان‬‫إذا‬ true ‫ترجع‬ ‫فإنها‬ ،‫وإال‬ false .. ‫المساواة‬ ‫عدم‬ ( != ‫أو‬ <> ) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫متساوية‬ ‫ر‬ ‫غت‬ ‫المعامالت‬ ‫كانت‬‫إذا‬ true ‫ترجع‬ ‫فإنها‬ ،‫وإال‬ false . ‫متطابق‬ ‫ر‬ ‫غي‬ ) !== ( ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫النوع‬ ‫نفس‬ ‫من‬ ‫تكن‬ ‫لم‬ ‫أو‬ ،‫متساوية‬ ‫ر‬ ‫غت‬ ‫المعامالت‬ ‫كانت‬‫إذا‬ ‫القيمة‬ true ‫يرجع‬ ‫فإنه‬ ‫وإال‬ false . ‫من‬ ‫أكي‬ (>) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ true ،‫وإال‬ ‫يرجع‬ ‫فإنه‬ .false ‫يساوي‬ ‫أو‬ ‫من‬ ‫أكي‬ (>=) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫األيمن‬ ‫المعامل‬ ‫يساوي‬ ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ true ‫يرجع‬ ‫فإنه‬، ‫وإال‬ false . ‫من‬ ‫أقل‬ (<) ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫أقل‬ true ،‫وإال‬ ‫يرجع‬ ‫فإنه‬ .false
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 320 ‫يساوي‬ ‫أو‬ ‫من‬ ‫أصغر‬ (<=) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫له‬ ً ‫ا‬ً‫مساوي‬ ‫أو‬ ‫األيمن‬ ‫المعامل‬ ‫من‬ ‫أقل‬ ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ true ‫فإنه‬ ،‫وإال‬ .false ‫يرجع‬ Spaceship ( <=> ) ‫األيمن‬ ‫ر‬ ‫المعاملي‬ ‫يتساوى‬ ‫عندما‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫واأليش‬ 0 ‫عندما‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫فإنه‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫أقل‬ ‫األيش‬ ‫المعامل‬ ‫يكون‬ – 1 ‫يكون‬ ‫وعندما‬ ‫يعيد‬ ‫فإنه‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫األيش‬ ‫المعامل‬ 1 . (??) Null coalescing operator ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ ‫األيمن‬ ‫المعامل‬ ‫بتقييم‬ ‫العامل‬ ‫هذا‬ ‫يقوم‬ NULL ،‫ذلك‬ ‫خالف‬ .‫األيش‬ ‫المعامل‬ ‫إىل‬ ‫تقييمه‬ ‫يتم‬ $var1 = null; $var2 = 1992; echo $var1 ?? $var2 ; //outputs 1992
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 321 ‫المنطقية‬ ‫العمليات‬ ‫العوامل‬ ‫تعامل‬ .‫معقدة‬ ‫منطقية‬ ‫ات‬ ‫ر‬ ‫تعبت‬ ‫لبناء‬ ً ‫ا‬ ً ‫طرق‬ ‫المنطقية‬ ‫العوامل‬ ‫توفر‬ .‫منطقية‬ ‫قيمة‬ ‫وتعيد‬ ‫منطقية‬ ‫كقيم‬‫معامالتها‬ ‫المنطقية‬ ‫ي‬ ‫ر‬ ‫المنطق‬ ‫العامل‬ AND (&&, and) ‫عملية‬ ‫نتيجة‬ ‫تكون‬ AND ‫المنطقية‬ true ‫ر‬ ‫المعاملي‬ ‫كال‬ ‫كان‬‫إذا‬ true ‫وإال‬ ‫فهو‬ false ‫األول‬ ‫المعامل‬ ‫قيمة‬ ‫كانت‬‫إذا‬ . false ‫ي‬ ‫ر‬ ‫المنطق‬ ‫العامل‬ ‫فإن‬ ، AND ‫تكون‬ ‫أن‬ ‫يجب‬ ‫الناتجة‬ ‫القيمة‬ ‫أن‬ ‫يعرف‬ false ‫تقييم‬ ‫يتم‬ ‫ال‬ ‫لذلك‬ ،‫ا‬ ً ‫ض‬ً‫أي‬ ‫العملية‬ ‫هذه‬ ‫تسىم‬ . ً ‫ا‬ ً ‫أبد‬ ‫األيمن‬ ‫المعامل‬ ‫بدارة‬ ‫القرص‬ ‫ي‬ ‫ر‬ ‫المنطق‬ ‫العامل‬ XOR (xor) ‫عملية‬ ‫نتيجة‬ ‫تكون‬ XOR ‫المنطقية‬ true ‫ر‬ ‫المعاملي‬ ‫من‬ ‫أي‬ ‫كان‬ ‫إذا‬ true ‫وليس‬ ‫فهو‬ ‫وإال‬ ‫كالهما‬ .false )!( ‫ي‬ ‫ر‬ ‫المنطق‬ ‫ي‬ ‫النق‬ ‫عامل‬ "‫المنطقية‬ ‫القيمة‬ ‫ي‬ ‫ر‬ ‫المنطق‬ ‫ي‬ ‫النق‬ ‫عامل‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ true "‫إىل‬ ‫المعامل‬ ‫تقييم‬ ‫تم‬ ‫إذا‬ " false ‫و‬ ،" false "‫إىل‬ ‫المعامل‬ ‫تقييم‬ ‫تم‬ ‫إذا‬ true ."
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 322 Flow-Control Statements ‫التدفق‬ ‫في‬ ‫التحكم‬ ‫جمل‬ ‫يدعم‬ PHP .‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ ‫تدفق‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ‫التقليدية‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫كيبات‬ ‫تر‬ ‫من‬ ً ‫عددا‬ :‫مثل‬ ،‫طية‬ ‫ر‬ ‫الش‬ ‫الجمل‬ ‫تسمح‬ if/else ‫و‬ switch ‫مختلفة‬ ‫اء‬‫ز‬‫أج‬ ‫بتنفيذ‬ ‫نامج‬ ‫ر‬ ‫للت‬ ، ‫اعت‬ ،‫اإلطالق‬ ‫عىل‬ ‫منها‬ ‫أي‬ ‫تنفيذ‬ ‫عدم‬ ‫أو‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫بعض‬ ‫عىل‬ ً ‫ا‬ ً ‫ماد‬ :‫مثل‬، ‫الحلقات‬ .‫وط‬ ‫ر‬ ‫الش‬ while ‫و‬ for ‫من‬ ‫معينة‬ ‫اء‬‫ز‬‫ألج‬ ‫المتكرر‬ ‫التنفيذ‬ ‫تدعم‬ ، .‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ if ‫جملة‬ if ‫جملة‬ ‫تتحقق‬ if .‫الجملة‬ ‫تقييم‬ ‫يتم‬ ، ً ‫ا‬ ً ‫صحيح‬ ‫ر‬ ‫التعبت‬ ‫كان‬‫وإذا‬ ، ‫ر‬ ‫التعبت‬ ‫مصداقية‬ ‫من‬ ‫جملة‬‫تبدو‬ if :‫مثل‬ if (expression)statement ، ً ‫ا‬ ً ‫خاطئ‬ ‫ر‬ ‫التعبت‬ ‫يكون‬‫عندما‬ ‫لتنفيذه‬ ‫بديلة‬ ‫جملة‬‫لتحديد‬ ‫استخدم‬ else : if(expression) statement else statement
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 323 ‫كمثال‬ if ($user_validated) echo "Welcome!"; else echo "Access Forbidden!"; ‫ل‬ ‫عبارة‬ ‫ي‬ ‫ف‬ ‫واحدة‬ ‫جملة‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫ر‬ ‫تضمي‬ if ‫استخدم‬ ، block - ‫الجمل‬ ‫من‬ ‫مجموعة‬ ‫م‬ ‫بأقواس‬ ‫محاطة‬ ‫عك‬ :‫وفة‬ if ($user_validated) { echo "Welcome!"; $greeted = 1; } else { echo "Access Forbidden!"; exit; } ‫توفر‬ PHP ‫كتلة‬‫إرفاق‬ ‫من‬ ً ‫بدال‬ .‫والحلقات‬ ‫ات‬‫ر‬‫االختبا‬ ‫ي‬ ‫ف‬ ‫للكتل‬ ‫أخرى‬ ‫صيغة‬ ‫سطر‬ ‫بإنهاء‬ ‫قم‬ ،‫معقوفة‬ ‫بأقواس‬ ‫الجمل‬ if ‫ر‬ ‫بنقطتي‬ ):( ‫الكتلة‬ ‫إلنهاء‬ ‫واستخدم‬ ( endif ) ، :‫فمثال‬. if ($user_validated): echo "Welcome!"; $greeted = 1; else: echo "Access Forbidden!"; exit; endif;
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 324 ‫جملة‬ elseif . if ($good) { print("Dandy!"); } elseif ($error) { print("Oh, no!"); } else { print("I'm ambivalent..."); } ‫ي‬ ‫ر‬ ‫الثالن‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫العامل‬ ‫استخدام‬ ‫يمكن‬ ( ?: ) ‫الخطأ‬ / ‫الصواب‬ ‫ات‬‫ر‬‫اختبا‬ ‫ر‬ ‫لتقصت‬ ً ‫ا‬ ً ‫صحيح‬ ‫ر‬ ‫معي‬ ‫ر‬ ‫متغت‬ ‫كان‬‫إذا‬ ‫ما‬ ‫لمعرفة‬ ‫التحقق‬ ‫مثل‬ ، ً ‫شائعا‬ ً ‫ا‬ ً ‫موقف‬ ‫اتخذ‬ .‫البسيطة‬ ‫جملة‬ ‫مع‬ .‫كذلك‬‫كان‬‫إذا‬ ‫ما‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫وطباعة‬ if/else ‫ي‬ ‫يىل‬ ‫كما‬‫األمر‬‫يبدو‬ ،‫العادية‬ : if($active) { echo "yes"; } else { echo "no"; } : ‫ي‬ ‫يىل‬ ‫كما‬‫األمر‬‫يبدو‬ ، ‫ي‬ ‫ر‬ ‫الثالن‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫العامل‬ ‫مع‬ echo $active ? "yes" : "no"; (expression) ? true_expression : false_expression ‫أنه‬ ‫ي‬ ‫يعت‬ ‫هذا‬ .‫اإلطالق‬ ‫عىل‬ ‫جملة‬ ‫ليس‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫العامل‬ ‫أن‬‫هو‬ ‫هنا‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ‫ي‬ ‫ف‬ . ‫ر‬ ‫تعبت‬ ‫ذاته‬ ‫حد‬ ‫ي‬ ‫ف‬ ‫هو‬ ‫الكامل‬ ‫ي‬ ‫ر‬ ‫الثالن‬ ‫ر‬ ‫التعبت‬ ‫ونتيجة‬ ،‫ات‬ ‫ر‬ ‫التعبت‬ ‫ي‬ ‫ف‬ ‫استخدامه‬ ‫يتم‬ ‫جملة‬ ‫تكون‬ ،‫السابق‬ ‫المثال‬ echo ‫ط‬ ‫ر‬ ‫رس‬ ‫داخل‬ if ‫العامل‬ ‫مع‬ ‫استخدامها‬ ‫عند‬ ‫بينما‬ ، ‫ر‬ ‫التعبت‬ ‫تسبق‬ ‫فإنها‬ ، ‫ي‬ ‫ر‬ ‫الثالن‬ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 325 switch ‫المختلفة‬ ‫ات‬‫ر‬‫الخيا‬ ‫من‬ ‫عدد‬ ‫من‬ ً ‫ا‬ ً ‫واحد‬ ‫واحد‬ ‫ر‬ ‫متغت‬ ‫قيمة‬ ‫تحدد‬ ‫قد‬ ‫جملة‬ ‫ط‬ ُ‫تع‬ switch ‫ال‬ ‫ي‬ ‫ف‬ ‫الحاالت‬ ‫بجميع‬ ‫قيمته‬ ‫ويقارن‬ ً ‫ا‬ً ‫ر‬ ‫تعبت‬ switch ‫تنفيذ‬ ‫يتم‬ ‫رئيسية‬ ‫كلمة‬ ‫أول‬ ‫ر‬ ‫حت‬ ،‫المطابقة‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫الجمل‬ ‫جميع‬ break ‫لم‬ ‫إذا‬ .‫عليها‬ ‫ر‬ ‫تعت‬ ‫القيمة‬‫تحديد‬ ‫وتم‬ ،‫تطابق‬ ‫هناك‬ ‫يكن‬ default ‫ي‬ ‫ر‬ ‫الت‬ ‫الجمل‬ ‫جميع‬‫تنفيذ‬ ‫فسيتم‬ ، ‫األساسية‬ ‫الكلمة‬ ‫تتبع‬ default ‫أول‬ ‫ر‬ ‫حت‬ ، break . switch($name) { case 'anas': // do something break; case 'ahmad': // do something break; case 'sami': // do something break; case 'omer': // do something break; default : // do something break; }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 326 while ‫جملة‬‫هو‬ ‫الحلقة‬ ‫أشكال‬ ‫من‬ ‫شكل‬ ‫أبسط‬ while : ‫مقدار‬ ‫يكون‬ ‫عندما‬ ‫استخدمها‬ ‫مجهول‬ ‫ار‬‫ر‬‫التك‬ ” ‫ر‬ ‫التعبت‬ ‫تقييم‬ ‫تم‬ ‫إذا‬ expression ‫إىل‬ “ true ‫الجملة‬ ‫تنفيذ‬ ‫فسيتم‬ ، ” statement ‫جسم‬ ‫تنفيذ‬ ‫فسيتم‬ ، ً ‫ا‬ ً ‫صحيح‬ ‫ال‬‫ز‬‫ي‬ ‫ال‬ ‫كان‬‫إذا‬ ‫ر‬ ‫التعبت‬ ‫تقييم‬ ‫إعادة‬ ‫ثم‬ “ ‫الحلقة‬ ‫تخرج‬ .‫وهكذا‬ ،‫أخرى‬ ‫مرة‬ ‫الحلقة‬ ‫يتم‬ ‫أي‬ ً ‫ا‬ ً ‫صحيح‬ ‫ر‬ ‫التعبت‬ ‫يكون‬ ‫ال‬ ‫عندما‬ ‫عىل‬ ‫تقييمه‬ false . ‫األعداد‬ ‫تضيف‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫بعض‬ ‫إليك‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫من‬ ‫الصحيحة‬ 1 ‫إىل‬ 10 : $total = 0; $i = 1; while ($i <= 10) { $total += $i; $i++; } ‫ل‬ ‫البديلة‬ ‫الصيغة‬ while :‫البنية‬ ‫هذه‬ ‫لها‬ while (expr): statement; more statements ; endwhile;
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 327 :‫كمثال‬ $total = 0; $i = 1; while ($i <= 10): $total += $i; $i++; endwhile; ‫األساسية‬ ‫الكلمة‬ ‫باستخدام‬ ‫األوان‬ ‫قبل‬ ‫حلقة‬ ‫من‬ ‫الخروج‬ ‫يمكنك‬ break . $total = 0; $i = 1; while ($i <= 10) { if ($i == 5) { break; // breaks out of the loop } $total += $i; $i++; } ‫جملة‬ ‫تتخط‬ continue .‫الحلقة‬ ‫لحالة‬ ‫ي‬ ‫التاىل‬‫االختبار‬ ‫إىل‬ ‫تدعم‬ PHP ‫حلقة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ do/while : ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫تأخذ‬ ‫ي‬ ‫ر‬ ‫والت‬ ، do statement while(expression)
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 328 ‫حلقة‬ ‫استخدم‬ do/while ‫واحدة‬ ‫مرة‬ ‫الحلقة‬ ‫جسم‬ ‫تنفيذ‬ ‫لضمان‬ ‫األقل‬ ‫عىل‬ - :‫األوىل‬ ‫المرة‬ $total = 0; $i = 1; do { $total += $i++; } while ($i <= 10); ‫جمل‬ ‫استخدام‬ ‫يمكنك‬ break ‫و‬ continue ‫جمل‬ ‫ي‬ ‫ف‬ do / while ‫هو‬ ‫كما‬ ً ‫ا‬ ً‫تمام‬ ‫جملة‬ ‫ي‬ ‫ف‬ ‫الحال‬ while .‫العادية‬ for ‫الجملة‬ for ‫لجملة‬ ‫مشابهة‬ while ” ‫عدادات‬ ‫تضيف‬ ‫أنها‬ ‫إال‬ ، counter initialization ‫حلقة‬ ‫جمل‬ ‫من‬ ‫اءة‬‫ر‬‫الق‬ ‫ي‬ ‫ف‬ ‫وأسهل‬‫أقرص‬ ‫تكون‬ ‫ما‬ ً ‫ا‬ً‫وغالب‬ ، “ .while ‫حلقة‬ ‫إليك‬ while ‫من‬‫تعد‬ ‫ي‬ ‫ر‬ ‫الت‬ 2 ‫إىل‬ 9 :‫رقم‬ ‫كل‬‫وطباعة‬ ، $counter = 0; while ($counter < 10) { echo "Counter is {$counter} <br/>"; $counter++; }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 329 ‫حلقة‬ ‫إليك‬ for :‫المقابلة‬ for ($counter = 0; $counter < 10; $counter++) { echo "Counter is $counter <br/>"; } ‫الجملة‬ ‫بنية‬ for :‫هو‬ for (start; condition; increment) { statement(s); } ” ‫بداية‬ ‫تقييم‬ ‫يتم‬ start ” ‫ر‬ ‫التعبت‬ “ expression ‫جملة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ،‫واحدة‬ ‫مرة‬ “ for . ” ‫ط‬ ‫ر‬ ‫رس‬ ‫اختبار‬ ‫يتم‬، ‫الحلقة‬ ‫خالل‬ ‫مرة‬ ‫كل‬ ‫ي‬ ‫ف‬ condition ‫هذا‬ ‫كان‬ ‫إذا‬ . ‫ر‬ ‫التعبت‬ “ ‫تقييم‬ ‫يتم‬ .‫الحلقة‬ ‫ي‬ ‫تنته‬ ،‫خاطئة‬ ‫كانت‬ ‫إذا‬ ‫الحلقة‬ ‫جسم‬ ‫تنفيذ‬ ‫فسيتم‬ ، ً ‫ا‬ ً ‫صحيح‬ ” ‫زيادة‬ increment .‫الحلقة‬ ‫جسم‬ ‫تشغيل‬ ‫بعد‬ ‫ر‬ ‫التعبت‬ “ ‫لجملة‬ ‫البديلة‬ ‫الصيغة‬ for : ‫ي‬ ‫ه‬ for (expr1; expr2; expr3): statement; ... ; endfor; ‫من‬ ‫األرقام‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫هذا‬ ‫يضيف‬ 1 ‫إىل‬ 10 ‫حلقة‬ ‫باستخدام‬ for : $total = 0; for ($i= 1; $i <= 10; $i++) { $total += $i; }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 330 ‫ي‬ ‫ف‬ .‫المرحلة‬ ‫لهذه‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫أي‬ ‫فعل‬ ‫ي‬ ‫ينبغ‬ ‫ال‬ ‫أنه‬ ‫إىل‬ ‫ر‬ ‫يشت‬ ‫مما‬ ،‫غ‬ ‫فار‬ ‫ر‬ ‫تعبت‬ ‫ترك‬ ‫يمكنك‬ ‫جملة‬ ‫تصبح‬ ،‫ا‬‫ز‬‫إيجا‬ ‫ر‬ ‫األكت‬ ‫الشكل‬ for ‫هذا‬ ‫تشغيل‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫ال‬ ‫بما‬‫ر‬ .‫نهائية‬ ‫ال‬ ‫حلقة‬ :‫الطباعة‬ ‫عن‬ ‫يتوقف‬ ‫ال‬ ‫ألنه‬ ،‫المثال‬ for (;;) { echo "Can't stop me!<br />"; } ‫حلقات‬ ‫ي‬ ‫ف‬ for ‫كما‬، ‫حلقات‬ ‫ي‬ ‫ف‬ ‫الحال‬‫هو‬ while ‫الرئيسية‬ ‫الكلمات‬ ‫استخدام‬ ‫يمكنك‬ ، break ‫و‬ continue . ‫ي‬ ‫الحاىل‬‫ار‬‫ر‬‫التك‬ ‫أو‬ ‫الحلقة‬ ‫إلنهاء‬ foreach ‫جملة‬ ‫لك‬ ‫تسمح‬ foreach .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫العناص‬‫ار‬‫ر‬‫بتك‬ foreach ($array as $current) { // ... } : ‫ي‬ ‫ه‬ ‫البديلة‬ ‫الصيغة‬ foreach ($array as $current): // ... endforeach; :‫استخدم‬ ،‫والقيمة‬ ‫المفتاح‬ ‫من‬ ‫كل‬‫إىل‬ ‫للوصول‬ ‫مصفوفة‬ ‫عىل‬‫ار‬‫ر‬‫للتك‬ foreach ($array as $key => $value) { // ... }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 331 : ‫ي‬ ‫ه‬ ‫البديلة‬ ‫الصيغة‬ foreach ($array as $key => $value): // ... endforeach; exit and return ‫جملة‬ ‫ي‬ ‫تنه‬ ،‫إليها‬ ‫الوصول‬ ‫بمجرد‬ exit ‫جملة‬ ‫ترجع‬ . ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ return .‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫األعىل‬ ‫المستوى‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫أو‬ ‫دالة‬ ‫من‬ ‫جملة‬ exit ‫من‬ ‫الخروج‬ ‫حالة‬ ‫يمثل‬ ‫فهو‬ ، ً ‫ا‬ ً‫رقم‬ ‫هذا‬ ‫كان‬ ‫إذا‬ .‫اختيارية‬ ‫قيمة‬ ‫تأخذ‬ ‫تتم‬ ،‫سلسلة‬ ‫كانت‬‫إذا‬ .‫العملية‬ ‫الدالة‬ .‫العملية‬ ‫إنهاء‬ ‫قبل‬ ‫القيمة‬ ‫طباعة‬ die() ‫ي‬ ‫ه‬ ‫لجملة‬‫مستعار‬ ‫اسم‬ exit : $db = mysql_connect("localhost", $USERNAME, $PA SSWORD); if (!$db) { die("Could not connect to database"); }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 332 ‫كود‬ ‫ر‬ ‫تضمي‬ ‫توفر‬ PHP ‫و‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫لتحميل‬ ‫ر‬ ‫بنائي‬ HTML :‫أخرى‬ ‫نمطية‬ ‫وحدة‬ ‫من‬ require ‫و‬ include ‫برنامج‬ ‫تشغيل‬ ‫أثناء‬ ‫ملف‬ ‫بتحميل‬ ‫يقوم‬ ‫كالهما‬ . PHP ‫ال‬ ‫أن‬ ‫هو‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ، ‫والحلقات‬ ‫طية‬ ‫ر‬ ‫الش‬ ‫ي‬ ‫ف‬ ‫ويعمالن‬ ، ‫ي‬ ‫نص‬ require ‫يظهر‬ ‫موجود‬ ‫ر‬ ‫غت‬ ‫ملف‬ ‫طلبت‬ ‫إذا‬ fatal error ‫ر‬ ‫تضمي‬ ‫محاولة‬ ‫بينما‬ ، ” include ‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ ‫توقف‬ ‫ال‬ ‫ولكنها‬ ً ‫ا‬ً ‫تحذير‬ ‫تنتج‬ ‫الملف‬ ‫هذا‬ ‫مثل‬ “ . ‫ي‬ ‫النص‬ ‫مثل‬ ‫وضع‬ ‫يتم‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫والتذييالت‬ ‫الرؤوس‬ HTML ‫كل‬‫تبدو‬ ‫ذلك‬ ‫وبعد‬ ،‫منفصلة‬ : ‫ي‬ ‫يىل‬ ‫كما‬‫صفحة‬ <?php include "header.html"; ?> content <?php include "footer.html"; ?> ‫نستخدم‬ ” ‫ر‬ ‫التضمي‬ include ‫ل‬ ‫يسمح‬ ‫ألنه‬ “ PHP ‫الصفحة‬ ‫معالجة‬ ‫بمواصلة‬ ‫ملف‬ ‫ي‬ ‫ف‬ ‫خطأ‬ ‫هناك‬ ‫كان‬‫إذا‬ ‫ر‬ ‫حت‬ ( ‫ملفات‬ ) ‫ال‬. ‫الموقع‬ ‫تصميم‬ require ‫أقل‬ ‫يمكن‬ ‫ال‬ ‫حيث‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫مكتبات‬ ‫لتحميل‬ ‫مالءمة‬ ‫ر‬ ‫أكت‬ ‫وتكون‬ ً ‫تسامحا‬ :‫فمثال‬ .‫المكتبات‬ ‫تحميل‬ ‫يتم‬ ‫لم‬ ‫إذا‬ ‫الصفحة‬ ‫عرض‬ require "codelib.php";
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 333 ‫تستطع‬ ‫لم‬ ‫إذا‬ PHP ‫ر‬ ‫التضمي‬ ‫بواسطة‬ ‫المضاف‬ ‫الملف‬ ‫من‬ ‫جزء‬ ‫تحليل‬ ” include ” ‫الطلب‬ ‫أو‬ “ require .‫التنفيذ‬ ‫ويستمر‬ ‫تحذير‬ ‫طباعة‬ ‫تتم‬ ،“ ‫عالمة‬ ‫بكتابة‬ ‫التحذير‬ ‫إخفاء‬ ‫يمكنك‬ ( @ ) ‫اإلستدعاء‬ ‫قبل‬ @include . ‫ب‬ ‫المضمنة‬ ‫الملفات‬ ‫تسمية‬ ‫يمكن‬ include ‫و‬ require . ‫ي‬ ‫تعسق‬ ‫بشكل‬ : ‫ي‬ ‫ه‬ ‫الشائعة‬ ‫االمتدادات‬ .php, .php5, and .html. ‫ا‬ ‫ستخدم‬ include ‫أو‬ require ‫ي‬ ‫ف‬ ‫الخطأ‬ ‫طريق‬ ‫عن‬ ‫الملف‬ ‫نفس‬ ‫ر‬ ‫لتضمي‬ ‫ال‬ ‫وتشغيل‬ ‫الملف‬ ‫تحميل‬ ‫يتم‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ ،‫حلقة‬ ‫ك‬ ‫طباعة‬‫أو‬ ،‫ود‬ HTML ‫إرسا‬ ‫أو‬ ،‫الوظائف‬ ‫تعريف‬ ‫إعادة‬ ‫حول‬ ‫أخطاء‬ ‫إىل‬ ‫هذا‬ ‫يؤدي‬ ‫أن‬ ‫يمكن‬. ‫ر‬ ‫مرتي‬ ‫نسخ‬ ‫ل‬ ‫أو‬ ‫الرؤوس‬ ‫من‬ ‫متعددة‬ HTML . ‫استخدم‬ ،‫األخطاء‬ ‫هذه‬ ‫حدوث‬ ‫لمنع‬ include_once ‫و‬ require_once ‫سلوك‬ ‫بنفس‬ ‫تترصف‬ . include ‫و‬ require ‫المرة‬ ‫الالحقة‬ ‫المحاوالت‬ ‫بهدوء‬ ‫تتجاهل‬ ‫لكنها‬ ،‫الملف‬ ‫تحميل‬ ‫فيها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األوىل‬ ‫كل‬،‫الصفحة‬ ‫عناص‬ ‫من‬ ‫العديد‬ ‫تحتاج‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫الملف‬ ‫نفس‬ ‫لتحميل‬ ‫يجب‬ . ‫ي‬ ‫الحاىل‬ ‫المستخدم‬ ‫تفضيالت‬ ‫معرفة‬ ‫إىل‬ ،‫منفصلة‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫مخزنة‬ ‫واحدة‬ ‫تفضيال‬ ‫مكتبة‬ ‫بتحميل‬ ‫العناص‬ ‫مكتبات‬ ‫تقوم‬ ‫أن‬ ‫مع‬ ‫المستخدم‬ ‫ت‬ require_once ‫صفحة‬ ‫عنرص‬ ‫ر‬ ‫تضمي‬ ‫ذلك‬ ‫بعد‬ ‫الصفحة‬ ‫لمصمم‬ ‫يمكن‬ . .‫بالفعل‬ ‫المستخدم‬ ‫تفضيل‬ ‫كود‬‫تحميل‬ ‫تم‬ ‫قد‬ ‫كان‬‫إذا‬ ‫ما‬ ‫بشأن‬ ‫القلق‬ ‫دون‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 334 ‫دالة‬ ‫استخدم‬ get_included_files() ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الملفات‬ ‫لمعرفة‬ ‫عىل‬ ‫تحتوي‬ ‫مصفوفة‬ ‫بإرجاع‬ ‫تقوم‬ . ‫ي‬ ‫ر‬ ‫مح‬ ‫ر‬ ‫الت‬ ‫النص‬ ‫ي‬ ‫ف‬‫طلبها‬‫أو‬‫تضمينها‬ ‫ملفات‬ ‫أسماء‬ .‫مطلوب‬ ‫أو‬ ‫مضمن‬ ‫ملف‬ ‫لكل‬ ‫الكاملة‬ ‫النظام‬‫مسار‬ ‫تضمين‬ PHP ‫الويب‬ ‫صفحات‬ ‫في‬ ‫امج‬‫ر‬‫ب‬ ‫وتشغيل‬ ‫كتابة‬‫الممكن‬ ‫من‬ ‫أنه‬ ‫من‬ ‫الرغم‬ ‫عىل‬ PHP ‫أكواد‬ ‫معظم‬ ‫فإن‬ ،‫مستقلة‬ PHP ‫ي‬ ‫ف‬ ‫مضمنة‬ ‫اكواد‬ HTML . ‫المقام‬ ‫ي‬ ‫ف‬ ‫إنشائها‬ ‫سبب‬ ‫هو‬ ،‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫بعد‬ ،‫هذا‬ .‫األول‬ ‫كود‬‫إلضافة‬ ‫اشكال‬ ‫عدة‬ ‫يوجد‬ php ‫ر‬ ‫األكت‬‫هو‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫الويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ . ً ‫استخداما‬ <?php echo "Hello, world"; ?> HTML : ‫ي‬ ‫يىل‬ ‫كما‬‫هذا‬ ‫يبدو‬ ،‫كامل‬ <!doctype html> <html> <head> <title>This is my first PHP program!</title> </head> <body> <p> Look, ma! It's my first PHP program:<br /> <?php echo "Hello, world"; ?><br /> How cool is tha t? </p> </body> </html> ‫مصدر‬ ‫كود‬‫ل‬ ‫أثر‬ ‫أي‬ ‫يوجد‬ ‫ال‬ ‫أنه‬ ‫الحظ‬ PHP ‫الملف‬ ‫من‬ ‫الخرج‬ ‫المستخدم‬ ‫يرى‬ . .‫ناتجه‬ ‫فقط‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 335 ‫الدوال‬ :‫الدالة‬ ‫وربما‬ ،‫محددة‬ ‫مهمة‬ ‫تؤدي‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫مسماة‬ ‫كتلة‬ ‫عن‬ ‫عبارة‬ ‫باسم‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫تعرف‬، ‫لها‬ ‫المعطاة‬ ‫القيم‬ ‫من‬ ‫مجموعة‬ ‫عىل‬ ‫تعمل‬ ‫الوسطاء‬ ” parameters ‫تعمل‬ .‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫من‬ ‫مجموعة‬‫أو‬ ‫واحدة‬ ‫قيمة‬ ‫تعيد‬ ‫وربما‬ ،“ ‫الدوال‬ ‫أ‬ ‫أي‬ ‫بإصالح‬ ‫لك‬ ‫السماح‬ ‫خالل‬ ‫من‬ ‫الموثوقية‬ ‫ر‬ ‫تحسي‬ ‫عىل‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫خطاء‬ ‫واحد‬ ‫بدال‬ ‫اءة‬‫ر‬‫الق‬ ‫إمكانية‬ ‫ر‬ ‫تحسي‬ ‫عىل‬ ‫تعمل‬ ‫كما‬ ،‫ما‬ ‫بمهمة‬ ‫فيه‬ ‫تقوم‬ ‫مكان‬ ‫أي‬ ‫من‬ .‫محددة‬ ‫مهام‬ ‫تؤدي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫عزل‬ ‫طريق‬ ‫عن‬ ‫الدالة‬ ‫استدعاء‬ ‫برنامج‬ ‫ي‬ ‫ف‬ ‫الدوال‬ ‫دمج‬ ‫يمكن‬ PHP ‫قبل‬ ‫من‬ ‫معرفة‬ ‫أو‬ ،‫ملحق‬ ‫ي‬ ‫ف‬ ‫كونها‬‫خالل‬ ‫من‬ ‫أو‬ ‫م‬ ‫عن‬ ‫النظر‬ ‫بغض‬ .‫المستخدم‬ :‫الطريقة‬ ‫بنفس‬ ‫الدوال‬ ‫جميع‬ ‫تقييم‬ ‫يتم‬ ،‫صدرها‬ $someValue = function_name( [ parameter, ... ] ); ‫الوسطاء‬ ‫عدد‬ ‫يختلف‬ parameters ‫أخرى‬ ‫إىل‬ ‫دالة‬ ‫من‬ ‫الدالة‬ ‫تتطلبها‬ ‫ي‬ ‫ر‬ ‫الت‬ . ‫قد‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫تكون‬ ‫أن‬ ‫ويجب‬ ‫صالح‬ ‫ر‬ ‫تعبت‬ ‫أي‬ ‫للدالة‬ ‫ها‬ ‫ر‬ ‫توفت‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسطاء‬ ‫تكون‬ ‫الدالة‬ ‫تشتغل‬ ‫فقد‬ ،‫تيب‬ ‫ر‬ ‫الت‬ ‫خارج‬ ‫الوسطاء‬ ‫إعطاء‬ ‫تم‬ ‫إذا‬ .‫الدالة‬ ‫تتوقعه‬ ‫الذي‬‫المحدد‬ ً ‫عشوائيا‬ . :‫الدوال‬ ‫عىل‬ ‫األمثلة‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ // strlen() ‫ترجع‬ ‫مضمنة‬ ‫دالة‬ ‫هي‬ ‫السلسلة‬ ‫طول‬ $length = strlen("PHP"); // $length ‫االن‬ 3
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 336 // sin() ‫و‬ asin() ‫رياضية‬ ‫دوال‬ ‫هي‬ $result = sin(asin(1)); // $result is the sine of arcsin(1), or 1.0 // unlink() ‫ملف‬ ‫تحذف‬ $result = unlink("functions.txt"); // $result = true or false depending on success or failure " ‫المدخل‬ ‫ي‬ ‫نعط‬ ،‫األول‬ ‫المثال‬ ‫ي‬ ‫ف‬ PHP ‫للدالة‬ " strlen() ‫عدد‬ ‫تعطينا‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫بإرجاع‬ ‫تقوم‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫المتوفرة‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫األحرف‬ 3 ‫تخصيصها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫ر‬ ‫للمتغت‬ $length ً‫شيوع‬ ‫ر‬ ‫واألكت‬ ‫األبسط‬ ‫الطريقة‬ ‫ي‬ ‫ه‬ ‫هذه‬ . .‫دالة‬ ‫الستخدام‬ ً ‫ا‬ ‫نتيجة‬ ‫يمرر‬ ‫ي‬ ‫الثان‬ ‫المثال‬ asin(1) ‫دالة‬ ‫إىل‬ sin() ‫الجيب‬ ‫ي‬ ‫ر‬ ‫دالت‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ . .‫القيمة‬ ‫نفس‬ ً ‫ا‬ ً‫دائم‬ ‫سيعيد‬ ‫قيمة‬ ‫ألي‬ ‫القوس‬ ‫جيب‬ ‫أخذ‬ ‫فإن‬ ،‫انعكاسات‬ ‫ي‬ ‫ه‬ ‫والقوس‬ ‫المرجعة‬ ‫القيمة‬ ‫إرسال‬ ‫يتم‬ .‫أخرى‬ ‫دالة‬ ‫داخل‬ ‫دالة‬ ‫استدعاء‬ ‫يمكن‬ ‫أنه‬ ‫هنا‬ ‫نرى‬ ‫إىل‬ ‫ي‬ ‫الداخىل‬ ‫لإلستدعاء‬ ‫ي‬ ‫ف‬ ‫وتخزينها‬ ‫اإلجمالية‬ ‫النتيجة‬ ‫إرجاع‬ ‫قبل‬ ‫الخارجية‬ ‫الدالة‬ ‫ر‬ ‫متغت‬ $result ‫ملف‬ ‫اسم‬ ‫ي‬ ‫نعط‬ ، ‫ر‬ ‫األخت‬ ‫المثال‬ ‫ي‬ ‫ف‬ ‫ل‬ ‫لدالة‬ unlink() .‫الملف‬ ‫حذف‬ ‫تحاول‬ ‫ي‬ ‫ر‬ ‫الت‬ ، ‫ترجع‬ ‫فإنها‬ ،‫الدوال‬ ‫من‬ ‫العديد‬ ‫مثل‬ false ‫استخدام‬ ‫ذلك‬ ‫لك‬ ‫يتيح‬ .‫تفشل‬ ‫عندما‬ ‫أخرى‬ ‫مضمنة‬ ‫دالة‬ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 337 ‫تحتوي‬ PHP ‫ي‬ ‫ف‬ ‫لتستخدمها‬ ‫بالفعل‬ ‫المحددة‬ ‫الدوال‬ ‫من‬ ‫ة‬ ‫ر‬ ‫كبت‬ ‫مجموعة‬ ‫عىل‬ ‫وإنشاء‬ ‫البيانات‬ ‫قواعد‬ ‫إىل‬ ‫الوصول‬ ‫مثل‬ ‫مهام‬ ‫الملحقات‬ ‫هذه‬ ‫تؤدي‬ .‫امجك‬‫ر‬‫ب‬ ‫ملفات‬ ‫اءة‬‫ر‬‫وق‬ ‫الرسومات‬ XML ‫البعيدة‬ ‫األنظمة‬ ‫من‬ ‫الملفات‬ ‫عىل‬ ‫والحصول‬‫وكتابتها‬ .‫ذلك‬ ‫ر‬ ‫وغت‬ ‫الدالة‬ ‫تعريف‬ ‫التا‬ ‫الصيغة‬ ‫استخدم‬ ،‫دالة‬ ‫لتعريف‬ :‫لية‬ function [&] function_name([parameter[, ...]]) { ‫قائمة‬ ‫من‬ ‫الجمل‬ } ‫الجمل‬ ‫قائمة‬ ‫تتضمن‬ ‫أن‬ ‫يمكن‬ HTML ‫دالة‬ ‫تعريف‬ ‫يمكنك‬ . PHP ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫كود‬‫أي‬ PHP . ‫أو‬ ‫بصفر‬ ‫متبوعة‬ ‫سفلية‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫أو‬ ‫بحرف‬ ‫تبدأ‬ ‫سلسلة‬ ‫أي‬ ‫الدالة‬ ‫اسم‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫لحالة‬ ‫حساسة‬ ‫ر‬ ‫غت‬ ‫الدالة‬ ‫أسماء‬ .‫واألرقام‬ ‫السفلية‬ ‫طات‬ ‫ر‬ ‫والش‬ ‫األحرف‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫دالة‬ ‫استدعاء‬ ‫يمكنك‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ ‫األحرف‬ strlen() ‫ك‬ StrLen(), STRlen() ‫الد‬ ‫نفس‬ ‫إىل‬ ‫ر‬ ‫تشت‬ ‫األسماء‬ ‫هذه‬ ‫كل‬‫ألن‬ ،‫وهكذا‬ ‫استدعاء‬ ‫يتم‬ ،‫االصطالح‬ ‫حسب‬ .‫الة‬ ‫دوال‬ PHP .‫ة‬ ‫ر‬ ‫صغت‬ ‫بأحرف‬ ‫المدمجة‬ ‫جملة‬ ‫استخدم‬ ،‫دالة‬ ‫من‬ ‫قيمة‬ ‫إلرجاع‬ .‫القيم‬ ‫بعض‬ ‫الدوال‬ ‫ترجع‬ ‫ما‬ ً ‫عادة‬ return ‫ضع‬ return expr ‫جملة‬ ‫مصادفة‬ ‫عند‬ .‫دالتك‬ ‫داخل‬ return ‫يعود‬ ،‫التنفيذ‬ ‫أثناء‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 338 ‫ل‬ ‫المقيمة‬ ‫النتائج‬ ‫إرجاع‬ ‫وسيتم‬ ،‫االستدعاء‬ ‫جملة‬ ‫إىل‬ ‫التحكم‬ ‫عنرص‬ expr ‫كقيمة‬ .‫للدالة‬ .‫بسيطة‬ ‫دالة‬ ‫ر‬ ‫وسيطي‬ ‫لديها‬ ، ‫ر‬ ‫سلسلتي‬ ‫بدمجهما‬ ‫تقوم‬ ‫النتيجة‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫ثم‬ ، . function strcat($left, $right) { $combinedString = $left . $right; return $combinedString; } ، ‫ر‬ ‫مدخلي‬ ‫الدالة‬ ‫تأخذ‬ $left ‫و‬ $right ‫عامل‬ ‫باستخدام‬ . ‫الدمج‬ ‫سلسلة‬ ‫الدالة‬ ‫ر‬ ‫ىس‬ ُ ‫ن‬ ُ ‫ت‬ ، ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ ‫مجمعة‬ $combinedString ‫القيمة‬ ‫نعيد‬ ، ً ‫ا‬ً ‫ر‬ ‫أخت‬ . .$combinedString ‫تبسيط‬ ‫يمكننا‬ ‫الكود‬ :‫هنا‬ ‫موضح‬ ‫هو‬ ‫كما‬ function strcat($left, $right) { return $left . $right; }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 339 Variable Scope ‫متغير‬ ‫نطاق‬ ‫مكان‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫بإنشائه‬ ‫تقوم‬ ‫ر‬ ‫متغت‬ ‫أي‬ ‫استخدام‬ ‫فيمكن‬ ،‫الدوال‬ ‫تستخدم‬ ‫ال‬ ‫كنت‬‫إذا‬ ‫بمجموعات‬ ‫الدوال‬ ‫تحتفظ‬ . ً ‫ا‬ ً‫دائم‬ ً ‫ا‬ ً ‫صحيح‬ ‫ليس‬ ‫هذا‬ ،‫الدوال‬ ‫مع‬ .‫بالصفحة‬ ‫الدوال‬ ‫وعن‬ ‫بالصفحة‬ ‫الخاصة‬ ‫تلك‬ ‫عن‬ ‫تختلف‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫بها‬ ‫الخاصة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ .‫األخرى‬ ‫يمك‬ ‫ال‬ ‫ذلك‬ ‫ي‬ ‫ف‬‫بما‬ ،‫دالة‬ ‫ي‬ ‫ف‬ ‫المحددة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الوصول‬ ‫ن‬ ‫وسطائها‬ ،‫الدالة‬ ‫خارج‬ ، ‫يوضح‬ .‫الدالة‬ ‫داخل‬ ‫الدالة‬ ‫خارج‬ ‫المحددة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الوصول‬ ‫يمكن‬ ‫ال‬ ، ً ‫ا‬ً‫اضي‬ ‫ر‬ ‫وافت‬ :‫هذا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ $a = 3; function foo() { $a += 2; } foo(); echo $a; ‫ر‬ ‫المتغت‬ $a ‫الدالة‬ ‫داخل‬ foo() ‫ر‬ ‫المتغت‬ ‫عن‬ ‫مختلف‬ ‫ر‬ ‫متغت‬ ‫هو‬ $a ‫قيمة‬ ‫الدالة‬ ‫خارج‬ $a ‫ر‬ ‫تبق‬ ‫الخارجية‬ 3 ‫قيمة‬، ‫الدالة‬ ‫داخل‬ .‫الصفحة‬‫عمر‬ ‫طوال‬ $a ‫ي‬ ‫ه‬ 2 . ‫نامج‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫فيه‬ ‫ى‬ ُ ‫ر‬ُ‫ي‬ ‫أن‬ ‫يمكن‬ ‫الذي‬ ‫المدى‬ ‫فإن‬ ، ‫ي‬ ‫الثان‬ ‫الفصل‬ ‫ي‬ ‫ف‬ ‫ناقشنا‬ ‫كما‬ . ‫ر‬ ‫المتغت‬ ‫نطاق‬ ‫يسىم‬ ‫إنشاؤها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫الدالة‬ ‫نطاق‬ ‫داخل‬ ‫موجودة‬ ‫دالة‬ ‫داخل‬ ( ‫عىل‬ ‫نطاق‬ ‫لها‬ ‫أي‬ ‫الدالة‬ ‫مستوى‬ ) . ‫ي‬ ‫عالىم‬ ‫نطاق‬ ‫لها‬ ‫والكائنات‬ ‫الدوال‬ ‫خارج‬ ‫إنشاؤها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ Global ‫وتوجد‬ ‫توفرها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫بعض‬ .‫والكائنات‬ ‫الدوال‬ ‫تلك‬ ‫خارج‬ ‫مكان‬ ‫أي‬ ‫ي‬ ‫ف‬ PHP ‫نطاق‬‫لها‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 340 ‫ي‬ ‫عالىم‬ ‫ونطاق‬ ‫دالة‬ ( ً ‫ا‬ً‫غالب‬ ‫إليها‬ ‫يشار‬ ‫الفائقة‬ ‫العالمية‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫باسم‬ super- global variables ) . ‫المتغيرات‬ ‫او‬ ‫العامة‬ ‫العالمية‬ ‫استخدام‬ ‫يمكنك‬ ،‫دالة‬ ‫داخل‬ ‫من‬ ‫العام‬ ‫النطاق‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫الوصول‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫األساسية‬ ‫الكلمة‬ global :‫هو‬ ‫كيبها‬ ‫تر‬ . global var1, var2, ... ; ‫الكلمة‬ ‫ر‬ ‫لتضمي‬ ‫السابق‬ ‫المثال‬ ‫ر‬ ‫بتغيت‬ ‫الرئيسية‬ global :‫عىل‬ ‫نحصل‬ ، $a = 3; function foo() { global $a; $a += 2; } foo(); echo $a; ‫يسىم‬ ‫جديد‬ ‫ر‬ ‫متغت‬ ‫إنشاء‬ ‫من‬ ً ‫بدال‬ $a ،‫الدالة‬ ‫مستوى‬ ‫عىل‬ ‫بنطاق‬ PHP ‫تستخدم‬ global $a ‫الدالة‬ ‫داخل‬ ‫قيمة‬ ‫عرض‬ ‫يتم‬ ‫عندما‬ ،‫اآلن‬ $a ‫ستكون‬ ، 5 . ‫األساسية‬ ‫الكلمة‬ ‫ر‬ ‫تضمي‬ ‫عليك‬ ‫يجب‬ global ‫ر‬ ‫للمتغت‬ ‫استخدامات‬ ‫أي‬ ‫قبل‬ ‫دالة‬ ‫ي‬ ‫ف‬ ‫ا‬ ‫تريد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أو‬ ‫العام‬ ‫جسم‬ ‫قبل‬ ‫عنها‬ ‫اإلعالن‬ ‫يتم‬ ‫ألنه‬ ً ‫ا‬ً ‫نظر‬ .‫إليها‬ ‫لوصول‬ ‫تكون‬ ‫أن‬ ً ‫ا‬ ً ‫أبد‬ ‫يمكن‬ ‫ال‬ ،‫الدالة‬ ‫وسطاء‬ .‫عامة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫الدالة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 341 ‫الثابتة‬ ‫المتغيرات‬ static ‫تدعم‬ PHP ” ‫ثابتة‬ ‫بأنها‬ ‫الدالة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫تعريف‬ static ‫الثابت‬ ‫ر‬ ‫المتغت‬ ‫يحتفظ‬ .“ ‫ي‬ ‫ف‬ ‫فقط‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ ‫أثناء‬ ‫تهيئته‬ ‫ويتم‬ ‫الدالة‬ ‫استدعاءات‬ ‫جميع‬ ‫ر‬ ‫بي‬ ‫بقيمته‬ .‫الدالة‬ ‫استدعاء‬ ‫فيها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األوىل‬ ‫المرة‬ ‫األساسية‬ ‫الكلمة‬ ‫استخدم‬ static ‫أنها‬ ‫عن‬ ‫لإلعالن‬ ‫دالة‬ ‫ر‬ ‫لمتغت‬ ‫استخدام‬ ‫أول‬ ‫عند‬ ‫لم‬ ‫استخدام‬ ‫أول‬ ‫يخصص‬ ‫ما‬ ً ‫عادة‬ .‫ثابتة‬ :‫أولية‬ ‫قيمة‬ ‫ثابت‬ ‫ر‬ ‫تغت‬ static var [= value][, ... ]; ‫ر‬ ‫المتغت‬ ‫زيادة‬ ‫يتم‬ ‫المثال‬ ‫ي‬ ‫ف‬ $count .‫الدالة‬ ‫استدعاء‬ ‫يتم‬ ‫مرة‬ ‫كل‬ ‫ي‬ ‫ف‬ ‫واحد‬ ‫بمقدار‬ function counter() { static $count = 0; return $count++; } for ($i = 1; $i <= 5; $i++) { print counter(); } ‫قيمة‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ،‫مرة‬ ‫ألول‬ ‫الدالة‬ ‫استدعاء‬ ‫يتم‬ ‫عندما‬ 0 ‫الثابت‬ ‫ر‬ ‫للمتغت‬ $count . ‫وزيادة‬ ‫القيمة‬ ‫إرجاع‬ ‫يتم‬ $count ‫إتالف‬ ‫يتم‬ ‫ال‬ ،‫الدالة‬ ‫ي‬ ‫تنته‬‫عندما‬ . $count ‫ر‬ ‫كمتغت‬ ‫استدعاء‬ ‫يتم‬ ‫ر‬ ‫حت‬ ‫ي‬ ‫ه‬ ‫كما‬‫قيمتها‬ ‫وتظل‬ ،‫ثابت‬ ‫ر‬ ‫غت‬ counter() ‫تعرض‬ .‫التالية‬ ‫المرة‬ ‫حلقة‬ for ‫األ‬ ‫من‬ ‫رقام‬ 0 ‫إىل‬ 4 .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 342 ‫الدالة‬ ‫وسطاء‬ ‫بواسطة‬ ‫تحديدها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ،‫المدخالت‬ ‫من‬ ً ‫ا‬ً‫تعسفي‬ ً ‫ا‬ ً ‫عدد‬ ‫الدوال‬ ‫تتوقع‬ ‫أن‬ ‫يمكن‬ ‫ر‬ ‫واألكت‬ ‫األول‬ .‫دالة‬ ‫إىل‬ ‫الوسطاء‬ ‫لتمرير‬ ‫مختلفتان‬ ‫طريقتان‬ ‫هناك‬ .‫الدالة‬ ‫تعريف‬ ” ‫القيمة‬‫هو‬ ً ‫شيوعا‬ value ‫ي‬ ‫والثان‬ .“ ‫بالمرجع‬ reference ‫تمرير‬ ‫بالقيمة‬ ‫الوسطاء‬ ‫المدخل‬. ‫القيمة‬ ‫حسب‬ ‫الوسطاء‬ ‫بتمرير‬ ‫تقوم‬ ،‫الحاالت‬ ‫معظم‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫تعبت‬ ‫أي‬ ‫هو‬ ‫ي‬ ‫ف‬ ‫المناسب‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الناتجة‬ ‫القيمة‬ ‫ر‬ ‫تعيي‬ ‫ويتم‬ ، ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫تقييم‬ ‫يتم‬ .‫صالح‬ .‫بالقيمة‬ ‫المدخالت‬ ‫مررنا‬ ،‫اآلن‬ ‫ر‬ ‫حت‬ ‫األمثلة‬ ‫جميع‬ ‫ي‬ ‫ف‬ .‫الدالة‬ ‫المرجع‬ ‫حسب‬ ‫الوسطاء‬ ‫تمرير‬ ‫وإعطاء‬ ‫العادية‬ ‫النطاق‬ ‫تحديد‬ ‫قواعد‬ ‫بتجاوز‬ ‫المرجع‬ ‫حسب‬ ‫التمرير‬ ‫لك‬ ‫يسمح‬ ً ‫وصوال‬ ‫الدالة‬ . ‫ر‬ ‫المتغت‬ ‫إىل‬ ً ‫ا‬ً ‫ر‬ ‫مبارس‬ ‫أن‬ ‫إىل‬ ‫ر‬ ‫تشت‬ ‫أنت‬ ً ‫ا‬ً ‫ر‬ ‫متغت‬ ‫المدخل‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ،‫المرجع‬ ‫طريق‬ ‫عن‬ ‫تمريرها‬ ‫ليتم‬ ‫قائمة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫طريق‬ ‫عن‬ ‫المرجع‬ ‫طريق‬ ‫عن‬ ‫تمريره‬ ‫سيتم‬ ‫للدالة‬ ‫ر‬ ‫معي‬ ‫مدخل‬ ‫العطف‬ ‫بعالمة‬ ‫الوسطاء‬ ( & ) . ‫مثا‬ ‫ل‬ function doubler(&$value) { $value = $value << 1; } $a = 3; doubler($a); echo $a;
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 343 ‫وسيط‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ $value ‫الفعلية‬ ‫القيمة‬ ‫فإن‬ ،‫المرجع‬ ‫خالل‬ ‫من‬ ‫تمريرها‬ ‫يتم‬ ‫للدالة‬ ‫ل‬ $a ‫كان‬،‫السابق‬ ‫ي‬ ‫ف‬ .‫الدالة‬ ‫بواسطة‬ ‫تعديلها‬ ‫يتم‬ ،‫القيمة‬ ‫تلك‬ ‫من‬ ‫نسخة‬ ‫من‬ ً ‫بدال‬ ، ‫ر‬ ‫نغت‬ ‫اآلن‬ ‫لكننا‬ ،‫المضاعفة‬ ‫القيمة‬ ‫إعادة‬ ‫علينا‬ ‫ال‬ ‫القيمة‬ ‫ليكون‬ ‫المتصل‬ ‫ر‬ ‫متغت‬ .‫المضاعفة‬ ‫ر‬ ‫المتغت‬ ‫مررنا‬ ‫أننا‬ ‫بما‬ :‫جانبية‬ ‫آثار‬ ‫للدالة‬ ‫يكون‬ ‫حيث‬ ‫آخر‬ ‫مكان‬ ‫هذا‬ $a ‫إىل‬ doubler() ‫فإن‬ ،‫المرجع‬ ‫حسب‬ ‫قيمة‬ $a ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫الدالة‬ ‫رحمة‬ ‫تحت‬ ‫تكون‬ ‫يقوم‬ doubler() .‫له‬ ‫جديدة‬ ‫قيمة‬ ‫ر‬ ‫بتعيي‬ ‫تمرير‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫قد‬ ،‫المحددة‬ ‫القيمة‬ ‫عىل‬ ‫دالتك‬ ‫فيها‬ ‫تؤثر‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الحاالت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫حت‬ ‫الوسيط‬ . ‫المرجع‬ ‫طريق‬ ‫عن‬ ‫عند‬ ‫ال‬ ‫تمرير‬ ‫ب‬ ‫تنسخ‬ ‫أن‬ ‫يجب‬ ،‫القيمة‬ PHP ‫مكل‬ ‫عملية‬ ‫هذه‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ .‫القيمة‬ ‫فة‬ ‫يزيل‬ ‫المرجع‬ ‫حسب‬ ‫التمرير‬ .‫ة‬ ‫ر‬ ‫كبت‬ ‫ال‬ ‫والكائنات‬ ‫النصية‬ ‫للسالسل‬ ‫بالنسبة‬ ‫خاصة‬ .‫القيمة‬ ‫نسخ‬ ‫إىل‬ ‫الحاجة‬ ‫االفتراضية‬ ‫الوسطاء‬ ‫عند‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ . ‫ر‬ ‫معي‬ ‫وسيط‬ ‫قبول‬ ‫إىل‬ ‫الدالة‬ ‫تحتاج‬ ‫قد‬ ‫األحيان‬ ‫بعض‬ ‫ي‬ ‫ف‬ ‫وسيط‬ ‫الدالة‬ ‫تأخذ‬ ‫قد‬ ،‫ما‬ ‫لموقع‬ ‫التفضيالت‬ ‫عىل‬ ‫للحصول‬ ‫دالة‬ ‫استدعاء‬ ‫باسم‬ ‫الخاصة‬ ‫األساسية‬ ‫الكلمات‬ ‫بعض‬ ‫استخدام‬ ‫من‬ ً ‫بدال‬ .‫داده‬ ‫ر‬ ‫است‬ ‫تريد‬ ‫الذي‬ ‫التفضيل‬ .‫مدخل‬ ‫أي‬ ‫تقديم‬ ‫ببساطة‬ ‫يمكنك‬ ‫ال‬ ،‫التفضيالت‬ ‫جميع‬ ‫داد‬ ‫ر‬ ‫است‬ ‫تريد‬ ‫أنك‬ ‫ر‬ ‫لتعيي‬ .‫اضية‬ ‫ر‬ ‫االفت‬ ‫المدخالت‬ ‫باستخدام‬ ‫السلوك‬ ‫هذا‬ ‫يعمل‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 344 ‫الدال‬ ‫إعالن‬ ‫ي‬ ‫ف‬ ‫الوسيط‬ ‫قيمة‬ ‫ر‬ ‫بتعيي‬ ‫قم‬ ،‫اضية‬ ‫ر‬ ‫افت‬ ‫وسيط‬ ‫لتحديد‬ ‫أن‬ ‫يمكن‬ ‫ال‬ .‫ة‬ :‫قيمة‬ ‫فقط‬ ، ً ‫ا‬ ً ‫معقد‬ ً ‫ا‬ً ‫ر‬ ‫تعبت‬ ‫اضية‬ ‫ر‬ ‫افت‬ ‫كقيمة‬‫للمعامل‬ ‫المعينة‬ ‫القيمة‬ ‫تكون‬ function getPreferences($whichPreference = 'all ') { // if $whichPreference is "all", return all pr efs; // otherwise, get the specific preference reque sted... } ‫استدعاء‬ ‫عند‬ getPreferences() ،‫بذلك‬ ‫قمت‬ ‫إذا‬ .‫مدخل‬ ‫تقديم‬ ‫اختيار‬ ‫يمكنك‬ ، ‫يقوم‬ ‫فإنه‬ ،‫كذلك‬‫يكن‬ ‫لم‬ ‫إذا‬ ‫لها‬ ‫تقدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫للسلسلة‬ ‫المطابق‬ ‫التفضيل‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ‫فإنها‬ .‫التفضيالت‬ ‫جميع‬ ‫بإرجاع‬ :‫مالحظة‬ ‫يجب‬ ،‫ذلك‬ ‫ومع‬ .‫اضية‬ ‫ر‬ ‫االفت‬ ‫القيم‬ ‫ذات‬ ‫الوسطاء‬ ‫من‬ ‫عدد‬ ‫أي‬ ‫عىل‬ ‫الدالة‬ ‫تحتوي‬ ‫قد‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫الوسطاء‬ ‫هذه‬ ‫اج‬‫ر‬‫إد‬ .‫اضية‬ ‫ر‬ ‫افت‬ ‫قيم‬ ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسطاء‬ ‫كافة‬‫بعد‬ ‫ية‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 345 ‫المتغير‬ ‫وسطاء‬ ‫مثال‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫قد‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫المدخالت‬ ‫من‬ ً ‫ا‬ً ‫ر‬ ‫متغت‬ ً ‫ا‬ ً ‫عدد‬ ‫الدالة‬ ‫تتطلب‬ ‫قد‬ getPreferences() ‫من‬ ً ‫بدال‬ ،‫األسماء‬ ‫من‬ ‫عدد‬ ‫ألي‬ ‫التفضيالت‬ ‫السابق‬ ‫القسم‬ ‫ي‬ ‫ف‬ ‫بعدد‬ ‫دالة‬ ‫عن‬ ‫لإلعالن‬ .‫فقط‬ ‫واحد‬ ‫اسم‬ ‫كتلة‬‫اترك‬ ،‫المدخالت‬ ‫من‬ ‫ر‬ ‫متغت‬ ‫الوسطاء‬ :‫بالكامل‬ function getPreferences() { // some code } ‫توفر‬ PHP ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسطاء‬ ‫داد‬ ‫ر‬ ‫الست‬ ‫الدالة‬ ‫ي‬ ‫ف‬ ‫استخدامها‬ ‫يمكنك‬ ‫دوال‬ ‫ثالث‬ ‫يرجع‬. ‫إليها‬ ‫تمريرها‬ )( func_get_args ‫مصفوفة‬ ‫من‬ ‫جميع‬ ‫الوسطاء‬ ‫المتوفرة‬ ‫للدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ‫الدالة‬ func_get_args() ‫الوسطاء‬ ‫عدد‬ ‫يرجع‬ ‫و‬ ‫للدالة‬ ‫المتوفرة‬ func_get_arg () :‫فمثال‬ .‫الوسطاء‬ ‫من‬ ‫ر‬ ‫معي‬ ‫مدخل‬ $array = func_get_args(); $count = func_num_args(); $value = func_get_arg(argument_number);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 346 ‫الدالة‬ ‫تأخذ‬ count_list() ‫تلك‬ ‫فوق‬ ‫حلقات‬ ‫بعمل‬ ‫يقوم‬ .‫المدخالت‬ ‫من‬ ‫عدد‬ ‫أي‬ ‫ترجع‬ ‫فإنها‬ ،‫وسطاء‬ ‫أي‬ ‫إعطاء‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫القيم‬ ‫جميع‬ ‫ي‬ ‫إجماىل‬ ‫وإرجاع‬ ‫المدخالت‬ false . function countList() { if (func_num_args() == 0) { return false; }else { $count = 0; for ($i = 0; $i < func_num_args(); $i++) { $count += func_get_arg($i); } return $count; } } echo countList(1, 5, 9); // outputs "15"
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 347 ‫تلميح‬ ‫كتابة‬ ‫تلميح‬ ‫إضافة‬ ‫يمكنك‬ ،‫دالة‬ ‫تعريف‬ ‫عند‬ ‫عن‬ ‫النوع‬ - ‫تكون‬ ‫أن‬ ‫تطلب‬ ‫أن‬ ‫يمكنك‬ ‫أي‬ ‫الوسيط‬ ‫من‬ ‫إلضافة‬ .‫لالستدعاء‬ ‫قابلة‬ ‫أو‬ ‫مجموعة‬ ،‫مثيالت‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫معينة‬ ‫فئة‬ ‫أو‬ ‫الفئة‬ ‫اسم‬ ‫ر‬ ‫بتضمي‬ ‫قم‬ ،‫وسيط‬ ‫إىل‬ ‫نوع‬ ‫تلميح‬ array ‫أو‬ callable ‫قبل‬ ‫اسم‬ :‫فمثال‬ .‫الدالة‬ ‫وسطاء‬ ‫قائمة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ function getTest(array $arr) { echo $arr[0]; } getTest([666,232]); ‫القيم‬ ‫إرجاع‬ ‫لدوال‬ ‫يمكن‬ PHP ‫الرئيسية‬ ‫الكلمة‬ ‫باستخدام‬ ‫فقط‬ ‫واحدة‬ ‫قيمة‬ ‫ترجع‬ ‫أن‬ return : function returnOne() { return 42; } :‫مصفوفة‬ ‫بإرجاع‬ ‫قم‬ ،‫متعددة‬ ‫قيم‬ ‫إلرجاع‬ function returnTwo() { return array("anas", 28); } ‫بإرجاع‬ ‫الدالة‬ ‫تقوم‬ ،‫دالة‬ ‫بواسطة‬ ‫إرجاع‬ ‫قيمة‬ ‫ر‬ ‫توفت‬ ‫يتم‬ ‫لم‬ ‫إذا‬ NULL ‫ر‬ ‫تعيي‬ ‫يمكنك‬ . ‫ال‬ ‫جع‬ ‫ر‬ ‫ست‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫الدالة‬ ‫تعريف‬ ‫ي‬ ‫ف‬ ‫عنه‬ ‫ح‬ ‫ي‬‫رص‬‫بالت‬ ‫اإلرجاع‬ ‫بيانات‬ ‫نوع‬ :‫تنفيذه‬ ‫عند‬ ً ‫ا‬ ً ‫صحيح‬ ً ‫ا‬ ً ‫عدد‬ ‫ي‬ ‫التاىل‬ ‫كود‬ function someMath($var1, $var2): int {
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 348 return $var1 * $var2; } echo someMath(10, 5); ‫مجهولة‬ ‫دوال‬ ‫دوال‬ ‫بعض‬ ‫تقوم‬ PHP ‫سبيل‬ ‫عىل‬ .‫لهم‬ ‫توفرها‬ ‫دالة‬ ‫باستخدام‬ ‫عملها‬ ‫من‬ ‫بجزء‬ ‫الدالة‬ ‫تستخدم‬ ،‫المثال‬ usort() ‫كمعامل‬ ‫إليها‬ ‫وتمريرها‬ ‫بإنشائها‬ ‫تقوم‬ ‫دالة‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫العناص‬‫فرز‬ ‫ترتيب‬ ‫لتحديد‬ ،‫اض‬‫ر‬‫األغ‬ ‫لهذه‬ ‫دالة‬‫تحديد‬ ‫يمكنك‬ ‫أنه‬ ‫من‬ ‫الرغم‬ ‫عىل‬ ‫االحيان‬ ‫اغلب‬ ‫لكن‬ ‫الدوال‬ ‫هذه‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫رف‬ ُ‫ع‬ ُ ‫ت‬ ‫مجهولة‬ ‫دالة‬ ‫تكون‬ ‫باسم‬ . closure ‫الدالة‬ ‫تعريف‬ ‫صيغة‬ ‫باستخدام‬ ‫مجهولة‬ ‫دالة‬ ‫إنشاء‬ ‫يمكنك‬ ‫يمكنك‬ ‫ولكن‬ ،‫العادية‬ .‫ة‬ ‫ر‬ ‫مبارس‬ ‫تمريرها‬ ‫أو‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫تعيينها‬ $array = array("really long string", "this", "m iddling length", "larger"); usort($array, function($a, $b) { return strlen($a) – strlen($b); }); print_r($array); ‫حسب‬ ‫المصفوفة‬‫فرز‬ ‫يتم‬ usort() ‫طول‬ ‫تيب‬ ‫ر‬ ‫بت‬ ،‫المجهولة‬ ‫الدالة‬ ‫باستخدام‬ .‫السلسلة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 349 ‫النصية‬ ‫السالسل‬ .‫األحرف‬ ‫من‬ ‫سالسل‬ ‫عن‬ ‫عبارة‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫أثناء‬ ‫تصادفها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫معظم‬ ‫ستكون‬ ‫الصور‬ ‫وروابط‬ ‫المرور‬ ‫وكلمات‬ ‫األشخاص‬ ‫أسماء‬ ‫عىل‬ ‫السالسل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ .‫ذلك‬ ‫ر‬ ‫وغت‬ ‫كود‬ ‫ي‬ ‫ف‬ ‫حرفية‬ ‫سلسلة‬ ‫لكتابة‬ ‫طرق‬ ‫ع‬‫أرب‬ ‫هناك‬ PHP :‫بك‬ ‫الخاص‬ • ‫الفردية‬ ‫االقتباس‬ ‫عالمات‬ • ‫المزدوجة‬ ‫االقتباس‬ ‫عالمات‬ • ‫مستند‬ ‫تنسيق‬ ( heredoc ) • ‫مستند‬ ‫تنسيق‬ ( nowdoc ) ‫تتيح‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الخاصة‬ ‫الهروب‬ ‫سالسل‬ ‫عىل‬ ‫تتعرف‬ ‫كانت‬‫إذا‬ ‫فيما‬ ‫الطرق‬ ‫هذه‬ ‫تختلف‬ ‫ا‬ ‫ر‬ ‫المتغت‬ ‫استيفاء‬‫أو‬ ‫أخرى‬ ‫أحرف‬ ‫ر‬ ‫ترمت‬ ‫لك‬ .‫ت‬ Variable Interpolation ‫توسيع‬ )‫(تفسير‬ ‫المتغير‬ ‫أو‬ ‫مزدوجة‬ ‫اقتباس‬ ‫عالمات‬ ‫باستخدام‬ ‫حرفية‬ ‫سلسلة‬ ‫بتعريف‬ ‫تقوم‬ ‫عندما‬ heredoc ‫السلسلة‬ ‫فإن‬ ، ‫ب‬ ‫تقوم‬ ‫ر‬ ‫المتغت‬ ‫توسيع‬ ‫ات‬ ‫التوسيع‬ . ) ‫ر‬ ‫(التفست‬ ‫عملية‬ ‫ي‬ ‫ه‬ ‫لتوسيع‬ ‫طريقتان‬ ‫هناك‬ .‫المضمنة‬ ‫بقيمها‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫استبدال‬ ‫ال‬ .‫سالسل‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫اقتباس‬ ‫عالمة‬ ‫ذات‬ ‫نصية‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫وضع‬ ‫ي‬ ‫ه‬ ‫ر‬ ‫الطريقتي‬ ‫أبسط‬ ‫أو‬ ‫مزدوجة‬ heredoc : $who = 'Anas'; $where = 'here'; echo "$who was $where"; //Anas was here
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 350 ‫بأقواس‬ ‫توسيعه‬ ‫يتم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ ‫إحاطة‬ ‫ي‬ ‫ه‬ ‫األخرى‬ ‫الطريقة‬ ‫معكوفة‬ ‫يضمن‬ . ‫لألقواس‬ ‫ي‬ ‫الكالسيك‬ ‫االستخدام‬ .‫الصحيح‬ ‫ر‬ ‫المتغت‬ ‫توسيع‬ ‫هذا‬ ‫الجملة‬ ‫بناء‬ ‫استخدام‬ :‫محيط‬ ‫نص‬ ‫أي‬ ‫من‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫عن‬ ‫الغموض‬ ‫الة‬‫ز‬‫إ‬‫هو‬ ‫المعكوفة‬ $n = 12; echo "You are the {$n}th person";// You are the 1 2th person ‫واحدة‬ ‫اقتباس‬ ‫عالمة‬ ‫ذات‬ ‫سالسل‬ ‫و‬ ‫المفردة‬ ‫االقتباس‬ ‫عالمات‬ ‫ذات‬ ‫السالسل‬ nowdocs .‫ات‬ ‫ر‬ ‫المتغت‬ ‫توسع‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الحرفية‬ ‫السلسلة‬ ‫ألن‬ ‫التالية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫توسيع‬ ‫يتم‬ ‫ال‬ ، ‫ي‬ ‫وبالتاىل‬ :‫مفردة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫فيها‬ ‫تحدث‬ $name = 'Fred'; $str = 'Hello, $name'; echo $str; //Hello, $name ‫محرف‬ ‫الوحيدة‬ ‫الهروب‬ ‫الذي‬ ‫ي‬ ‫اقت‬ ‫عالمات‬ ‫ذات‬ ‫سالسل‬ ‫ي‬ ‫ف‬ ‫عمل‬ ' ‫ي‬ ‫ه‬ ‫مفردة‬ ‫باس‬ ، ‫و‬ ،‫واحدة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫واحدة‬ ‫اقتباس‬ ‫عالمة‬ ‫تضع‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫ي‬ ‫ر‬ ‫الت‬ ، .‫مفردة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫للخلف‬ ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫تضع‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 351 ‫سالسل‬ ‫بعالمة‬ ‫االقتباس‬ ‫ال‬ ‫مزدوجة‬ ‫عالمات‬ ‫ذات‬ ‫سالسل‬ ‫اال‬ ‫قتباس‬ ‫ال‬ ‫من‬ ‫العديد‬ ‫وتوسع‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫توسع‬ ‫مزدوجة‬ ‫محارف‬ ‫ال‬ ‫هر‬ ‫الجدول‬ ‫يشد‬ .‫وب‬ ‫ي‬ ‫التاىل‬ )‫سالسل(محارف‬ ‫الهروب‬ ‫ي‬ ‫ف‬ ‫المتوفرة‬ PHP .‫مزدوجة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سالسل‬ ‫ي‬ ‫ف‬ ‫الهروب‬ ‫سالسل‬ ‫الحرف‬ ‫يمثل‬ " ‫مزدوجة‬ ‫تنصيص‬ ‫عالمة‬ n ‫جديد‬‫سطر‬ r Carriage return t ‫جدول‬ ‫مسافة‬ Backslash $ ‫الدوالر‬ ‫عالمة‬ { Left curly brace } Right curly brace [ Left square bracket ] Right square bracket 0 through 777 ‫حروف‬ ‫تمثيل‬ ‫يتم‬ ASCII ‫ثمانية‬ ‫بقيمة‬ x0 through xFF ‫حرف‬ ‫تمثيل‬ ‫يتم‬ ASCII ‫ية‬ ‫ر‬ ‫عش‬ ‫سداسية‬ ‫بقيمة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 352 ‫السالسل‬ ‫طباعة‬ ‫جمل‬ ‫لك‬ ‫تتيح‬ .‫المتصفح‬ ‫إىل‬ ‫اج‬‫ر‬‫اإلخ‬ ‫إلرسال‬ ‫طرق‬ ‫ع‬‫أرب‬ ‫هناك‬ echo ‫من‬ ‫العديد‬ ‫طباعة‬ ‫تطبع‬ ‫بينما‬، ‫واحدة‬ ‫دفعة‬ ‫القيم‬ print() ‫الدالة‬ ‫تقوم‬ .‫فقط‬ ‫واحدة‬ ‫قيمة‬ printf() .‫منسقة‬ ‫سلسلة‬ ‫ببناء‬ ‫دالة‬ print_r() ‫التصحيح‬ ‫ي‬ ‫ف‬ ‫مفيدة‬ ( debugging ) ‫محتويات‬ ‫بطباعة‬ ‫يقوم‬ ‫أخ‬ ‫وأشياء‬ ‫والكائنات‬ ‫المصفوفات‬ .‫ما‬ ‫حد‬ ‫إىل‬ ‫مقروء‬ ‫شكل‬ ‫ي‬ ‫ف‬ ‫رى‬ echo ‫اج‬‫ر‬‫إلخ‬ ‫ي‬ ‫ف‬ ‫سلسلة‬ HTML ‫الويب‬ ‫صفحة‬ ‫تبدو‬ ‫بينما‬ . echo ‫ك‬ ‫فإن‬ ،‫دالة‬ echo ‫بناء‬ ‫هو‬ ‫ضمن‬ ‫ات‬ ‫ر‬ ‫التعبت‬ ‫فإن‬ ‫ي‬ ‫وبالتاىل‬ ،‫األقواس‬ ‫حذف‬ ‫يمكنك‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫هذا‬ .‫لغة‬ :‫متساوية‬ ‫التالية‬ echo "Printy"; echo("Printy"); :‫بفاصالت‬ ‫فصلها‬ ‫طريق‬ ‫عن‬ ‫للطباعة‬ ‫عناص‬ ‫عدة‬ ‫تحديد‬ ‫يمكنك‬ echo "First", "second", "third"; Firstsecondthird ‫من‬ ‫ر‬ ‫أكت‬ ‫وضع‬ ‫عند‬ ‫األقواس‬ ‫استخدام‬ ‫يعد‬ ً ‫خطأ‬ ‫قيمة‬ : // this is a parse error echo("Hello", "world");
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 353 ‫ألن‬ ً ‫ا‬ً ‫نظر‬ echo : ‫ر‬ ‫أكت‬ ‫ر‬ ‫تعبت‬ ‫من‬ ‫كجزء‬‫استخدامه‬ ‫يمكنك‬ ‫فال‬ ،‫حقيقية‬ ‫دالة‬ ‫ليست‬ // parse error if (echo("test")) { echo("It worked!"); } print() ‫الدالة‬ ‫ترسل‬ print() ‫واحدة‬ ‫قيمة‬ ( ‫مدخلها‬ ) :‫المتصفح‬ ‫إىل‬ if (print("testn")) { ("It worked!"); } //test //It worked! printf() ‫الدالة‬ ‫تقوم‬ printf() ‫قالب‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫استبدال‬ ‫طريق‬ ‫عن‬ ‫مبنية‬ ‫سلسلة‬ ‫اج‬‫ر‬‫بإخ‬ ( ‫التنسيق‬ ‫سلسلة‬ format string ) ‫ل‬ ‫األول‬ ‫المدخل‬ . printf() ‫سلسلة‬ ‫ي‬ ‫ه‬ ‫الحرف‬ ‫ر‬ ‫يشت‬ .‫استبدالها‬ ‫المطلوب‬ ‫القيم‬ ‫ي‬ ‫ه‬ ‫المتبقية‬ ‫المدخالت‬. ‫التنسيق‬ A ‫ي‬ ‫ف‬ % ‫إىل‬ ‫التنسيق‬ ‫سلسلة‬ .“substitution” ‫االستبدال‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 354 ‫معد‬ ‫ال‬ ‫التنسيق‬ ‫ت‬ FORMAT MODIFIERS ‫من‬ ‫القالب‬ ‫ي‬ ‫ف‬ ‫استبدال‬ ‫عالمة‬ ‫كل‬ ‫تتكون‬ ‫اشارة‬ (‫المئوية‬ ‫النسبة‬ % ‫يتبعها‬ ‫وربما‬ ، ) ‫تيب‬ ‫ر‬ ‫بالت‬ ‫المعدالت‬‫تظهر‬ ‫أن‬ ‫يجب‬ .‫نوع‬ ‫بمحدد‬ ‫ي‬ ‫وتنته‬ ،‫التالية‬ ‫القائمة‬ ‫من‬ ‫الت‬ ّ ‫د‬ ّ‫مع‬ :‫هنا‬ ‫به‬ ‫رسدها‬ ‫تم‬ ‫الذي‬ 1 . ‫السلسلة‬ ‫لحجم‬ ‫النتائج‬ ‫ر‬ ‫لتضمي‬ ‫استخدامه‬ ‫اد‬‫ر‬‫الم‬ ‫الحرف‬ ‫إىل‬ ‫ر‬ ‫يشت‬‫الحشو‬ ‫محدد‬ ‫حدد‬ .‫المناسب‬ 0 ‫ا‬ .‫واحدة‬ ‫اقتباس‬ ‫بعالمة‬ ‫مسبوق‬ ‫حرف‬ ‫أي‬‫أو‬ ،‫مسافة‬‫أو‬ ، ‫لحشو‬ . ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫هو‬ ‫بمسافات‬ 2 . ‫إىل‬ ‫بالنسبة‬ .‫األرقام‬ ‫عىل‬ ‫ر‬ ‫تأثت‬ ‫من‬ ‫السالسل‬ ‫عىل‬ ‫مختلف‬ ‫ر‬ ‫تأثت‬ ‫له‬ ‫هذا‬ .‫عالمة‬ ‫الطرح‬ ‫ر‬ ‫يجت‬ ،‫السالسل‬ ) - ( ‫لليسار‬ ‫مضبوطة‬ ‫السلسلة‬ ‫تكون‬ ‫أن‬ ‫عىل‬ ‫هنا‬ ) ‫ر‬ ‫لليمي‬ ‫ضبط‬‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ( ‫الجمع‬ ‫عالمة‬ ‫تفرض‬ ،‫لألرقام‬ ‫بالنسبة‬ ) + ( ‫الموجبة‬ ‫األرقام‬ ‫طباعة‬ ‫هنا‬ ‫بعالمة‬ ‫البادئة‬ ‫الجمع‬ 3 . ‫كانت‬ ‫إذا‬ .‫العنرص‬ ‫هذا‬ ‫عليها‬ ‫يحتوي‬ ‫أن‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األحرف‬ ‫لعدد‬ ‫األدن‬ ‫الحد‬ ‫ي‬ ‫ف‬ ‫يتحكم‬ ‫والحشو‬ ‫اإلشارة‬ ‫محدد‬ ‫فإن‬ ،‫األحرف‬ ‫من‬ ‫العدد‬ ‫هذا‬ ‫من‬ ‫أقل‬ ‫النتيجة‬ .‫الطول‬ ‫هذا‬ ‫تغطية‬ ‫كيفية‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 355 4 . ‫عدد‬ ‫يحدد‬ ‫هذا‬ ‫ورقم‬ ‫نقطة‬ ‫من‬ ‫يتكون‬ ‫دقيق‬ ‫محدد‬ ،‫ية‬ ‫ر‬ ‫العش‬ ‫لألرقام‬ ‫بالنسبة‬ ‫تجاهل‬ ‫يتم‬ ،‫المضاعفة‬ ‫ر‬ ‫غت‬ ‫لألنواع‬ ‫بالنسبة‬ .‫عرضها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ية‬ ‫ر‬ ‫العش‬ ‫األرقام‬ .‫المحدد‬ ‫هذا‬ ‫النوع‬ ‫محددات‬ ‫النوع‬ ‫محدد‬ ‫ر‬ ‫يخت‬ printf() ‫ر‬ ‫تفست‬ ‫يحدد‬ ‫هذا‬ .‫استبدالها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫نوع‬ ‫عن‬ ‫ال‬ ‫المعدالت‬ . ً ‫ا‬ ً ‫سابق‬ ‫مدرجة‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫مدرج‬ ‫هو‬ ‫كما‬،‫أنواع‬ ‫ثمانية‬ ‫هناك‬ : ‫المحدد‬ ‫المعن‬ % .‫المئوية‬ ‫النسبة‬ ‫عالمة‬ ‫يعرض‬ b . ‫ي‬ ‫ثنان‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ c ‫بهذه‬ ‫كحرف‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ .‫القيمة‬ d .‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ e ‫مضاعف‬ ‫المدخل‬ “double” ‫ي‬ ‫علىم‬ ‫تدوين‬ ‫ي‬ ‫ف‬ ‫عرضه‬ ‫ويتم‬ ” scientific notation .“ E ‫األحرف‬ ‫باستخدام‬ ‫ي‬ ‫علىم‬ ‫شكل‬ ‫ي‬ ‫ف‬ ‫عرضه‬ ‫ويتم‬ ‫مضاعف‬ ‫المدخل‬ .‫ة‬ ‫ر‬ ‫كبت‬‫ال‬ F ‫بالتنسيق‬ ‫النحو‬ ‫هذا‬ ‫عىل‬ ‫عرضه‬ ‫ويتم‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ ‫عن‬ ‫عبارة‬ ‫المدخل‬ . ‫ي‬ ‫الحاىل‬ ‫ي‬ ‫المحىل‬ F ‫النحو‬ ‫هذا‬ ‫عىل‬ ‫عرضه‬ ‫ويتم‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ ‫هو‬ ‫المدخل‬ ” such “
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 356 ‫المحدد‬ ‫المعن‬ g ‫هو‬ ‫)كما‬ ‫ي‬ ‫العلىم‬ ‫بالتدوين‬ ‫إما‬ ‫عرضه‬ ‫ويتم‬ ‫مزدوج‬ ‫عن‬ ‫عبارة‬ ‫المدخل‬ ‫النوع‬ ‫محدد‬ ‫مع‬ ‫الحال‬ %e ‫مع‬ ‫الحال‬‫هو‬ ‫)كما‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫أو‬ ( ‫النوع‬ ‫محدد‬ %f .‫أقرص‬ ‫أيهما‬ ،( G ‫مع‬ ‫الحال‬ ‫هو‬ ‫)كما‬ ‫ي‬ ‫العلىم‬ ‫بالتدوين‬ ‫إما‬ ‫عرضه‬ ‫ويتم‬ ‫مضاعف‬ ‫المدخل‬ ‫النوع‬ ‫محدد‬ %E ‫محدد‬ ‫مع‬ ‫الحال‬ ‫هو‬ ‫)كما‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫أو‬ ( ‫النوع‬ %f .‫أقرص‬ ‫أيهما‬ ،( o ‫)األساس‬ ‫ي‬ ‫ثمان‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ 8 .( s .‫النحو‬ ‫هذا‬ ‫عىل‬ ‫عرضه‬ ‫ويتم‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ‫المدخل‬ u ‫المدخل‬ .‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫إشارة‬ ‫بدون‬ ‫صحيح‬ ‫عدد‬ x ‫)األساس‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫سداش‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫المدخل‬ - 41 .‫ة‬ ‫ر‬ ‫الصغت‬ ‫األحرف‬ ‫استخدام‬ ‫يتم‬ ( ‫ي‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫سداش‬ ‫كرقم‬ ‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫المدخل‬ ( ‫األساس‬ - 16 ) ‫يتم‬ ‫استخدام‬ X .‫ة‬ ‫ر‬ ‫كبت‬‫ال‬ ‫األحرف‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 357 :‫األمثلة‬ ‫بعض‬ ‫وهنا‬ ✓ : ‫ر‬ ‫يتي‬ ‫ر‬ ‫عش‬ ‫ر‬ ‫لتي‬‫مت‬ ‫ألقرب‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ printf('%.2f', 27.452); 27.45 ✓ :‫ي‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫وسداش‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫اج‬‫ر‬‫إخ‬ printf('The hex value of %d is %x', 214, 214); The hex value of 214 is d6 ✓ :‫ية‬ ‫ر‬ ‫عش‬ ‫منازل‬ ‫لثالث‬ ‫صحيح‬ ‫عدد‬ ‫ترك‬ printf('Bond. James Bond. %03d.', 7); Bond. James Bond. 007. ✓ :‫خ‬ ‫التاري‬ ‫تنسيق‬ printf('%02d/%02d/%04d', $month, $day, $year); 02/15/2005 ✓ ‫المئوية‬ ‫النسب‬ : printf('%.2f%% Complete', 2.1); 2.10% Complete
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 358 ✓ :‫ية‬ ‫ر‬ ‫عش‬ ‫فاصلة‬ ‫رقم‬ ‫حشو‬ printf('You've spent $%5.2f so far', 4.1); You've spent $ 4.10 so far ‫الدالة‬ ‫تأخذ‬ sprintf() ‫مثل‬ ‫المدخالت‬ ‫نفس‬ printf() ‫السلسلة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ‫كنها‬ ‫ول‬ . ‫طباعتها‬ ‫من‬ ً ‫بدال‬ ‫المضمنة‬ : ً ‫ا‬ ً ‫الحق‬ ‫الستخدامها‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ف‬ ‫السلسلة‬ ‫حفظ‬ ‫هذا‬ ‫لك‬ ‫يتيح‬ $date = sprintf("%02d/%02d/%04d", $month, $day, $year); var_dump() ‫و‬ print_r() ( ‫الدالة‬ ‫تعرض‬ print_r( ‫بذكاء‬ ‫إىل‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫تحويل‬ ‫من‬ ً ‫بدال‬ ،‫إليها‬ ‫تمريره‬ ‫يتم‬ ‫ما‬ ‫يفعل‬ ‫كما‬،‫سلسلة‬ echo ‫و‬ print() ‫تظهر‬ .‫واألرقام‬ ‫السالسل‬ ‫طباعة‬ ‫ببساطة‬ ‫يتم‬ . :‫بالمصفوفة‬ ‫مسبوقة‬ ،‫والقيم‬ ‫المفاتيح‬ ‫من‬ ‫ر‬ ‫قوسي‬ ‫ر‬ ‫بي‬ ‫كقوائم‬‫المصفوفات‬ ‫تقوم‬ ‫عندما‬ print_r() ‫الكلمة‬ ‫ترى‬ ، ً ‫ا‬ ً ‫كائن‬ Object ‫الكائن‬ ‫بخصائص‬ ‫متبوعة‬ ، ‫ي‬ ‫ر‬ ‫الت‬ :‫كمصفوفة‬‫معروضة‬ ‫تهيئتها‬ ‫تمت‬ ‫و‬ ‫المنطقية‬ ‫القيم‬ ‫عرض‬ ‫يتم‬ ‫ال‬ NULL ‫مفيد‬ ‫بشكل‬ ‫بواسطة‬ print_r() : print_r(true); // prints "1"; print_r(false); // prints ""; print_r(null); // prints "";
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 359 ‫ضل‬ ُ ‫ف‬ُ‫ي‬ ،‫السبب‬ ‫لهذا‬ var_dump() ‫عىل‬ print_r() ‫تعرض‬ .‫التصحيح‬ ‫أجل‬ ‫من‬ ‫الدالة‬ var_dump() ‫قيمة‬ ‫أي‬ PHP :‫اءته‬‫ر‬‫ق‬ ‫ر‬ ‫للبش‬ ‫يمكن‬ ‫بتنسيق‬ var_dump(true); var_dump(false); var_dump(null); var_dump(array('name' => "Fred", 'age' => 53)); class P { var $name = 'Nat'; } $p = new P; var_dump($p); bool(true) bool(false) bool(null) array(2) { ["name"]=> string(4) "Fred" ["age"]=> int(35) } object(p)(1) { ["name"]=> string(3) "Nat" } ‫الدالة‬ ‫ترجع‬ strlen() :‫سلسلة‬ ‫ي‬ ‫ف‬ ‫األحرف‬ ‫عدد‬ $string = 'Hello, world'; $length = strlen($string); // $length is 12
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 360 ‫التنظيف‬ ‫سالسل‬ ‫أو‬ ‫الملفات‬ ‫من‬ ‫عليها‬ ‫نحصل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫السالسل‬ ‫تنظيف‬ ‫يجب‬ ،‫األحيان‬ ‫من‬ ‫ر‬ ‫كثت‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫ي‬ ‫ف‬ ‫شائعتان‬ ‫مشكلتان‬ ‫هناك‬ .‫استخدامها‬ ‫من‬ ‫نتمكن‬ ‫أن‬ ‫قبل‬ ‫ر‬ ‫المستخدمي‬ ‫صحيحة‬ ‫ر‬ ‫غت‬ ‫ة‬ ‫ر‬ ‫كبت‬‫وحروف‬ ‫ورية‬‫ص‬ ‫ر‬ ‫غت‬ ‫بيضاء‬ ‫مسافة‬ ‫وجود‬ ‫وهما‬ ‫األولية‬ . ‫البيضاء‬ ‫المسافة‬ ‫إزالة‬ :‫التالية‬ ‫الدوال‬ ‫باستخدام‬ ‫الالحقة‬‫أو‬ ‫البادئة‬ ‫البيضاء‬ ‫المسافة‬ ‫الة‬‫ز‬‫إ‬ ‫يمكنك‬ trim() ‫و‬ ltrim() ‫و‬ rtrim() : $trimmed = trim(string [, charlist ]); $trimmed = ltrim(string [, charlist ]); $trimmed = rtrim(string [, charlist ]); ‫ترجع‬ trim() ” ‫السلسلة‬ ‫من‬ ‫نسخة‬ string ‫البداية‬ ‫من‬ ‫بيضاء‬ ‫مسافة‬ ‫الة‬‫ز‬‫إ‬ ‫مع‬ “ ‫والنهاية‬ . ltrim() ‫السلسلة‬ ‫بداية‬ ‫من‬ ‫فقط‬ ‫البيضاء‬ ‫المسافة‬ ‫يزيل‬ ‫لكنه‬ ،‫نفسه‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫الىس‬ ‫يفعل‬ rtrim() ‫مدخل‬. ‫السلسلة‬ ‫نهاية‬ ‫من‬ ‫فقط‬ ‫البيضاء‬ ‫المسافة‬ ‫يزيل‬ charlist ‫ا‬ ‫جميع‬ ‫تحدد‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ‫االختياري‬ ‫األحرف‬ ‫إعطاء‬ ‫يتم‬ .‫التها‬‫ز‬‫إ‬ ‫اد‬‫ر‬‫الم‬ ‫ألحرف‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫الة‬‫ز‬‫لإل‬ ‫اضية‬ ‫ر‬ ‫االفت‬ : ‫ي‬ ‫التاىل‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 361 ‫الحرف‬ ASCII ‫قيمة‬ ‫المعن‬ " " 0x20 ‫مسافة‬ "t" 0x09 ‫جدول‬ ‫مسافة‬ "n" 0x0A ‫جديد‬‫سطر‬ "r" 0x0D Carriage return "0" 0x00 NUL-byte "x0B" 0x0B Vertical tab :‫كمثال‬ $title = "Programming PHP n"; $str1 = ltrim($title); // $str1 is "Programming PHP n" $str2 = rtrim($title); // $str2 is " Programmin g PHP" $str3 = trim($title); // $str3 is "Programming PHP" ‫مدخل‬ ‫استخدم‬ ،‫جدول‬ ‫بمسافة‬ ‫المفصولة‬ ‫البيانات‬ ‫من‬ ‫سطر‬ ‫إىل‬ ‫بالنظر‬ charlist :‫الجدول‬ ‫مسافات‬ ‫حذف‬ ‫دون‬ ‫الالحقة‬‫أو‬ ‫البادئة‬ ‫البيضاء‬ ‫المسافة‬ ‫الة‬‫ز‬‫إل‬ $record = " FredtFlintstonet35tWilmat n"; $record = trim($record, " rn0x0B"); // $record is "FredtFlintstonet35tWilma"
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 362 ‫الحالة‬ ‫تغيير‬ : ‫نصية‬ ‫سلسلة‬ ‫في‬ ‫االحرف‬ ‫تحتوي‬ PHP ‫يعمل‬ :‫السالسل‬ ‫حالة‬ ‫ر‬ ‫لتغيت‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫عىل‬ strtolower() ‫و‬ strtoupper() ‫عىل‬ ‫كامل‬ ‫ال‬ ‫ويعمل‬ ، ‫سالسل‬ ucfirst() ‫األول‬ ‫الحرف‬ ‫عىل‬ ‫فقط‬ ‫ويعمل‬ ،‫السلسلة‬ ‫من‬ ucwords() ‫تأخذ‬ .‫سلسلة‬ ‫ي‬ ‫ف‬ ‫كلمة‬‫كل‬‫من‬ ‫األول‬ ‫الحرف‬ ‫عىل‬ ‫تم‬ ،‫السلسلة‬ ‫تلك‬ ‫من‬ ‫نسخة‬ ‫بإرجاع‬ ‫وتقوم‬ ‫كمدخل‬‫عليها‬ ‫لتعمل‬ ‫سلسلة‬ ‫دالة‬ ‫كل‬ :‫فمثال‬ .‫مناسب‬ ‫بشكل‬ ‫ها‬ ‫ر‬ ‫تغيت‬ $string1 = "ANAS alpure"; $string2 = "midmar org"; print(strtolower($string1)); print(strtoupper($string1)); print(ucfirst($string2)); print(ucwords($string2)); /* anas alpure ANAS ALPURE Midmar org Midmar Org */ ‫حيث‬ ،"‫العنوان‬ ‫أحرف‬ ‫"حالة‬ ‫إىل‬ ‫تحويلها‬ ‫تريد‬ ‫مختلطة‬ ‫أحرف‬ ‫سلسلة‬ ‫لديك‬ ‫كان‬‫إذا‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫بحروف‬ ‫األحرف‬ ‫وبقية‬ ‫ة‬ ‫ر‬ ‫كبت‬‫بأحرف‬ ‫كلمة‬‫كل‬‫من‬ ‫األول‬ ‫الحرف‬ ‫يكون‬ ) ‫ولست‬ ‫البداية‬ ‫ي‬ ‫ف‬ ‫السلسلة‬ ‫حالة‬ ‫من‬ ً ‫ا‬ ً ‫متأكد‬ ( ‫من‬ ً ‫ا‬ ً ‫مزيج‬ ‫استخدم‬ ، strtolower() ‫و‬ ucwords() : print(ucwords(strtolower($string1))); Anas Alpure 070
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 363 ‫والهروب‬ ‫الترميز‬ Encoding and Escaping ‫امج‬‫ر‬‫ب‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ PHP ‫صفحات‬ ‫مع‬ ً ‫ا‬ً‫غالب‬ ‫تتفاعل‬ HTML ‫الويب‬ ‫وعناوين‬ ( URLs ) .‫البيانات‬ ‫من‬ ‫األنواع‬ ‫هذه‬ ‫مع‬ ‫العمل‬ ‫ي‬ ‫ف‬ ‫لمساعدتك‬ ‫دوال‬ ‫فهناك‬، ‫البيانات‬ ‫وقواعد‬ HTML ‫كل‬ ‫البيانات‬ ‫قاعدة‬ ‫وأوامر‬ ‫الويب‬ ‫وعناوين‬ ‫يتطلب‬ ‫منها‬ ‫كل‬ ‫لكن‬ ،‫سالسل‬ ‫ها‬ ‫ها‬‫هروب‬ ‫ليتم‬ ‫مختلفة‬ ً ‫أحرفا‬ )‫(تجاوزها‬ ‫كتابة‬‫يجب‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫مختلفة‬ ‫بطرق‬ ‫الويب‬ ‫عنوان‬ ‫ي‬ ‫ف‬ ‫مسافة‬ ( URLs ) ‫بصيغة‬ 02 ‫من‬ ‫أصغر‬ ‫عالمة‬ ‫بينما‬ ،% ( < ) ‫ي‬ ‫ف‬ ‫ال‬ ‫مستندات‬ HTML : ‫ي‬ ‫كالتاىل‬ ‫تكتب‬ ‫أن‬ ‫يجب‬ &lt; ‫تحتوي‬ . PHP ‫من‬ ‫عدد‬ ‫عىل‬ ‫للت‬ ‫المضمنة‬ ‫الدوال‬ .‫ات‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬ ‫هذه‬ ‫وإىل‬ ‫من‬ ‫حويل‬ HTML ‫ي‬ ‫ف‬ ‫الخاصة‬ ‫األحرف‬ HTML ” ‫كيانات‬ ‫بواسطة‬ ‫تمثيلها‬ ‫يتم‬ entities )<( :‫مثل‬ “ &amp; (&) and &lt; . ‫دوال‬ ‫من‬ ‫نوعان‬ ‫هناك‬ PHP :‫كياناتها‬ ‫إىل‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫الخاصة‬ ‫األحرف‬ ‫تحول‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫أوسمة‬ ‫الة‬‫ز‬‫إل‬ ‫واحدة‬ HTML ” ‫الوصفية‬ ‫األوسمة‬ ‫اج‬‫ر‬‫الستخ‬ ‫واألخرى‬ meta tags “ .‫فقط‬ ‫الخاصة‬ ‫األحرف‬ ‫جميع‬ ‫اقتباس‬ ‫كيان‬ ‫الدالة‬ ‫تعمل‬ htmlentities() ‫معادالت‬ ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األحرف‬ ‫جميع‬ ‫ر‬ ‫تغيت‬ ‫عىل‬ ‫كيان‬ HTML ‫المكافئات‬ ‫تلك‬ ‫إىل‬ ( ‫المسافة‬ ‫حرف‬ ‫باستثناء‬ ) ‫عالمة‬ ‫ذلك‬ ‫يتضمن‬ . ‫األصغر‬ ‫من‬ ( < ) ‫من‬ ‫ر‬ ‫أكت‬ ‫وعالمة‬ ، ( > ) . )&(‫العطف‬ ‫وعالمة‬ ، ‫الدالة‬ ‫تأخذ‬ htmlentities() :‫مدخالت‬ ‫ثالث‬ ‫إىل‬ ‫يصل‬ ‫ما‬ $output = htmlentities(input, flags, encoding);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 364 ” ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬ ‫وسيط‬ ‫تحدد‬ encoding ‫اإلعداد‬ .‫تقديمها‬ ‫تم‬ ‫إذا‬ ،‫األحرف‬ ‫مجموعة‬ “ "‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ 8 - UTF ” ‫ات‬‫ر‬‫اإلشا‬ ‫وسيط‬ ‫تتحكم‬ ." flags ‫سيتم‬ ‫كان‬ ‫إذا‬ ‫ما‬ ‫ي‬ ‫ف‬ “ ‫يحول‬ .‫لها‬ ‫كيان‬ ‫نماذج‬ ‫إىل‬ ‫والمزدوجة‬ ‫المفردة‬ ‫االقتباس‬ ‫عالمات‬ ‫تحويل‬ ENT_COMPAT ) ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ( ‫يحول‬ ‫بينما‬ ،‫فقط‬ ‫المزدوجة‬ ‫االقتباس‬ ‫عالمات‬ ENT_QUOTES ‫بينما‬ ،‫االقتباس‬ ‫ي‬ ‫نوع‬ ‫كال‬ ‫ال‬ ‫يحول‬ ENT_NOQUOTES ً ‫ا‬ً‫أي‬ ‫االقتباس‬ ‫عالمات‬ ‫لتحويل‬ ‫خيار‬ ‫يوجد‬ ‫ال‬ .‫منهما‬ :‫فمثال‬ .‫فقط‬ ‫المفردة‬ $input =""Stop pulling my hair!" Jane's eyes flash ed.<p>"; //echo $input; $double = htmlentities($input); // &quot;Stop pulling my hair!&quot; Jane's eyes flas hed.&lt;p&gt; echo $double; echo '<br>'; $both = htmlentities($input, ENT_QUOTES); // &quot;Stop pulling my hair!&quot; Jane&#039;s eyes flashed.&lt;p&gt; echo $both; echo '<br>'; $neither = htmlentities($input, ENT_NOQUOTES); // "Stop pulling my hair!" Jane's eyes flashed.&lt;p& gt; echo $neither; echo '<br>';
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 365 ‫كيانات‬ ‫اقتباس‬ ‫محددة‬ ‫بلغة‬ HTML ‫الدالة‬ ‫تقوم‬ htmlspecialchars() ‫الكيانات‬ ‫من‬ ‫ممكنة‬ ‫مجموعة‬‫أصغر‬ ‫بتحويل‬ ‫إلنشاء‬ HTML :‫التالية‬ ‫الكيانات‬ ‫تحويل‬ ‫يتم‬ .‫صالح‬ ❖ ‫العطف‬ (&) “Ampersands” ‫ل‬ ‫ر‬ ‫تغت‬ &amp; ❖ ” ‫مزدوجة‬ ‫تنصيص‬ ‫عالمات‬ Double quotes “ ) “ ( ‫ل‬ ‫ر‬ ‫تغت‬ &quot; ❖ ‫مفردة‬ ‫تنصيص‬ ‫عالمات‬ ) ‘ ( ; ‫ل‬ ‫ر‬ ‫تغت‬ 039 &# ❖ ‫من‬ ‫أقل‬ ‫عالمات‬ ) < ( ‫ل‬ ‫ر‬ ‫تغت‬ &lt; ❖ ‫من‬ ‫ر‬ ‫أكت‬ ‫عالمات‬ ) > ( ‫ل‬ ‫ر‬ ‫تغت‬ &gt; ‫فأنت‬ ،‫نموذج‬ ‫ي‬ ‫ف‬ ‫المستخدم‬ ‫أدخلها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫يعرض‬ ‫تطبيق‬ ‫لديك‬ ‫كان‬‫إذا‬ ‫إىل‬ ‫بحاجة‬ ‫تطبيق‬ ‫خالل‬ ‫من‬ ‫البيانات‬ ‫تلك‬ htmlspecialchars() ‫أو‬ ‫عرضها‬ ‫قبل‬ ‫مثل‬ ‫سلسلة‬ ‫المستخدم‬ ‫وأدخل‬ ،‫بذلك‬ ‫تقم‬ ‫لم‬ ‫إذا‬ .‫حفظها‬ "angle < 30" "‫أو‬ sturm & drang ‫ي‬ ‫ه‬ ‫الخاصة‬ ‫األحرف‬ ‫أن‬ ‫المتصفح‬ ‫فسيعتقد‬ ،" HTML ‫مما‬ ، .‫مشوهة‬ ‫صفحة‬ ‫إىل‬ ‫يؤدي‬ ‫مثل‬ htmlentities() ‫يستغرق‬ ‫أن‬ ‫يمكن‬ ، htmlspecialchars() ‫يصل‬ ‫ما‬ :‫مدخالت‬ ‫ثالث‬ ‫إىل‬ $output = htmlspecialchars(input, [flags,[encoding]]); ‫األعالم‬ ‫المدخالت‬ “flasgs” ” ‫ر‬ ‫مت‬ ‫ر‬ ‫والت‬ encoding ‫الذي‬ ‫المعت‬ ‫نفس‬ ‫لها‬ “ ‫مع‬ ‫تستخدمه‬ htmlentities() .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 366 ‫إزالة‬ ‫أوسمة‬ HTML ‫الدالة‬ ‫تزيل‬ strip_tags() ‫أوسمة‬ HTML :‫السلسلة‬ ‫من‬ $input = '<p>Howdy, &quot;Cowboy&quot;</p>'; $output = strip_tags($input); echo $output; // $output is 'Howdy, &quot;Cowboy&quot;' ‫ا‬ ً ‫ض‬ً‫أي‬ ‫يتم‬ .‫السلسلة‬ ‫ي‬ ‫ف‬ ‫كها‬ ‫ر‬ ‫لت‬ ‫األوسمة‬ ‫من‬ ‫سلسلة‬ ‫يحدد‬ ‫ي‬ ‫ثان‬ ‫مدخل‬ ‫الدالة‬ ‫تأخذ‬ ‫قد‬ :‫الثانية‬ ‫الوسيط‬ ‫ي‬ ‫ف‬ ‫المدرجة‬ ‫األوسمة‬ ‫إغالق‬ ‫بأشكال‬ ‫االحتفاظ‬ $input = 'The <b>bold</b> tags will <i>stay</i> <p>'; $output = strip_tags($input, '<b>'); echo $output; // $output is 'The <b>bold</b> tags will stay' ‫بواسطة‬ ‫المحفوظة‬ ‫األوسمة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫الخاصيات‬ ‫ر‬ ‫تغيت‬ ‫يتم‬ ‫ال‬ strip_tags() . $input = 'The <b style="color:red">bold</b> tag s will <i style="color:green">stay</i><p>'; $output = strip_tags($input, '<b>'); echo $output; // $output is 'The <b>bold</b> tags will stay'
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 367 ‫الوصفية‬ ‫األوسمة‬ ‫استخراج‬ meta ‫الدالة‬ ‫ترجع‬ get_meta_tags() ‫لصفحة‬ ‫الوصفية‬ ‫األوسمة‬ ‫من‬ ‫مصفوفة‬ HTML ‫عنوان‬ ‫أو‬ ‫ي‬ ‫محىل‬ ‫ملف‬ ‫كاسم‬ ‫محددة‬ ، URL ‫وسم‬ ‫اسم‬ ‫يصبح‬ . meta ‫)الكلمات‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫المفتاح‬ ‫هو‬ (‫ذلك‬ ‫إىل‬ ‫وما‬ ،‫والوصف‬ ،‫والمؤلف‬ ،‫الرئيسية‬ ‫وسم‬ ‫محتوى‬ ‫ويصبح‬ meta :‫المقابلة‬ ‫القيمة‬ ‫ي‬ ‫ه‬ $metaTags = get_meta_tags('https://github.com/a nasalpure'); echo($metaTags['description']); :‫هو‬ ‫للدالة‬ ‫العام‬ ‫الشكل‬ $array = get_meta_tags(filename [, use_include_path]); ‫قيمة‬ ‫مرر‬ true ‫ل‬ use_include_path ‫ل‬ ‫للسماح‬ PHP ‫الملف‬ ‫فتح‬ ‫بمحاولة‬ . ‫ي‬ ‫القياش‬ ‫ر‬ ‫التضمي‬‫مسار‬ ‫باستخدام‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 368 ‫عناوين‬ URL ‫يوفر‬ PHP ‫ر‬ ‫ترمت‬ ‫وإىل‬ ‫من‬ ‫للتحويل‬ ‫دوال‬ URL ‫عناوين‬ ‫بإنشاء‬ ‫لك‬ ‫يسمح‬ ‫مما‬ ، URL ‫ر‬ ‫ترمت‬ ‫من‬ ‫نوعان‬ ‫الواقع‬ ‫ي‬ ‫ف‬ ‫يوجد‬ .‫ها‬ ‫ر‬ ‫تشفت‬ ‫وفك‬ URL ‫مع‬ ‫تعاملهما‬ ‫كيفية‬ ‫ي‬ ‫ف‬ ‫يختلفان‬ .‫المسافات‬ - ‫األول‬ ( ‫بواسطة‬ ‫المحدد‬ RFC 3986 ) ‫ر‬ ‫غت‬ ‫حرف‬ ‫مجرد‬ ‫أنها‬ ‫عىل‬ ‫المسافة‬ ‫يعامل‬ ‫عنوان‬ ‫ي‬ ‫ف‬ ‫آخر‬ ‫ي‬ ‫قانون‬ URL ‫ك‬ ‫ها‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫بت‬ ‫ويقوم‬ 02 .% - ‫الثانية‬ ) application/x-www-form-urlencoded ( ‫ترم‬ + ‫ك‬ ‫مسافة‬ ‫ر‬ ‫ت‬ .‫االستعالم‬ ‫سالسل‬ ‫بناء‬ ‫ي‬ ‫ف‬ ‫وتستخدم‬ ‫الحظ‬ ‫تريد‬ ‫ال‬ ‫أنك‬ ‫عنوان‬ ‫عىل‬ ‫الدوال‬ ‫هذه‬ ‫استخدام‬ URL ‫مثل‬ ،‫كامل‬ http://www.example.com/hello ‫ط‬ ‫ر‬ ‫والش‬ ‫ر‬ ‫النقطتي‬ ‫ستتخط‬ ‫إنها‬ ‫حيث‬ ، :‫إلنتاج‬ http%3A%2F%2Fwww.example.com%2Fhello ‫ر‬ ‫بتشفت‬ ‫قم‬ ‫عناوين‬ URL ‫فقط‬ ‫الجزئية‬ ( ‫بعد‬ ‫الجزء‬ http://www.example.com/ ) . ً ‫ا‬ ً ‫الحق‬ ‫المجال‬ ‫واسم‬ ‫وتوكول‬ ‫ر‬ ‫الت‬ ‫وإضافة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 369 ‫ترميز‬ RFC 3986 ‫ترميزه‬ ‫وفك‬ ‫ر‬ ‫للتشفت‬ ‫استخدم‬ rawurlencode() : $output = rawurlencode(input); ‫بأحرف‬ ‫نسخة‬ ‫بإرجاع‬ ‫وتقوم‬ ‫سلسلة‬ ‫الدالة‬ ‫هذه‬ ‫تأخذ‬ URL ‫ي‬ ‫ف‬ ‫مشفرة‬ ‫قانونية‬ ‫ر‬ ‫غت‬ ‫اصطالح‬ %dd . ‫ديناميكيا‬ ‫ي‬ ‫ر‬ ‫تشعت‬ ‫نص‬ ‫اجع‬‫ر‬‫م‬ ‫بإنشاء‬ ‫تقوم‬ ‫كنت‬‫إذا‬ ‫للروابط‬ ‫فستحتاج‬ ،‫ما‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫باستخدام‬ ‫تحويلها‬ ‫إىل‬ :rawurlencode() $name = "Programming PHP"; $output = rawurlencode($name); echo "http://localhost/{$output}"; //http://localhost/Programming%20PHP ‫الدالة‬ ‫تقوم‬ rawurldecode() ‫بعنوان‬ ‫المشفرة‬ ‫السالسل‬ ‫ر‬ ‫تشفت‬ ‫بفك‬ URL : $encoded = 'Programming%20PHP'; echo rawurldecode($encoded); //Programming PHP ‫ترميز‬ application/x-www-form-urlencoded ‫دوال‬ ‫تختلف‬ urlencode() ‫و‬ urldecode() ‫حيث‬ ‫من‬ ‫فقط‬ ‫األولية‬ ‫اتها‬ ‫ر‬ ‫نظت‬ ‫عن‬ ‫جمع‬ ‫كعالمات‬ ‫المسافات‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫بت‬ ‫تقوم‬ ‫أنها‬ ( + ) ‫التسلسل‬ ‫من‬ ً ‫بدال‬ 02 ‫هو‬ ‫هذا‬ .%
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 370 ‫بناء‬ ‫تنسيق‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫وقيم‬ ‫االستعالم‬ ‫سالسل‬ cookies . HTML . ‫تقوم‬ PHP ً‫تلقائي‬ ،‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫وقيم‬ ‫االستعالم‬ ‫سالسل‬ ‫ر‬ ‫تشفت‬ ‫بفك‬ ً ‫ا‬ .‫القيم‬ ‫هذه‬ ‫لمعالجة‬ ‫الدوال‬ ‫هذه‬ ‫استخدام‬ ‫إىل‬ ‫تحتاج‬ ‫ال‬ ‫لذلك‬ $baseUrl = 'http://www.google.com/q='; $query = 'PHP tutorial'; $url = $baseUrl . urlencode($query); echo $url; //http://www.google.com/q=PHP+tutorial SQL ‫استعالمات‬ ‫ي‬ ‫ف‬ ‫الحرفية‬ ‫القيم‬ ‫تجاوز‬ ‫يتم‬ ‫أن‬ ‫البيانات‬ ‫قواعد‬ ‫أنظمة‬ ‫معظم‬ ‫تتطلب‬ SQL ‫ر‬ ‫ترمت‬ ‫نظام‬ . SQL ً ‫ا‬ ً ‫جد‬ ‫بسيط‬ - ‫المفردة‬ ‫االقتباس‬ ‫عالمات‬ َ ‫ق‬َ‫ب‬ ُ ‫تس‬ ‫أن‬ ‫يجب‬ ‫و‬ ‫المزدوجة‬ ‫االقتباس‬ ‫وعالمات‬ NUL ‫مائلة‬ ‫طة‬ ‫ر‬ ‫بش‬ ‫للخلف‬ ‫المائلة‬ ‫طات‬ ‫ر‬ ‫والش‬ ‫دالة‬ ‫تضيف‬ .‫للخلف‬ addslashes() ‫الدالة‬ ‫وتقوم‬، ‫المائلة‬ ‫الخطوط‬ ‫هذه‬ stripslashes() :‫التها‬‫ز‬‫بإ‬ $str="Hello PHP!"; echo "Your String is: ".$str; echo "<br>"; echo "By using addslashes() Function: ".addslas hes($str); echo "<br>"; echo "By using stripcslashes() Function: ".stripcsl ashes($str);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 371 ‫السالسل‬ ‫مقارنة‬ ‫دقيقة‬ ‫مقارنات‬ ‫ي‬ ‫ف‬ ‫العوامل‬ ‫هذه‬ ‫تختلف‬ .=== ‫و‬ == ‫عوامل‬ ‫مع‬ ‫للمساواة‬ ‫ر‬ ‫سلسلتي‬ ‫مقارنة‬ ‫يمكنك‬ ‫ر‬ ‫غت‬ ‫المعامالت‬ ‫مع‬ ‫تعاملها‬ ‫كيفية‬ )‫النصية(سالسل‬ ‫معامالت‬ == ‫عامل‬ ‫يحول‬. ‫تساوي‬ ‫عن‬ ‫يبلغ‬ ‫لذلك‬ ،‫أرقام‬ ‫إىل‬ ‫السلسلة‬ 7 "‫و‬ 7 ." ‫تساوي‬ ‫عن‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫لغ‬ُ‫ب‬ُ‫ي‬ ‫فإنه‬ ،‫أرقام‬ ‫إىل‬ ‫السالسل‬ ‫تحويل‬ ‫لقواعد‬ ً ‫ا‬ً ‫نظر‬ 7 ‫و‬ "7b" ‫عامل‬ . ‫ويعيد‬ ،‫يحول‬ ‫ال‬ === False :‫المدخالت‬ ‫بيانات‬ ‫أنواع‬ ‫اختلفت‬ ‫إذا‬ $o1 = 7; $o2 = "7"; if($o1 == $o2) { echo("== returns true<br>"); } if ($o1 === $o2) { echo("=== returns true<br>"); } ‫المقارنة‬ ‫عوامل‬ ( <, <=, >, >= ) :‫النصية‬ ‫السالسل‬ ‫عىل‬ ‫أيضا‬ ‫تعمل‬ ‫تكون‬ ‫عندما‬ ‫إىل‬ ‫األخر‬ ‫المدخل‬ ‫تحويل‬ ‫يتم‬ ،‫رقم‬ ‫عن‬ ‫عبارة‬ ‫المقارنة‬ ‫عامل‬ ‫مدخالت‬ ‫إحدى‬ .‫رقم‬ ‫لزم‬ ‫إذا‬ ‫سالسل‬ ‫إىل‬ ‫األرقام‬ ‫تحويل‬ ‫مع‬ ،‫كسالسل‬ ‫ح‬ ‫ي‬‫ص‬ ‫بشكل‬ ‫ر‬ ‫سلسلتي‬ ‫لمقارنة‬ ‫الدالة‬ ‫استخدم‬ ،‫األمر‬ :strcmp() $relationship = strcmp(string_1, string_2);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 372 ‫االحرف‬ ‫لحالة‬ ‫حساسة‬ ‫الدالة‬ ‫هذه‬ ‫من‬ ‫أقل‬ ً ‫ا‬ ً ‫عدد‬ ‫الدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ 0 ‫كانت‬‫إذا‬ string_1 ‫اقل‬ ‫من‬ string_2 ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ، 0 ‫كانت‬‫إذا‬ string_2 ‫ر‬ ‫اكت‬ ‫من‬ string_1 ‫أو‬ ، 0 :‫نفسها‬ ‫ي‬ ‫ه‬ ‫كانت‬‫إذا‬ 1 ‫ي‬ ‫ف‬ ‫االختالف‬ strcmp() ‫هو‬ strcasecmp() ‫إىل‬ ‫السالسل‬ ‫يحول‬ ‫والذي‬ ، ‫أحرف‬ . ‫مقارنتها‬ ‫قبل‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫ب‬ ‫الخاصة‬ ‫نفسها‬ ‫ي‬ ‫ه‬ ‫به‬ ‫الخاصة‬ ‫اإلرجاع‬ ‫وقيم‬ ‫المدخالت‬ strcmp() : strcasecmp("ANAS", "aNas"); // 0 ‫من‬ ‫فقط‬ ‫األوىل‬ ‫القليلة‬ ‫األحرف‬ ‫مقارنة‬ ‫وهو‬ ‫السلسلة‬ ‫مقارنة‬ ‫ي‬ ‫ف‬ ‫آخر‬ ‫اختالف‬ ‫هناك‬ ‫الدالتان‬ ‫تأخذ‬ .‫السلسلة‬ strncmp() ‫و‬ strncasecmp() ‫العدد‬ ، ‫ي‬ ‫إضاف‬ ‫مدخل‬ :‫للمقارنات‬ ‫استخدامها‬ ‫اد‬‫ر‬‫الم‬ ‫لألحرف‬ ‫ي‬ ‫األوىل‬ $relationship = strncmp(string_1, string_2, len); $relationship = strncasecmp(string_1, string_2, len); ‫التقريبية‬ ‫المساواة‬ ‫توفر‬ PHP ‫كانت‬‫إذا‬ ‫ما‬ ‫اختبار‬ ‫لك‬ ‫تتيح‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ً ‫ا‬ً‫تقريب‬ ‫متساويتان‬ ‫سلسلتان‬ ‫هناك‬ — ‫الدالة‬ ‫ترجع‬ similar_text() ‫المدخل‬. ‫السلسلة‬ ‫مدخل‬ ‫ر‬ ‫بي‬ ‫كة‬ ‫ر‬ ‫المشت‬ ‫األحرف‬ ‫عدد‬ ‫تخ‬ ‫فيه‬ ‫يتم‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ه‬ ،‫وجدت‬ ‫إن‬ ،‫الثالثة‬ :‫مئوية‬ ‫كنسبة‬‫ك‬ ‫ر‬ ‫المشت‬ ‫القاسم‬ ‫زين‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 373 $string1 = "Rasmus Lerdorf"; $string2 = "Razmus Lehrdorf"; $common = similar_text($string1, $string2, $per cent); printf("They have %d chars in common (%.2f%%)." , $common, $percent); //They have 13 chars in common (89.66%). ‫السالسل‬ ‫في‬ ‫والبحث‬ ‫التالعب‬ PHP ‫الدوال‬. ‫السالسل‬ ‫مع‬ ‫للعمل‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫لديها‬ ‫للبحث‬ ً ‫ا‬ ً‫استخدام‬ ‫ر‬ ‫األكت‬ ‫السلسلة‬ ‫لوصف‬ ‫النمطية‬ ‫ات‬ ‫ر‬ ‫التعبت‬ ‫تستخدم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫تلك‬ ‫ي‬ ‫ه‬ ‫وتعديلها‬ ‫السالسل‬ ‫عن‬ .‫المعنية‬ Substrings ‫السالسل‬ ‫الجزئية‬ ‫ي‬ ‫ف‬ ‫بها‬ ‫تهتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫مكان‬ ‫تعرف‬ ‫كنت‬ ‫إذا‬ ‫ال‬ ‫فيمكنك‬ ، ‫سلسلة‬ ‫اقتطاعها‬ ‫الدالة‬ ‫باستخدام‬ substr() : $piece = substr(string, start [, length ]); ” ‫البداية‬ ‫مدخل‬ start ‫الموضع‬‫هو‬ “ ( index ) ” ‫السلسلة‬ ‫ي‬ ‫ف‬ string ‫عنده‬‫يبدأ‬ ‫الذي‬ “ ‫الرقم‬ ‫ر‬ ‫يشت‬ ‫حيث‬ ،‫النسخ‬ 0 ” ‫الطول‬ ‫مدخل‬. ‫السلسلة‬ ‫بداية‬ ‫إىل‬ length ‫عدد‬ ‫هو‬ “ ‫نسخها‬ ‫اد‬‫ر‬‫الم‬ ‫األحرف‬ ) ‫السلسلة‬ ‫نهاية‬ ‫ر‬ ‫حت‬ ‫النسخ‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ( :‫فمثال‬ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 374 $str = "welcome at midmar"; $str1 = substr($str, 11); $str2 = substr($str, 11, 6); echo $str1;// midmar echo $str2;// midmar ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬‫ر‬‫الم‬ ‫عدد‬ ‫لمعرفة‬ ‫تتواجد‬ ‫استخدم‬ ، ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫داخل‬ ‫أصغر‬ ‫سلسلة‬ ‫فيها‬ substr_count() : $number = substr_count(big_string, small_string); $str = "we are learning,we ara great"; echo substr_count($str,'we');//2 ‫الدالة‬ ‫تسمح‬ substr_replace() ‫عديدة‬ ‫بأنواع‬ :‫السلسلة‬ ‫تعديالت‬ ‫من‬ $string = substr_replace(original, new, start [, length ]); ‫الجزء‬ ‫الدالة‬ ‫تستبدل‬ original ‫ب‬ ‫إليه‬ ‫المشار‬ start ‫وقيم‬ length ‫بالسلسلة‬ new ‫فإن‬ ،‫ابع‬‫ر‬ ‫مدخل‬ ‫إعطاء‬ ‫يتم‬ ‫لم‬‫إذا‬ . substr_replace() ‫من‬ ‫النص‬ ‫يزيل‬ start :‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫السلسلة‬ ‫نهاية‬ ‫إىل‬ $greeting = "good morning citizen"; $farewell = substr_replace($greeting, "bye", 5, 7); echo $farewell;// good bye citizen
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 375 ‫ر‬ ‫يشت‬ length ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫السلسلة‬ ‫نهاية‬ ‫من‬ ‫األحرف‬ ‫عدد‬ ‫إىل‬ ‫السالب‬ :‫لحذف‬ ‫إيقاف‬ ‫عندها‬ $greeting = "good morning citizen"; $greeting = substr_replace($greeting, "", -8); echo $greeting;// good morning ‫السالسل‬ ‫دوال‬ ‫اخرى‬ ‫الدالة‬ ‫تأخذ‬ strrev() :‫منها‬ ‫معكوسة‬ ‫نسخة‬ ‫وتعيد‬ ‫سلسلة‬ $string = strrev(string); $greeting = "good morning citizen"; $greeting = strrev($greeting); echo $greeting;// nezitic gninrom doog ‫الدالة‬ ‫تأخذ‬ str_repeat() ” ‫سلسلة‬ string “ ” ً ‫ا‬ ً ‫وعدد‬ count ‫سلسلة‬ ‫وتعيد‬ “ ” ‫عدد‬ ‫من‬ ‫تتكون‬ ‫جديدة‬ count ” ‫سلسلة‬ ‫ار‬‫ر‬‫تك‬ ‫ات‬‫ر‬‫“م‬ string :‫المدخل‬ “ $repeated = str_repeat(string, count); :‫مموجة‬ ‫أفقية‬ ‫قاعدة‬ ‫لبناء‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ echo str_repeat('Hi ', 5); //Hi Hi Hi Hi Hi ‫دالة‬ ‫تقوم‬ str_pad() ‫السلسلة‬ ‫تحديد‬ ‫يمكنك‬ ، ً ‫ا‬ً‫اختياري‬ .‫أخرى‬ ‫مع‬ ‫سلسلة‬ ‫بربط‬ :‫كليهما‬‫أو‬ ‫ر‬ ‫اليمي‬‫أو‬ ‫اليسار‬ ‫عىل‬ ‫ستضعها‬ ‫كنت‬‫إذا‬ ‫وما‬ ،‫بطها‬ ‫ر‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 376 function str_pad( $input, $pad_length, $pad_string = " ", $pad_type = STR_PAD_RIGHT ) { } :‫بمسافات‬ ‫ر‬ ‫اليمي‬ ‫عىل‬ ‫ربط‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ $string = str_pad('hello', 20,'.'); echo "{$string}:world"; //hello...............: world
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 377 Decomposing a String ‫سلسلة‬ ‫تحليل‬ ‫توفر‬ PHP ‫تيب‬ ‫ر‬ ‫بت‬ .‫أصغر‬ ‫مكونات‬ ‫إىل‬ ‫سلسلة‬ ‫بتقسيم‬ ‫لك‬ ‫للسماح‬ ‫الدوال‬ ‫من‬‫العديد‬ ، ‫التعقيد‬ ‫من‬ ‫ايد‬ ‫ر‬ ‫مت‬ .sscanf() ‫و‬ strtok() ‫و‬ explode() : ‫ي‬ ‫ه‬ EXPLODING AND IMPLODING ‫عىل‬ .‫القيم‬ ‫من‬ ‫مجموعة‬ ‫إىل‬ ‫تقسيمها‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫كسالسل‬‫البيانات‬ ‫تصل‬ ‫ما‬ ً ‫ا‬ً‫غالب‬ ‫مثل‬ ‫سلسلة‬ ‫من‬ ‫بفواصل‬ ‫المفصولة‬ ‫الحقول‬ ‫تقسيم‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫قد‬ ،‫المثال‬ ‫سبيل‬ "anas,28,alpure" ‫دالة‬ ‫استخدم‬ ،‫الحاالت‬ ‫هذه‬ ‫ي‬ ‫ف‬ explode() : $array = explode(separator, string [, limit]); ” ‫الفاصل‬ ،‫األول‬ ‫المدخل‬ separator ‫عىل‬ ‫تحتوي‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ،“ ‫ال‬ ‫فاصل‬ ‫ة‬ ” ‫نصية‬ ‫سلسلة‬ ، ‫ي‬ ‫الثان‬ ‫المدخل‬. string ‫تقسيمها‬ ‫اد‬‫ر‬‫الم‬ ‫السلسلة‬ ‫ي‬ ‫ه‬ ،“ ” ‫الحد‬ ،‫االختياري‬ ‫الثالث‬ ‫المدخل‬. limit ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫القيم‬ ‫لعدد‬ ‫األقص‬ ‫الحد‬ ‫ي‬ ‫ه‬ ،“ ‫الع‬ ‫فإن‬ ،‫الحد‬ ‫إىل‬ ‫الوصول‬ ‫تم‬ ‫إذا‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫إرجاعها‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫األخت‬ ‫نرص‬ :‫السلسلة‬ ‫ي‬ ‫ر‬ ‫باف‬ ‫عىل‬ ‫يحتوي‬ $input = 'Anas,28,Alpure'; $fields = explode(',', $input); print_r($fields); //Array ( [0] => Anas [1] => 28 [2] => Alpure ) $fields = explode(',', $input, 2); print_r($fields); //Array ( [0] => Anas [1] => 28,Alpure )
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 378 ‫دالة‬ ‫تعمل‬ implode() ‫من‬ ً ‫ا‬ ً‫تمام‬ ‫العكس‬ ‫عىل‬ explode() - ‫سلسلة‬ ‫ر‬ ‫تنىس‬ ‫ي‬ ‫فه‬ :‫األصغر‬ ‫السالسل‬ ‫من‬ ‫مجموعة‬ ‫من‬ ‫ة‬ ‫ر‬ ‫كبت‬ $string = implode(separator, array); ” ‫الفاصل‬ ،‫األول‬ ‫المدخل‬ separator ‫عناص‬ ‫ر‬ ‫بي‬ ‫وضعها‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫السلسلة‬‫هو‬ ،“ ‫المدخل‬ ” ‫المصفوفة‬ ، ‫ي‬ ‫الثان‬ array ‫المفصولة‬ ‫البسيطة‬ ‫القيمة‬ ‫سلسلة‬ ‫بناء‬ ‫إلعادة‬ .“ :‫ببساطة‬ ‫قل‬ ،‫بفاصلة‬ $fields = array('Anas', '28', 'Alpure'); $string = implode(',', $fields); echo $string;//Anas,28,Alpure ‫دالة‬ join() ‫ل‬ ‫مستعار‬ ‫اسم‬ ‫ي‬ ‫ه‬ implode() . ‫في‬ ‫البحث‬ ‫دوال‬ ‫السالسل‬ ‫هناك‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫عىل‬ ‫تبحث‬ ‫ي‬ ‫ر‬ ‫الت‬ . ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫داخل‬ ‫حرف‬‫أو‬ ‫سلسلة‬ ‫ترجع‬ ‫السالسل‬ ‫عن‬ ‫البحث‬ ‫دوال‬ ‫جميع‬ false ‫السلسلة‬ ‫عىل‬‫العثور‬ ‫من‬ ‫تتمكن‬ ‫لم‬ ‫إذا‬ ‫حددتها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الفرعية‬ ‫ترجع‬ ‫الداالت‬ ‫فإن‬ ،‫السلسلة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫تحدث‬ ‫الفرعية‬ ‫السلسلة‬ ‫كانت‬‫إذا‬ 0 ‫ألن‬ ً ‫ا‬ً ‫نظر‬ . false ‫بالرقم‬ ‫ي‬ ‫ر‬ ‫يلق‬ 0 ‫عند‬ === ‫ب‬ ‫اإلرجاع‬ ‫قيمة‬ ‫بمقارنة‬ ً ‫ا‬ ً‫دائم‬ ‫فقم‬ ، ‫اال‬ :‫ختبار‬ if ($pos === false) { // wasn't found } else { // was found, $pos is offset into string }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 379 ‫األماكن‬ ‫بإرجاع‬ ‫البحث‬ ‫عمليات‬ ‫الدالة‬ ‫تبحث‬ strpos() : ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫نصية‬ ‫لسلسلة‬ ‫األول‬ ‫التواجد‬ ‫عن‬ $position = strpos(large_string, small_string); ‫فإن‬ ،‫ة‬ ‫ر‬ ‫الصغت‬ ‫السلسلة‬ ‫عىل‬‫العثور‬ ‫يتم‬ ‫لم‬ ‫إذا‬ strpos() ‫ترجع‬ false . ‫الدالة‬ ‫تبحث‬ strrpos() ‫المدخالت‬ ‫نفس‬ ‫يأخذ‬ .‫سلسلة‬ ‫ي‬ ‫ف‬ ‫لحرف‬ ‫تواجد‬ ‫آخر‬ ‫عن‬ ‫القيمة‬ ‫نوع‬ ‫نفس‬ ‫ويرجع‬ .strpos() ‫مثل‬ $str = "Hi,World,Hi,everyone"; $pos = strpos($str, "Hi"); $posr = strrpos($str, "Hi"); echo $pos;//0 echo $posr;//9 ‫السلسلة‬ ‫بقية‬ ‫ترجع‬ ‫التي‬ ‫البحث‬ ‫عمليات‬ ‫الدالة‬ ‫تبحث‬ strstr() ‫من‬ ‫وترجع‬ ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫لسلسلة‬ ‫ظهور‬ ‫أول‬ ‫عن‬ . ‫ة‬ ‫ر‬ ‫الصغت‬ ‫السلسلة‬ ‫تلك‬ :‫المثال‬ ‫سبيل‬ ‫عىل‬ $str = "Hi,World,Hi,everyone"; $rest = strstr($str, ","); echo $rest;//,World,Hi,everyone
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 380 ‫ي‬ ‫ف‬ ‫االختالفات‬ strstr() : ‫ي‬ ‫ه‬ stristr() ‫األحرف‬ ‫لحالة‬ ‫حساس‬ ‫ر‬ ‫غت‬ strchr() ‫ل‬ ‫مستعار‬ ‫اسم‬ ‫هو‬ strstr() ‫مع‬ ‫الحال‬ ‫هو‬ ‫كما‬ strrpos() ‫يبحث‬ ، strrchr() ‫عن‬ ‫ولكن‬ ،‫السلسلة‬ ‫ي‬ ‫ف‬ ‫للخلف‬ .‫كاملة‬‫سلسلة‬ ‫عن‬ ‫وليس‬ ،‫فقط‬ ‫واحد‬ ‫حرف‬ ‫المواقع‬ ‫عناوين‬ ‫فك‬ DECOMPOSING URLS ‫الدالة‬ ‫ترجع‬ parse_url() ‫عنوان‬ ‫مكونات‬ ‫من‬ ‫مجموعة‬ URL : $array = parse_url(url); $parts = parse_url("http://me:secret@example.co m/cgibin/board?user=fred"); print_r($parts); /* Array ( [scheme] => http [host] => example.com [user] => me [pass] => secret [path] => /cgibin/board [query] => user=fred ) */ ‫و‬ ‫ي‬ ‫ه‬ ‫للتجزئة‬ ‫المحتملة‬ ‫المفاتيح‬ host ‫و‬ port ‫و‬ user ‫و‬ pass ‫و‬ path ‫و‬ query ‫و‬ fragment .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 381 ‫المصوفات‬ array ‫المفتاح‬ ‫أزواج‬ ‫من‬ ‫مرتبة‬ ‫كمجموعة‬ ‫المنظمة‬ ‫البيانات‬ ‫قيم‬ ‫من‬ ‫مجموعة‬ ‫ي‬ ‫ه‬ ” ‫والقيمة‬ key-value ‫تقترص‬ ‫ال‬.“ ‫المصفوفات‬ ‫قيم‬ .‫البيانات‬ ‫من‬ ‫واحد‬ ‫نوع‬ ‫عىل‬ ‫باإلضافة‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫منطقية‬ ‫وقيم‬ ‫صحيحة‬ ‫وأعداد‬ ‫سالسل‬ ‫عىل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ .‫أخرى‬ ‫مصفوفات‬ ‫عىل‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المصفوفات‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ،‫ذلك‬ ‫إىل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المضمنة‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫فهناك‬ ،‫ومفيدة‬ ً ‫ا‬ ً ‫جد‬ ‫شائعة‬ ‫المصفوفات‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ ‫ي‬ ‫ف‬ ‫معها‬ ‫تعمل‬ PHP . ‫الم‬ ‫المفهرسة‬ ‫صفوفات‬ ‫و‬ ‫ال‬ ‫المصفوفة‬ ‫م‬ ‫ترابطة‬ ‫ي‬ ‫ف‬ ‫المصفوفات‬ ‫من‬ ‫نوعان‬ ‫يوجد‬ PHP ” ‫مفهرسة‬ : indexed ‫ابطية‬‫ر‬‫وت‬ “ ” associative ‫بالرقم‬ ‫تبدأ‬ ‫صحيحة‬ ‫أعداد‬ ‫ي‬ ‫ه‬ ‫المفهرسة‬ ‫المصفوفة‬ ‫مفاتيح‬ .“ 0 . ‫تحتوي‬ .‫موقعها‬ ‫حسب‬ ‫األشياء‬ ‫تحدد‬ ‫عندما‬ ‫المفهرسة‬ ‫المصفوفات‬ ‫تستخدم‬ ‫عىل‬ ‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفات‬ ‫من‬ ‫المكونة‬ ‫الجداول‬ ‫مثل‬ ‫وتترصف‬ ‫كمفاتيح‬ ‫سالسل‬ .‫عمودين‬ .‫القيمة‬ ‫إىل‬ ‫للوصول‬ ‫يستخدم‬ ‫والذي‬ ،‫المفتاح‬ ‫هو‬ ‫األول‬ ‫العمود‬ ‫تقوم‬ PHP ‫ابطية‬‫ر‬‫ت‬ ‫كمصفوفات‬ ً ‫ا‬ً‫داخلي‬ ‫المصفوفات‬ ‫جميع‬ ‫بتخزين‬ . ‫الوحيد‬ ‫الفرق‬ ‫هو‬ ‫والمفهرسة‬ ‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفات‬ ‫ر‬ ‫بي‬ ‫نوع‬ ‫تكون‬ ، ‫ر‬ ‫الحالتي‬ ‫كلتا‬ ‫ي‬ ‫ف‬ .‫المفاتيح‬ ‫ا‬ ‫بغض‬ ،‫المفتاح‬ ‫بنفس‬ ‫ان‬‫رص‬‫عن‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫ال‬ ،‫آخر‬ ‫بمعت‬ .‫فريدة‬ ‫لمفاتيح‬ . ً ‫ا‬ ً ‫صحيح‬ ً ‫ا‬ ً ‫عدد‬‫أو‬ ‫سلسلة‬ ‫المفتاح‬ ‫كان‬‫إذا‬ ‫عما‬‫النظر‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 382 ‫مصفوفات‬ ‫تحتوي‬ PHP ‫المفاتيح‬ ‫عن‬ ً ‫مستقال‬ ‫يكون‬ ‫لعناصها‬ ‫ي‬ ‫داخىل‬ ‫ترتيب‬ ‫عىل‬ ‫استخدامها‬ ‫يمكنك‬ ‫دوال‬ ‫وهناك‬ ،‫والقيم‬ ‫عىل‬ ‫للمرور‬ ‫ع‬ ‫بناء‬ ‫المصفوفات‬ ‫هذا‬ ‫ىل‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫اج‬‫ر‬‫إد‬ ‫فيه‬ ‫تم‬ ‫الذي‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫هو‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ . ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫أو‬ ‫المفاتيح‬ ‫عىل‬ ‫بناء‬ ‫ترتيب‬ ‫إىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫ر‬ ‫تغيت‬ ‫لك‬ ‫تتيح‬ ‫الفرز‬ ‫دوال‬ ‫لكن‬ ،‫المصفوفة‬ .‫تختاره‬ ‫آخر‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫أي‬ ‫أو‬ ‫القيم‬ ‫تحديد‬ ‫المصفوفة‬ ‫عناصر‬ .‫موجودة‬ ‫مصفوفة‬ ‫هيكل‬ ‫عىل‬ ‫نظرة‬ ‫ي‬ ‫ر‬ ‫نلق‬ ‫دعنا‬ ،‫مصفوفة‬ ‫إنشاء‬ ‫ي‬ ‫ف‬ ‫ننظر‬ ‫أن‬ ‫قبل‬ ‫ر‬ ‫متغت‬ ‫اسم‬ ‫باستخدام‬ ‫موجودة‬ ‫مصفوفة‬ ‫من‬ ‫محددة‬ ‫قيم‬ ‫إىل‬ ‫الوصول‬ ‫يمكنك‬ :‫مربعة‬ ‫أقواس‬ ‫داخل‬ ،‫الفهرس‬ ‫أو‬ ،‫العنرص‬ ‫بمفتاح‬ ً ‫ا‬ ً‫متبوع‬ ،‫المصفوفة‬ $users['anas'] $products[5] ‫سلسلة‬ ‫إما‬ ‫المفتاح‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ . ً ‫ا‬ ً ‫صحيح‬ ً ‫ا‬ ً ‫عدد‬ ‫أو‬ ‫المصفوفات‬ ‫في‬ ‫البيانات‬ ‫تخزين‬ ،‫بالفعل‬ ‫موجودة‬ ‫تكن‬ ‫لم‬ ‫إذا‬ ‫المصفوفة‬ ‫إنشاء‬ ‫إىل‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫قيمة‬ ‫تخزين‬ ‫سيؤدي‬ .‫المصفوفة‬ ‫ر‬ ‫تنىس‬ ‫لن‬ ‫تعريفها‬ ‫يتم‬ ‫لم‬ ‫مصفوفة‬ ‫من‬ ‫قيمة‬ ‫داد‬ ‫ر‬ ‫است‬ ‫محاولة‬ ‫ولكن‬ ‫مثل‬ ‫كود‬‫إىل‬ ‫برنامجك‬ ‫ي‬ ‫ف‬ ‫مصفوفة‬ ‫لتهيئة‬ ‫بسيطة‬ ‫مهمة‬ ‫استخدام‬ ‫يؤدي‬ ‫أن‬ ‫يمكن‬ :‫هذا‬ $addresses[0] = "spam@cyberpromo.net"; $addresses[1] = "abuse@example.com"; $addresses[2] = "root@example.com";
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 383 ‫عند‬ ‫بها‬ ‫الصحيحة‬ ‫األعداد‬ ‫ات‬ ‫ر‬ ‫مؤرس‬ ‫تبدأ‬ ،‫مفهرسة‬ ‫مصفوفة‬ ‫هذه‬ 0 . :‫ابطية‬‫ر‬‫ت‬ ‫مصفوفة‬ $price['gasket'] = 15.29; $price['wheel'] = 75.25; $price['tire'] = 50.00; ‫بنية‬ ‫استخدام‬ array() ‫إنشاء‬ ‫إىل‬ ‫هذا‬ ‫يؤدي‬ .‫مدخالتها‬ ‫من‬ ‫مصفوفة‬ ‫لتهيئة‬ ‫الف‬ ‫قيم‬ ‫إنشاء‬ ‫ويتم‬ ،‫مفهرسة‬ ‫مصفوفة‬ ‫هرس‬ ( ‫من‬ ً ‫بدءا‬ ( 0 : ً ‫ا‬ً‫تلقائي‬ $addresses = array("spam@cyberpromo.net", "abuse@example.com", "root@example.com"); ‫باستخدام‬ ‫ابطية‬‫ر‬‫ت‬ ‫مصفوفة‬ ‫إلنشاء‬ array() ‫الرمز‬ ‫استخدم‬ ، => ‫لفصل‬ ‫المفاتيح‬ :‫القيم‬ ‫عن‬ $price = array( 'gasket' => 15.29, 'wheel' => 75.25, 'tire' => 50.00 ); ‫ا‬ ً ‫ض‬ً‫أي‬ ‫يمكنك‬ ‫تهيئة‬ ‫ال‬ :‫أقرص‬ ‫بديلة‬ ‫صيغة‬ ‫باستخدام‬ ‫مصفوفة‬ $price = [ 'gasket' => 15.29, 'wheel' => 75.25, 'tire' => 50. ]; ‫إىل‬ ‫مدخالت‬ ‫أي‬ ‫تمرر‬ ‫ال‬ ،‫فارغة‬ ‫مصفوفة‬ ‫إلنشاء‬ array() : $addresses = array();
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 384 ‫القيم‬ ‫إلحاق‬ ‫بمصفوفة‬ ][ ‫استخدم‬ ،‫موجودة‬ ‫مفهرسة‬ ‫مصفوفة‬ ‫نهاية‬ ‫إىل‬ ‫القيم‬ ‫من‬ ‫المزيد‬ ‫إلضافة‬ $students = array("ِ ahmad", "anwar"); $students[] = "sami"; ‫استخدام‬ ‫يمكن‬ ‫كما‬ array_push() ‫قيم‬ ‫إلضافة‬ ‫و‬ array_pop() ‫لحذف‬ ‫المصفوفة‬ ‫نهاية‬ ‫من‬ ‫قيمة‬ ‫عن‬ ‫تهيئة‬ ‫القيم‬ ‫من‬ ‫نطاق‬ ‫تن‬ ‫الدالة‬ ‫ر‬ ‫ىس‬ range() ‫ر‬ ‫بي‬ ‫األحرف‬ ‫قيم‬ ‫أو‬ ‫المتتالية‬ ‫الصحيحة‬ ‫األعداد‬ ‫من‬ ‫مصفوفة‬ :‫فمثال‬ .‫ات‬ ‫ر‬ ‫كمتغت‬‫وتضمينهما‬ ‫إليها‬ ‫تمررهما‬ ‫ر‬ ‫اللتي‬ ‫ر‬ ‫القيمتي‬ $numbers = range(3, 7); //array(3, 4, 5, 6, 7); $reversedNumbers = range(7, 3); //array(7, 6, 5, 4, 3, 2); ‫المصفوفة‬ ‫حجم‬ ‫على‬ ‫الحصول‬ ‫دالتا‬ count() ‫و‬ sizeof() ‫العناص‬ ‫عدد‬ ‫تعيدان‬. ‫ر‬ ‫والتأثت‬ ‫االستخدام‬ ‫ي‬ ‫ف‬ ‫متطابقتان‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ $extentions = array("org", "com", "net"); $size = count($extentions); //3
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 385 Padding an Array ‫مصفوفة‬ ‫حشو‬ ‫استخدم‬ ،‫المحتوى‬ ‫لنفس‬ ‫مهيأة‬ ‫بقيم‬ ‫مصفوفة‬ ‫إلنشاء‬ array_pad() . ‫ل‬ ‫األول‬ ‫المدخل‬ array_pad() ‫األدن‬ ‫الحد‬ ‫هو‬ ‫ي‬ ‫الثان‬ ‫والمدخل‬ ،‫المصفوفة‬ ‫هو‬ ‫القيمة‬ ‫هو‬ ‫الثالث‬ ‫والمدخل‬ ،‫المصفوفة‬ ‫عليها‬ ‫تحتوي‬ ‫أن‬ ‫تريد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫لعدد‬ ‫للع‬ ‫ناص‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫ت‬ ‫سيتم‬ ‫الدالة‬ ‫ترجع‬ .‫إنشاؤها‬ array_pad() ‫م‬ .‫جديدة‬ ‫صفوفة‬ $scores = array(2, 6); $padded = array_pad($scores, 5, 0); //array(2, 6, 0, 0, 0) $padded = array_pad($scores, -5, 0); //array( 0, 0, 0, 2, 6) ‫ي‬ ‫الثان‬ ‫المدخل‬ ‫فاستخدم‬ ،‫المصفوفة‬ ‫بداية‬ ‫إىل‬ ‫الجديدة‬ ‫القيم‬ ‫إضافة‬ ‫تريد‬ ‫كنت‬‫إذا‬ :‫سالب‬ ‫األبعاد‬ ‫متعددة‬ ‫المصفوفات‬ ‫مصفوفات‬ ‫إنشاء‬ ‫ذلك‬ ‫لك‬ ‫يتيح‬ .‫مصفوفات‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ :‫بسهولة‬ ‫األبعاد‬ ‫متعددة‬ $row0 = array(1, 2, 3); $row1 = array(4, 5, 6); $row2 = array(7, 8, 9); $multi = array($row0, $row1, $row2); ‫األقواس‬ ‫من‬ ‫المزيد‬ ‫بإلحاق‬ ‫األبعاد‬ ‫متعددة‬ ‫المصفوفات‬ ‫عناص‬ ‫إىل‬ ‫الرجوع‬ ‫يمكنك‬ ،‫المربعة‬ [] : $value = $multi[2][0]; // row 2, column 0. $value = 7
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 386 ‫متعددة‬ ‫قيم‬ ‫استخراج‬ ‫استخدم‬ ،‫ات‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫المصفوفة‬ ‫قيم‬ ‫جميع‬ ‫لنسخ‬ ‫ال‬ ‫بناء‬ list() : list ($variable, ...) = $array; .‫للمصفوفة‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫المدرجة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫المصفوفة‬ ‫قيم‬ ‫نسخ‬ ‫يتم‬ $product = array("product1", 1266, "s-3"); list($name, $price, $category) = $product; // $name is "product1", $price is 1266, $catego ry is "s-3" ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫تلك‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫قيم‬ ‫لديك‬ ‫كانت‬‫إذا‬ list() ‫فسيتم‬ ، :‫اإلضافية‬ ‫القيم‬ ‫تجاهل‬ ‫ي‬ ‫ف‬ ‫قيم‬ ‫لديك‬ ‫كانت‬‫ذا‬ list() ‫ر‬ ‫تعيي‬ ‫فسيتم‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫تلك‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫عىل‬ ‫اإلضافية‬ ‫القيم‬ :NULL $product = array("product1", 1266, "s-3"); list($name, $price, $category ,$description) = $product; // $name is "product1", $price is 1266, // $category is "s-3" , $description is NULL
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 387 ‫المصفوفة‬ ‫تشريح‬ Slicing an Array ‫الدالة‬ ‫استخدم‬ ، ‫المصفوفة‬ ‫من‬ ‫فقط‬ ‫فرعية‬ ‫مجموعة‬ ‫اج‬‫ر‬‫الستخ‬ array_slice() : $subset = array_slice(array, offset, length); ‫الدالة‬ ‫ترجع‬ array_slice() ‫القيم‬ ‫من‬ ‫متتالية‬ ‫سلسلة‬ ‫من‬ ‫تتكون‬ ‫جديدة‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫احة‬‫ز‬‫اإل‬ ‫وسيط‬ ‫تحدد‬. ‫األصلية‬ ‫المصفوفة‬ ” offset ‫ا‬‫ر‬‫الم‬ ‫ي‬ ‫األوىل‬‫العنرص‬ “ ‫نسخه‬ ‫د‬ ‫الطول‬ ‫وسيط‬‫وتحدد‬ length ‫الجديدة‬ ‫المصفوفة‬ ‫تحتوي‬ .‫نسخها‬‫اد‬‫ر‬‫الم‬ ‫القيم‬‫عدد‬ ‫من‬ ‫تبدأ‬ ‫متتالية‬ ‫رقمية‬ ‫مفاتيح‬ ‫عىل‬ 0 $people = array("anas", "mariam", "ahmad", "sal i"); $middle = array_slice($people, 2, 2); //("ahmad", "sali") ‫اجمع‬ array_slice() ‫مع‬ list() :‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫فقط‬ ‫القيم‬ ‫بعض‬ ‫اج‬‫ر‬‫الستخ‬ ‫أجزاء‬ ‫إلى‬ ‫المصفوفة‬ ‫تقسيم‬ ‫الدالة‬ ‫استخدم‬ ، ً ‫ا‬ ً‫حجم‬ ‫أصغر‬ ‫مصفوفات‬ ‫إىل‬ ‫مصفوفة‬ ‫لتقسيم‬ array_chunk() : array_chunk(array $input, $size [, $preserve_keys]) ،‫الثالث‬ ‫المدخل‬ .‫األصغر‬ ‫المصفوفات‬ ‫من‬ ‫مصفوفة‬ ‫بإرجاع‬ ‫الدالة‬ ‫تقوم‬ preserve_keys ‫المصفوفات‬ ‫عناص‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫تحدد‬ ‫منطقية‬ ‫قيمة‬ ‫ي‬ ‫ه‬ ، ‫األصل‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المفاتيح‬ ‫نفس‬ ‫لها‬ ‫الجديدة‬ ) ‫ابطية‬ ‫ر‬ ‫الت‬ ‫للمصفوفات‬ ‫مفيدة‬ ( . ‫جديدة‬ ‫مفاتيح‬ ‫ر‬ ‫تعيي‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫اإلعداد‬ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 388 $nums = range(1, 7); $rows = array_chunk($nums, 3); print_r($rows); /* Array ( [0] => Array ( [0] => 1 [1] => 2 [2] = > 3 ) [1] => Array ( [0] => 4 [1] => 5 [2] = > 6 ) [2] => Array ( [0] => 7 ) ) */ ‫والقيم‬ ‫المفاتيح‬ ‫الدالة‬ ‫ترجع‬ array_keys() ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المفاتيح‬ ‫من‬ ‫فقط‬ ‫تتكون‬ ‫مصفوفة‬ : ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫المصفوفة‬ $arrayOfKeys = array_keys(array); $person = array( 'name' => "Anas", 'age' => 29, 'gender' => "male" ); $keys = array_keys($person); // array("name", "age", "gender") ‫توفر‬ PHP ‫القيم‬ ‫من‬ ‫مصفوفة‬ ‫داد‬ ‫ر‬ ‫الست‬ ‫دالة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ، ‫المصفوفة‬ ‫ي‬ ‫ف‬ array_values() : $arrayOfValues = array_values(array);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 389 ‫مع‬ ‫الحال‬ ‫هو‬ ‫كما‬ array_keys() :‫للمصفوفة‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫القيم‬ ‫إرجاع‬ ‫يتم‬ ، $values = array_values($person); // array("Anas", 29, "male") ‫عنصر‬ ‫وجود‬ ‫من‬ ‫التحقق‬ ‫الدالة‬ ‫استخدم‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ً ‫موجود‬ ‫العنرص‬ ‫كان‬‫إذا‬ ‫ما‬ ‫لمعرفة‬ array_key_exists() : if (array_key_exists(key, array)) { ... } ‫مفتاح‬ ‫هو‬ ‫األول‬ ‫المدخل‬ ‫كان‬‫إذا‬ ‫ما‬ ‫إىل‬ ‫ر‬ ‫تشت‬ ‫منطقية‬ ‫قيمة‬ ‫الدالة‬ ‫ترجع‬ ‫موجود‬ ‫ي‬ ‫ف‬ . ‫ي‬ ‫ثان‬ ‫كمدخل‬‫المعطاة‬ ‫المصفوفة‬ ‫مصفوفة‬ ‫في‬ ‫العناصر‬ ‫وإدراج‬ ‫إزالة‬ ‫للدالة‬ ‫يمكن‬ array_splice() ‫مصفوفة‬ ‫وإنشاء‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬‫اجها‬‫ر‬‫إد‬‫أو‬‫العناص‬ ‫الة‬‫ز‬‫إ‬ ‫العناص‬ ‫من‬ ‫أخرى‬ ‫المذالة‬ : $removed = array_splice( array, start [, length [, replacement ] ] ); $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); $removed = array_splice($subjects, 2, 3); print_r($subjects);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 390 //Array ( [0] => JS [1] => CSS [2] => HTML ) print_r($removed); //Array ( [0] => PHP [1] => ASP [2] => JAVA ) ‫فإن‬ ،‫الطول‬ ‫حذفت‬ ‫إذا‬ array_splice() :‫المصفوفة‬ ‫نهاية‬ ‫إىل‬ ‫يزيل‬ ‫باالحتفاظ‬ ‫تهتم‬ ‫وال‬ ‫المصدر‬ ‫المصفوفة‬ ‫من‬ ‫العناص‬ ‫حذف‬ ‫تريد‬ ‫كنت‬‫إذا‬ ،‫بقيمها‬ ‫تخزين‬ ‫إىل‬ ‫تحتاج‬ ‫فلن‬ .array_splice() ‫نتائج‬ :‫ابع‬‫ر‬‫ال‬ ‫المدخل‬ ‫استخدم‬ ،‫األخرى‬ ‫العناص‬ ‫الة‬‫ز‬‫إ‬ ‫تمت‬ ‫حيث‬ ‫العناص‬ ‫اج‬‫ر‬‫إلد‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); array_splice($subjects, 2, 3,["PYTHON","C++"]); print_r($subjects); //Array ([0] => JS [1] => CSS [2] => PYTHON [3] => C++ [4] => HTML)
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 391 ‫والمتغيرات‬ ‫المصفوفات‬ ‫بين‬ ‫التحويل‬ ‫توفر‬ PHP ، ‫ر‬ ‫دالتي‬ extract() ‫و‬ compact() ‫المصفوفات‬ ‫ر‬ ‫بي‬ ‫تحول‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫وتصبح‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المفاتيح‬ ‫مع‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫تتوافق‬ .‫ات‬ ‫ر‬ ‫والمتغت‬ :‫المصفوفة‬ ‫هذه‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫ي‬ ‫ه‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫قيم‬ $person = array('name' => "Fred", 'age' => 35, 'wife' => "Betty"); :‫ات‬ ‫ر‬ ‫المتغت‬ ‫هذه‬ ‫من‬ ‫بناؤها‬ ‫أو‬ ‫تحويلها‬ ‫يمكن‬ $name = "Fred"; $age = 35; $wife = "Betty"; ‫مصفوفة‬ ‫من‬ ‫متغيرات‬ ‫تكوين‬ ‫دالة‬ ‫تقوم‬ extract() ‫ات‬ ‫ر‬ ‫مؤرس‬ ‫تصبح‬ .‫مصفوفة‬ ‫من‬ ‫محلية‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫بإنشاء‬ ً ‫تلقائيا‬ :‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫المصفوفة‬ ‫عناص‬ extract($person); // $name, $age, and $wife are now set $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); extract($person); echo $name.'<br>'; echo $age.'<br>'; echo $gender.'<br>'; /* Anas 29 male */
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 392 ‫بواسطة‬ ‫إنشاؤه‬ ‫تم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ ‫كان‬ ‫إذا‬ extract ،‫موجود‬ ‫ر‬ ‫متغت‬ ‫اسم‬ ‫نفس‬ ‫له‬ .‫المصفوفة‬ ‫من‬ ‫ر‬ ‫بمتغت‬ ‫ي‬ ‫الحاىل‬ ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫استبدال‬ ‫فسيتم‬ ‫سلوك‬ ‫تعديل‬ ‫يمكنك‬ extract() ‫القيم‬ ‫الملحق‬ ‫يصف‬ . ‫ي‬ ‫ثان‬ ‫مدخل‬‫تمرير‬ ‫طريق‬ ‫عن‬ ‫ي‬ ‫ه‬ ‫فائدة‬ ‫ر‬ ‫األكت‬ ‫القيمة‬ . ‫ي‬ ‫الثان‬ ‫المدخل‬ ‫لهذا‬ ‫المحتملة‬ EXTR_PREFIX_ALL ‫مما‬ ، ‫ل‬ ‫الثالث‬ ‫المدخل‬ ‫أن‬ ‫إىل‬ ‫ر‬ ‫يشت‬ extract() ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫ألسماء‬ ‫بادئة‬ ‫ي‬ ‫ه‬ ‫استخدام‬ ‫عند‬ ‫فريدة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أسماء‬ ‫إنشاء‬ ‫ضمان‬ ‫ي‬ ‫ف‬ ‫ذلك‬ ‫يساعد‬ .‫إنشاؤها‬ extract() . $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); extract($person,EXTR_PREFIX_ALL,"new"); echo $new_name.'<br>'; echo $new_age.'<br>'; echo $new_gender.'<br>'; /* Anas 29 male */ ‫ات‬ ‫ر‬ ‫المتغي‬ ‫من‬ ‫مصفوفة‬ ‫تكوين‬ ‫الدالة‬ compact() ‫عكس‬ ‫ي‬ ‫ه‬ extract() ‫لضغطها‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫تمرير‬ ‫يمكنك‬ ‫الدالة‬ ‫ر‬ ‫ىس‬ ُ ‫ن‬ ُ ‫ت‬ .‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫أو‬ ‫منفصلة‬ ‫كوسطاء‬‫إما‬ compact() ‫ابطية‬‫ر‬‫ت‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫أسماء‬ ‫أي‬ ‫ي‬ ‫تخط‬ ‫يتم‬ . ‫ر‬ ‫المتغت‬ ‫قيم‬ ‫ي‬ ‫ه‬ ‫وقيمها‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫مفاتيحها‬ ‫تكون‬ ‫الفعلية‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫مع‬ ‫تتوافق‬ ‫ال‬ ‫المصفوفة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 393 $name = "Anas"; $age = 29; $gender = "male"; $person = compact("name","age","gender"); print_r($person); //Array([name] => Anas [age] => 29 [gender] => male) ‫المصفوفات‬ ‫عبور‬ ‫عنرص‬ ‫كل‬‫مع‬ ‫ما‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫بىس‬ ‫القيام‬ ‫ي‬ ‫ف‬ ‫المصفوفات‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫المهمة‬ ‫تتمثل‬ ‫بناء‬ ‫جملة‬ foreach ً ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫الطريقة‬ )‫ان‬‫ر‬‫(الدو‬‫لعبور‬ ‫بنية‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ ‫عناص‬ foreach : $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); foreach ($person as $value) { echo $value . ", "; } //Anas, 29, male, ‫شكل‬ ‫لك‬ ‫يتيح‬ ‫شبيه‬ ‫من‬ foreach : ‫ي‬ ‫الحاىل‬ ‫المفتاح‬ ‫إىل‬ ‫الوصول‬ $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); foreach ($person as $key => $value) { echo $key . " is equal to " . $value . "<br>" ; } /* name is equal to Anas age is equal to 29 gender is equal to male */
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 394 ‫ي‬ ‫ف‬‫عنرص‬ ‫كل‬‫مفتاح‬ ‫وضع‬ ‫يتم‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ $key ‫ي‬ ‫ف‬ ‫المقابلة‬ ‫القيمة‬ ‫وضع‬ ‫ويتم‬ $value . ‫بنية‬ ‫تعمل‬ ‫ال‬ foreach .‫منها‬ ‫نسخة‬ ‫عىل‬ ‫تعمل‬ ‫بل‬ ،‫نفسها‬ ‫المصفوفة‬ ‫عىل‬ ‫التكرار‬ ‫دوال‬ ”‫بالمكرر‬ ‫ي‬ ‫الحاىل‬‫العنرص‬ ‫إىل‬ ‫ر‬ ‫المؤرس‬ ‫رف‬ ُ‫ع‬ُ‫ي‬ PHP .“iterator ‫هذا‬ ‫ر‬ ‫لتعيي‬ ‫دوال‬ ‫لديها‬ : ‫ي‬ ‫ه‬ ‫المكرر‬ ‫دوال‬. ‫تعيينه‬ ‫وإعادة‬ ‫ونقله‬ ‫المكرر‬ current() .‫المكرر‬ ‫بواسطة‬ ً ‫ا‬ً‫حالي‬ ‫إليه‬ ‫المشار‬ ‫العنرص‬ ‫إرجاع‬ reset() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫األول‬ ‫العنرص‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ next() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التاىل‬ ‫العنرص‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ prev() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫السابق‬ ‫العنرص‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ end() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫آخر‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ each() ‫العنرص‬ ‫إىل‬ ‫المكرر‬ ‫وتحريك‬ ‫كمصفوفة‬ ‫ي‬ ‫الحاىل‬ ‫للعنرص‬ ‫والقيمة‬ ‫المفتاح‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التاىل‬ key() . ‫ي‬ ‫الحاىل‬ ‫العنرص‬ ‫مفتاح‬ ‫إرجاع‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 395 ‫دالة‬ ‫تخدم‬ ُ ‫س‬ ُ ‫ت‬ each() ‫تيبها‬ ‫ر‬ ‫لت‬ ً ‫ا‬ ً ‫وفق‬ ‫العناص‬ ‫يعالج‬ .‫المصفوفة‬ ‫عناص‬‫ار‬‫ر‬‫لتك‬ : ‫ي‬ ‫الداخىل‬ $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); reset($person); while (list($key, $value) = each($person)) { echo "{$key} is equal to {$value} <br>"; } ‫حلقة‬ ‫باستخدام‬ for ‫أعداد‬ ‫عن‬ ‫عبارة‬ ‫المفاتيح‬ ‫حيث‬ ،‫مفهرسة‬ ‫مصفوفة‬ ‫مع‬ ‫تتعامل‬ ‫أنك‬ ‫تعلم‬ ‫كنت‬‫إذا‬ ‫من‬‫تبدأ‬ ‫متتالية‬ ‫صحيحة‬ 0 ‫حلقة‬ ‫استخدام‬ ‫فيمكنك‬ ، for .‫ات‬ ‫ر‬ ‫المؤرس‬ ‫خالل‬ ‫من‬ ‫للعد‬ ‫الحلقة‬ ‫تعمل‬ for ‫وتعالج‬ ،‫المصفوفة‬ ‫من‬ ‫نسخة‬ ‫عىل‬ ‫وليس‬ ،‫نفسها‬ ‫المصفوفة‬ ‫عىل‬ ‫المفاتيح‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫العناص‬ . ‫ي‬ ‫الداخىل‬ ‫ترتيبها‬ ‫عن‬‫النظر‬ ‫بغض‬ ‫باستخدام‬ ‫مصفوفة‬ ‫طباعة‬ ‫كيفية‬‫إليك‬ for : $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); for ($i=0; $i < count($subjects); $i++) { echo $subjects[$i] . '<br>'; } ‫المصفوفة‬ ‫اختزال‬ Reducing an Array :‫واحدة‬ ‫قيمة‬ ‫لبناء‬ ،‫بدوره‬ ‫المصفوفة‬ ‫من‬ ‫عنرص‬ ‫كل‬‫عىل‬ ‫دالة‬ ‫يطبق‬ $result = array_reduce(array, callable [, default ]);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 396 ‫الدالة‬ ‫تأخذ‬ callable ” ‫الجاري‬ ‫ي‬ ‫اإلجماىل‬ : ‫ر‬ ‫مدخلي‬ running total “ ‫والقيمة‬ ، ‫الحالية‬ ” current value “ ‫ي‬ ‫إجماىل‬ ‫يعيد‬ ‫أن‬ ‫يجب‬ .‫المعالجة‬ ‫قيد‬ ‫الجد‬ ‫التشغيل‬ .‫يد‬ ‫المصفوفة‬ ‫قيم‬ ‫مربعات‬ ‫إلضافة‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ :‫استخدم‬ ، $addItUp = function ($runningTotal, $currentValue) { $runningTotal += $currentValue * $currentValue; return $runningTotal; }; $numbers = array(2, 5, 8, 14); $total = array_reduce($numbers, $addItUp); echo $total; //289 ‫ر‬ ‫بتغيت‬ ‫قمنا‬ ‫إذا‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫أولية‬ ‫قيمة‬ ‫هو‬ ،‫ه‬ ‫ر‬ ‫توفت‬ ‫تم‬ ‫إذا‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫المدخل‬ ‫إىل‬ ‫االستدعاء‬ array_reduce() :‫إىل‬ ‫السابق‬ ‫المثال‬ ‫ي‬ ‫ف‬ $total = array_reduce($numbers, $addItUp, 6); echo $total; //295 ‫الدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ،‫فارغة‬ ‫المصفوفة‬ ‫كانت‬ ‫إذا‬ array_reduce() ‫اضية‬ ‫ر‬ ‫االفت‬ ‫القيمة‬ ” default ‫فإن‬ ،‫فارغة‬ ‫المصفوفة‬ ‫وكانت‬ ‫اضية‬ ‫ر‬ ‫افت‬ ‫قيمة‬ ‫إعطاء‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .“ array_reduce() ‫ترجع‬ NULL . ‫القيم‬ ‫عن‬ ‫البحث‬ ‫الدالة‬ ‫ترجع‬ in_array() ” true ”‫أو‬ “ false ‫المد‬ ‫كان‬‫إذا‬‫ما‬ ‫عىل‬ ً ‫ا‬ ً ‫اعتماد‬ ،“ ‫األول‬ ‫خل‬ : ‫ي‬ ‫الثان‬ ‫المدخل‬ ‫باعتبارها‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ً ‫ا‬‫رص‬‫عن‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 397 if (in_array(to_find, array [, strict])) { ... } ” ‫صحيح‬ ‫االختياري‬ ‫الثالث‬ ‫المدخل‬ ‫كان‬ ‫إذا‬ true ‫أنواع‬ ‫تتطابق‬ ‫أن‬ ‫فيجب‬ ،“ to_find . ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫والقيمة‬ .‫البيانات‬ ‫أنواع‬ ‫من‬ ‫التحقق‬ ‫عدم‬‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ :‫بسيط‬ ‫مثال‬ ‫إليك‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); if(in_array("PHP",$subjects)){ echo "PHP in array "; } ‫دالة‬ array_search() . ‫ي‬ ‫ف‬ ‫المعادة‬ ‫القيمة‬ in_array() ‫منطقية‬ ‫قيمة‬ ‫ي‬ ‫ه‬ ( true ) ‫تقوم‬ ،‫القيمة‬ ‫عىل‬ ‫العثور‬ ‫تم‬ ‫إذا‬ array_search() :‫وجد‬ ‫إذا‬ ،‫العنرص‬ ‫مفتاح‬ ‫بإرجاع‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); echo array_search("PHP",$subjects);//2 ‫الدالة‬ ‫تأخذ‬ array_search() ” ‫الصارم‬ ‫المدخل‬ ‫ا‬ ً ‫ض‬ً‫أي‬ strict ،‫االختياري‬ ‫الثالث‬ “ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫والقيمة‬ ‫عنها‬ ‫البحث‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫القيمة‬ ‫أنواع‬ ‫تطابق‬ ‫تتطلب‬ ‫ي‬ ‫ر‬ ‫والت‬ .‫المصفوفة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 398 ‫ال‬ ‫فرز‬ Sorting ً ‫ا‬ً‫اختياري‬ ‫المفاتيح‬ ‫كتابة‬ ‫ويعيد‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫للعناص‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫الفرز‬ ‫ر‬ ‫يغت‬ . ‫الجديد‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫هذا‬ ‫لتعكس‬ ‫توفر‬ PHP ‫عدة‬ ‫المصفوفات‬‫لفرز‬ ‫طرق‬ ‫مثل‬ ‫أو‬ ‫تصاعدي‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫القيم‬ ‫حسب‬‫الفرز‬ ‫ي‬ ‫تنازىل‬ . ‫دوال‬ sort() ‫و‬ rsort() ‫تصاعدي‬ ‫أبجدي‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫األسماء‬‫لفرز‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); sort($subjects); print_r($subjects); //Array ( [0] => ASP [1] => CSS [2] => HTML [3] => JAVA [4] => JS [5] => PHP ) ‫استدعاء‬ ‫سوى‬ ‫عليك‬ ‫ما‬ ، ‫ي‬ ‫عكىس‬ ‫أبجدي‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫عليها‬ ‫للحصول‬ rsort() ً ‫بدالبدال‬ ‫من‬ sort() . $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); rsort($subjects); print_r($subjects); //Array ( [0] => PHP [1] => JS [2] => JAVA [3] => HTML [4] => CSS [5] => ASP ) ‫المصفوفات‬ ‫عكس‬ ‫الدالة‬ ‫تعكس‬ array_reverse() :‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫للعناص‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ $reversed = array_reverse(array);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 399 ‫من‬ ً ‫بدءا‬ ‫الرقمية‬ ‫المفاتيح‬ ‫ترقيم‬ ‫إعادة‬ ‫يتم‬ 0 .‫السلسلة‬ ‫فهارس‬ ‫تتأثر‬ ‫ال‬ ‫بينما‬ ، $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); $r_subjects = array_reverse($subjects); print_r($r_subjects); //Array ( [0] => HTML [1] => JAVA [2] => ASP [3] => PHP [4] => CSS [5] => JS ) ‫الدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ array_flip() ‫القيمة‬ ‫ترتيب‬ ‫تعكس‬ ‫مصفوفة‬ : ‫ي‬ ‫أصىل‬ ‫عنرص‬ ‫لكل‬ ‫والمفتاح‬ $flipped = array_flip(array); ‫ي‬ ‫ف‬ ‫بمفردها‬ ‫ك‬ ُ‫ر‬ ‫ت‬ ُ ‫ت‬ ‫صحيحة‬ ‫أعداد‬ ‫أو‬ ‫سالسل‬ ‫األصلية‬ ‫قيمها‬ ‫تكون‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫المصف‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫المفتاح‬ ‫اكتشاف‬ ‫الجديدة‬ ‫المصفوفة‬ ‫لك‬ ‫تتيح‬ .‫الناتجة‬ ‫وفة‬ ‫يكون‬ ‫عندما‬ ‫فقط‬ ‫بفعالية‬ ‫تعمل‬ ‫التقنية‬ ‫هذه‬ ‫كن‬ ‫ول‬ ،‫لقيمتها‬ ً ‫ا‬ً ‫نظر‬ ‫األصلية‬ .‫فريدة‬ ‫قيم‬ ‫األصلية‬ ‫للمصفوفة‬ $person = array('name' => "Anas", 'age' = > 29, 'gender' => "male"); $flipped = array_flip($person); print_r($flipped); //Array ( [Anas] => name [29] => age [male] => gender )
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 400 ‫العشوائية‬ ‫ترتيب‬ ‫الدالة‬ ‫استخدم‬ ، ‫ي‬ ‫عشوان‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫العناص‬ ‫الجتياز‬ shuffle() ‫تستبدل‬ . ‫الموجودة‬ ‫المفاتيح‬ ‫جميع‬ - ‫رقمية‬ ‫أو‬ ‫سلسلة‬ - ‫من‬ ‫تبدأ‬ ‫متتالية‬ ‫صحيحة‬ ‫بأعداد‬ 0 . shuffle($subjects); ‫المصفوفة‬ ‫مجموع‬ ‫حساب‬ ‫الدالة‬ ‫تجمع‬ array_sum() :‫ابطية‬‫ر‬‫ت‬ ‫أو‬ ‫مفهرسة‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ $sum = array_sum(array); ‫ر‬ ‫مصفوفتي‬ ‫دمج‬ ‫الدالة‬ ‫تدمج‬ array_merge() : ‫ر‬ ‫أكت‬ ‫أو‬ ‫ر‬ ‫مصفوفتي‬ ‫بذكاء‬ $merged = array_merge(array1, array2 [, array ... ]) ‫مصفوفة‬ ‫من‬ ‫العنارص‬ ‫تصفية‬ ‫بناء‬ ‫مصفوفة‬ ‫من‬ ‫فرعية‬ ‫مجموعة‬ ‫لتحديد‬ ً ً ‫الدالة‬ ‫استخدم‬ ،‫قيمها‬ ‫عىل‬ array_filter() : $filtered = array_filter(array, callback); ‫كل‬‫تمرير‬ ‫يتم‬ ” array “ ”‫الدالة‬ ‫إىل‬ callback ‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المصفوفة‬ ‫تحتوي‬ .“ .‫صحيحة‬ ‫قيمة‬ ‫الدالة‬ ‫لها‬ ‫ترجع‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األصلية‬ ‫المصفوفة‬ ‫عناص‬ ‫عىل‬ ‫فقط‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 401 function isOdd ($element) { return $element % 2; } $numbers = array(6, 88, 35, 12 , 23); $odds = array_filter($numbers, "isOdd"); print_r($odds); // Array ( [2] => 35 [4] => 23 ) ‫الدالة‬ ‫عن‬ ‫ابحث‬ array_unique ‫بها‬ ‫العمل‬ ‫تستطيع‬ ‫ماذا‬ ‫عرف‬‫و‬ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 402 ‫أساسيات‬ HTTP ‫بروتوكول‬ ‫عىل‬ ‫الويب‬ ‫يعمل‬ HTTP ‫ي‬ ‫ر‬ ‫التشعت‬ ‫النص‬ ‫نقل‬ ‫بروتوكول‬ ‫أو‬ Hypertext Transfer ”“ Protocol ‫الويب‬ ‫متصفحات‬ ‫طلب‬ ‫كيفية‬ ‫ي‬ ‫ف‬ ‫وتوكول‬ ‫ر‬ ‫الت‬ ‫هذا‬ ‫يتحكم‬ . .‫الملفات‬ ‫إرسال‬ ‫بإعادة‬ ‫الخوادم‬ ‫قيام‬ ‫وكيفية‬ ‫الويب‬ ‫خوادم‬ ‫من‬ ‫للملفات‬ ‫طلب‬ ‫رسالة‬ ‫يرسل‬ ‫فإنه‬ ،‫ويب‬ ‫صفحة‬ ‫الويب‬ ‫مستعرض‬ ‫يطلب‬ ‫عندما‬ HTTP ‫إىل‬ ‫بعض‬ ً ‫ا‬ ً‫دائم‬ ‫الطلب‬ ‫رسالة‬ ‫تتضمن‬ .‫ويب‬ ‫خادم‬ ‫ال‬ ‫معلوما‬ ‫ويسة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ت‬ ” header information ‫ا‬ ً ‫ض‬ً‫أي‬ ‫تتضمن‬ ‫األحيان‬ ‫بعض‬ ‫ي‬ ‫وف‬ ،“ ‫جسم‬ ” body ‫خادم‬ ‫يستجيب‬ .“ ‫معلومات‬ ً ‫ا‬ ً‫دائم‬ ‫تتضمن‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫رد‬ ‫برسالة‬ ‫الويب‬ header ‫وتحت‬ ‫عىل‬ ً ‫عادة‬ ‫وي‬ body . ‫طلب‬ ‫من‬ ‫األول‬‫السطر‬‫يبدو‬ HTTP : ‫ي‬ ‫يىل‬ ‫كما‬ GET /index.html HTTP/1.1 ‫أمر‬ ‫السطر‬ ‫هذا‬ ‫يحدد‬ HTTP ” ‫طريقة‬ ‫يسىم‬ ، method ‫المستند‬ ‫بعنوان‬ ً ‫ا‬ ً‫متبوع‬ ،“ ‫بروتوكول‬‫وإصدار‬ HTTP ‫طريقة‬ ‫الطلب‬ ‫يستخدم‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫المستخدم‬ GET ‫مستند‬ ‫لطلب‬ index.html ‫باستخدام‬ HTTP 1.1 ‫يمكن‬ ، ‫ي‬ ‫األوىل‬ ‫السطر‬ ‫هذا‬ ‫بعد‬ . ‫معلومات‬ ‫عىل‬ ‫الطلب‬ ‫يحتوي‬ ‫أن‬ ‫فيال‬ header ‫بيانات‬ ‫الخادم‬ ‫تمنح‬ ‫اختيارية‬ .‫الطلب‬ ‫حول‬ ‫إضافية‬ ‫من‬ ‫األول‬ ‫السطر‬ ‫يبدو‬ .‫استجابة‬ ‫وإرسال‬ ‫ومعالجته‬ ‫الطلب‬ ‫الويب‬ ‫خادم‬ ‫ر‬ ‫يتلق‬ ‫استجابة‬ HTTP : ‫ي‬ ‫يىل‬ ‫كما‬ HTTP/1.1 200 OK
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 403 ‫إصدا‬ ‫السطر‬ ‫هذا‬ ‫يحدد‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫الكود‬ ‫لذلك‬ ً ‫ا‬ ً ‫ووصف‬ ‫الحالة‬ ‫وكود‬ ‫وتوكول‬ ‫ر‬ ‫الت‬ ‫ر‬ ‫هو‬ ‫الحالة‬ ‫كود‬‫يكون‬ ،‫الحالة‬ 200 ً ‫ا‬ ً ‫ناجح‬ ‫كان‬‫الطلب‬ ‫أن‬ ‫ي‬ ‫يعت‬ ‫مما‬ ، ( ‫الوصف‬ ‫ثم‬ ‫ومن‬ OK ) ‫بمعلومات‬ ‫العميل‬ ‫تزود‬ ‫رؤوس‬ ‫عىل‬ ‫االستجابة‬ ‫تحتوي‬ ،‫الحالة‬ ‫سطر‬ ‫بعد‬ . :‫مثل‬ .‫االستجابة‬ ‫حول‬ ‫إضافية‬ Date: Sat, 29 June 2019 14:07:50 GMT Server: Apache/2.2.14 (Ubuntu) Content-Type: text/html Content-Length: 1845 ‫أس‬‫ر‬ ‫يوفر‬ Server ‫أس‬‫ر‬ ‫يحدد‬ ‫بينما‬ ،‫الويب‬ ‫خادم‬ ‫حول‬ ‫معلومات‬ Content- Type ‫نوع‬ MIME ‫تحتوي‬ ،‫الرؤوس‬ ‫بعد‬ .‫االستجابة‬ ‫ي‬ ‫ف‬ ‫المضمنة‬ ‫للبيانات‬ ‫عىل‬ ‫االستجابة‬ .‫الطلب‬ ‫نجاح‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫المطلوبة‬ ‫بالبيانات‬ ً ‫ا‬ ً‫متبوع‬ ،‫غ‬ ‫فار‬ ‫سطر‬ ‫ر‬ ‫طريقتي‬ ‫ر‬ ‫أكت‬ HTTP ‫هما‬ ً ‫ا‬ ً‫شيوع‬ GET ‫و‬ POST ‫طريقة‬ ‫تصميم‬ ‫تم‬ . GET ‫داد‬ ‫ر‬ ‫الست‬ ‫طريقة‬ .‫الخادم‬ ‫من‬ ‫بيانات‬ ‫قاعدة‬ ‫استعالم‬ ‫نتائج‬‫أو‬ ‫صورة‬‫أو‬ ‫مستند‬ ‫مثل‬ ،‫المعلومات‬ POST ‫مخصصة‬ ‫لتصدير‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫تخزينها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المعلومات‬ ‫مثل‬ ،‫المعلومات‬ ‫طريقة‬ .‫الخادم‬ ‫عىل‬ ،‫بيانات‬ GET ‫يكتب‬ ‫عندما‬ ‫الويب‬ ‫متصفح‬ ‫يستخدمه‬ ‫ما‬ ‫ي‬ ‫ه‬ ‫عنوان‬ ‫المستخدم‬ URL ‫ا‬‫ر‬ ‫عىل‬ ‫ينقر‬ ‫أو‬ ‫يمكن‬ ،‫نموذج‬ ‫المستخدم‬ ‫يرسل‬ ‫عندما‬ .‫بط‬ ‫طريقة‬ ‫استخدام‬ GET ‫أو‬ POST ‫خاصية‬ ‫بواسطة‬ ‫محدد‬ ‫هو‬ ‫كما‬ ، method ‫لوسم‬ form .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 404 ‫المتغيرات‬ ‫الطلب‬ ‫ومعلومات‬ ‫الخادم‬ ‫تكوين‬ - ‫تعريف‬ ‫وملفات‬ ‫النموذج‬ ‫وسطاء‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫االرتباط‬ - ‫مختلفة‬ ‫طرق‬ ‫بثالث‬ ‫إليها‬ ‫الوصول‬ ‫يمكن‬ ‫ي‬ ‫ف‬ PHP ،‫عام‬ ‫بشكل‬ . ‫باسم‬ ‫المعلومات‬ ‫هذه‬ ‫إىل‬ ‫يشار‬ EGPCS ( ” ‫البيئة‬ ‫ل‬ ‫اختصار‬ POST ،GET ،“environment ” ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ، cookies ‫والخادم‬ ،“ .( “server” ‫ر‬ ‫تنىس‬ PHP ‫مصفوفات‬ ‫ستة‬ ‫عامة‬ ‫معلومات‬ ‫عىل‬ ‫تحتوي‬ EGPCS : $_ENV ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ ‫مفاتيح‬ ‫تكون‬ ‫حيث‬ ،‫بيئة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أي‬ ‫قيم‬ ‫عىل‬ ‫يحتوي‬ .‫البيئة‬ ‫ات‬ ‫ر‬ ‫متغت‬ $_GET ‫طلب‬ ‫من‬ ً ‫جزءا‬ ‫تشكل‬ ‫وسطاء‬ ‫أي‬ ‫عىل‬ ‫يحتوي‬ GET ‫المصفوفة‬ ‫مفاتيح‬ ‫تكون‬ ‫حيث‬ ، .‫النموذج‬ ‫وسطاء‬ ‫أسماء‬ ‫ي‬ ‫ه‬ $_POST
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 405 ‫طلب‬ ‫من‬ ً ‫جزءا‬ ‫تشكل‬ ‫وسطاء‬ ‫أي‬ ‫عىل‬ ‫يحتوي‬ POST ‫مفاتيح‬ ‫تكون‬ ‫حيث‬ ، .‫النموذج‬ ‫وسطاء‬ ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ $_COOKIE ‫تكون‬ ‫حيث‬ ،‫الطلب‬ ‫من‬ ‫كجزء‬‫تمريرها‬ ‫تم‬ ‫ارتباط‬ ‫تعريف‬ ‫ملفات‬ ‫قيم‬ ‫أي‬ ‫عىل‬ ‫يحتوي‬ ‫أسما‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ ‫مفاتيح‬ .‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫ء‬ $_SERVER .،‫الويب‬ ‫خادم‬ ‫حول‬ ‫مفيدة‬ ‫معلومات‬ ‫عىل‬ ‫يحتوي‬ $_FILES .‫تحميلها‬ ‫تم‬ ‫ملفات‬ ‫أي‬ ‫حول‬ ‫معلومات‬ ‫عىل‬ ‫يحتوي‬ ‫ليست‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫هذه‬ ‫عامة‬ .‫الدوال‬ ‫تعريفات‬ ‫داخل‬ ‫من‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫مرئية‬ ‫كنها‬‫ول‬ ،‫فقط‬ ‫المصفوفة‬ ‫إنشاء‬ ‫يتم‬ $_REQUEST ‫بواسطة‬ PHP ‫عناص‬ ‫عىل‬ ‫وتحتوي‬ ً ‫ا‬ً‫تلقائي‬ ‫المصفوفات‬ $_GET ‫و‬ $_POST ‫و‬ $_COOKIE .‫واحد‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫كلها‬ ‫الخادم‬ ‫معلومات‬ ‫مصفوفة‬ ‫تحتوي‬ $_SERVER ‫خادم‬ ‫من‬ ‫المفيدة‬ ‫المعلومات‬ ‫من‬ ‫ر‬ ‫كثت‬‫ال‬ ‫عىل‬ ،‫الويب‬ PHP_SELF
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 406 :‫المثال‬ ‫سبيل‬ ‫)عىل‬ ‫المستند‬ ‫جذر‬ ‫إىل‬ ‫بالنسبة‬ ، ‫ي‬ ‫الحاىل‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫اسم‬ /store/cart.php ‫نماذج‬ ‫بعض‬ ‫ي‬ ‫ف‬ ً ‫مستخدما‬ ‫بالفعل‬ ‫هذا‬ ‫أيت‬‫ر‬ ‫لقد‬ .( ‫إنشاء‬ ‫عند‬ ‫مفيد‬ ‫ر‬ ‫المتغت‬ ‫هذا‬ .‫السابقة‬ ‫الفصول‬ ‫ي‬ ‫ف‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫نصو‬ . ً ‫ا‬ ً ‫الحق‬ ‫ى‬‫ست‬ ‫كما‬،‫ذاتية‬ ‫مرجعية‬ ‫برمجية‬ ‫ص‬ SERVER_SOFTWARE Apache/1.3.33 (Unix) mod_perl/1.26 " : ‫الخادم‬ ‫تحدد‬ ‫سلسلة‬ ( ‫عىل‬ ‫المثال‬ ‫سبيل‬ .)"PHP/5.0.4 SERVER_NAME ‫اسم‬ ‫أو‬ ‫المضيف‬ ‫اسم‬ DNS ‫عنوان‬ ‫أو‬ ‫المستعار‬ IP ‫لعناوين‬ URL ‫الذاتية‬ ‫المرجعية‬ ( :‫المثال‬ ‫سبيل‬ ‫عىل‬ .)www.example.com GATEWAY_INTERFACE ‫معيار‬‫إصدار‬ ‫معرفة‬ CGI :‫المثال‬ ‫سبيل‬ ‫)عىل‬ CGI/1.1 .( SERVER_PROTOCOL ‫الطلب‬ ‫بروتوكول‬ ‫وإصدار‬ ‫اسم‬ ( :‫المثال‬ ‫سبيل‬ ‫عىل‬ HTTP/1.1 ) . 370 SERVER_PORT ‫إليه‬ ‫الطلب‬ ‫إرسال‬ ‫تم‬ ‫الذي‬ ‫الخادم‬ ‫منفذ‬ ‫رقم‬ ( ‫سبيل‬ ‫عىل‬ :‫المثال‬ 80 ) .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 407 REQUEST_METHOD ‫المستند‬ ‫لجلب‬ ‫العميل‬ ‫استخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطريقة‬ ) ‫عىل‬ :‫المثال‬ ‫سبيل‬ GET ( . PATH_INFO ‫العميل‬‫قدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اإلضافية‬ ‫ات‬‫ر‬‫المسا‬‫عناص‬ ) :‫المثال‬ ‫سبيل‬ ‫عىل‬ /admin/users ( . PATH_TRANSLATED ‫قيمة‬ PATH_INFO ‫ملف‬ ‫اسم‬ ‫إىل‬ ‫الخادم‬ ‫قبل‬ ‫من‬ ‫جمة‬ ‫ر‬ ‫مت‬ ، ) :‫المثال‬ ‫سبيل‬ ‫عىل‬ .)/home/httpd/htdocs/admin/users QUERY_STRING ‫عنوان‬ ‫ي‬ ‫ف‬ ‫بعد؟‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ URL ) :‫المثال‬ ‫سبيل‬ ‫عىل‬ q =35 ( . REMOTE_ADDR ‫عنوان‬ ‫عىل‬ ‫تحتوي‬ ‫سلسلة‬ IP ‫الصفحة‬ ‫هذه‬ ‫طلب‬ ‫الذي‬ ‫للجهاز‬ ) :‫مثال‬ .("490.418.2.012" AUTH_TYPE ‫الصفحة‬ ‫لحماية‬ ‫المستخدمة‬ ‫المصادقة‬ ‫طريقة‬ ) :‫المثال‬ .(basic REMOTE_USER ” ‫صادق‬ ‫الذي‬ ‫المستخدم‬ ‫اسم‬ authenticated ‫العميل‬ ‫عليه‬ “ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 408 ‫النماذج‬ ‫معالجة‬ “Methods” ‫الطرق‬ ‫طريقتان‬ ‫هناك‬ HTTP :‫الخادم‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬‫لتمرير‬ ‫استخدامها‬ ‫للعميل‬ ‫يمكن‬ GET ‫و‬ POST ‫بخاصية‬ ‫ر‬ ‫معي‬ ‫نموذج‬ ‫يستخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطريقة‬ ‫تحديد‬ ‫يتم‬ . method ‫لوسم‬ form . ‫طلب‬ ‫يقوم‬ GET ‫عنوان‬ ‫ي‬ ‫ف‬ ‫النموذج‬ ‫وسطاء‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫بت‬ URL ‫استعالم‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ” query string :‫؟‬ ‫ي‬ ‫يىل‬ ‫الذي‬ ‫بالنص‬ ‫إليها‬‫يشار‬ ‫ي‬ ‫ر‬ ‫والت‬ ،“ /path/to/chunkify.php?word=despicable&lengt h=3 ‫طلب‬ ‫يقوم‬ POST ‫ي‬ ‫ف‬ ‫النموذج‬ ‫وسطاء‬ ‫بتمرير‬ body ‫ال‬ ‫طلب‬ HTTP ‫ترك‬ ‫مع‬ ، ‫عنوان‬ URL . ‫ر‬ ‫تغيت‬ ‫دون‬ ‫ر‬ ‫بي‬ ً ‫ا‬ ً ‫وضوح‬ ‫ر‬ ‫األكت‬ ‫الفرق‬ GET ‫و‬ POST ‫عنوان‬ ‫سطر‬ ‫هو‬ URL ‫جميع‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ . ‫عنوان‬ ‫ي‬ ‫ف‬ ‫ها‬ ‫ر‬ ‫ترمت‬ ‫يتم‬ ‫النموذج‬ ‫وسطاء‬ URL ‫بطلب‬ GET ‫يم‬ ، ‫وضع‬ ‫ر‬ ‫للمستخدمي‬ ‫كن‬ ‫استعالمات‬ ‫عىل‬ ‫مرجعية‬ ‫إشارة‬ GET . ‫طلبات‬ ‫مع‬ ‫بذلك‬ ‫القيام‬ ‫يمكنهم‬ ‫ال‬ ،‫ذلك‬ ‫ومع‬ POST . ‫طلبات‬ ‫استخدام‬ ‫ي‬ ‫ينبغ‬ ‫ال‬ ‫نه‬ ً ‫أ‬ ‫هو‬ ‫تذكره‬ ‫إىل‬ ‫تحتاج‬ ‫ما‬ GET ‫تسبب‬ ‫اءات‬‫ر‬‫إج‬ ‫ألي‬ .‫بيانات‬ ‫قاعدة‬ ‫تحديث‬ ‫أو‬ ‫طلب‬ ‫تقديم‬ ‫مثل‬ ،‫الخادم‬ ‫ي‬ ‫ف‬ ً ‫ا‬ً ‫ر‬ ‫تغيت‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 409 ‫يتوفر‬ ‫نوع‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطريقة‬ ‫صفحة‬ ‫لطلب‬ ‫استخدامها‬ ‫تم‬ PHP ‫خالل‬ ‫من‬ if ($_SERVER['REQUEST_METHOD'] == 'GET') { // handle a GET request } else { die("You may only GET this page."); } “Parameters” ‫الوسطاء‬ ‫المصفوفات‬ ‫استخدم‬ $_POST ‫و‬ $_GET ‫و‬ $_FILES ‫وسطاء‬ ‫إىل‬ ‫للوصول‬ ‫كود‬ ‫من‬ ‫النموذج‬ PHP ‫الوسطاء‬ ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المفاتيح‬ .‫بك‬ ‫الخاص‬ ( ‫حقول‬ ‫أسماء‬ HTML ) .‫الوسطاء‬ ‫تلك‬ ‫قيم‬ ‫ي‬ ‫ه‬ ‫والقيم‬ ، ‫يوضح‬ ‫الن‬ ‫موذ‬ ‫ي‬ ‫التاىل‬ ‫ج‬ : ‫ر‬ ‫حقلي‬ ‫عىل‬ ‫النموذج‬ ‫يحتوي‬ .‫المستخدم‬ ‫يوفرها‬ ‫سلسلة‬ ‫للسلسلة‬ ‫أحدهما‬ ( :‫الوسيط‬ ‫اسم‬ word ) ” ‫القطع‬ ‫لحجم‬ ‫واآلخر‬ chunks “ ‫إنتاجها‬ ‫المطلوب‬ ( :‫الوسيط‬ ‫اسم‬ number ) . <html> <head><title>Hi there</title></head> <body> <form action="say_hi.php" method="POST"> <input type="text" name="f_name" ><br><br> <input type="submit" value="SEND"> </form>
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 410 </body> </html> ‫مثال‬ 8 - 0 ‫للقطع‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ . (chunkify.php) <?php $name = $_POST['f_name']; echo "Hello $name"; .‫الناتجة‬ ‫المخرجات‬ “Self-Processing Pages” ‫الذاتية‬ ‫المعالجة‬ ‫صفحات‬ ‫صفحة‬ ‫استخدام‬ ‫يمكن‬ PHP ‫كانت‬ ‫إذا‬ . ً ‫ا‬ ً ‫الحق‬ ‫ومعالجته‬ ‫نموذج‬ ‫إلنشاء‬ ‫واحدة‬ ‫طريقة‬ ‫باستخدام‬ ‫مطلوبة‬ ‫الموضحة‬ ‫الصفحة‬ GET ‫درجة‬ ‫يقبل‬ ً ‫ا‬ ً ‫نموذج‬ ‫تطبع‬‫فإنها‬ ، ‫طريقة‬ ‫باستخدام‬ ‫استدعاؤها‬ ‫تم‬ ‫إذا‬ ،‫ذلك‬ ‫ومع‬ .‫فهرنهايت‬ ‫ارة‬‫ر‬‫ح‬ POST ‫تحسب‬ ، .‫المقابلة‬ ‫المئوية‬ ‫ارة‬‫ر‬‫الح‬ ‫درجة‬ ‫وتعرض‬ ‫الصفحة‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 411 <!DOCTYPE html> <html> <head><title>Temperature Conversion</title></he ad> <body> <?php if ($_SERVER['REQUEST_METHOD'] == 'GET') { ?> <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST"> Fahrenheit temperature: <input type="text" name="fahrenheit" /><br /> <input type="submit" value="Convert to Cels ius!" /> </form> <?php } else if ($_SERVER['REQUEST_METHOD'] == 'POST') { $fahrenheit = $_POST['fahrenheit']; $celsius = ($fahrenheit - 32) * 5 / 9; printf("%.2fF is %.2fC", $fahrenheit, $celsiu s); } else { ("This script only works with GET and POST re quests."); } ?> </body> </html>
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 412 ‫ي‬ ‫وه‬ ،‫عملية‬‫أو‬ ً ‫ا‬ ً ‫نموذج‬ ‫سيعرض‬ ‫كان‬‫إذا‬ ‫ما‬‫ليقرر‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫للت‬ ‫أخرى‬ ‫طريقة‬ ‫هناك‬ ‫صفحة‬ ‫كتابة‬ ‫ذلك‬ ‫لك‬ ‫يتيح‬ .‫ال‬ ‫أم‬ ‫الوسطاء‬ ‫إحدى‬ ‫ر‬ ‫توفت‬ ‫تم‬ ‫قد‬ ‫كان‬ ‫إذا‬ ‫ما‬ ‫معرفة‬ ‫طريقة‬ ‫تستخدم‬ ‫ذاتية‬ ‫معالجة‬ GET ‫القيم‬ ‫إلرسال‬ <!DOCTYPE html> <html> <head><title>Temperature Conversion</title></he ad> <body> <?php if (isset ( $_GET ['fahrenheit'] )) { $fahrenheit = $_GET ['fahrenheit']; } else { $fahrenheit = null; } if (is_null ( $fahrenheit )) { ?> <form action="<?php echo $_SERVER['PHP_SELF'] ; ?>" method="GET"> Fahrenheit temperature: <input type="text" name="fahrenheit" /><br /> <input type="submit" value="Convert to Cels ius!" /> </form> <?php } else { $celsius = ($fahrenheit - 32) * 5 / 9; printf ( "%.2fF is %.2fC", $fahrenheit, $cels ius ); } ?> </body> </html>
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 413 “File Uploads” ‫الملف‬ ‫تحميالت‬ ‫الملفات‬ ‫تحميالت‬ ‫مع‬ ‫للتعامل‬ ‫ن‬ ‫ستخدم‬ ‫ال‬ ‫مصفوفة‬ $_FILES . ‫من‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫يمكنك‬ ،‫الملفات‬ ‫وتحميل‬ ‫المختلفة‬ ‫المصادقة‬ ‫وظائف‬ ‫باستخدام‬ .‫نظامك‬ ‫عىل‬ ‫تكون‬ ‫أن‬ ‫بمجرد‬ ‫الملفات‬ ‫بهذه‬ ‫تفعل‬ ‫وماذا‬ ‫الملفات‬ ‫بتحميل‬ ‫له‬ ‫مح‬ ُ ‫س‬ُ‫ي‬ ‫نفس‬ ‫إىل‬ ‫الملفات‬ ‫بتحميل‬ ‫يسمح‬ ً ‫ا‬ ً ‫نموذج‬ ‫ي‬ ‫التاىل‬ ‫كود‬ ‫ال‬ ‫يعرض‬ :‫الصفحة‬ <form enctype="multipart/form- data" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> <input name="to_process" type="file" /> <input type="submit" value="Upload" /> </form> ‫خيار‬ ‫يوفر‬ upload_max_filesize ‫ي‬ ‫ف‬ php.ini ‫الملفات‬ ‫لحجم‬ ‫أقص‬ ً ‫ا‬ ً ‫حد‬ ‫المرفوعة‬ ) ‫يتم‬ ‫عىل‬ ً ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫تعيينه‬ ( 2 ‫ميغابايت‬ ) . ‫وسم‬ ‫أن‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫الحظ‬ form ‫خاصية‬ ‫يأخذ‬ enctype "‫بالقيمة‬ multipart/form- data ." ‫ي‬ ‫ف‬ ‫عنرص‬ ‫كل‬ $_FILES ‫الذي‬ ‫الملف‬ ‫عن‬ ‫معلومات‬ ‫ي‬ ‫تعط‬ ‫مصفوفة‬ ‫ذاته‬ ‫حد‬ ‫ي‬ ‫ف‬ ‫هو‬ : ‫ي‬ ‫ه‬ ‫المفاتيح‬ .‫تحميله‬ ‫تم‬ “name” ‫ب‬ ‫ه‬ ‫ر‬ ‫توفت‬ ‫تم‬ ‫كما‬‫تحميله‬ ‫تم‬ ‫الذي‬ ‫الملف‬ ‫اسم‬ ‫المتصفح‬ ‫واسطة‬ . “type” ‫نوع‬ MIME .‫العميل‬ ‫توقعه‬ ‫كما‬‫تحميله‬ ‫تم‬ ‫الذي‬ ‫للملف‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 414 “size” ‫تحميله‬ ‫تم‬ ‫الذي‬ ‫الملف‬ ‫حجم‬ ( ‫بالبايت‬ ) . “tmp_name” ” ‫المؤقت‬ ‫الملف‬ ‫اسم‬ temporary file ‫الذي‬ ‫بالملف‬ ‫يحتفظ‬ ‫الذي‬ ‫الخادم‬ ‫عىل‬ “ ‫ر‬ ‫كبت‬‫ملف‬ ‫تحميل‬ ‫المستخدم‬ ‫حاول‬ ‫إذا‬ .‫تحميله‬ ‫تم‬ ‫ك‬ ‫االسم‬ ‫إعطاء‬ ‫فسيتم‬ ، ً ‫ا‬ ً ‫جد‬ " none ." ‫الدالة‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫بنجاح‬ ‫ملف‬ ‫تحميل‬ ‫تم‬ ‫إذا‬ ‫ما‬ ‫الختبار‬ ‫الصحيحة‬ ‫الطريقة‬ is_uploaded_file() : ‫ي‬ ‫التاىل‬ ‫النحو‬ ‫عىل‬ ، if (is_uploaded_file($_FILES['to_process']['tm p_name'])) { // successfully uploaded } ‫ملف‬ ‫ي‬ ‫ف‬ ‫المحدد‬ ،‫للخادم‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫المؤقتة‬ ‫الملفات‬ ‫دليل‬ ‫ي‬ ‫ف‬ ‫الملفات‬ ‫تخزين‬ ‫يتم‬ php.ini ‫الخيار‬ ‫باستخدام‬ upload_tmp_dir ‫دالة‬ ‫استخدم‬ ،‫ملف‬ ‫لنقل‬ . move_uploaded_file() : move_uploaded_file($_FILES['to_process']['t mp_name'], "path/to/put/file/{$file}");
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 415 ‫استدعاء‬ ‫يقوم‬ move_uploaded_file() ‫كان‬‫إذا‬ ‫مما‬ ً ‫ا‬ً‫تلقائي‬ ‫بالتحقق‬ ‫الملف‬ ‫تم‬ ‫الدليل‬ ‫إىل‬ ‫تحميلها‬ ‫تم‬ ‫ملفات‬ ‫أي‬ ‫حذف‬ ‫يتم‬ ، ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫انتهاء‬ ‫عند‬ .‫تحميله‬ .‫المؤقت‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 416 ” ‫النموذج‬ ‫صحة‬ ‫من‬ ‫التحقق‬ Form Validation “ ‫بإد‬ ‫ر‬ ‫للمستخدمي‬ ‫تسمح‬ ‫عندما‬ ‫من‬ ‫التحقق‬ ‫إىل‬ ً ‫عادة‬ ‫تحتاج‬ ‫فإنك‬ ،‫البيانات‬ ‫خال‬ ‫من‬ ‫العديد‬ ‫هناك‬ . ً ‫ا‬ ً ‫الحق‬ ‫الستخدامها‬ ‫تخزينها‬‫أو‬ ‫استخدامها‬ ‫قبل‬ ‫البيانات‬ ‫تلك‬ ‫صحة‬ ‫هو‬ ‫األول‬. ‫البيانات‬ ‫صحة‬ ‫من‬ ‫للتحقق‬ ‫المتاحة‬ ‫اتيجيات‬ ‫ر‬ ‫االست‬ JavaScript ‫من‬ ‫تشغي‬ ‫إيقاف‬ ‫اختيار‬ ‫يمكنه‬ ‫المستخدم‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ ،‫ذلك‬ ‫ومع‬ .‫العميل‬ ‫جانب‬ ‫ل‬ JavaScript ‫هو‬ ‫هذا‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫فال‬ ،‫يدعمه‬ ‫ال‬ ً ‫ا‬ ً ‫متصفح‬ ‫يستخدم‬ ‫ربما‬ ‫أو‬ ، ‫الذي‬ ‫الوحيد‬ ‫التحقق‬ ‫عليه‬ ‫تعتمد‬ . ‫استخدام‬‫هو‬ ً ‫ا‬ ً ‫أمان‬ ‫ر‬ ‫األكت‬‫الخيار‬ PHP ‫المثال‬ ‫يوضح‬ .‫الصحة‬ ‫من‬ ‫التحقق‬ ‫اء‬‫ر‬‫إلج‬ ‫ي‬ ‫التاىل‬ ‫وسائط‬‫عنرص‬ ‫بإدخال‬ ‫للمستخدم‬ ‫الصفحة‬ ‫تسمح‬ .‫نموذج‬ ‫مع‬ ‫ذاتية‬ ‫معالجة‬ ‫صفحة‬ ” media item ‫النموذج‬ ‫عناص‬ ‫من‬ ‫ثالثة‬ “ - ‫الملف‬ ‫واسم‬ ‫الوسائط‬ ‫ونوع‬ ‫االسم‬ - ‫اجبارية‬ ‫من‬ ‫الصفحة‬ ‫تقديم‬ ‫فسيتم‬ ،‫منها‬ ‫ألي‬ ‫قيمة‬ ‫إعطاء‬ ‫المستخدم‬ ‫أهمل‬ ‫إذا‬ . ‫يتم‬ .‫بالتحديد‬ ‫الخطأ‬ ‫توضح‬ ‫برسالة‬ ‫جديد‬ ‫تحديد‬ ‫أي‬ ‫من‬ ‫حقول‬ ‫ال‬ ‫قام‬ ‫نموذج‬ ،‫للمستخدم‬ ‫ي‬ ‫إضاف‬ ‫كدليل‬ ، ً ‫ا‬ً ‫ر‬ ‫أخت‬ .‫بالفعل‬ ‫بملئها‬ ‫المستخدم‬ ‫اإلرسال‬ ‫زر‬ ‫نص‬ ‫ر‬ ‫يتغت‬ "‫من‬ Create "‫إىل‬ " Continue .‫النموذج‬ ‫بتصحيح‬ ‫المستخدم‬ ‫يقوم‬ ‫عندما‬ " <!DOCTYPE html> <html> <head><title>Temperature Conversion</title></head> <body> <?php $name = $_POST['name'] ?? ''; $mediaType = $_POST['media_type'] ?? ''; $filename = $_POST['filename'] ?? ''; $caption = $_POST['caption'] ?? ''; $status = $_POST['status'] ?? '';
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 417 $tried = (isset($_POST['tried']) && $_POST['tried'] == 'yes'); if ($tried) { $validated = (!empty($name) && !empty($mediaType) && !empty($filename)); if (!$validated) { ?> <p>The name, media type, and filename are requi red fields. Please fill them out to continue.</p> <?php } } if ($tried && $validated) { "<p>The item has been created.</p>"; } // was this type of media selected? print "selected " if so function mediaSelected($type) { global $mediaType; if ($mediaType == $type) { echo "selected"; } } ?> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> Name: <input type="text" name="name" value="<?php echo $name; ?>"/> <br> Status: <input type="checkbox" name="status" value="ac tive" <?php if ($status == "active") { echo "checked"; } ?> /> Active <br /> Media: <select name="media_type">
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 418 <option value="">Choose one</option> <option value="picture" <?php mediaSelected(" picture"); ?> />Picture</option> <option value="audio" <?php mediaSelected("audio" ); ?> />Audio</option> <option value="movie" <?php mediaSelected("movie" ); ?> />Movie</option> </select> <br /> File: <input type="text" name="filename" value="<?php e cho $filename; ?>" /><br /> Caption: <textarea name="caption"><?php echo $cap tion; ?></textarea> <br /> <input type="hidden" name="tried" value="yes" /> <input type="submit" value="<?php echo $tried ? " Continue" : "Create"; ?>" /> </form> </body> </html> ” ‫العمر‬ ‫حقل‬ ‫صحة‬ ‫من‬ ‫للتحقق‬ age ‫ر‬ ‫غت‬ ‫صحيح‬ ‫عدد‬ ‫عىل‬ ‫احتوائه‬ ‫من‬ ‫للتأكد‬ “ :‫كود‬‫ال‬ ‫هذا‬ ‫استخدم‬، ‫سالب‬ $age = intval($age); $validated = $age > 0;
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 419 ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫يد‬ ‫ر‬ ‫الت‬ ‫عناوين‬ ‫صحة‬ ‫من‬ ‫التحقق‬ ‫من‬ ‫اإلمالئية‬ ‫األخطاء‬ ‫اكتشاف‬ ‫يمكنك‬ ‫ر‬ ‫مرتي‬ ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫يد‬ ‫ر‬ ‫الت‬ ‫عنوان‬ ‫بإدخال‬ ‫المستخدم‬ ‫مطالبة‬ ‫خالل‬ ( ‫ر‬ ‫حقلي‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫مختلفي‬ ) ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫يد‬ ‫ر‬ ‫الت‬ ‫عناوين‬ ‫إدخال‬ ‫من‬ ‫األشخاص‬ ‫منع‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ . ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫تحتوي‬ .‫ما‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫ونقطة‬ )@( ‫عالمة‬ $email1 = strtolower($_POST['email1']); $email2 = strtolower($_POST['email2']); if ($email1 !== $email2) { die("The email addresses didn't match"); } if (!preg_match('/@.+..+$/', $email1)) { die("The email address is malformed"); }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 420 ‫االستجابة‬ ‫رؤوس‬ ‫تعيين‬ ‫ضبط‬ Response Headers ‫استجابة‬ ‫تحتوي‬ HTTP ‫نوع‬ ‫تحدد‬ ‫رؤوس‬ ‫عىل‬ ‫العميل‬ ‫إىل‬ ‫الخادم‬ ‫يرسلها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ ‫جسم‬ “body” ‫وعدد‬ ،‫االستجابة‬ ‫أرسل‬ ‫الذي‬ ‫والخادم‬ ،‫االستجابة‬ ‫البايت‬ ‫ات‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫االستجاية‬ ‫جسم‬ “body” ، ،‫ذلك‬ ‫ومع‬ .‫بنفسك‬ ‫الرؤوس‬ ‫ر‬ ‫تعيي‬ ‫إىل‬ ‫الويب‬ ‫تطبيقات‬ ‫معظم‬ ‫تحتاج‬ ‫ال‬ ‫كنت‬‫إذا‬ ‫ر‬ ‫غت‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫إرسال‬ ‫ي‬ ‫ف‬ ‫ترغب‬ HTML ‫إعادة‬‫أو‬ ،‫لصفحة‬ ‫الصالحية‬ ‫انتهاء‬ ‫وقت‬ ‫ر‬ ‫تعيي‬‫أو‬ ، ‫خطأ‬ ‫إنشاء‬ ‫أو‬ ،‫العميل‬ ‫متصفح‬ ‫توجيه‬ HTTP ‫دالة‬ ‫استخدام‬ ‫إىل‬ ‫فستحتاج‬ ،‫محدد‬ header() . ‫الجسم‬ ‫من‬ ‫جزء‬ ‫أي‬ ‫إنشاء‬ ‫قبل‬ ‫بذلك‬ ‫القيام‬ ‫عليك‬ ‫يجب‬ ‫ترويس‬ ‫إلنشاء‬ “body” . ‫إىل‬ ‫االستدعاءات‬ ‫جميع‬ ‫أن‬ ‫ي‬ ‫يعت‬ ‫هذا‬ header() ( ‫أو‬ setcookie() ‫إذا‬ ، ‫اإلرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫بإعداد‬ ‫تقوم‬ ‫كنت‬ ) ‫قبل‬ ‫ر‬ ‫حت‬ ،‫الملف‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫عالمة‬ < html > :‫فمثال‬ . <?php header("Content-Type: text/plain"); ?> Date: today From: fred To: barney Subject: hands off! My lunchbox is mine and mine alone. Get your own, you filthy scrounger! :‫التحذير‬ ‫هذا‬ ‫ظهور‬ ‫إىل‬ ‫المستند‬ ‫بدء‬ ‫بعد‬ ‫الرؤوس‬ ‫ر‬ ‫تعيي‬ ‫محاولة‬ ‫تؤدي‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 421 Warning: Cannot add header information - headers already sent . ‫المختلفة‬ ‫المحتويات‬ ‫أنواع‬ Content Types ‫أس‬‫ر‬ ‫يحدد‬ Content-Type "‫هذا‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ .‫إرجاعه‬ ‫يتم‬ ‫الذي‬ ‫المستند‬ ‫نوع‬ text/html ‫مستند‬ ‫إىل‬ ‫ر‬ ‫يشت‬ ،" HTML .‫مفيدة‬ ‫أخرى‬ ‫مستندات‬ ‫أنواع‬ ‫هناك‬ ‫كن‬‫ول‬ ، " ،‫مثل‬ text/plain " ‫ر‬ ‫يجت‬ ‫مع‬ ‫التعامل‬ ‫عىل‬ ‫المتصفح‬ ‫هذا‬ .‫عادي‬ ‫كنص‬ ‫الصفحة‬ " ‫المصدر‬ ‫عرض‬ ‫يشبه‬ ‫النوع‬ view source ‫تصحيح‬ ‫عند‬ ً ‫ا‬ ً ‫مفيد‬ ‫ويكون‬، ‫ي‬ ‫التلقان‬ " .‫األخطاء‬ ‫التوجيه‬ ‫إعادة‬ ‫عمليات‬ Redirections ‫عنوان‬ ‫إىل‬ ‫المتصفح‬ ‫إلرسال‬ URL ‫التوجيه‬ ‫إعادة‬ ‫باسم‬ ‫رف‬ ُ‫ع‬ُ‫ي‬ ، ‫جديد‬ ” redirection :‫أس‬‫ر‬ ‫باستخدام‬ ‫الموقع‬ ‫عنوان‬ ‫ر‬ ‫تعيي‬ ‫يمكنك‬ ،“ Location ‫بشكل‬ . ‫ال‬ ‫من‬ ‫ر‬ ‫تبق‬ ‫ما‬ ‫اج‬‫ر‬‫إخ‬ ‫أو‬ ‫إنشاء‬ ‫عناء‬ ‫يكلفنا‬ ‫ال‬ ‫وذلك‬ ،‫ذلك‬ ‫بعد‬ ‫ة‬ ‫ر‬ ‫مبارس‬ ‫ستخرج‬ ،‫عام‬ :‫كود‬ header("Location: http://www.google.com/"); exit();
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 422 ‫الصالحية‬ ‫انتهاء‬ Expiration ” ‫للعميل‬ ‫مؤقتة‬ ‫ذاكرة‬ ‫وأي‬ ،‫ح‬ ‫ي‬‫ص‬ ‫بشكل‬ ‫المستعرض‬ ‫إبالغ‬ ‫للخادم‬ ‫يمكن‬ proxy “ ‫ق‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫صالحية‬ ‫النتهاء‬ ‫محددين‬ ‫ووقت‬ ‫خ‬ ‫بتاري‬ ،‫والمستعرض‬ ‫الخادم‬ ‫ر‬ ‫بي‬ ‫تكون‬ ‫د‬ .‫المستند‬ :‫أس‬‫ر‬ ‫استخدم‬ ،‫مستند‬ ‫صالحية‬ ‫انتهاء‬ ‫وقت‬ ‫ر‬ ‫لتعيي‬ Expires : header("Expires: Tue, 01 Jul 2021 01:00:00 GMT"); ‫استخد‬ ‫ا‬ ‫م‬ time() ‫و‬ gmstrftime() :‫الصالحية‬ ‫انتهاء‬ ‫خ‬ ‫تاري‬ ‫سلسلة‬ ‫إلنشاء‬ Format a GMT/UTC time/date according to — ftime str gm locale settings ‫استخدم‬ ،" ً ‫ا‬ ً ‫أبد‬ ‫صالحيته‬ ‫ي‬ ‫تنته‬ ‫"ال‬ ‫المستند‬ ‫أن‬ ‫إىل‬ ‫لإلشارة‬ :‫اآلن‬ ‫من‬ ‫عام‬ ‫بعد‬ ‫الوقت‬ $now = time(); $then = gmstrftime("%a, %d %b %Y %H:%M:%S GMT", $now + 365.24 * 60 * 60 *24); header("Expires: {$then}");
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 423 Authentication ‫المصادقة‬ ‫مصادقة‬ ‫تعمل‬ HTTP ‫يمكن‬ .‫االستجابة‬ ‫وحاالت‬ ‫الطلبات‬ ‫رؤوس‬ ‫خالل‬ ‫من‬ ‫مرور‬ ‫وكلمة‬ ‫مستخدم‬ ‫اسم‬ ‫إرسال‬ ‫للمتصفح‬ ( ” ‫التحقق‬ ‫بيانات‬ credentials “ ) ‫ي‬ ‫ف‬ ‫تكن‬ ‫لم‬‫أو‬ ‫االعتماد‬ ‫بيانات‬ ‫إرسال‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫الطلبات‬ ‫رؤوس‬ ‫صحيحة‬ ‫الخادم‬ ‫يرسل‬ ، "‫استجابة‬ 401 ” "‫به‬ ‫مرصح‬ ‫ر‬ ‫غت‬ 401 Unauthorized “ ‫ي‬ ‫ف‬ ‫المصادقة‬ ‫مع‬ ‫للتعامل‬ PHP ‫المرور‬ ‫وكلمة‬ ‫المستخدم‬ ‫اسم‬ ‫من‬ ‫تحقق‬ ، ( ‫عناص‬ PHP_AUTH_USER ‫و‬ PHP_AUTH_PW ‫من‬ $_SERVER ) ‫واستدعاء‬ header() "‫استجابة‬ ‫وإرسال‬ ‫المجال‬ ‫ر‬ ‫لتعيي‬ 401 :"Unauthorized header('WWW- Authenticate: Basic realm="Top Secret Files"'); header("HTTP/1.0 401 Unauthorized");
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 424 ‫المرور‬ ‫كلمة‬‫أن‬ ‫من‬ ‫للتأكد‬ ‫و‬ ‫المستخدم‬ ‫اسم‬ :ً ‫مثال‬ $authOK = false; $user = $_SERVER['PHP_AUTH_USER']; $password = $_SERVER['PHP_AUTH_PW']; if (isset($user) && isset($password) && $user = =="anas" && $password="12345") { $authOK = true; } if (!$authOK) { header('WWW- Authenticate: Basic realm="Top Secret Files"'); header('HTTP/1.0 401 Unauthorized'); exit; } echo "this is password-protected data"; ‫المرور‬ ‫وكلمة‬ ‫المستخدم‬ ‫اسم‬ ‫تجميع‬ ‫العادة‬ ‫ي‬ ‫ف‬ ‫نموذج‬ ‫خالل‬ ‫من‬ HTML . ‫الحالة‬ ‫على‬ ‫الحفاظ‬ HTTP ” ‫الحالة‬ ‫عديم‬ ‫بروتوكول‬‫هو‬ stateless ‫خادم‬ ‫يكمل‬ ‫أن‬ ‫بمجرد‬ ‫أنه‬ ‫ي‬ ‫يعت‬‫مما‬ ،“ ‫ال‬ ،‫أخرى‬ ‫بعبارة‬ . ‫ر‬ ‫االثني‬ ‫ر‬ ‫بي‬ ‫االتصال‬ ‫ي‬ ‫ينته‬ ،‫ويب‬ ‫لصفحة‬ ‫العميل‬ ‫طلب‬ ‫الويب‬ .‫العميل‬ ‫نفس‬ ‫من‬ ‫تنشأ‬ ‫كلها‬‫الطلبات‬ ‫سلسلة‬ ‫أن‬ ‫عىل‬ ‫للتعرف‬ ‫للخادم‬ ‫طريقة‬ ‫توجد‬ ‫الطلبات‬ ‫ر‬ ‫بي‬ ‫الحالة‬ ‫معلومات‬ ‫تتبع‬ ( ” ‫الجلسة‬ ‫تتبع‬ ‫باسم‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المعروف‬ session tracking “ ) . # ‫األول‬ ‫األسلوب‬ ‫النموذج‬ ‫حقول‬ ‫استخدام‬ ‫ي‬ ‫ف‬ ‫األساليب‬ ‫هذه‬ ‫إحدى‬ ‫تتمثل‬ # ‫تتعامل‬ .‫المعلومات‬ ‫لتمرير‬ ‫المخفية‬ PHP ‫مثل‬ ً ‫ا‬ ً‫تمام‬ ‫المخفية‬ ‫النموذج‬ ‫حقول‬ ‫مع‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 425 ‫ي‬ ‫ر‬ ‫مصفوفت‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫تتوفر‬ ‫لذا‬ ،‫العادية‬ ‫النموذج‬ ‫حقول‬ $_GET ‫و‬ $_POST . ،‫المخفية‬ ‫النموذج‬ ‫حقول‬ ‫باستخدام‬ # ‫ي‬ ‫الثائ‬ ‫األسلوب‬# ‫عنوان‬ ‫كتابة‬ ‫إعادة‬ ‫هو‬ ‫آخر‬ ‫أسلوب‬ URL ‫تحديد‬ ‫يتم‬ ‫ما‬ ً ‫ا‬ً‫غالب‬ . ‫عنوان‬ ‫ي‬ ‫ف‬ ‫كمعامل‬ ‫اإلضافية‬ ‫المعلومات‬ ‫هذه‬ URL ‫عىل‬ . ‫قمت‬ ‫إذا‬ ،‫المثال‬ ‫سبيل‬ ‫عناوين‬ ‫جميع‬ ‫ي‬ ‫ف‬ ‫المعرف‬ ‫هذا‬ ‫ر‬ ‫تضمي‬ ‫فيمكنك‬ ،‫مستخدم‬ ‫لكل‬ ‫فريد‬ ‫معرف‬ ‫ر‬ ‫بتعيي‬ URL : ‫ي‬ ‫التاىل‬ ‫النحو‬ ‫عىل‬ ، http://www.example.com/catalog.php?userid=1 23 :‫الثالث‬ ‫األسلوب‬ ‫تعريف‬ ‫ملفات‬ ‫استخدام‬ ‫هو‬ ‫الحالة‬ ‫عىل‬ ‫للحفاظ‬ ً ‫ا‬ً ‫انتشار‬ ‫ر‬ ‫واألكت‬ ‫االرتباط‬ " cookies " . ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ " cookie " ‫تقديمها‬ ‫للخادم‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المعلومات‬ ‫من‬ ‫جزء‬‫هو‬ ‫ي‬ ‫وبالتاىل‬ ،‫الخادم‬ ‫إىل‬ ‫المعلومات‬ ‫هذه‬ ‫العميل‬ ‫سيعيد‬ ،‫الحق‬ ‫طلب‬ ‫كل‬ ‫ي‬ ‫ف‬ .‫للعميل‬ ‫ا‬ ‫تعريف‬ ‫ملفات‬ ‫تعد‬ .‫نفسه‬ ّ ‫ف‬ّ ‫يعر‬ ‫خالل‬ ‫من‬ ‫بالمعلومات‬ ‫لالحتفاظ‬ ‫مفيدة‬ ‫الرتباط‬ ‫ي‬ ‫ه‬ ‫الرئيسية‬ ‫المشكلة‬ .‫المشكالت‬ ‫من‬ ‫تخلو‬ ‫ال‬ ‫ولكنها‬ ،‫للمتصفح‬ ‫المتكررة‬ ‫ات‬‫ر‬‫الزيا‬ . ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫بتعطيل‬ ‫ر‬ ‫للمستخدمي‬ ‫تسمح‬ ‫المتصفحات‬ ‫معظم‬ ‫أن‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 426 ‫مع‬ ‫الحالة‬ ‫عىل‬ ‫للحفاظ‬ ‫طريقة‬ ‫أفضل‬ PHP ‫الجلسة‬ ‫تتبع‬ ‫نظام‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫المض‬ ‫من‬ - built-in session tracking ‫ثابتة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫إنشاء‬ ‫النظام‬ ‫هذا‬ ‫لك‬ ‫يتيح‬ . ‫مختلفة‬ ‫صفحات‬ ‫من‬ ‫إليها‬ ‫الوصول‬ ‫يمكن‬ ‫ي‬ ‫ف‬ ‫ات‬‫ر‬‫زيا‬ ‫خالل‬ ‫من‬ ‫وكذلك‬ ،‫تطبيقك‬ ‫تتبع‬ ‫آلية‬ ‫تستخدم‬ ،‫الكواليس‬ ‫اء‬‫ر‬‫و‬ .‫المستخدم‬ ‫نفس‬ ‫بواسطة‬ ‫للموقع‬ ‫مختلفة‬ ‫ي‬ ‫ف‬ ‫الجلسة‬ PHP ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ( ‫عناوين‬ ‫أو‬ URL ) ، ‫بجميع‬ ‫االهتمام‬ ‫مع‬ .‫عنك‬ ً ‫نيابة‬ ‫التفاصيل‬ ” ‫اإلرتباط‬ ‫تعريف‬ ‫ملفات‬ Cookies “ ‫للخادم‬ ‫يمكن‬ .‫حقول‬ ‫عدة‬ ‫عىل‬ ‫تحتوي‬ ‫سلسلة‬ ‫األساس‬ ‫ي‬ ‫ف‬‫هو‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫ر‬ ‫تشت‬ .‫االستجابة‬ ‫رؤوس‬ ‫ي‬ ‫ف‬ ‫متصفح‬ ‫إىل‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫إرسال‬ ‫ال‬ ‫الصفحات‬ ‫إىل‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫حقول‬ ‫بعض‬ ‫إرسال‬ ‫المتصفح‬ ‫عىل‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫ت‬ ” ‫القيمة‬ ‫حقل‬ .‫الطلب‬ ‫من‬ ‫كجزء‬‫إليها‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ value ‫تعريف‬ ‫ملف‬ “ ” ‫الحمولة‬ ‫هو‬ ‫االرتباط‬ payload “ - ‫هناك‬ ‫تريدها‬ ‫بيانات‬ ‫أي‬ ‫تخزين‬ ‫للخوادم‬ ‫يمكن‬ ( ‫الحدود‬ ‫ضمن‬ ) .‫شابه‬ ‫وما‬ ‫والتفضيالت‬ ‫المستخدم‬ ‫يحدد‬ ‫فريد‬ ‫كود‬‫مثل‬ ، ‫دالة‬ ‫استخدم‬ setcookie() :‫المتصفح‬ ‫إىل‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫إلرسال‬ setcookie(name [, value [, expires [, path [, d omain [, secure [, httponly ]]]]]]); ‫المحددة‬ ‫المدخالت‬ ‫من‬ ‫االرتباط‬ ‫تعريف‬ ‫لملف‬ ‫نصية‬ ‫سلسلة‬ ‫الدالة‬ ‫هذه‬ ‫ر‬ ‫ىس‬ ُ ‫ن‬ ُ ‫ت‬ ‫أس‬‫ر‬ ‫ر‬ ‫وتنىس‬ Cookie ‫تعريف‬ ‫ملفات‬ ‫إلرسال‬ ً ‫ا‬ً ‫نظر‬ .‫لها‬ ‫كقيمة‬ ‫السلسلة‬ ‫هذه‬ ‫مع‬ ‫استدعاء‬ ‫يجب‬ ،‫االستجابة‬ ‫ي‬ ‫ف‬ ‫كرؤوس‬ ‫االرتباط‬ setcookie() ‫من‬ ‫أي‬ ‫إرسال‬ ‫قبل‬ ‫محتوى‬ “body” ‫وسطاء‬ .‫المستند‬ setcookie() : ‫ي‬ ‫ه‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 427 ‫اال‬ ” ‫سم‬ name “ ‫ارتباط‬ ‫تعريف‬ ‫ملفات‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ . ‫ر‬ ‫معي‬ ‫ارتباط‬ ‫تعريف‬ ‫لملف‬ ‫فريد‬ ‫اسم‬ ‫أو‬ ‫بيضاء‬ ‫مسافة‬ ‫عىل‬ ‫االسم‬ ‫يحتوي‬ ‫أال‬ ‫يجب‬ .‫مختلفة‬ ‫وخاصيات‬ ‫بأسماء‬ ‫متعددة‬ .‫منقوطة‬ ‫فاصلة‬ ” ‫القيمة‬ value “ .‫االرتباط‬ ‫تعريف‬ ‫بملف‬ ‫المرفقة‬ ‫النصية‬ ‫السلسلة‬ ‫قيمة‬ ” ‫الصالحية‬ ‫انتهاء‬ expires “ ،‫الصالحية‬ ‫انتهاء‬ ‫خ‬ ‫تاري‬ ‫تحديد‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫صالحية‬ ‫انتهاء‬ ” ‫الذاكرة‬ ‫ي‬ ‫ف‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫يحفظ‬ ‫المتصفح‬ ‫فإن‬ memory ‫عىل‬ ‫وليس‬ “ ” ‫القرص‬ disk ‫ي‬ ‫يختق‬ ،‫المتصفح‬ ‫من‬ ‫الخروج‬ ‫عند‬ .“ ‫مث‬ ً ‫ال‬ ‫مرر‬ : time() + 60 * 60 * 2 ‫االرتب‬ ‫تعريف‬ ‫ملف‬ ‫صالحية‬ ‫إلنهاء‬ ‫ي‬ ‫ف‬ ‫اط‬ . ‫ر‬ ‫ساعتي‬ ‫غضون‬ ” ‫المسار‬ path “ ‫لعناوين‬ ‫فقط‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫بإرجاع‬ ‫المتصفح‬ ‫سيقوم‬ URL ‫فيه‬ ‫توجد‬ ‫الذي‬ ‫المجلد‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫المسار‬. ‫المسار‬ ‫هذا‬ ‫تحت‬ ‫الموجودة‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫الحالية‬ ‫الصفحة‬ domain ‫نطاق‬ ‫لعناوين‬ ‫فقط‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫المتصفح‬ ‫سيعيد‬ URL ‫الموجو‬ ‫هذا‬ ‫داخل‬ ‫دة‬ .‫الخادم‬ ‫مضيف‬ ‫اسم‬‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ .‫المجال‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 428 Secure ‫اآلمان‬ ‫اتصاالت‬ ‫ر‬ ‫عت‬ ‫فقط‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫بنقل‬ ‫المتصفح‬ ‫سيقوم‬ https ‫اإلعداد‬ . ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ " false ‫ر‬ ‫غت‬ ‫اتصاالت‬ ‫ر‬ ‫عت‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫إرسال‬ ‫من‬ ‫بأس‬ ‫ال‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫مما‬ ،" .‫آمنة‬ httponly ‫فقط‬ http ‫عىل‬ ‫الوسيط‬ ‫هذه‬ ‫ر‬ ‫تعيي‬ ‫تم‬‫إذا‬ TRUE ً ‫ا‬ ً ‫متاح‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫فسيكون‬ ، ‫بروتوكول‬ ‫ر‬ ‫عت‬ ‫فقط‬ HTTP ‫أخرى‬ ‫وسائل‬ ‫ر‬ ‫عت‬ ‫إليه‬ ‫الوصول‬ ‫يمكن‬ ‫ال‬ ‫ي‬ ‫وبالتاىل‬ ، :‫مثل‬ JavaScript . ‫دالة‬ setcookie() :‫بديلة‬ ‫صيغة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫لها‬ setcookie ($name [, $value = "" [, $options = [] ]] ) ‫حيث‬ $options ‫تتبع‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األخرى‬ ‫الوسطاء‬ ‫عىل‬ ‫تحتوي‬ ‫مصفوفة‬ ‫عن‬ ‫عبارة‬ ‫محتوى‬ $value ‫لدالة‬ ‫كود‬ ‫ال‬ ‫سطر‬ ‫طول‬ ‫من‬ ‫القليل‬ ‫هذا‬ ‫يوفر‬ . setcookie() ، ‫ملف‬ ‫إىل‬ ‫الوصول‬ ‫يمكنك‬ ،‫الخادم‬ ‫إىل‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫المتصفح‬ ‫يرسل‬ ‫عندما‬ ‫مصفوفة‬ ‫خالل‬ ‫من‬ ‫هذا‬ ‫االرتباط‬ ‫تعريف‬ $_COOKIE ‫ملف‬ ‫اسم‬ ‫هو‬ ‫المفتاح‬ . ‫حقل‬ ‫ي‬ ‫ه‬ ‫والقيمة‬ ،‫االرتباط‬ ‫تعريف‬ value .‫االرتباط‬ ‫تعريف‬ ‫لملف‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 429 ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬‫ر‬‫الم‬ ‫عدد‬ ‫يتتبع‬ ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫التاىل‬ ‫كود‬ ‫ال‬ :‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫فيها‬ ‫تم‬ :‫العميل‬ ‫هذا‬ ‫بواسطة‬ ‫الصفحة‬ ‫إىل‬ ‫الوصول‬ $pageAccesses = $_COOKIE['accesses'] ?? 0 ; setcookie('accesses', ++$pageAccesses); echo "<h1>$pageAccesses</h1>"; ‫جميع‬ ‫يدعم‬ ‫ال‬ .‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫استخدام‬ ‫حول‬ ‫المحاذير‬ ‫من‬ ‫ر‬ ‫كثت‬‫ال‬ ‫هناك‬ ‫العمالء‬ ) ‫المتصفحات‬ ( ‫أو‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫ي‬ ‫إيقاف‬ ‫للمستخدم‬ ‫فيمكن‬ ،‫قبلها‬ ‫يمكن‬ ‫ال‬ ‫أنه‬ ‫عىل‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫مواصفات‬ ‫تنص‬ ،‫ذلك‬ ‫عىل‬ ‫عالوة‬ .‫تشغيلها‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫حجم‬ ‫يتجاوز‬ ‫أن‬ 4 KB ، ‫ب‬ ‫إال‬ ‫مح‬ ُ ‫س‬ُ‫ي‬ ‫وال‬ 20 ‫تعريف‬ ‫ملف‬ ‫مفيدة‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫تعد‬ ،‫القيود‬ ‫هذه‬ ‫من‬ ‫الرغم‬ ‫عىل‬ ،‫مجال‬ ‫لكل‬ ‫ارتباط‬ .‫للمتصفح‬ ‫المتكررة‬ ‫ات‬‫ر‬‫الزيا‬ ‫خالل‬ ‫من‬ ‫بالمعلومات‬ ‫لالحتفاظ‬ ً ‫ا‬ ً ‫جد‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 430 “Sessions” ‫الجلسات‬ ‫بسهولة‬ ‫الصفحات‬ ‫متعددة‬ ‫نماذج‬ ‫إنشاء‬ ‫الجلسات‬ ‫لك‬ ‫تتيح‬ ) ‫التسوق‬ ‫عربات‬ ‫مثل‬ ( ، ‫تفضيالت‬ ‫وتخزين‬ ،‫أخرى‬ ‫إىل‬ ‫صفحة‬ ‫من‬ ‫المستخدم‬ ‫مصادقة‬ ‫معلومات‬ ‫وحفظ‬ .‫المواقع‬ ‫أحد‬ ‫عىل‬ ‫الدائمة‬ ‫المستخدم‬ ” ‫جلسة‬ ّ ‫ف‬ّ ‫معر‬ ‫إصدار‬ ‫يتم‬ session ID ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ .‫مرة‬ ‫ألول‬ ‫ائر‬‫ز‬ ‫لكل‬ ‫فريد‬ “ ‫معرف‬ ‫تخزين‬ ‫يتم‬ ” ‫الجلسة‬ session ID ‫يسىم‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫ي‬ ‫ف‬ “ PHPSESSID ‫تم‬‫أو‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫يدعم‬ ‫ال‬ ‫المستخدم‬ ‫متصفح‬ ‫كان‬‫إذا‬ . ‫عناوين‬ ‫ي‬ ‫ف‬ ‫الجلسة‬ ‫معرف‬ ‫ر‬ ‫نش‬ ‫يتم‬ ،‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫تشغيل‬ ‫يقاف‬ ‫إ‬ URL .‫الويب‬ ‫موقع‬ ‫داخل‬ ” ‫تسجيل‬ ‫يمكنك‬ .‫بها‬ ‫مرتبط‬ ‫بيانات‬ ‫مخزن‬ ‫لها‬ ‫جلسة‬ ‫كل‬ register ‫ليتم‬ ‫ات‬ ‫ر‬ ‫المتغت‬ “ ‫البيانات‬ ‫مخزن‬ ‫من‬ ‫تحميلها‬ ‫مخزن‬ ‫ي‬ ‫ف‬ ‫أخرى‬ ‫مرة‬ ‫وحفظها‬ ‫صفحة‬ ‫كل‬ ‫بدء‬ ‫عند‬ ”‫المسجلة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫تستمر‬ .‫الصفحة‬ ‫انتهاء‬ ‫عند‬ ‫البيانات‬ Registered ‫ر‬ ‫بي‬ “ ‫إحدى‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫عىل‬ ‫اؤها‬‫ر‬‫إج‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫التغيت‬ ‫رؤية‬ ‫ويمكن‬ ،‫الصفحات‬ .‫األخرى‬ ‫الصفحات‬ ‫من‬ ‫الصفحات‬ “SESSION BASICS” ‫أساسيات‬ ‫الجلسة‬ ‫جديد‬ ‫جلسة‬ ‫معرف‬ ‫إنشاء‬ ‫يتم‬ . ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫تشغيل‬ ‫بدء‬‫عند‬ ً ‫ا‬ً‫تلقائي‬ ‫الجلسات‬‫تبدأ‬ ،‫المتصفح‬ ‫إىل‬ ‫إلرساله‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫إنشاء‬ ‫المحتمل‬ ‫ومن‬ ،‫األمر‬ ‫لزم‬ ‫إذا‬ .‫المتجر‬ ‫من‬ ‫ثابتة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أي‬ ‫وتحميل‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 431 ‫المتغ‬ ‫اسم‬ ‫بتمرير‬ ‫الجلسة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫متغت‬ ‫تسجيل‬ ‫يمكنك‬ ‫المصفوفة‬ ‫إىل‬ ‫ر‬ ‫ت‬ $_SESSION[] . : ‫ي‬ ‫أساش‬ ‫دخول‬ ‫عداد‬ ‫إليك‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ session_start(); $_SESSION['hits'] = $_SESSION['hits'] + 1; echo "This page has been viewed {$_SESSION['hits']} times."; ‫الدالة‬ ‫تقوم‬ session_start() ‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫المسجلة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫بتحميل‬ $_SESSION ‫الدالة‬ .‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المفاتيح‬ . session_id() ‫معرف‬ ‫تعرض‬ .‫الحالية‬ ‫الجلسة‬ ‫ي‬ ‫استدع‬ ،‫الجلسة‬ ‫إلنهاء‬ session_destroy() ‫البيانات‬ ‫مخزن‬ ‫الة‬‫ز‬‫إ‬ ‫إىل‬ ‫هذا‬ ‫يؤدي‬ . ‫كنه‬ ‫ل‬ ،‫الحالية‬ ‫للجلسة‬ ‫االرتبا‬ ‫تعريف‬ ‫ملف‬ ‫يزيل‬ ‫ال‬ ‫المؤقت‬ ‫التخزين‬ ‫ذاكرة‬ ‫من‬ ‫ط‬ ‫الالحقة‬ ‫ات‬‫ر‬‫الزيا‬ ‫ي‬ ‫ف‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ .‫للمتصفح‬ ‫الجلسات‬ ‫ر‬ ‫تمكي‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫للصفحات‬ ‫استدعاء‬ ‫قبل‬ ‫كان‬ ‫كما‬ ‫نفسه‬ ‫الجلسة‬ ّ ‫ف‬ّ ‫معر‬ ‫عىل‬ ‫المستخدم‬ ‫سيحصل‬ ،‫فيها‬ session_destroy() . ‫بيانات‬ ‫أي‬ ‫بدون‬ ‫ولكن‬ ،
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 432 ‫المثا‬‫هر‬ ُ ‫ظ‬ُ‫ي‬ ‫ل‬ ‫لتخزين‬ ‫الجلسة‬ ‫استخدام‬ ‫ي‬ ‫التاىل‬ ‫المستخدم‬ ‫تفضيالت‬ index.php <?php session_start(); ?> <html> <head><title>Preferences Set</title></head> <body> <?php $colors = array( 'black' => "#000000", 'white' => "#ffffff", 'red' => "#ff0000", 'blue' => "#0000ff" ); $bg = $colors[$_POST['background'] ?? 'black']; $fg = $colors[$_POST['foreground'] ?? 'white']; $_SESSION['bg'] = $bg; $_SESSION['fg'] = $fg; ?> <p>Thank you. Your preferences have been changed to:<br /> Background: <?php echo $bg; ?><br /> Foreground: <?php echo $fg; ?></p> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POS T"> <select name="background"> <option value="black">black</option> <option value="white">white</option> <option value="red">red</option> <option value="blue">blue</option> </select> <select name="foreground"> <option value="black">black</option> <option value="white"> white</option> <option value="red">red</option> <option value="blue">blue</option> </select> <button type="submit">SUBMET</button> </form> <p> Click
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 433 <a href="prefs_session_demo.php">here</a> to see the preferences in action. </p> </body> </html> prefs_session_demo.php <?php session_start() ; $backgroundName = $_SESSION['bg'] ; $foregroundName = $_SESSION['fg'] ; ?> <html> <head><title>Front Door</title></head> <body style = "background- color: <?php echo $backgroundName; ?>; color: <?php echo $foregroundName; ?>"> <h1>Hello everybody</h1> </body> </html>
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 434 SSL ” ‫اآلمنة‬ ‫التوصيل‬ ‫مآخذ‬ ‫طبقة‬ ‫توفر‬ (SSL) “Secure Sockets Layer ‫آمنة‬ ‫قناة‬ ‫طلبات‬ ‫ها‬ ‫ر‬ ‫عت‬ ‫تتدفق‬ ‫أن‬ ‫يمكن‬ ‫ردود‬ ‫و‬ HTTP ‫عنوان‬ ‫ر‬ ‫يشت‬ . ‫العادية‬ https:// URL ‫عنوان‬ ‫بخالف‬ ،‫المستند‬ ‫لذلك‬ ‫آمن‬ ‫اتصال‬ ‫إىل‬ URL ‫ل‬ http:// . ‫إدخال‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ HTTPS ‫مصفوفة‬ ‫ي‬ ‫ف‬ $_SERVER "‫عىل‬ on ‫صفحة‬ ‫إنشاء‬ ‫تم‬ ‫إذا‬ " ‫الرد‬ ‫اتصال‬ ‫ر‬ ‫عت‬ ‫لطلب‬ SSL ‫عليك‬ ‫ما‬ ،‫مشفر‬ ‫ر‬ ‫غت‬ ‫اتصال‬ ‫ر‬ ‫عت‬ ‫صفحة‬ ‫إنشاء‬ ‫لمنع‬ . :‫استخدام‬ ‫سوى‬ if ($_SERVER['HTTPS'] !== 'on') { die("Must be a secure connection."); }
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 435 ‫البيانات‬ ‫قواعد‬ ‫تدعم‬ PHP ‫ر‬ ‫الكثت‬ ‫ق‬ ‫من‬ ‫وا‬ ‫عد‬ ‫ال‬ .‫بيانات‬ ‫و‬ ‫البيانات‬ ‫قواعد‬ ‫أنظمة‬ ‫تعد‬ MySQL PostgreSQL ‫و‬ Oracle ‫الفقري‬ ‫العمود‬ .‫الحديثة‬ ‫الديناميكية‬ ‫الويب‬ ‫مواقع‬ ‫لمعظم‬ ‫من‬ ‫البيانات‬ ‫قواعد‬ ‫إىل‬ ‫للوصول‬ ‫طريقتان‬ ‫هناك‬ PHP ‫ملحق‬ ‫استخدام‬ ‫هو‬ ‫األول‬ . ‫مكتبة‬ ‫استخدام‬ ‫هو‬ ‫واآلخر‬ ‫البيانات‬ ‫بقاعدة‬ ‫خاص‬ PDO ‫قاعدة‬ ‫عن‬ ‫المستقلة‬ .‫البيانات‬ ً ‫ا‬ ً ‫وثيق‬ ‫ا‬ ً ‫ط‬ ً ‫ارتبا‬ ‫مرتبط‬ ‫كودك‬ ‫فإن‬ ،‫البيانات‬ ‫بقاعدة‬ ‫ا‬ ً ‫ص‬ ً ‫خا‬ ً ‫ا‬ ً ‫امتداد‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ ‫ي‬ ‫تخق‬ ،‫أخرى‬ ‫ناحية‬ ‫من‬ .‫تستخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫بقاعدة‬ PDO ‫الخاصة‬ ‫الدوال‬ ‫بقا‬ ‫أنظمة‬ ‫ر‬ ‫بي‬ ‫التنقل‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫لذلك‬ ،‫تجريدية‬ ‫بطبقة‬ ‫عنك‬ ‫البيانات‬ ‫عدة‬ ‫برنامجك‬ ‫من‬ ‫واحد‬ ‫سطر‬ ‫ر‬ ‫تغيت‬ ‫مثل‬ ً ‫بسيطا‬ ‫البيانات‬ ‫قاعدة‬ ‫مكتبة‬ ‫مثل‬ ‫التجريد‬ ‫طبقة‬ ‫نقل‬ ‫قابلية‬ ‫ي‬ ‫ر‬ ‫تأن‬ PDO ‫الذي‬ ‫الكود‬ ‫أن‬ ‫حيث‬ ،‫بثمن‬ ً‫أصلي‬ ً ‫ا‬ ً ‫امتداد‬ ‫يستخدم‬ ‫الذي‬ ‫كود‬ ‫ال‬ ‫من‬ ً ‫قليال‬ ‫أبطأ‬ ً ‫عادة‬ ‫يكون‬ ‫يستخدمها‬ ‫ا‬ ً ‫ص‬ ً ‫خا‬ ً ‫ا‬ .‫البيانات‬ ‫بقاعدة‬ .
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 436 ‫و‬ ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ SQL ” ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ ‫إدارة‬ ‫نظام‬ (RDBMS) “Relational Database Management System ،‫جداول‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫تنظيم‬ ‫يتم‬ .‫البيانات‬‫يدير‬ ‫خادم‬‫هو‬ ‫سبيل‬ ‫عىل‬ .‫ونوع‬ ‫اسم‬ ‫منها‬ ‫ولكل‬ ،‫األعمدة‬ ‫من‬ ‫عدد‬ ‫عىل‬ ‫جدول‬ ‫كل‬ ‫يحتوي‬ ‫حيث‬ ‫العنوان‬ ‫"يسجل‬ ‫"كتب‬ ‫جدول‬ ‫لدينا‬ ‫يكون‬ ‫قد‬ ،‫المثال‬ ( ‫نصية‬ ‫سلسلة‬ ) ‫اإلصدار‬ ‫وسنة‬ ( ‫رقم‬ ) ‫والمؤلف‬ ( ‫نصية‬ ‫سلسلة‬ ) . ‫تتواصل‬ PHP ‫العالئق‬ ‫البيانات‬ ‫قواعد‬ ‫مع‬ ‫مثل‬ ‫ية‬ MariaDB ‫و‬ Oracle ‫باستخدام‬ ” ‫الهيكلية‬ ‫االستعالم‬ ‫لغة‬ SQL “Structured Query Language ‫يمكنك‬ . ‫استخدام‬ SQL .‫عنها‬ ‫واالستعالم‬ ‫وتعديلها‬ ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ ‫إلنشاء‬ ‫جملة‬ ‫بناء‬ ‫ينقسم‬ SQL ‫إىل‬ ‫البيانات‬ ‫معالجة‬ ‫لغة‬ Data Manipulation Language - DML ‫داد‬ ‫ر‬ ‫الست‬ ، ‫ا‬ ‫و‬ ، ‫موجودة‬ ‫بيانات‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫وتعديلها‬ ‫لبيانات‬ ‫ت‬ ‫أفعال‬ ‫أو‬ ‫اءات‬‫ر‬‫إج‬ ‫أربعة‬ ‫من‬ ‫تألف‬ :‫فقط‬ SELECT ‫و‬ INSERT ‫و‬ UPDATE ‫و‬ .DELETE ‫البيانات‬ ‫تعريف‬ ‫لغة‬ Data Definition Language - DDL ‫أوامر‬ ‫مجموعة‬ ‫رف‬ ُ‫ع‬ ُ ‫ت‬ SQL ‫وتع‬ ‫البيانات‬ ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫قواعد‬ ‫هياكل‬ ‫إلنشاء‬ ‫المستخدمة‬ .‫ديلها‬ ‫جملة‬ ‫بناء‬ DDL ‫مثل‬ ً ‫ا‬ ً ‫موحد‬ ‫ليس‬ DML ‫يسىم‬ ً ً ‫جدوال‬ ‫لديك‬ ‫أن‬ ‫اض‬ ‫ر‬ ‫بافت‬ books ‫جملة‬ ‫فإن‬ ، SQL : ً ‫ا‬ ً ‫جديد‬ ً ‫ا‬ ً ‫صف‬ ‫ستدرج‬ ‫هذه‬ INSERT INTO books VALUES (null, 4, 'I, Robot', '0-553- 29438-5', 1950, 1);
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 437 ‫جملة‬ ‫رج‬ ُ ‫د‬ ُ ‫ت‬ SQL :‫قيم‬ ‫لها‬ ‫توجد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األعمدة‬ ‫تحدد‬ ‫ولكنها‬ ً ‫ا‬ ً ‫جديد‬ ً ‫ا‬ ً ‫صف‬ ‫هذه‬ INSERT INTO books (authorid, title, ISBN, pub_year, available) VALUES (4, 'I, Robot', '0-553-29438-5', 1950, 1); ‫عام‬ ‫ها‬ ‫ر‬ ‫نش‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الكتب‬ ‫جميع‬ ‫لحذف‬ 1979 ‫جملة‬ ‫استخدام‬ ‫يمكننا‬ ، SQL :‫هذه‬ DELETE FROM books WHERE pub_year = 1979; ‫سنة‬ ‫ر‬ ‫لتغيت‬ Roots ‫إىل‬ 1983 ‫جملة‬ ‫استخدم‬ ، SQL :‫هذه‬ UPDATE books SET pub_year=1983 WHERE title='Roots'; :‫استخدم‬ ،‫فقط‬ ‫الثمانينيات‬ ‫ي‬ ‫ف‬ ‫المنشورة‬ ‫كتب‬‫ال‬ ‫لجلب‬ SELECT * FROM books WHERE pub_year > 1979 AND pub_year < 1990; ‫الحقول‬ ‫تحديد‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫يمكنك‬ :‫فمثال‬ .‫إرجاعها‬ ‫تريد‬ ‫ي‬ ‫ر‬ ‫الت‬ SELECT title, pub_year FROM books WHERE pub_year > 1979 AND pub_year < 1990;
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 438 ‫سبيل‬ ‫عىل‬ .‫متعددة‬ ‫جداول‬ ‫من‬ ‫المعلومات‬ ‫تجمع‬ ‫استعالمات‬ ‫إصدار‬ ‫يمكنك‬ ‫للسما‬ ‫ر‬ ‫والمؤلفي‬ ‫الكتاب‬ ‫ي‬ ‫جدوىل‬ ‫ر‬ ‫بي‬ ‫االستعالم‬ ‫هذا‬ ‫يجمع‬ ،‫المثال‬ ‫من‬ ‫بمعرفة‬ ‫لنا‬ ‫ح‬ :‫كتاب‬‫كل‬‫كاتب‬ SELECT authors.name, books.title FROM books, authors WHERE authors.authorid = books.authorid; ‫شكل‬ ‫إنشاء‬ ‫ر‬ ‫حت‬ ‫يمكنك‬ ‫مخترص‬ ( ‫مستعار‬ ‫اسم‬ ‫و‬ ) : ‫ي‬ ‫يىل‬ ‫كما‬‫الجداول‬ ‫ألسماء‬ SELECT a.name, b.title FROM books b, authors a WHERE a.authorid = b.authorid;
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 439 ‫كائن‬ ‫واجهة‬ MySQLi ‫مع‬ ‫المستخدمة‬ ً ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫البيانات‬ ‫قواعد‬ ‫منصة‬ PHP ‫بيانات‬ ‫قاعدة‬ ‫ي‬ ‫ه‬ MySQL ‫تحتوي‬ . PHP ‫البيانات‬ ‫قاعدة‬ ‫ألداة‬ ‫المختلفة‬ ‫الواجهات‬ ‫من‬ ‫عدد‬ ‫عىل‬ ‫باسم‬ ‫المعروفة‬ ‫للكائنات‬ ‫الموجهة‬ ‫الواجهة‬ ‫ي‬ ‫ف‬ ‫سننظر‬ ‫لذلك‬ ،‫هذه‬ MySQLi ، ‫ل‬ ‫المحسن‬ ‫االمتداد‬ MySQL . ‫للكائنات‬ ‫الموجهة‬ ‫الواجهة‬ ‫هذه‬ ‫ألن‬ ً ‫ا‬‫ر‬‫نظ‬ OOP ‫ي‬ ‫ف‬ ‫مدمجة‬ PHP ‫تثبيت‬ ‫تكوين‬ ‫مع‬ $db = new mysqli(host, user, password, databaseName); ‫باسم‬ ‫بيانات‬ ‫قاعدة‬ ‫لدينا‬ ،‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ Library ، ‫ل‬ ‫ي‬ ‫الوهىم‬ ‫المستخدم‬ ‫اسم‬ ‫وسنستخدم‬ anas_admin ‫المرور‬ ‫وكلمة‬ p123ass123word :‫هو‬ ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫ي‬ ‫الفعىل‬ ‫كود‬‫ال‬ . $db = new mysqli("localhost", "anas_admin", "p123ass123word", "library"); ‫كود‬ ‫داخل‬ ‫نفسه‬ ‫البيانات‬ ‫قاعدة‬ ‫محرك‬ ‫إىل‬ ‫الوصول‬ ‫لنا‬ ‫يتيح‬ ‫هذا‬ PHP ‫سنصل‬ ‫ي‬ ‫ف‬ ‫الفئة‬ ‫هذه‬ ‫إنشاء‬ ‫بمجرد‬ . ً ‫ا‬ ً ‫الحق‬ ‫األخرى‬ ‫والبيانات‬ ‫الجداول‬ ‫إىل‬ ‫التحديد‬ ‫وجه‬ ‫عىل‬ ‫ر‬ ‫المتغت‬ $db ‫الخاصة‬ ‫البيانات‬ ‫قاعدة‬ ‫بعمل‬ ‫للقيام‬ ‫الكائن‬ ‫هذا‬ ‫طرق‬ ‫استخدام‬‫يمكننا‬ ، ‫بنا‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 440 ‫ل‬ ‫بإنشا‬ ‫قوم‬ ‫فئة‬ ‫ء‬ MySQLi ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ $db ‫أوامر‬ ‫سلسلة‬ ‫ي‬ ‫نبت‬ ،‫ذلك‬ ‫بعد‬ . SQL ‫يسىم‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ف‬ ‫ونحفظها‬ ‫بنا‬ ‫الخاصة‬ $sql ‫ثم‬ . ‫ي‬ ‫نستدع‬ ‫ال‬ ‫طريقة‬ query ‫نفس‬ ‫ي‬ ‫وف‬ ‫ناجحة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫لتحديد‬ ‫بها‬ ‫الخاصة‬ ‫اإلرجاع‬ ‫قيمة‬ ‫ر‬ ‫نختت‬ ‫الوقت‬ ( TRUE ) ‫ثم‬ ، ، ‫لذلك‬ ً ‫ا‬ ً ‫وفق‬ ‫الشاشة‬ ‫عىل‬ ‫نعلق‬ close() ‫و‬ ‫االتصال‬ ‫بإغالق‬ ‫تقوم‬ ‫من‬ ‫إتالفه‬ .‫الذاكرة‬ $db = new mysqli("localhost", "anas_admin", "p123ass123word" , "library"); $sql = "INSERT INTO books (authorid, title, ISBN, pub_year, av ailable) VALUES (4, 'I, Robot', '0-553-29438-5', 1950, 1)"; if ($db->query($sql)) { echo "Book data saved successfully."; } else { echo "INSERT attempt failed, please try again later, or call tech support" ; } $db->close(); ‫للعرض‬ ‫البيانات‬ ‫استرجاع‬ ‫ي‬ ‫ف‬ .‫بكتبك‬ ‫قائمة‬ ‫استخالص‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫قد‬ ،‫بك‬ ‫الخاص‬ ‫الويب‬ ‫موقع‬ ‫من‬ ‫أخرى‬ ‫منطقة‬ ‫استخدام‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫تحقيق‬ ‫يمكننا‬ MySQLi ‫ي‬ ‫ر‬ ‫الت‬ ‫النتائج‬ ‫مجموعة‬ ‫مع‬ ‫والعمل‬ ‫أمر‬ ‫من‬ ‫إنشاؤها‬ ‫تم‬ SELECT SQL ‫ي‬ ‫ف‬ ‫المعلومات‬ ‫لعرض‬ ‫الطرق‬ ‫من‬ ‫العديد‬ ‫هناك‬ . ‫م‬ ‫كائن‬ ‫ي‬ ‫ه‬‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫النتيجة‬ ‫أن‬ ‫الحظ‬ ،‫المتصفح‬ ‫عن‬ ‫ختلف‬ db $ ‫تقوم‬ . PHP ‫لكائن‬ ‫مثيل‬ ‫بإنشاء‬ resualt ‫وتعبئته‬ ‫يال‬ ‫بيانات‬ ‫ي‬ ‫ر‬ ‫الت‬ .‫إرجاعها‬ ‫تم‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 441 $db = new mysqli("localhost", "anas_admin", "p123ass123word" , "library"); $sql = "SELECT a.name, b.title FROM books b, authors a WHERE a.authorid=b.authorid"; $result = $db->query($sql); while ($row = $result->fetch_assoc()) { echo "{$row['name']} is the author of: {$row['title ']}<br />"; } $result->close(); $db->close(); ‫طريقة‬ ‫استدعاء‬ ‫نستخدم‬ ،‫هنا‬ query() ‫ي‬ ‫ف‬ ‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المعلومات‬ ‫ونخزن‬ :‫المسىم‬ ‫ر‬ ‫المتغت‬ $result ‫نستخدم‬ ‫ثم‬ . ‫ال‬ ‫طريقة‬ fetch_assoc() ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ ‫الصف‬ ‫هذا‬ ‫بتخزين‬ ‫ونقوم‬ ،‫مرة‬ ‫كل‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫من‬ ‫واحد‬ ‫صف‬ ‫ر‬ ‫لتوفت‬ :‫المسىم‬ $row ‫حلقة‬ ‫ضمن‬ .‫للمعالجة‬ ‫صفوف‬ ‫هناك‬ ‫دامت‬‫ما‬‫هذا‬‫يستمر‬ . while ‫ن‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ ‫بإلقاء‬ ‫نقوم‬ ، ‫من‬ ً ‫كال‬ ‫نغلق‬ ، ً ‫ا‬ً ‫ر‬ ‫أخت‬ .‫المتصفح‬ ‫افذة‬ resualt ‫وكائنات‬ .‫البيانات‬ ‫قاعدة‬ multi_query() ‫ي‬ ‫ف‬ ‫المفيدة‬ ‫الطرق‬ ‫ر‬ ‫أكت‬ ‫من‬ ‫واحدة‬ MySQLi ‫تتيح‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫أوامر‬ ‫تشغيل‬ ‫لك‬ SQL ‫اء‬‫ر‬‫إج‬ ‫تريد‬ ‫كنت‬‫إذا‬ .‫الجملة‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫متعددة‬ INSERT ‫ثم‬ ‫جملة‬ UPDATE ،‫مماثلة‬ ‫بيانات‬ ‫إىل‬ ً ‫ا‬ ً ‫استناد‬
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 442
‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 443 ‫الخاتمة‬ ‫النسخ‬ ‫ة‬ V1

More Related Content

PDF
Aritmii .pdf
ssusere62bd2
 
PPTX
Hyperlipidemia
PriyanshiPatel18
 
PPTX
Renal function test
IPMS- KMU KPK PAKISTAN
 
PPTX
1.10 diabetes powerpoint
matthewsuter
 
PDF
مذكرة في لغة Html 2
خالد مراد
 
PDF
مذكرة في لغة Html 2
خالد مراد
 
PPTX
lecture 2.en.ar Website Design yem .pptx
husinefahmi93
 
PDF
باللغة العربية HTML5 دورة
anees abu-hmaid
 
Aritmii .pdf
ssusere62bd2
 
Hyperlipidemia
PriyanshiPatel18
 
Renal function test
IPMS- KMU KPK PAKISTAN
 
1.10 diabetes powerpoint
matthewsuter
 
مذكرة في لغة Html 2
خالد مراد
 
مذكرة في لغة Html 2
خالد مراد
 
lecture 2.en.ar Website Design yem .pptx
husinefahmi93
 
باللغة العربية HTML5 دورة
anees abu-hmaid
 

Similar to WEB DEVELOPMENT DIPLOMA v1.pdf (20)

PDF
تعلم HTML CSS و JavaScript
Molham Al-Maleh
 
PDF
باللغة العربية HTML دورة
anees abu-hmaid
 
PDF
Www.kutub.info 16076
Abdelaziz Elbaze
 
PDF
HTML 5 - CSS 3 Arabic Book
iTawy Community
 
PDF
كتاب تعلم Html5 و css3
Marketing matic Seo Brand
 
PDF
كتاب تعلم Html5 css3
titifcom
 
PDF
computer-6th-primary-2nd-term (1)
khawagah
 
PDF
HTML - L1HTML - L1HTML - L1HTML - L1HTML - L1
mohamedmostafareq
 
DOC
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
NabilRharib
 
PDF
Teach yourself html_ar
Faculty of Science , portsaid Univeristy
 
PDF
Web Design, lecture 4.pdf
AhmadFAlMusawi
 
PDF
أنواع المحددات Css
Anas Alpure
 
PDF
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
جامعة القدس المفتوحة
 
PDF
HTML - L4.pdfHTML - L4.pdfHTML - L4.pdfHTML - L4.pdf
MohamedMostafa897436
 
PDF
Text Formatting+(HTML5)
Ahmed Hassan
 
PPT
Intro Ch1
guest594f8
 
PDF
Moodle plugins programing manual
Mohammad Tahsin Alshalabi
 
PDF
Html
guest6cc5b69
 
PDF
منهاج بناء و تصميم مواقع الانترنيت
DrMohammed Qassim
 
PDF
الجزء العملى فى منهج الصف الثالث الإعدادى Visual Basic.Net 2005
Hanaa Ahmed
 
تعلم HTML CSS و JavaScript
Molham Al-Maleh
 
باللغة العربية HTML دورة
anees abu-hmaid
 
Www.kutub.info 16076
Abdelaziz Elbaze
 
HTML 5 - CSS 3 Arabic Book
iTawy Community
 
كتاب تعلم Html5 و css3
Marketing matic Seo Brand
 
كتاب تعلم Html5 css3
titifcom
 
computer-6th-primary-2nd-term (1)
khawagah
 
HTML - L1HTML - L1HTML - L1HTML - L1HTML - L1
mohamedmostafareq
 
مع التعريف الخصائص والمعطيات html,css,java scriptانشاء موقع للمبتدئين بلغة
NabilRharib
 
Teach yourself html_ar
Faculty of Science , portsaid Univeristy
 
Web Design, lecture 4.pdf
AhmadFAlMusawi
 
أنواع المحددات Css
Anas Alpure
 
اسئلة نهائية لمقرر تقنية تصميم صفحات الويب - 1266
جامعة القدس المفتوحة
 
HTML - L4.pdfHTML - L4.pdfHTML - L4.pdfHTML - L4.pdf
MohamedMostafa897436
 
Text Formatting+(HTML5)
Ahmed Hassan
 
Intro Ch1
guest594f8
 
Moodle plugins programing manual
Mohammad Tahsin Alshalabi
 
Html
guest6cc5b69
 
منهاج بناء و تصميم مواقع الانترنيت
DrMohammed Qassim
 
الجزء العملى فى منهج الصف الثالث الإعدادى Visual Basic.Net 2005
Hanaa Ahmed
 
Ad

More from Anas Alpure (12)

PDF
css flex box
Anas Alpure
 
PDF
css advanced
Anas Alpure
 
PDF
css postions
Anas Alpure
 
PDF
CSS layout
Anas Alpure
 
PDF
intro to CSS
Anas Alpure
 
PDF
Web Design
Anas Alpure
 
PDF
Intro to HTML Elements
Anas Alpure
 
PDF
HTML
Anas Alpure
 
PDF
البرمجيات و الانترنيت و الشبكات
Anas Alpure
 
PDF
مبادء في البرمجة
Anas Alpure
 
PDF
Design patterns
Anas Alpure
 
PDF
Google Maps Api
Anas Alpure
 
css flex box
Anas Alpure
 
css advanced
Anas Alpure
 
css postions
Anas Alpure
 
CSS layout
Anas Alpure
 
intro to CSS
Anas Alpure
 
Web Design
Anas Alpure
 
Intro to HTML Elements
Anas Alpure
 
HTML
Anas Alpure
 
البرمجيات و الانترنيت و الشبكات
Anas Alpure
 
مبادء في البرمجة
Anas Alpure
 
Design patterns
Anas Alpure
 
Google Maps Api
Anas Alpure
 
Ad

WEB DEVELOPMENT DIPLOMA v1.pdf

  • 1. WEB DEVELOPMENT DIPLOMA V1 WEB DEVELOPMENT DIPLOMA version 1 Eng. Anas Alpure ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ WEB DEVELOPMENT DIPLOMA
  • 2. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 2 ‫ا‬ ‫لفهرس‬ ‫الويب‬ ‫متصفحات‬ ________________________________ _____________ 22 ‫في‬ ‫مقدمة‬ HTML5 : ________________________________ ____________ 23 ‫عنصر‬ ‫هو‬ ‫ما‬ HTML ‫؟‬ ________________________________ __________ 24 ‫االكواد‬ ‫محرر‬ ________________________________ ________________ 26 HTML ‫بسيط‬ ‫كود‬ ________________________________ _____________ 28 ‫عناصر‬ HTML ________________________________ _______________ 30 ‫عناصر‬ HTML ( ‫المتداخلة‬ Nested ) ________________________________ __ 30 ‫خاصي‬ ‫المصدر‬ ‫ة‬ src ________________________________ _______________ 32 ‫واالرتفاع‬ ‫العرض‬ ‫خواص‬ ________________________________ ___________ 33 (‫البديل‬ ‫النص‬ ‫خاصية‬ alt Attribute ) ________________________________ ____ 33 ( ‫الستايل‬ ‫خاصية‬ style Attribute ) ________________________________ ___ 33 ‫الخاصية‬ lang ( lang Attribute ) ________________________________ ____ 33 (‫العنوان‬ ‫خاصية‬ title ) ________________________________ __________ 34 ‫في‬ ‫النصوص‬ ‫تنسيق‬ HTML ________________________________ _______ 34 <b> and <strong> Elements ________________________________ ________ 35 <i> and <em> Elements ________________________________ ___________ 35 <small> Element ________________________________ _______________ 35 <mark> Element ________________________________ _______________ 35 <del> Element ________________________________ _________________ 35 <ins> Element ________________________________ _________________ 35 <sub> Element ________________________________ _________________ 36 <sup> Element ________________________________ _________________ 36 ‫األلوان‬ ________________________________ ____________________ 36 ‫األلوان‬ ‫أسماء‬ ________________________________ __________________ 36 (‫الخلفية‬ ‫لون‬ Background Color ) ________________________________ ______ 36 (‫الخط‬ ‫لون‬ Text Color ) ________________________________ _____________ 37 ( ‫الحدود‬ ‫لون‬ Border Color ) ________________________________ _________ 37
  • 3. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 3 ‫اللون‬ ‫قيم‬ ________________________________ _____________________ 38 ‫صورة‬ ‫العنصر‬ HTML ________________________________ __________ 38 ‫خاصية‬ (The src Attribute) src ________________________________ _______ 39 ‫خاصية‬ alt ( The alt Attribute ) ________________________________ _______ 39 ‫كرابط‬ ‫الصورة‬ ________________________________ _______________ 39 ‫الجداول‬ ________________________________ ___________________ 40 ‫جدول‬ ‫تعريف‬ HTML ________________________________ ______________ 40 ‫جدول‬ - ‫ًا‬‫د‬‫ح‬ ‫أضف‬ ________________________________ ________________ 41 ‫جدول‬ - ‫خلية‬ ‫مساحة‬ ‫إضافة‬ ________________________________ __________ 41 ‫جدول‬ - ‫عنا‬ ‫اليسار‬ ‫إلى‬ ‫محاذاة‬ ‫وين‬ ________________________________ ______ 41 ‫جدول‬ - ‫أعمدة‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ________________________________ ______ 42 ‫جدول‬ - ‫صفوف‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ________________________________ _____ 42 ‫جدول‬ - ‫توضيحية‬ ‫تسمية‬ ‫أضف‬ ________________________________ ________ 43 ‫القوائم‬ ________________________________ ____________________ 45 ‫قائمة‬ ( ‫مرتبة‬ ‫غير‬ Unordered List ) ________________________________ ____ 45 ‫مرتبة‬ ‫قائمة‬ ( Ordered List ) ________________________________ _________ 45 ‫الوصف‬ ‫قوائم‬ ________________________________ __________________ 46 ( ‫السطرية‬ ‫العناصر‬ inline ‫الكتلة‬ ‫عناصر‬ ‫و‬ ) (Block) ________________________ 47 (‫الكتلة‬ ‫عناصر‬ Block-level Elements ) ________________________________ ___ 47 ()‫(المضمنة‬ ‫السطرية‬ ‫العناصر‬ Inline Elements ) _____________________________ 47 ‫عنصر‬ <div> ________________________________ ___________________ 48 ‫العنصر‬ <span> ________________________________ _________________ 49 ‫الفئة‬ ‫أو‬ ‫الصف‬ ‫خاصية‬ class ________________________________ ______ 49 ‫الصف‬ ‫كتابة‬ ‫قواعد‬ Class ________________________________ ___________ 52 ‫متعدة‬ ‫صفوف‬ Classes ________________________________ _____________ 52 ‫المعرف‬ ‫خاصية‬ id ________________________________ _____________ 53 ‫مرجعية‬ ‫إشارات‬ HTML ‫والروابط‬ ‫المعرف‬ ‫مع‬ _______________________________ 54 ‫خاصية‬ ‫استخدام‬ id ‫في‬ JavaScript ________________________________ _____ 55 ‫المضمنة‬ ‫األطر‬ Iframes ________________________________ _________ 55 ‫كتابة‬ ‫قواعد‬ Iframe ________________________________ _______________ 55
  • 4. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 4 ‫والعرض‬ ‫االرتفاع‬ ‫ضبط‬ Iframe ________________________________ _______ 55 ‫الحدود‬ ‫إزالة‬ Iframe ________________________________ ______________ 56 ‫الصفحة‬ ‫رأس‬ Head ________________________________ _______________ 56 ‫الكود‬ ‫عنصر‬ Code ________________________________ ____________ 59 ‫المتغير‬ ‫عنصر‬ <var> ________________________________ ___________ 59 ‫المتجاوب‬ ‫التصميم‬ Responsive ________________________________ _____ 60 ‫هو‬ ‫ما‬ ‫االستجابة؟‬ ‫سريع‬ ‫الويب‬ ‫تصميم‬ ________________________________ ___ 60 ‫العرض‬ ‫منفذ‬ ‫إعداد‬ ________________________________ _______________ 60 ( ‫متجاوبة‬ ‫صور‬ Responsive Images ) ________________________________ ___ 61 ‫ال‬ ‫الداللية‬ ‫عناصر‬ Semantic ________________________________ _______ 62 ‫عنصر‬ <section> ________________________________ ________________ 63 ‫عنصر‬ <article> ________________________________ ________________ 64 ‫عنصر‬ <header> ________________________________ ________________ 64 ‫عنصر‬ <footer> ________________________________ ________________ 65 ‫عنصر‬ <nav> ________________________________ __________________ 65 ‫النماذج‬ ________________________________ ___________________ 67 ‫عنصر‬ <form> ________________________________ _________________ 67 ‫عنصر‬ <input> ________________________________ _________________ 68 ( ‫النص‬ ‫حقول‬ Text Fields ) ________________________________ __________ 68 ‫عنصر‬ <label> ________________________________ _________________ 69 Radio Button ________________________________ __________________ 69 Checkboxes ________________________________ ___________________ 70 ‫لـ‬ ‫االسم‬ ‫خاصية‬ <input> ________________________________ ___________ 71 Action Attribute ________________________________ ________________ 71 Target Attribute ________________________________ ________________ 72 Canvas Graphics ________________________________ ____________ 73 ‫هو‬ ‫ما‬ HTML Canvas ‫؟‬ ________________________________ __________ 73 ‫مستقيم‬ ‫خط‬ ‫رسم‬ ________________________________ _________________ 74 ‫دائرة‬ ‫رسم‬ ________________________________ ____________________ 74 ‫نص‬ ‫رسم‬ ________________________________ _____________________ 75
  • 5. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 5 ‫خطي‬ ‫تدرج‬ ‫رسم‬ ________________________________ _________________ 75 ‫هو‬ ‫ما‬ SVG ‫؟‬ ________________________________ ________________ 76 ‫دائرة‬ ‫رسم‬ SVG ________________________________ _________________ 76 ‫مستطيل‬ ‫رسم‬ SVG ________________________________ ________________ 76 ‫الزو‬ ‫ملتف‬ ‫مستطيل‬ ‫رسم‬ ‫ايا‬ SVG ________________________________ _______ 77 ‫المتعددة‬ ‫الوسائط‬ ________________________________ _____________ 78 ‫الفيديو‬ Video ________________________________ __________________ 78 ‫الصوت‬ Audio ________________________________ _________________ 79 ‫هو‬ ‫ما‬ CSS ‫؟‬ ________________________________ _________________ 82 ‫استخدام‬ CSS ________________________________ ________________ 83 ‫مضمنة‬ (Inline CSS) CSS ________________________________ ____________ 83 CSS ‫داخلي‬ ( Internal CSS ) ________________________________ __________ 84 CSS ‫خارج‬ ‫ي‬ ( External CSS ) ________________________________ _________ 85 ‫كتابة‬ ‫قواعد‬ CSS ________________________________ ______________ 88 ‫المحددات‬ CSS ________________________________ _______________ 89 ‫االسم‬ ‫محدد‬ ________________________________ ____________________ 89 ‫المعرف‬ ‫محدد‬ id Selector ________________________________ __________ 89 ‫الصف‬ ‫محدد‬ class Selector ________________________________ _________ 89 ‫العام‬ ‫المحدد‬ CSS The CSS Universal Selector) ) ___________________________ 90 ‫تجميع‬ ‫محدد‬ CSS ( The CSS Grouping Selector ) ____________________________ 90 ‫التعليقات‬ CSS Comments ________________________________ ________ 91 ( ‫الخط‬ ‫لون‬ Text Color ) ________________________________ _________ 93 ‫الخلفية‬ ‫ولون‬ ‫النص‬ ‫لون‬ ________________________________ _________ 93 ( ‫نص‬ ‫محاذاة‬ CSS Text Alignment ) ________________________________ _ 93 ‫النص‬ ‫اتجاه‬ ________________________________ _________________ 94 (‫عمودي‬ ‫انحياز‬ Vertical Alignment ) ________________________________ 94 ‫نص‬ ‫زخرفة‬ (CSS Text Decoration) ________________________________ _ 95 ‫تح‬ ‫النص‬ ‫ويل‬ ( CSS Text Transformation ) _____________________________ 95 ( ‫نص‬ ‫تباعد‬ CSS Text Spacing ) ________________________________ ____ 96
  • 6. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 6 ( ‫األحرف‬ ‫تباعد‬ Letter Spacing ) ________________________________ ___ 96 ‫ارتف‬ ( ‫خط‬ ‫اع‬ Line Height ) ________________________________ ________ 97 ( ‫نص‬ ‫ظل‬ CSS Text Shadow ) ________________________________ _____ 97 ‫خط‬ ‫نمط‬ (CSS Font Style) ________________________________ ________ 98 ‫صندو‬ ‫نموذج‬ ‫ق‬ CSS Box Model ________________________________ ___ 99 ‫حدود‬ CSS ( CSS border ) ________________________________ __________ 100 ‫حشوة‬ CSS ( CSS Padding ) ________________________________ ________ 101 ‫هامش‬ CSS ( CSS Margin ) ________________________________ _________ 101 ‫إخفاء‬ ‫العناصر‬ ________________________________ ______________ 102 ‫أنواع‬ ‫عرض‬ ‫العناصر‬ ________________________________ __________ 103 display: inline-block ________________________________ ___________ 103 ‫التموضع‬ ‫خاصية‬ position ________________________________ ______ 105 position: static ________________________________ _______________ 106 position: relative ________________________________ _____________ 106 position: absolute ________________________________ ____________ 107 position: fixed; ________________________________ ______________ 108 position: sticky ________________________________ ______________ 108 ‫الطفو‬ ‫خاصية‬ float and clear ________________________________ ____ 108 CSS ‫ورأسية‬ ‫أفقية‬ ‫محاذاة‬ ________________________________ _______ 111 ‫النص‬ ‫توسيط‬ ________________________________ _________________ 111 ‫الصورة‬ ‫توسيط‬ ________________________________ _______________ 111 ‫ولليسار‬ ‫لليمين‬ ‫محاذاة‬ - ‫الموضع‬ ‫استخدام‬ Using position ____________________ 112 The clearfix Hack ________________________________ _____________ 113 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - (‫الحشو‬ ‫استخدام‬ padding ) _____________________________ 113 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫الخط‬ ‫ارتفاع‬ ‫استخدام‬ Using line-height _____________________ 114 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫استخدام‬ position & transform __________________________ 115 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫باستخدام‬ Flexbox ________________________________ __ 115 ‫العمودي‬ ‫التنقل‬ ‫شريط‬ ‫مثال‬ ________________________________ ______ 116 ‫االفقي‬ ‫التجوال‬ ‫شريط‬ ________________________________ __________ 117
  • 7. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 7 )‫(النشط‬ ‫الحالي‬ ‫الرابط‬ ________________________________ ___________ 118 ‫الخلفيات‬ ________________________________ __________________ 120 ‫الخلفية‬ ‫لون‬ (CSS background-color) ________________________________ _ 120 ‫كخلفية‬ ‫صورة‬ ‫استخدم‬ ________________________________ ___________ 120 ‫خلفية‬ ‫تكرار‬ CSS ________________________________ _______________ 121 ‫الخلفية‬ ‫تموضع‬ ________________________________ _______________ 122 ( ‫المختصرة‬ ‫الخاصية‬ background - Shorthand property ) ___________________ 122 ‫الظل‬ Box Shadow ________________________________ __________ 123 ‫الحدود‬ ‫تدوير‬ CSS3 border-radius ________________________________ _ 124 ‫المرن‬ ‫الصندوق‬ CSS3- Flexbox ________________________________ ___ 125 ‫عناصر‬ Flexbox ________________________________ _______________ 126 The flex-direction Property ________________________________ ______ 127 The flex-wrap Property ________________________________ _________ 128 The flex-flow Property ________________________________ _________ 129 The justify-content Property ________________________________ _____ 129 The align-items Property ________________________________ ________ 130 CSS Flex Responsive ________________________________ ___________ 130 ‫مع‬ ‫ابدأ‬ Bootstrap 4 : ________________________________ _________ 133 ‫على‬ ‫تحصل‬ ‫أين‬ ‫من‬ Bootstrap 4 ‫؟‬ ________________________________ _ 134 Bootstrap 4 CDN ________________________________ _____________ 134 ‫تنزيل‬ Bootstrap 4 ________________________________ _____________ 134 ‫باستخدام‬ ‫ويب‬ ‫صفحة‬ ‫أول‬ ‫إنشاء‬ Bootstrap 4 ____________________________ 134 Containers ‫الحاويات‬ ________________________________ _________ 136 ‫ثابتة‬ ‫حاوية‬ ________________________________ __________________ 136 : ‫المرنة‬ ‫الحاوية‬ ________________________________ _______________ 136 ‫الحاوية‬ ‫حشو‬ Padding ________________________________ __________ 136 ‫حدود‬ ‫و‬ ‫الوان‬ ‫للحاوية‬ ________________________________ ___________ 136 ‫المتجاوبة‬ ‫الحاوية‬ ________________________________ ______________ 137 ‫في‬ ‫الشبكي‬ ‫النظام‬ Bootstrap 4 ________________________________ ___ 138 ‫صفوف‬ ‫الشبكة‬ ________________________________ ________________ 138
  • 8. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 8 ‫متساوية‬ ‫أعمدة‬ ‫ثالث‬ ‫عمل‬ ________________________________ _________ 138 Bootstrap ‫الفقرات‬/‫النصوص‬ ________________________________ ____ 140 ‫في‬ ‫األلوان‬ Bootstrap ________________________________ _________ 141 ‫النصوص‬ ‫الوان‬ ________________________________ _______________ 141 ‫الخلفية‬ ‫الوان‬ ________________________________ _________________ 141 ‫في‬ ‫الجداول‬ Bootstrap ________________________________ ________ 142 ‫الحدود‬ ‫ذات‬ ‫الجداول‬ ________________________________ ____________ 142 ‫بح‬ ‫االسطر‬ ‫تاثر‬ ‫المرور‬ ‫دث‬ Hover ________________________________ ____ 143 ‫المعتمة‬ ‫الجداول‬ ________________________________ _______________ 143 ‫المخططة‬ ‫الجداول‬ ________________________________ ______________ 143 ‫السيا‬ ‫ذات‬ ‫الصفوف‬ ‫ق‬ ________________________________ ____________ 143 ‫المتجاوبة‬ ‫الجداول‬ ________________________________ ______________ 145 ‫في‬ ‫الصور‬ Bootstrap ________________________________ _________ 145 ‫الزوايا‬ ‫منحنية‬ ________________________________ ________________ 145 ‫مستديرة‬ ‫زوايا‬ ________________________________ ________________ 146 ‫المصغرة‬ ‫الصورة‬ Thumbnail ________________________________ ______ 146 ‫ا‬ ‫الصورة‬ ‫لمتجاوبة‬ ________________________________ ______________ 146 Bootstrap 4 Jumbotron ________________________________ _______ 147 ‫التن‬ ‫رسائل‬ ‫بيه‬ Alerts ________________________________ __________ 147 ‫ازرار‬ Bootstrap ________________________________ ____________ 149 ‫حدود‬ ‫ذات‬ ‫أزرار‬ ________________________________ _______________ 149 ‫الزر‬ ‫حجم‬ ________________________________ ___________________ 150 ‫الزر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ ________________________________ __________ 150 ‫األزار‬ ‫مجموعات‬ ________________________________ ______________ 151 ‫العمودية‬ ‫األزرار‬ ‫مجموعة‬ ________________________________ _________ 152 ‫المنسدلة‬ ‫القائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ ‫تداخل‬ _____________________________ 152 ‫الشارات‬ Bootstrap Badges ________________________________ _____ 153 ‫السياقية‬ ‫الشارات‬ ________________________________ ______________ 153 Pill Badges ________________________________ _________________ 154
  • 9. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 9 ‫في‬ ‫التقدم‬ ‫شريط‬ Bootstrap ________________________________ ______ 155 ‫الصفحات‬ ‫ترقيم‬ Pagination ________________________________ _____ 158 ‫النشطة‬ ‫الصفحة‬ ________________________________ _______________ 158 ‫المعطلة‬ ‫الحالة‬ ________________________________ ________________ 158 Pagination Sizing ________________________________ _____________ 159 ‫القوائم‬ ‫مجموعات‬ ________________________________ ____________ 160 ‫روابط‬ ‫مع‬ ‫قائمة‬ ‫مجموعة‬ ________________________________ _________ 161 ‫عنصر‬ ‫تعطيل‬ ________________________________ _________________ 161 ‫االفقية‬ ‫القوائم‬ ‫مجموعات‬ ________________________________ _______ 162 ‫العالقة‬ ‫ذات‬ ‫الصفوف‬ ________________________________ ____________ 162 ‫م‬ ‫قوائم‬ ‫مجموعة‬ ‫اإلشارات‬ ‫ع‬ Badges ________________________________ __ 163 ‫او‬ ‫البطاقة‬ ‫الكارد‬ Cards ________________________________ ________ 164 ‫التذييل‬ ‫و‬ ‫الرأس‬ ________________________________ _______________ 164 ‫الممتد‬ ‫الرابط‬ ________________________________ _________________ 166 ‫وشاح‬ ‫عمل‬ Overlays ________________________________ ___________ 166 ‫االرتفاع‬ ‫المساوية‬ ‫البطاقات‬ Card Deck ________________________________ 167 ‫البطاقات‬ ‫مجموعة‬ ________________________________ ______________ 168 ‫المنسدلة‬ ‫القوائم‬ Dropdowns ________________________________ ____ 169 ‫المنسدل‬ ‫القائمة‬ ‫فاصل‬ ________________________________ ___________ 169 ‫القائمة‬ ‫رأس‬ ‫المنسدلة‬ ________________________________ ___________ 170 ‫العنصر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ ________________________________ ________ 170 ‫المنسدلة‬ ‫القائمة‬ ‫ضمن‬ ‫نص‬ ________________________________ ________ 171 ‫منسدلة‬ ‫قائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ ________________________________ ___ 171 ‫الطي‬ Collapse ________________________________ _____________ 172 ‫أكورديون‬ Accordion ________________________________ ___________ 173 ‫التجوال‬ ‫قائمة‬ Navs ________________________________ __________ 174 ‫التبويبات‬ tabs ________________________________ ______________ 174 ‫التجوال‬ ‫شريط‬ Navigation ________________________________ ______ 175 Vertical Navbar ________________________________ ______________ 176
  • 10. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 10 Centered Navbar ________________________________ _____________ 176 Colored Navbar ________________________________ ______________ 177 Brand / Logo ________________________________ ________________ 178 Collapsing The Navigation Bar ________________________________ ____ 178 Navbar With Dropdown ________________________________ ________ 179 ‫المثبت‬ ‫التجوال‬ ‫شريط‬ ________________________________ ___________ 180 ‫النماذج‬ Forms ________________________________ _____________ 181 ‫واحد‬ ‫سطر‬ ‫على‬ ‫النموذج‬ ________________________________ __________ 182 ‫النموذج‬ ‫تدقيق‬ Validation ________________________________ ______ 183 ‫االدخال‬ ‫حقول‬ ________________________________ ________________ 185 ‫االختيار‬ ‫أزرار‬ Radio Buttons ________________________________ ______ 186 ‫الحقول‬ ‫مجموعة‬ Input Groups ________________________________ ___ 189 ‫المجموعات‬ ‫حجم‬ ________________________________ ______________ 189 Multiple Inputs and Helpers ________________________________ _____ 190 ‫ضمن‬ ‫االزرار‬ Input Group ________________________________ ________ 191 ‫تسميات‬ Input Group ________________________________ ___________ 191 ‫مخصص‬ ‫اختيار‬ ‫حقل‬ Checkbox ________________________________ _____ 192 ‫مخصص‬ ‫تبديل‬ ‫مفتاح‬ Switch ________________________________ ______ 192 ‫مخصص‬ ‫وحيد‬ ‫اختيار‬ ‫حقل‬ Radio buttons ______________________________ 192 ‫المعرض‬ Carousel ________________________________ ___________ 194 ‫التلميح‬ Tooltip ________________________________ _____________ 197 ‫التلميح‬ ‫تموضع‬ ________________________________ _______________ 197 ‫المنبثقة‬ ‫نوافذ‬ Modal ________________________________ _________ 198 ‫انميشن‬ ‫إضافة‬ animation ________________________________ ________ 199 ‫حجم‬ Modal ________________________________ _________________ 199 ‫المنبثقة‬ ‫النافذة‬ ‫توسيط‬ ________________________________ ___________ 199 Scrolling Modal ________________________________ ______________ 199 ‫األدوات‬ ‫صفوف‬ Utilities ________________________________ _______ 200 Borders ________________________________ ____________________ 200 Border Color ________________________________ ________________ 200
  • 11. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 11 Float and Clearfix ________________________________ _____________ 200 Shadows ‫الظل‬ ________________________________ ________________ 201 Vertical Align ________________________________ ________________ 201 Responsive Embeds ________________________________ ___________ 201 Visibility ‫الرؤية‬ ________________________________ _______________ 202 Position ‫التموضع‬ ________________________________ ______________ 202 Colors ‫االلوان‬ ________________________________ ________________ 203 Background Colors ________________________________ ____________ 203 Block Elements ________________________________ ______________ 204 Flex ________________________________ ______________________ 204 ‫مقدمة‬ ________________________________ ___________________ 206 ‫لك‬ ‫سكربت‬ ‫جافا‬ ‫كود‬ ‫اول‬ ________________________________ ________ 208 ‫مل‬ ‫استخدام‬ ‫ف‬ JavaScript ‫خارجي‬ ________________________________ __ 209 ‫االحرف‬ ‫لحالة‬ ‫الحساسية‬ Case Sensitive _____________________________ 210 ‫التعليقات‬ ________________________________ _________________ 210 ‫المتغيرات‬ ________________________________ _________________ 211 Variable hoisting ________________________________ ___________ 213 :‫البيانات‬ ‫انواع‬ ________________________________ ______________ 214 ‫المعامالت‬ Operators ________________________________ _________ 215 ‫الشرطية‬ ‫التعابير‬ ________________________________ _____________ 217 ‫القيم‬ Falsy ________________________________ ________________ 219 ‫المنبثقة‬ ‫الصناديق‬ ________________________________ ____________ 220 ‫الدوال‬ functions ________________________________ ____________ 221 Function declarations ________________________________ __________ 221 Function expressions ________________________________ __________ 222 ‫المعادة‬ ‫القيمة‬ return ________________________________ ___________ 223 Arrow functions ________________________________ ______________ 223 rest parameter ________________________________ ______________ 223 ‫التكرار‬ ‫حلقات‬ ________________________________ ______________ 224
  • 12. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 12 ‫الحلقة‬ for ________________________________ ___________________ 224 ‫الحلقة‬ do...while ________________________________ ______________ 225 ‫الحلقة‬ while ________________________________ _________________ 225 ‫الحلقة‬ for...in ________________________________ ________________ 226 ‫االستثناءات‬ ‫معالجة‬ ________________________________ ___________ 227 String ‫النصية‬ ‫السالسل‬ ________________________________ ________ 228 Array ‫المصفوفات‬ ________________________________ ___________ 233 Math Object ________________________________ ______________ 235 DOM ________________________________ ___________________ 238 ‫هو‬ ‫ما‬ jQuery ‫؟‬ ________________________________ _____________ 247 ‫تضمين‬ jQuery ________________________________ _____________ 248 ‫تنزيل‬ jQuery ________________________________ ________________ 248 ‫باستخدام‬ ‫تضمين‬ CDN ________________________________ ___________ 248 ‫الكتابة‬ ‫قواعد‬ jQuery ________________________________ __________ 249 The Document Ready Event ________________________________ ____ 250 ‫المحددات‬ Selectors ________________________________ __________ 250 ‫اسمه‬ ‫طريق‬ ‫عن‬ ‫عنصر‬ ‫تحديد‬ ________________________________ ______ 251 ‫المعرف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ________________________________ __________ 251 ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫الصف‬ ________________________________ ___________ 252 ‫الصف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ________________________________ ___________ 252 ‫االحداث‬ ________________________________ __________________ 254 ‫بالحداث‬ ‫الخاصة‬ ‫المساعدة‬ ‫الدوال‬ ________________________________ ____ 255 ‫الطريقة‬ on() ________________________________ _________________ 257 ‫التاثيرات‬ ________________________________ _________________ 258 ‫االخفاء‬ ‫و‬ ‫االظهار‬ ________________________________ ______________ 258 toggle() ________________________________ ____________________ 259 ‫السحب‬ Sliding ________________________________ _______________ 259 slideToggle ________________________________ _________________ 260 ‫التالشي‬ Fading ________________________________ ____________ 261
  • 13. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 13 Animation ________________________________ _______________ 261 ‫نسبية‬ ‫قيم‬ ‫باستخدام‬ ‫التحريك‬ ________________________________ _______ 262 ‫التحريك‬ ‫او‬ ‫التأثير‬ ‫اقاف‬ ________________________________ __________ 262 ‫التسلسل‬ Chaining ________________________________ __________ 263 ‫مع‬ ‫التعامل‬ classes ________________________________ ___________ 264 addClass() ________________________________ __________________ 264 removeClass() ________________________________ _______________ 265 toggleClass() ________________________________ ________________ 265 css() ________________________________ ______________________ 265 ‫االجاكس‬ AJAX ________________________________ _____________ 267 ‫الطريقة‬ load() ________________________________ ________________ 267 ‫الدوال‬ get() and post() ________________________________ __________ 268 ‫الخصائص‬ ‫و‬ ‫بالمحتوى‬ ‫التحكم‬ ________________________________ ____ 270 ‫الوصول‬ ‫للمحتوى‬ ________________________________ ______________ 270 ‫الخصائص‬ ‫على‬ ‫الحصول‬ ________________________________ _________ 270 ‫عناصر‬ ‫إضافة‬ ________________________________ ______________ 271 ‫الطريقة‬ append() ________________________________ ______________ 271 ‫الطريقة‬ prepend() ________________________________ _____________ 271 ‫الطرائق‬ after() and before() ________________________________ ______ 271 ‫عنصر‬ ‫حذف‬ ________________________________ _______________ 272 ‫الطريقة‬ remove() ________________________________ ______________ 272 ‫الطريقة‬ empty() ________________________________ ______________ 272 ‫أو‬ ‫البيانات‬ ‫قاعدة‬ Database ________________________________ _____ 274 ‫ال‬ ‫لغة‬ SQL ________________________________ ________________ 274 ‫تثبيت‬ MySQL ________________________________ ______________ 274 ‫بيانات‬ ‫قاعدة‬ ‫إنشاء‬ Database ________________________________ ____ 275 ‫إنشا‬ ‫الجداول‬ ‫ء‬ Tables ________________________________ _________ 276 ‫ال‬ ‫داخل‬ ‫بيانات‬ ‫إضافة‬ Tables ________________________________ ____ 277 ‫االس‬ ‫الجداول‬ ‫داخل‬ ‫بيانات‬ ‫عن‬ ‫تعالم‬ ________________________________ _ 278
  • 14. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 14 ‫شروط‬ ‫وضع‬ ‫مع‬ ‫البيانات‬ ‫عن‬ ‫االستعالم‬ ________________________________ _ 278 ‫المنطقية‬ ‫العمليات‬ ________________________________ ____________ 279 ‫جملة‬ order by ________________________________ _____________ 281 ‫جملة‬ Update ________________________________ ______________ 282 ‫االجماليات‬ ‫دوال‬ Aggregate ________________________________ _____ 283 ‫جملة‬ group by ________________________________ _______________ 285 ‫الحسابية‬ ‫الدوال‬ Mathematical ________________________________ ___ 286 ‫مقدم‬ ‫ة‬ ________________________________ ___________________ 289 ‫مع‬ ‫ابدأ‬ PHP ________________________________ _______________ 290 ‫في‬ ‫كود‬ ‫اول‬ PHP ________________________________ ____________ 290 ‫التكو‬ ‫معلومات‬ ‫صفحة‬ ‫ين‬ ________________________________ ________ 291 ‫اللغة‬ ‫أساسيات‬ ________________________________ ______________ 292 ‫لحالة‬ ‫الحساسية‬ ‫األ‬ ‫حرف‬ ________________________________ __________ 292 ‫الجمل‬ Statements ________________________________ _____________ 293 ‫األسطر‬ ‫وفواصل‬ ‫البيضاء‬ ‫المسافة‬ ________________________________ ____ 294 ‫ال‬ ‫تعليقات‬ ________________________________ ___________________ 294 ‫المعرفات‬ ________________________________ ___________________ 296 ‫المتغيرات‬ ‫أسماء‬ ________________________________ ______________ 296 ‫الدوال‬ ‫أسماء‬ ________________________________ _________________ 296 ‫الفئات‬ ‫أسماء‬ CLASS ________________________________ ____________ 297 Constants ‫الثوابت‬ ________________________________ _____________ 297 ‫الرئيس‬ ‫الكلمات‬ ‫ية‬ ________________________________ ______________ 297 ‫الصحيحة‬ ‫االعداد‬ ________________________________ ______________ 299 ‫العشرية‬ ‫األرقام‬ ________________________________ _______________ 299 ‫النصية‬ ‫السالسل‬ ________________________________ _______________ 300 ‫منطقية‬ ‫قيمة‬ ________________________________ _________________ 301 ‫المصفوفات‬ ________________________________ __________________ 302 . Objects ________________________________ ___________________ 303 ‫الموارد‬ ‫أو‬ ‫المصادر‬ ________________________________ _____________ 304
  • 15. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 15 ‫االسترجاع‬ Callbacks ________________________________ ___________ 305 NULL ________________________________ _____________________ 305 Variable Variables ‫المتغيرة‬ ‫المتغيرات‬ ________________________________ 308 ‫المتغير‬ ‫نطاق‬ ________________________________ _________________ 308 ‫الدوال‬ ‫وسطاء‬ ________________________________ ________________ 311 ‫المعامل‬ ‫أسبقية‬ ________________________________ ________________ 315 ‫الضمني‬ ‫القصر‬ Implicit Casting ________________________________ ____ 316 ‫الحسابية‬ ‫العمليات‬ ________________________________ ______________ 316 ‫السلسلة‬ ‫دمج‬ ‫عامل‬ ________________________________ _____________ 317 ‫ال‬ ‫الزيادة‬ ‫عوامل‬ ‫تلقائية‬ (++) ‫التلقائي‬ ‫والتناقص‬ (--) __________________________ 318 ‫المقارنة‬ ‫عوامل‬ ________________________________ _______________ 318 (??) Null coalescing operator ________________________________ _____ 320 ‫ال‬ ‫المنطقية‬ ‫عمليات‬ ________________________________ ______________ 321 Flow-Control Statements ‫التدفق‬ ‫في‬ ‫التحكم‬ ‫جمل‬ _______________________ 322 ‫جملة‬ if ________________________________ ____________________ 322 ‫جملة‬ elseif . ________________________________ _________________ 324 switch ________________________________ ____________________ 325 while ________________________________ _____________________ 326 :‫كمثال‬ ________________________________ _____________________ 327 for ________________________________ _______________________ 328 foreach ________________________________ ____________________ 330 ‫تضمين‬ PHP ‫الويب‬ ‫صفحات‬ ‫في‬ ________________________________ ___ 334 ‫الدوال‬ ________________________________ ___________________ 335 ‫الدالة‬ ‫استدعاء‬ ________________________________ ________________ 335 ‫الدالة‬ ‫تعريف‬ ________________________________ _________________ 337 Variable Scope ‫متغير‬ ‫نطاق‬ ________________________________ _______ 339 ‫العالمية‬ ‫او‬ ‫العامة‬ ‫المتغيرات‬ ________________________________ _______ 340 ‫الثابتة‬ ‫المتغيرات‬ static ________________________________ __________ 341 ‫الدالة‬ ‫وسطاء‬ ________________________________ _______________ 342 ‫الوسطاء‬ ‫تمرير‬ ‫بالقيمة‬ ________________________________ ___________ 342
  • 16. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 16 ‫المرجع‬ ‫حسب‬ ‫الوسطاء‬ ‫تمرير‬ ________________________________ ______ 342 ‫االفتراضية‬ ‫الوسطاء‬ ________________________________ ____________ 343 ‫المتغير‬ ‫وسطاء‬ ________________________________ ________________ 345 ‫تلميح‬ ‫كتابة‬ ________________________________ __________________ 347 ‫القيم‬ ‫إرجاع‬ ________________________________ __________________ 347 ‫مجهولة‬ ‫دوال‬ ________________________________ _________________ 348 ‫النصية‬ ‫السالسل‬ ________________________________ _____________ 349 Variable Interpolation ‫المتغير‬ )‫(تفسير‬ ‫توسيع‬ __________________________ 349 ‫واحدة‬ ‫اقتباس‬ ‫عالمة‬ ‫ذات‬ ‫سالسل‬ ________________________________ ____ 350 ‫المزدوجة‬ ‫االقتباس‬ ‫بعالمة‬ ‫سالسل‬ ________________________________ ____ 351 ‫جم‬ ‫السالسل‬ ‫طباعة‬ ‫ل‬ ________________________________ ____________ 352 echo ________________________________ ______________________ 352 print() ________________________________ _____________________ 353 printf() ________________________________ ____________________ 353 ‫التنسيق‬ ‫معدالت‬ FORMAT MODIFIERS ________________________________ 354 ‫النوع‬ ‫محددات‬ ________________________________ ________________ 355 var_dump() ‫و‬ print_r() ________________________________ _________ 358 ‫البيضاء‬ ‫المسافة‬ ‫إزالة‬ ________________________________ ___________ 360 : ‫نصية‬ ‫سلسلة‬ ‫في‬ ‫االحرف‬ ‫الحالة‬ ‫تغيير‬ ________________________________ 362 ‫والهروب‬ ‫الترميز‬ Encoding and Escaping ______________________________ 363 HTML ________________________________ _____________________ 363 ‫بلغة‬ ‫محددة‬ ‫كيانات‬ ‫اقتباس‬ HTML ________________________________ ____ 365 ‫أوسمة‬ ‫إزالة‬ ________________________________ _________________ 366 ‫الوصفية‬ ‫األوسمة‬ ‫استخراج‬ meta ________________________________ ____ 367 ‫عناوين‬ URL ________________________________ _________________ 368 SQL ________________________________ ____________________ 370 ‫السالسل‬ ‫مقارنة‬ ________________________________ _____________ 371 ‫دقيقة‬ ‫مقارنات‬ ________________________________ ________________ 371 ‫التقريبية‬ ‫المساواة‬ ________________________________ ______________ 372 ‫والبحث‬ ‫التالعب‬ ‫السالسل‬ ‫في‬ ________________________________ _____ 373
  • 17. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 17 Substrings ‫الجزئية‬ ‫السالسل‬ ________________________________ _______ 373 ‫اخرى‬ ‫السالسل‬ ‫دوال‬ ________________________________ ____________ 375 Decomposing a String ‫سلسلة‬ ‫تحليل‬ ________________________________ _ 377 EXPLODING AND IMPLODING ________________________________ ____ 377 ‫السالسل‬ ‫في‬ ‫البحث‬ ‫دوال‬ ________________________________ __________ 378 ‫الب‬ ‫عمليات‬ ‫األماكن‬ ‫بإرجاع‬ ‫حث‬ ________________________________ ______ 379 ‫السلسلة‬ ‫بقية‬ ‫ترجع‬ ‫التي‬ ‫البحث‬ ‫عمليات‬ ________________________________ 379 ‫المواقع‬ ‫عناوين‬ ‫فك‬ DECOMPOSING URLS ______________________________ 380 ‫المصوفات‬ ________________________________ ________________ 381 ‫المترابطة‬ ‫المصفوفة‬ ‫و‬ ‫المفهرسة‬ ‫المصفوفات‬ ____________________________ 381 ‫المصفوفة‬ ‫عناصر‬ ‫تحديد‬ ________________________________ __________ 382 ‫المصفوفات‬ ‫في‬ ‫البيانات‬ ‫تخزين‬ ________________________________ ______ 382 ‫بمصفوفة‬ ‫القيم‬ ‫إلحاق‬ ________________________________ ____________ 384 ‫م‬ ‫نطاق‬ ‫تهيئة‬ ‫القيم‬ ‫ن‬ ________________________________ ____________ 384 ‫المصفوفة‬ ‫حجم‬ ‫على‬ ‫الحصول‬ ________________________________ ______ 384 Padding an Array ‫مصفوفة‬ ‫حشو‬ ________________________________ ___ 385 ‫األبعاد‬ ‫متعددة‬ ‫المصفوفات‬ ________________________________ _______ 385 ‫متعددة‬ ‫قيم‬ ‫استخراج‬ ________________________________ ____________ 386 ‫المصفوفة‬ ‫تشريح‬ Slicing an Array ________________________________ ___ 387 ‫أجزاء‬ ‫إلى‬ ‫المصفوفة‬ ‫تقسيم‬ ________________________________ ________ 387 ‫والقيم‬ ‫المفاتيح‬ ________________________________ ________________ 388 ‫عنصر‬ ‫وجود‬ ‫من‬ ‫التحقق‬ ________________________________ __________ 389 ‫وإدراج‬ ‫إزالة‬ ‫مصفوفة‬ ‫في‬ ‫العناصر‬ ________________________________ ___ 389 ‫والمتغيرات‬ ‫المصفوفات‬ ‫بين‬ ‫التحويل‬ ________________________________ 391 ‫مصفوفة‬ ‫من‬ ‫متغيرات‬ ‫تكوين‬ ________________________________ _______ 391 ‫الم‬ ‫عبور‬ ‫صفوفات‬ ________________________________ ____________ 393 ‫بناء‬ ‫جملة‬ foreach ________________________________ _____________ 393 ‫التكرار‬ ‫دوال‬ ________________________________ _________________ 394 ‫حلقة‬ ‫باستخدام‬ for ________________________________ _____________ 395 ‫المصفوفة‬ ‫اختزال‬ ________________________________ ______________ 395
  • 18. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 18 ‫القيم‬ ‫عن‬ ‫البحث‬ ________________________________ _______________ 396 ‫الفرز‬ Sorting ________________________________ ________________ 398 ‫المصفوفات‬ ‫عكس‬ ________________________________ ______________ 398 ‫العشوائية‬ ‫ترتيب‬ ________________________________ _______________ 400 ‫المصفوفة‬ ‫مجموع‬ ‫حساب‬ ________________________________ _________ 400 ‫أساسيات‬ HTTP ________________________________ _____________ 402 ‫المتغيرات‬ ________________________________ ___________________ 404 ‫النماذج‬ ‫معالجة‬ ________________________________ ________________ 408 “Self-Processing Pages” ‫الذاتية‬ ‫المعالجة‬ ‫صفحات‬ _______________________ 410 “File Uploads” ‫الملف‬ ‫تحميالت‬ ________________________________ _____ 413 ” ‫النموذج‬ ‫صحة‬ ‫من‬ ‫التحقق‬ Form Validation “ _________________________ 416 ‫االستجابة‬ ‫رؤوس‬ ‫تعيين‬ ________________________________ ________ 420 Warning: Cannot add header information - headers already sent ____________ 421 ‫المختلفة‬ ‫المحتويات‬ ‫أنواع‬ Content Types ____________________________ 421 ‫التوجيه‬ ‫إعادة‬ ‫عمليات‬ Redirections ________________________________ 421 ‫الصالحية‬ ‫انتهاء‬ Expiration ________________________________ _____ 422 Authentication ‫المصادقة‬ ________________________________ ______ 423 ‫الحالة‬ ‫على‬ ‫الحفاظ‬ ________________________________ ____________ 424 ” ‫اإلرتباط‬ ‫تعريف‬ ‫ملفات‬ Cookies “ ________________________________ _ 426 “Sessions” ‫الجلسات‬ ________________________________ ____________ 430 “SESSION BASICS” ‫الجلسة‬ ‫أساسيات‬ ________________________________ _ 430 SSL ________________________________ _____________________ 434 ‫البيانات‬ ‫قواعد‬ ________________________________ ______________ 435 ‫الع‬ ‫البيانات‬ ‫قواعد‬ ‫و‬ ‫الئقية‬ SQL ________________________________ ____ 436 ‫كائن‬ ‫واجهة‬ MySQLi ________________________________ __________ 439 ‫للعرض‬ ‫البيانات‬ ‫استرجاع‬ ________________________________ _______ 440
  • 19. +352681612038 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 19 ِ‫ـه‬ َّ ‫الل‬ ِ ‫م‬ ْ ‫س‬ِ‫ب‬ ِ ‫يم‬ ِ ‫ح‬َّ ‫الر‬ ِ ‫ن‬ٰ‫ـ‬ َ‫م‬ ْ ‫ح‬َّ ‫الر‬ ‫تكنولوجية‬ ‫طفرة‬ ‫العالم‬ ‫يعيش‬ ‫هائلة‬ ‫من‬ ‫نيت‬ ‫ر‬ ‫االنت‬ ‫شبكة‬ ‫تعد‬ ‫حيث‬ ‫أ‬ ‫عظم‬ ‫اال‬ ‫اعات‬ ‫ر‬ ‫خت‬ ‫ي‬ ‫ف‬ ‫تسهم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطفرة‬ ‫هذه‬ ‫حيث‬ ‫من‬ ‫إ‬ ‫و‬ ‫المعلومات‬ ‫تاحة‬ ‫سلس‬ ‫بشكل‬ ‫انتشارها‬ ‫مثل‬ ‫الخدمات‬ ‫من‬ ‫ر‬ ‫للكثت‬ ‫باإلضافة‬ ‫الناس‬ ‫تواصل‬ ‫البعض‬ ‫بعضهم‬ ‫مع‬ ‫بسهولة‬ ‫ر‬ ‫حت‬ ‫أ‬ ‫نقول‬ ‫صبحنا‬ ‫أ‬ ‫كوكب‬‫ن‬ ‫الجميل‬ ‫األزرق‬ ‫نا‬ ‫أ‬ ‫صبح‬ ‫قري‬ ‫ة‬ ‫ة‬ ‫ر‬ ‫صغت‬ . ‫من‬ ‫الويب‬ ‫قطاع‬ ‫يعد‬ ‫أ‬ ‫بشكل‬ ‫تنمو‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الخدمات‬ ‫هم‬ ‫ع‬ ‫ي‬‫رس‬ ‫وبشكل‬ ‫وتخلق‬ ‫فرص‬ ‫مستمر‬ ‫ة‬ ‫ر‬ ‫وممت‬ ‫ة‬ ‫ر‬ ‫كبت‬‫عمل‬ . ‫سيمدك‬ ‫الكتيب‬ ‫هذا‬ ‫عملية‬ ‫بمعلومات‬ ‫م‬ ‫وأكاديمية‬ ‫البدء‬ ‫من‬ ‫تمكنهم‬ ‫وع‬ ‫ر‬ ‫مش‬ ‫بناء‬ ‫بتجاه‬ ‫عملية‬ ‫بخطوات‬ . ‫ر‬ ‫ممت‬ ‫ويب‬ ‫من‬ :‫أنا‬ ‫برمجيات‬ ‫هندسة‬ ‫تخصص‬ ‫معلوماتية‬ ‫هندسة‬ ‫ج‬ ‫خري‬ ‫البيور‬ ‫أنس‬ ‫من‬ ‫الويب‬ ‫واجهات‬ ‫تطوير‬ ‫ي‬ ‫ف‬ ‫دكري‬‫النانو‬ ‫شهادة‬ ‫عىل‬ ‫حاصل‬ Udacity ‫ة‬ ‫ر‬ ‫خت‬ 5 ‫سنوات‬ ‫و‬ ‫مجيات‬ ‫ر‬ ‫الت‬ ‫مجال‬ ‫ي‬ ‫ف‬ ‫أ‬ ‫ويب‬‫تطوير‬ ‫فريق‬ ‫كقائد‬‫عمل‬ Web Development Team Leader ‫قمت‬ ‫وتحليل‬ ‫ببناء‬ ‫العديد‬ ‫الويب‬ ‫وتطبيقات‬ ‫ع‬ ‫مشاري‬ ‫من‬ ‫تدريب‬ ‫لدي‬ ‫كما‬ ‫عديدة‬ ‫ات‬ ‫مجال‬ ‫ي‬ ‫ف‬ ‫ال‬ IT ‫الصالحات‬ ‫تتم‬ ‫بنعمته‬ ‫الذي‬ ‫هلل‬ ‫الحمد‬
  • 21. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 21 ‫هو‬ ‫ما‬ HTML ‫؟‬ HTML ‫ل‬‫اختصار‬ Hyper Text Markup Language HTML ‫الويب‬ ‫صفحات‬ ‫إلنشاء‬ ‫القياسية‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬ ‫لغة‬ ‫ي‬ ‫ه‬ ‫يصف‬ HTML ‫الويب‬ ‫صفحة‬ ‫بنية‬ ‫بواسطة‬ ‫عناص‬ HTML ‫عناص‬ ‫ر‬ ‫تخت‬ HTML ‫المحتوى‬ ‫عرض‬ ‫بكيفية‬ ‫المتصفح‬ ‫عناص‬ ‫تقوم‬ HTML "‫فقرة‬ ‫"هذه‬ ، "‫عنوان‬ ‫"هذا‬ ‫مثل‬ ‫المحتوى‬ ‫من‬ ‫اء‬‫ز‬‫أج‬ ‫بتسمية‬ .‫إلخ‬ ، "‫ارتباط‬ ‫"هذا‬ ، ‫مستند‬ HTML ‫بسيط‬ ‫مثال‬ <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ‫المثال‬ ‫ح‬ ‫ر‬ ‫ش‬ ‫اإلعالن‬ ‫يحدد‬ <!DOCTYPE html> ‫مستند‬ ‫هو‬ ‫المستند‬ ‫هذا‬ ‫أن‬ HTML5 ‫عنرص‬ < html> ‫لصفحة‬ ‫الجذر‬‫العنرص‬‫هو‬ HTML ‫العنرص‬ ‫يحتوي‬ <head> ‫صفحة‬ ‫حول‬ ‫وصفية‬ ‫معلومات‬ ‫عىل‬ HTML ‫العنرص‬ ‫يحدد‬ < title> ‫ل‬ ‫ا‬ ً ‫عنوان‬ ‫ل‬ ‫صفحة‬ ‫أو‬ ‫المتصفح‬ ‫عنوان‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬‫يظهر‬ ‫والذي‬ ‫ي‬ ‫ف‬ ‫وسم‬ ‫الصفحة‬ ‫تبويب‬
  • 22. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 22 ‫العنرص‬ ‫يحدد‬ <body> ‫المحتويات‬ ‫لجميع‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫وهو‬ ، ‫المستند‬ ‫جسم‬ ، ‫والجداول‬ ، ‫التشعبية‬ ‫واالرتباطات‬ ، ‫والصور‬ ، ‫ات‬‫ر‬‫والفق‬ ، ‫العناوين‬ ‫مثل‬ ، ‫المرئية‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ، ‫والقوائم‬ ‫العنرص‬ ‫يحدد‬ <h1> ‫ا‬ً ‫ر‬ ‫كبت‬‫ا‬ ً ‫عنوان‬ ‫العنرص‬ ‫يحدد‬ <p> ‫فقرة‬ ‫متصفحات‬ ‫الويب‬ ‫من‬ ‫الغرض‬ ( ‫الويب‬ ‫متصفح‬ Chrome ‫و‬ Edge ‫و‬ Firefox ‫و‬ ( Safari ‫اءة‬‫ر‬‫ق‬ ‫هو‬ ‫مستندات‬ HTML .‫صحيح‬ ‫بشكل‬ ‫وعرضها‬ ‫عالمات‬ ‫المستعرض‬ ‫يعرض‬ ‫ال‬ HTML ‫عرض‬ ‫كيفية‬‫لتحديد‬ ‫يستخدمها‬ ‫ولكنه‬ ، :‫المستند‬
  • 23. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 23 ‫في‬ ‫مقدمة‬ HTML5 : HTML5 ‫مع‬ ‫من‬ ‫واألحدث‬ ‫الخامس‬ ‫اإلصدار‬‫هو‬ ‫ا‬ ‫ي‬ ‫ر‬ ‫ت‬ HTML ‫يقدم‬ ‫ال‬ ‫جديدة‬ ‫ات‬ ‫ر‬ ‫مت‬ ‫ويب‬ ‫تطبيقات‬ ‫إلنشاء‬ ‫الدعم‬ ‫ا‬ ً ‫أيض‬ ‫تعزز‬ ‫بل‬ ، ‫فحسب‬ ‫الغنية‬ ‫للوسائط‬ ‫ا‬ ً‫دعم‬ ‫توفر‬ ‫ر‬ ‫أكت‬ ‫وفعالية‬ ‫بسهولة‬ ‫والخوادم‬ ‫المحلية‬ ‫وبياناتهم‬ ‫ر‬ ‫المستخدمي‬ ‫مع‬ ‫التفاعل‬ ‫يمكنها‬ .‫السابق‬ ‫ي‬ ‫ف‬ ‫ا‬ ً ‫ممكن‬ ‫كان‬‫مما‬ HTML5 ‫تدعم‬ ‫جديدة‬ ‫متعددة‬ ‫وسائط‬ ‫مثل‬ ‫والفيديو‬ ‫الصوت‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫باستخدام‬ ‫الوسوم‬ <audio> ‫و‬ <video>. ‫الرسومات‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫جديدة‬ ‫رسومات‬ ‫عناص‬ ‫هناك‬ ‫الشعاعية‬ ‫لها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسوم‬ ‫و‬ ‫معت‬ ‫ي‬ ‫دالىل‬ <header> <footer> ‫و‬ <article> ‫و‬ <section> ( ‫الشعاعية‬ ‫الرسوميات‬ Vector ) ‫الهندسية‬ ‫لألشكال‬ ‫وصف‬ ‫تستعمل‬ ‫رسومات‬ ‫ي‬ ‫ه‬ ‫مثل‬ .‫الصور‬ ‫لتمثل‬ ‫للمنحنيات‬ ‫الرياضية‬ ‫والمعادالت‬ ‫والخطوط‬ ‫النقط‬ ‫إحداثيات‬ ( ‫النقطية‬ ‫الرسوميات‬ ‫عن‬ ‫تختلف‬ ‫بذلك‬ ‫ي‬ ‫وه‬ bitmap ) ‫البكسل‬ ‫عىل‬ ‫تعتمد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المربعة‬ ‫النقط‬ ‫من‬ ‫بمصفوفة‬ ‫الصورة‬ ‫وتمثل‬ ،‫الصورة‬ ‫ي‬ ‫ف‬ ‫عنرص‬‫كأصغر‬ ‫محتوى‬ ‫أن‬ ‫إىل‬ ‫لإلشارة‬ HTML ‫يستخدم‬ ‫بك‬ ‫الخاص‬ HTML5 :‫استخدم‬ ، <!DOCTYPE html>
  • 24. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 24 ‫باستخدام‬ ‫األحرف‬ ‫مجموعة‬ ‫عن‬ ‫ـح‬‫ـ‬‫ـ‬‫ـ‬‫ي‬‫الترص‬ <meta charset> ‫ي‬ ‫عنرص‬ ‫باستخدام‬ ‫ذلك‬ ‫تم‬ <meta> <meta charset="UTF-8"> ‫ضع‬ ‫ه‬ ‫بعد‬ ‫وسم‬ <head> ‫تحليل‬ ‫إعادة‬ ‫المتصفحات‬ ‫بعض‬ ‫تعيد‬ ‫حيث‬ ، ً ‫ة‬ ‫ر‬ ‫مبارس‬ ‫مستند‬ HTML . ‫ا‬ً‫حالي‬ ‫تستخدم‬ ‫ال‬ ‫كنت‬‫إذا‬ ،‫ا‬ ً ‫أيض‬ UTF-8 ‫إليه‬ ‫بالتبديل‬ ‫تقوم‬ ‫أن‬ ‫المستحسن‬ ‫فمن‬ ، ‫المستندات‬ ‫ي‬ ‫ف‬ ‫األحرف‬ ‫مع‬ ‫التعامل‬ ‫يبسط‬ ‫ألنه‬ ، ‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫ي‬ ‫ف‬ .‫مختلفة‬ ‫نصية‬ ‫امج‬‫ر‬‫ب‬ ‫باستخدام‬ ‫عنصر‬ ‫هو‬ ‫ما‬ HTML ‫؟‬ ‫عنرص‬ ‫تعريف‬ ‫يتم‬ HTML ‫بواسطة‬ ‫وسم‬ ‫و‬ ‫المحتوى‬ ‫وبعض‬ ‫البداية‬ ‫وسم‬ :‫النهاية‬ <tagname> ‫هنا‬ ‫يذهب‬ ‫المحتوى‬ ... </tagname> ‫عنرص‬ HTML ‫من‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬‫هو‬ ‫وسم‬ ‫إىل‬ ‫البداية‬ ‫وسم‬ :‫النهاية‬ <h1> ‫األول‬ ‫ي‬ ‫عنوان‬ </ h1> <p> ‫األوىل‬ ‫ي‬ ‫ر‬ ‫فقرن‬ </ p> ‫عناص‬ ‫بعض‬ :‫مالحظة‬ HTML ‫عنرص‬ ‫(مثل‬ ‫محتوى‬ ‫لها‬ ‫ليس‬ <br> ‫هذه‬ ‫تسىم‬ ‫لها‬ ‫ليس‬ ‫الفارغة‬ ‫العناص‬ .‫الفارغة‬ ‫بالعناص‬ ‫العناص‬ ‫وسم‬ )!‫نهاية‬
  • 25. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 25 ‫صفحة‬ ‫هيكل‬ HTML ‫صفحة‬ ‫لهيكل‬ ‫تصور‬ ‫أدناه‬ ‫يوجد‬ HTML: ‫قسم‬ ‫داخل‬ ‫الموجود‬ ‫المحتوى‬ ‫عرض‬ ‫سيتم‬ :‫مالحظة‬ <body> ‫البيضاء‬ ‫المنطقة‬ ‫عنرص‬ ‫داخل‬ ‫الموجود‬ ‫المحتوى‬‫سيظهر‬ .‫المتصفح‬ ‫ي‬ ‫ف‬ ‫أعاله‬ <title> ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫ف‬ ‫أو‬ ‫المتصفح‬ ‫عنوان‬ ‫وسم‬ .‫الصفحة‬ ‫تبويب‬
  • 26. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 26 ‫محرر‬ ‫االكواد‬ ‫كتابة‬‫يمكن‬ HTML ‫باستخدام‬ Notepad ‫أو‬ TextEdit ‫بسيط‬ ‫نصوص‬ ‫كمحرر‬ ‫تحرير‬ ‫امج‬‫ر‬‫ب‬ ‫باستخدام‬ ‫وتعديلها‬ ‫الويب‬ ‫صفحات‬ ‫إنشاء‬ ‫يمكن‬ ‫االكواد‬ Code Editors . ‫يمكنك‬ ‫استخدام‬ ‫أن‬ ‫أي‬ ‫محرر‬ ‫نصوص‬ ‫بسيط‬ ‫ننصح‬ ‫لكننا‬ ‫باستخدا‬ ‫م‬ ‫محرر‬ ‫االكواد‬ Visual Studio Code ‫الموقع‬ ‫ابط‬‫ر‬ ‫وهذا‬ ‫المحرر‬ ‫هذا‬ ‫يل‬‫لتت‬ ‫ي‬ ‫الرسىم‬ https://code.visualstudio.com / ‫باستخدام‬ ‫بك‬ ‫الخاصة‬ ‫األوىل‬ ‫الويب‬ ‫صفحة‬ ‫إلنشاء‬ ‫أدناه‬ ‫الخطوات‬ ‫اتبع‬ • ‫ملف‬ ‫انشأ‬ ‫جديد‬ new file
  • 27. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 27 ‫الملف‬ ‫ضمن‬ ‫ي‬ ‫التاىل‬ ‫الكود‬ ‫اكتب‬ <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ‫احفظ‬ ‫ملف‬ ‫صفحة‬ HTML ‫حدد‬ .‫بك‬ ‫الخاص‬‫الكمبيوتر‬ ‫جهاز‬ ‫عىل‬ ‫الملف‬ ‫احفظ‬ file > save ‫قائمة‬ ‫ي‬ ‫ف‬ ‫المحرر‬ . " ‫الملف‬ ‫بتسمية‬ ‫قم‬ index.html" . ‫استخدام‬ ‫يمكنك‬ htm . ‫أو‬ html .‫لك‬ ‫وك‬ ‫ر‬ ‫مت‬ ‫األمر‬ ، ‫فرق‬ ‫يوجد‬ ‫ال‬ .‫للملف‬ ‫كملحق‬
  • 28. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 28 ‫ملف‬ ‫افتح‬ HTML ‫الملف‬ ‫عىل‬ ‫ا‬ ً ‫مزدوج‬ ‫ا‬ً ‫نقر‬ ‫(انقر‬ ‫المفضل‬ ‫متصفحك‬ ‫ي‬ ‫ف‬ ‫المحفوظ‬ ‫األيمن‬ ‫الماوس‬‫بزر‬ ‫انقر‬‫أو‬ ، - .)"‫باستخدام‬ ‫"فتح‬ ‫ر‬ ‫واخت‬ ‫ر‬ ‫كبت‬‫حد‬ ‫إىل‬ ‫هذا‬ ‫مثل‬ ‫النتيجة‬‫تبدو‬ ‫سوف‬ HTML ‫بسيط‬ ‫كود‬ ‫مستندات‬ ‫جميع‬ ‫تبدأ‬ ‫أن‬ ‫يجب‬ HTML ‫بإعال‬ :‫المستند‬ ‫نوع‬ ‫ن‬ <!DOCTYPE html>. ‫مستند‬ ‫يبدأ‬ HTML ‫ب‬ ‫نفسه‬ <html> ‫ب‬ ‫ي‬ ‫وينته‬ </html>. ‫مستند‬ ‫من‬ ‫ي‬ ‫المرن‬ ‫الجزء‬ ‫يقع‬ HTML ‫ر‬ ‫بي‬ < body> ‫و‬ </body> ‫مثال‬ <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 29. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 29 ‫إعالن‬ <!DOCTYPE> ‫إعالن‬ ‫يمثل‬ <!DOCTYPE> ‫عرض‬ ‫عىل‬ ‫المستعرضات‬ ‫ويساعد‬ ‫المستند‬ ‫ع‬ ‫نو‬ ‫صحيح‬ ‫بشكل‬ ‫الويب‬ ‫صفحات‬ , ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ، ‫فقط‬ ‫واحدة‬ ‫مرة‬ ‫يظهر‬ ‫أن‬ ‫يجب‬ ‫عالمات‬ ‫أي‬ ‫قبل‬ HTML ‫وهو‬ , ً ‫حساسا‬ ‫ليس‬ .‫األحرف‬ ‫لحالة‬ ‫إعالن‬ <!DOCTYPE> ‫ل‬ HTML5 :‫هو‬ <!DOCTYPE html> ‫عناوين‬ HTML ‫عناوين‬ ‫تعريف‬ ‫يتم‬ HTML ‫بعالمات‬ <h1> ‫إىل‬ <h6>. ‫يحدد‬ <h1> ‫أهمية‬ ‫ر‬ ‫األكت‬ ‫العنوان‬ ‫يحدد‬ <h6> :‫أهمية‬ ‫األقل‬ ‫العنوان‬ <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> ‫ات‬‫ر‬‫فق‬ HTML ‫ات‬‫ر‬‫فق‬ ‫تعريف‬ ‫يتم‬ HTML ‫بال‬ ‫وسم‬ < p> <p>This is a paragraph.</p> <p>This is another paragraph.</p> ‫روابط‬ HTML ‫روابط‬ ‫تعريف‬ ‫يتم‬ HTML ‫ب‬ ‫وسم‬ <a> <a href="https://www.example.com">This is a link</a> ‫ي‬ ‫ف‬ ‫االرتباط‬ ‫وجهة‬ ‫تحديد‬ ‫يتم‬ ‫ال‬ ‫خاصية‬ href ‫ستخدم‬ ُ ‫ت‬ ‫الخواص‬ ‫عناص‬ ‫حول‬ ‫إضافية‬ ‫معلومات‬ ‫ر‬ ‫لتوفت‬ HTML
  • 30. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 30 ‫صور‬ HTML ‫صور‬ ‫تعريف‬ ‫يتم‬ HTML ‫ب‬ ‫وسم‬ <img> ‫المصدر‬ ‫الملف‬ ‫ر‬ ‫توفت‬ ‫يتم‬ (src) ‫البديل‬ ‫والنص‬ (alt) ‫ك‬‫واالرتفاع‬ ‫والعرض‬ ‫خواص‬ <img src=" example.jpg" alt=" example.com" width="104" height="142"> ‫عناصر‬ HTML ‫عنرص‬ ‫تعريف‬ ‫يتم‬ HTML ‫النهاية‬ ‫ووسم‬ ‫المحتوى‬ ‫وبعض‬ ‫البداية‬ ‫وسم‬ ‫بواسطة‬ . ‫عنرص‬ HTML ‫النهاية‬ ‫وسم‬ ‫إىل‬ ‫البداية‬ ‫وسم‬ ‫من‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬‫هو‬ : <tagname> ‫هنا‬ ‫يذهب‬ ‫المحتوى‬ ... </tagname> ‫عناصر‬ HTML ( ‫المتداخلة‬ Nested ) ‫عناص‬ ‫تتداخل‬ ‫أن‬ ‫يمكن‬ HTML ‫عىل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ‫العناص‬ ‫أن‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ .‫أخرى‬ ‫عناص‬ ‫مستندات‬ ‫جميع‬ ‫تتكون‬ HTML ‫عناص‬ ‫من‬ HTML ‫متداخلة‬ . ‫عناص‬ ‫أربعة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحتوي‬ HTML <html> ‫و‬ <body> ‫و‬ <h1> ‫و‬ <p> : <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 31. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 31 ‫المثال‬ ‫ح‬ ‫ر‬ ‫ش‬ ‫عنرص‬ <html> ‫مستند‬ ‫ويحدد‬ ‫الجذر‬‫عنرص‬ ‫هو‬ HTML ‫بأكمله‬ . ‫بداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <html> ‫نهاية‬ ‫ووسم‬ </ html>. ‫عنرص‬ ‫داخل‬ ‫يوجد‬ ‫ثم‬ <html> ‫عنرص‬ <body> ‫العنرص‬ ‫يحدد‬ <body> ‫المستند‬ ‫جسم‬ . ‫بداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <body> ‫نهاية‬ ‫ووسم‬ </ body>. ‫عنرص‬ ‫داخل‬ ‫يوجد‬ ‫ثم‬ <body> :‫ان‬‫ر‬‫آخ‬ ‫ان‬‫رص‬‫عن‬ <h1> ‫و‬ <p> ‫العنرص‬ ‫يحدد‬ <h1> ‫العنوان‬ . ‫بداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <h1> ‫نهاية‬ ‫ووسم‬ </h1>: ‫العنرص‬ ‫يحدد‬ <p> ‫فقرة‬ . ‫البداية‬ ‫وسم‬ ‫عىل‬ ‫يحتوي‬ <p> ‫النهاية‬ ‫ووسم‬ </p> ‫ال‬ ‫تنىس‬ ‫النهاية‬ ‫وسم‬ ‫عناص‬ ‫بعض‬ ‫عرض‬ ‫سيتم‬ HTML ‫بشكل‬ ،‫صحيح‬ :‫النهاية‬ ‫وسم‬ ‫نسيت‬ ‫إذا‬ ‫ر‬ ‫حت‬ ‫عناص‬ HTML ‫فارغة‬ ‫عناص‬ ‫تسىم‬ HTML ‫الفارغة‬ ‫بالعناص‬ ‫محتوى‬ ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ . ‫الوسم‬ ‫يحدد‬ <br> ‫إغالق‬ ‫وسم‬ ‫بدون‬ ‫غ‬ ‫فار‬ ‫عنرص‬ ‫ي‬ ‫وه‬ ، ‫أسطر‬ ‫فاصل‬ <p>This is a <br> paragraph with a line break.</p>
  • 32. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 32 ‫عالمات‬ HTML :‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ليست‬ <P> ‫وسم‬ ‫نفس‬ ‫ي‬ ‫تعت‬ <p>. ‫خواص‬ HTML ( HTML Attributes ) ‫خواص‬‫توفر‬ HTML ‫عناص‬ ‫حول‬ ‫إضافية‬ ‫معلومات‬ HTML. ‫خواص‬ HTML ‫عناص‬ ‫جميع‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ HTML ‫خواص‬ ‫عىل‬ ‫العناص‬ ‫حول‬ ‫إضافية‬ ‫معلومات‬ ‫الخواص‬‫توفر‬ ‫البداية‬ ‫وسم‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫دائم‬ ‫الخواص‬ ‫تحديد‬ ‫يتم‬ ‫"القيمة‬ = ‫االسم‬ :‫مثل‬ ‫القيمة‬ / ‫االسم‬ ‫أزواج‬ ‫ي‬ ‫ف‬ ً ‫عادة‬ ‫الخواص‬ ‫ي‬ ‫ر‬ ‫تأن‬ " ‫الوسم‬ ‫يحدد‬ <a> ‫الخاصية‬ ‫تحدد‬ .‫ا‬ً‫تشعبي‬ ‫ا‬ ً ‫ارتباط‬ href ‫عنوان‬ URL ‫ي‬ ‫ر‬ ‫الت‬ ‫للصفحة‬ :‫االرتباط‬ ‫إليها‬ ‫ينتقل‬ <a href="https://www.yazan mona.com">Visit yazan mona </a> ‫خاصي‬ ‫المصدر‬ ‫ة‬ src ‫وسم‬ ‫ستخدم‬ ُ ‫ت‬ <img> ‫صفحة‬ ‫ي‬ ‫ف‬ ‫صورة‬ ‫ر‬ ‫لتضمي‬ HTML ‫الخاصية‬ ‫تحدد‬ src :‫عرضها‬ ‫اد‬‫ر‬‫الم‬ ‫الصورة‬ ‫إىل‬‫المسار‬ <img src="img_girl.jpg"> ‫عنوان‬ ‫لتحديد‬ ‫طريقتان‬ ‫هناك‬ URL ‫خاصية‬ ‫ي‬ ‫ف‬ src: 1 . URL ‫مطلق‬ - ‫خارجية‬ ‫صورة‬ ‫إىل‬ ‫روابط‬ ‫مستضاف‬ ‫مثال‬ .‫آخر‬ ‫ويب‬ ‫موقع‬ ‫عىل‬ : src = "https://www.example.com/images/img_girl.jpg". 2 . ‫عنوان‬ URL ‫ي‬ ‫ر‬ ‫النست‬ - ‫صورة‬ ‫إىل‬ ‫روابط‬ ‫مستضافة‬ ‫ال‬ ، ‫هنا‬ .‫الموقع‬ ‫داخل‬ ‫عنوان‬ ‫يتضمن‬ URL ‫عنوان‬ ‫بدأ‬ ‫إذا‬ .‫المجال‬ ‫اسم‬ URL ، ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫بدون‬ ‫مثال‬ .‫الحالية‬ ‫بالصفحة‬ ‫ا‬ ً ‫مرتبط‬ ‫فسيكون‬ : src = "img_girl.jpg". ‫عنوان‬ ‫بدأ‬ ‫إذا‬ URL ‫مثال‬ .‫بالمجال‬ ‫ا‬ ً ‫مرتبط‬ ‫فسيكون‬ ، ‫مائلة‬ ‫طة‬ ‫ر‬ ‫بش‬ : src = "/ images / img_girl.jpg".
  • 33. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 33 ‫واالرتفاع‬ ‫العرض‬ ‫خواص‬ ‫يمكن‬ ‫أن‬ ‫ي‬ ‫وسم‬ ‫حتوي‬ <img> ‫تحدد‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫واالرتفاع‬ ‫العرض‬ ‫خواص‬ ‫عىل‬ ‫ا‬ ً ‫أيض‬ :)‫(بالبكسل‬ ‫وارتفاعها‬ ‫الصورة‬ ‫عرض‬ <img src="img_girl.jpg" width="500" height="600"> ‫خاصية‬ ‫البديل‬ ‫النص‬ ( alt Attribute ) ‫لوسم‬ ‫المطلوبة‬ ‫البديل‬ ‫النص‬ ‫خاصية‬ ‫تحدد‬ <img> ، ‫للصورة‬ ً ‫بديال‬ ‫ا‬ ً ‫نص‬ ‫تعذر‬ ‫إذا‬ ‫ي‬ ‫ف‬ ‫خطأ‬ ‫أو‬ ، ‫ء‬ ‫ي‬ ‫البط‬ ‫االتصال‬ ‫بسبب‬ ‫هذا‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ .‫ما‬ ‫لسبب‬ ‫الصورة‬ ‫عرض‬ ‫الخاصية‬ src ‫الشاشة‬ ‫قارئ‬ ‫يستخدم‬ ‫المستخدم‬ ‫كان‬‫إذا‬‫أو‬ ، <img src="img_girl.jpg" alt="Girl with a jacket"> ( ‫الستايل‬ ‫خاصية‬ style Attribute ) ‫عنرص‬ ‫إىل‬ ‫أنماط‬ ‫إلضافة‬ ‫النمط‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ ‫والحجم‬ ‫والخط‬ ‫اللون‬ ‫مثل‬ ، .‫والمزيد‬ <p style="color:red;">This is a red paragraph.</p> ‫الخاصية‬ lang ( lang Attribute ) ‫خاصية‬ ‫ر‬ ‫تضمي‬ ‫ا‬ ً‫دائم‬ ‫عليك‬ ‫يجب‬ lang ‫وسم‬ ‫داخل‬ <html> ‫لغة‬ ‫عن‬ ‫لإلعالن‬ ‫والمتصفحات‬ ‫البحث‬ ‫كات‬ ‫ر‬‫مح‬ ‫مساعدة‬ ‫إىل‬ ‫يهدف‬ ‫هذا‬ .‫الويب‬ ‫صفحة‬ . ‫المثال‬ ‫يحدد‬ :‫كلغة‬‫ية‬ ‫ر‬ ‫اإلنجلت‬ ‫اللغة‬ ‫ي‬ ‫التاىل‬ <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
  • 34. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 34 (‫العنوان‬ ‫خاصية‬ title ) ‫العنرص‬ ‫حول‬ ‫اإلضافية‬ ‫المعلومات‬ ‫بعض‬ ‫العنوان‬ ‫خاصية‬ ‫تحدد‬ . :‫العنرص‬ ‫فوق‬ ‫الماوس‬ ‫تحريك‬ ‫عند‬ ‫أداة‬ ‫كتلميح‬‫العنوان‬ ‫خاصية‬ ‫قيمة‬ ‫عرض‬ ‫سيتم‬ <p title="I'm a tooltip">This is a paragraph.</p> ‫في‬ ‫النصوص‬ ‫تنسيق‬ HTML ‫يحتوي‬ HTML ‫عناص‬ ‫عدة‬ ‫عىل‬ ‫إلعطاء‬ ‫خاص‬ ‫معت‬ ‫ل‬ .‫لنص‬ This text is bold This text is italic This issubscript and superscript ‫تنسيق‬ ‫عناص‬ HTML ‫النص‬ ‫من‬ ‫خاصة‬ ‫أنواع‬ ‫لعرض‬ ‫التنسيق‬ ‫عناص‬ ‫تصميم‬ ‫تم‬ : <b> - ‫نص‬ ‫عريض‬ <strong> - ‫مهم‬ ‫نص‬ <i> - ‫مائل‬ ‫نص‬ <em> - ‫مؤكد‬ ‫نص‬ <mark> - ‫محدد‬ ‫نص‬ <small> - ‫أصغر‬ ‫نص‬ <del> - ‫محذوف‬ ‫نص‬ <ins> - ‫مدرج‬ ‫نص‬ <sub> - ‫منخفض‬ ‫نص‬ <sup> - ‫مرتفع‬ ‫نص‬
  • 35. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 35 <b> and <strong> Elements ‫عنرص‬ ‫يحدد‬ <b> HTML .‫إضافية‬ ‫أهمية‬ ‫أي‬ ‫دون‬ ، ‫الغامق‬ ‫النص‬ <b>This text is bold</b> <i> and <em> Elements ‫عنرص‬ ‫يحدد‬ HTML <i> ‫مائل‬ ‫بخط‬ ‫ي‬ ‫الداخىل‬ ‫المحتوى‬ ‫عرض‬ ‫يتم‬ ‫النص‬ ‫من‬ ‫جزء‬ . ‫الوسم‬ ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫غالب‬ <i> ، ‫أخرى‬ ‫لغة‬ ‫من‬ ‫عبارة‬ ‫أو‬ ، ‫ي‬ ‫تقت‬ ‫مصطلح‬ ‫إىل‬ ‫لإلشارة‬ ‫ذلك‬ ‫إىل‬ ‫وما‬ ، ‫فكرة‬ ‫أو‬ <i>This text is italic</i> <small> Element ‫عنرص‬ ‫يحدد‬ <small> :‫ا‬ ً‫حجم‬‫أصغر‬ ‫ا‬ ً ‫نص‬ <small>This is some smaller text.</small> <mark> Element ‫عنرص‬ ‫يحدد‬ <mark> HTML :‫ه‬ ‫ر‬ ‫تميت‬ ‫أو‬ ‫ه‬ ‫ر‬ ‫تميت‬ ‫يجب‬ ‫الذي‬ ‫النص‬ <p>Do not forget to buy <mark>milk</mark> today.</p> <del> Element ‫عنرص‬ ‫يحدد‬ HTML <del> ‫من‬ ‫حذفه‬ ‫تم‬ ‫الذي‬ ‫النص‬ ‫تضع‬ ‫ما‬ ‫عادة‬ .‫المستند‬ :‫المحذوف‬ ‫النص‬ ‫ر‬ ‫بي‬ ‫ا‬ ً ‫خط‬ ‫المتصفحات‬ <p>My favorite color is <del>blue</del> red.</p> <ins> Element ‫عنرص‬ ‫يحدد‬ HTML <ins> ‫تقوم‬ ‫ما‬ ‫عادة‬ .‫المستند‬ ‫ي‬ ‫ف‬ ‫اجه‬‫ر‬‫إد‬ ‫تم‬ ‫الذي‬ ‫النص‬ :‫المدرج‬ ‫النص‬ ‫ر‬ ‫بتسطت‬ ‫المستعرضات‬ <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
  • 36. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 36 <sub> Element ‫عنرص‬ ‫يحدد‬ HTML <sub> ‫بنصف‬ ‫المنخفض‬ ‫النص‬‫يظهر‬ .‫المنخفض‬ ‫النص‬ ‫استخدام‬ ‫يمكن‬ .‫أصغر‬ ‫بخط‬ ‫ا‬ ً ‫أحيان‬ ‫تقديمه‬ ‫ويتم‬ ، ‫العادي‬‫السطر‬ ‫أسفل‬ ‫حرف‬ ‫مثل‬ ، ‫الكيميائية‬ ‫للصيغ‬ ‫المنخفض‬ ‫النص‬ H2O: <p>This is <sub>subscripted</sub> text.</p> <sup> Element ‫عنرص‬ ‫يحدد‬ HTML <sup> ‫حرف‬ ‫بنصف‬ ‫المرتفع‬ ‫النص‬‫يظهر‬ .‫المرتفع‬ ‫النص‬ ‫النص‬ ‫استخدام‬ ‫يمكن‬ .‫أصغر‬ ‫بخط‬ ‫ا‬ ً ‫أحيان‬ ‫تقديمه‬ ‫ويتم‬ ، ‫العادي‬‫السطر‬ ‫فوق‬ ‫مثل‬ ، ‫السفلية‬ ‫ي‬ ‫ر‬ ‫للحواش‬ ‫المرتفع‬ WWW [1]: <p>This is <sup>superscripted</sup> text.</p> ‫األلوان‬ ‫تحديد‬ ‫يتم‬ ‫ألوان‬ HTML ‫بقيم‬ ‫أو‬ ، ‫ا‬ ً ‫مسبق‬ ‫محددة‬ ‫ألوان‬ ‫بأسماء‬ RGB ‫أو‬ HEX ‫أو‬ HSL ‫أو‬ RGBA ‫أو‬ HSLA. ‫األلوان‬ ‫أسماء‬ ‫ي‬ ‫ف‬ HTML :‫اللون‬ ‫اسم‬ ‫باستخدام‬ ‫اللون‬ ‫تحديد‬ ‫يمكن‬ ، (‫الخلفية‬ ‫لون‬ Background Color ) ‫لعناص‬ ‫الخلفية‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ HTML: <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
  • 37. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 37 (‫الخط‬ ‫لون‬ Text Color ) :‫النص‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum......................................</p> <p style="color:MediumSeaGreen;">Ut wisi enim...................................</p> ( ‫الحدود‬ ‫لون‬ Border Color ) ‫الحدود‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ : <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
  • 38. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 38 ‫اللون‬ ‫قيم‬ ‫ي‬ ‫ف‬ HTML ‫قيم‬ ‫باستخدام‬ ‫األلوان‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ ، RGB ‫وقيم‬ HEX ‫و‬ ‫قيم‬ HSL ‫وقيم‬ RGBA ‫وقيم‬ HSLA. ‫لعناص‬ ‫الخلفية‬ ‫لون‬ ‫ر‬ ‫تعيي‬ ‫تم‬ <div> ‫قيم‬ ‫مع‬ ‫التالية‬ ‫الثالثة‬ RGB ‫و‬ HEX ‫و‬ HSL: <h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> ‫صورة‬ ‫العنصر‬ HTML ‫وسم‬ ‫تستخدم‬ HTML <img> ‫ويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫صورة‬ ‫ر‬ ‫لتضمي‬ . <img src="pic_trulli.jpg" alt="Italian Trulli"> ‫ر‬ ‫تنىس‬ .‫الويب‬ ‫بصفحات‬ ‫مرتبطة‬ ‫الصور‬ ‫الويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫ا‬ً‫تقني‬ ‫الصور‬ ‫اج‬‫ر‬‫إد‬ ‫يتم‬ ‫ال‬ ‫وسم‬ <img> ‫إليها‬ ‫المشار‬ ‫للصورة‬ ‫تخزين‬ ‫مساحة‬ . ‫وسم‬ <img> ‫إغالق‬ ‫وسم‬ ‫عىل‬ ‫تحتوي‬ ‫وال‬ ، ‫فقط‬ ‫خواص‬ ‫عىل‬ ‫وتحتوي‬ ، ‫فارغة‬ . ‫الوسم‬ ‫تحتوي‬ <img> ‫ر‬ ‫مطلوبتي‬ ‫ر‬ ‫سمتي‬ ‫عىل‬ : o src - ‫الصورة‬ ‫إىل‬ ‫المسار‬ ‫تحدد‬ o alt - ‫ي‬ ‫للصورة‬ ً ‫بديًل‬ ‫ا‬ ً ‫نص‬ ‫حدد‬ <img src="url" alt="alternatetext">
  • 39. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 39 ‫خاصية‬ (The src Attribute) src ‫خاصية‬ ‫تحدد‬ src ‫المسار‬ ‫المطلوبة‬ (URL) ‫للصورة‬ . ‫المتصفح‬ ‫ويب‬ ‫صفحة‬ ‫تحميل‬ ‫عند‬ :‫مالحظة‬ ‫يحصل‬ ‫الذي‬ ‫هو‬ ، ‫اللحظة‬ ‫تلك‬ ‫ي‬ ‫ف‬ ، ‫الصورة‬ ‫بقاء‬ ‫من‬ ‫تأكد‬ ، ‫لذلك‬ .‫الصفحة‬ ‫ي‬ ‫ف‬ ‫ويدرجها‬ ‫الويب‬ ‫خادم‬ ‫من‬ ‫الصورة‬ ‫عىل‬ ‫رمز‬ ‫عىل‬ ‫زوارك‬ ‫سيحصل‬ ‫وإال‬ ، ‫الويب‬ ‫صفحة‬ ‫إىل‬ ‫بالنسبة‬ ‫المكان‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫بالفعل‬ ‫المستعرض‬ ‫يتمكن‬ ‫لم‬ ‫إذا‬ ‫البديل‬ ‫والنص‬ ‫المعطل‬ ‫االرتباط‬‫رمز‬ ‫يظهر‬ .‫معطل‬ ‫ارتباط‬ ‫العثور‬ ‫من‬ .‫الصورة‬ ‫عىل‬ <img src="img_chania.jpg" alt="Flowers in Chania"> ‫خاصية‬ alt ( The alt Attribute ) ‫خاصية‬‫توفر‬ alt ‫ال‬ ‫ما‬ ‫لسبب‬ ‫المستخدم‬ ‫كان‬‫إذا‬ ، ‫للصورة‬ ً ‫بديال‬ ‫ا‬ ً ‫نص‬ ‫المطلوبة‬ ‫عرضها‬ ‫يمكنه‬ ‫الخاصية‬ ‫ي‬ ‫ف‬ ‫خطأ‬ ‫أو‬ ، ‫االتصال‬ ‫بطء‬ ‫بسبب‬ src ‫كان‬‫إذا‬ ‫أو‬ ، ‫ال‬ ‫قارئ‬ ‫يستخدم‬ ‫المستخدم‬ ‫شاشة‬ . :‫الصورة‬ ‫البديل‬ ‫النص‬ ‫خاصية‬ ‫قيمة‬ ‫تصف‬ ‫أن‬ ‫يجب‬ <img src="img_chania.jpg" alt="Flowers in Chania"> ‫النص‬ ‫خاصية‬ ‫قيمة‬ ‫فسيعرض‬ ، ‫صورة‬ ‫عىل‬ ‫العثور‬ ‫من‬ ‫المستعرض‬ ‫يتمكن‬ ‫لم‬ ‫إذا‬ :‫البديل‬ ‫الصورة‬ ‫حجم‬ - (‫واالرتفاع‬ ‫العرض‬ Image Size - Width and Height ) ‫استخدام‬ ‫يمكنك‬ .‫وارتفاعها‬ ‫الصورة‬ ‫عرض‬ ‫لتحديد‬ ‫النمط‬ ‫خاصية‬ <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" ‫كرابط‬ ‫الصورة‬ ‫وسم‬ ‫ضع‬ ، ‫ابط‬‫ر‬‫ك‬‫صورة‬ ‫الستخدام‬ <img> ‫وسم‬ ‫داخل‬ <a> <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
  • 40. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 40 ‫الجداول‬ ‫جداول‬ ‫تسمح‬ HTML ‫وأعمدة‬ ‫صفوف‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫الويب‬ ‫لمطوري‬ . ‫جدول‬ ‫تعريف‬ HTML ‫الوسم‬ ‫يحدد‬ <table> ‫جدول‬ HTML. ‫بوسم‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫صف‬ ‫كل‬‫تعريف‬ ‫يتم‬ <tr>. ‫بوسم‬ ‫جدول‬ ‫أس‬‫ر‬ ‫كل‬‫تعريف‬ ‫يتم‬ <th>. ‫يتم‬ ‫بوسم‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫خلية‬ / ‫بيانات‬ ‫كل‬‫تعريف‬ <td>. ‫عناص‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫يكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ <th> ‫ا‬ ً ‫ومتوسط‬ ‫ا‬ ً ‫غامق‬ . < ‫عناص‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫يكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ td> .‫اليسار‬ ‫إىل‬ ‫ا‬ً‫ومحاذي‬ ‫ا‬ً‫عادي‬ <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr>
  • 41. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 41 <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> ‫جدول‬ - ‫ًا‬‫د‬‫ح‬ ‫أضف‬ ‫خاصية‬ ‫استخدم‬ ، ‫جدول‬ ‫إىل‬ ‫حد‬ ‫إلضافة‬ CSS border table, th, td { border: 1px solid black; } ‫جدول‬ - ‫خلية‬ ‫مساحة‬ ‫إضافة‬ ‫وحدودها‬ ‫الخلية‬ ‫محتوى‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫الخلية‬ ‫مساحة‬ ‫تحدد‬ . ‫وكة‬ ‫ر‬ ‫مت‬ ‫مساحة‬ ‫بدون‬ ‫الجدول‬ ‫خاليا‬ ‫عرض‬ ‫فسيتم‬ ،‫وكة‬ ‫ر‬ ‫مت‬ ‫مساحة‬ ‫تحدد‬ ‫لم‬ ‫إذا‬ . ‫خاصية‬ ‫استخدم‬ ،‫وكة‬ ‫ر‬ ‫المت‬ ‫المساحة‬ ‫ر‬ ‫لتعيي‬ CSS padding: th, td { padding: 15px; } ‫جدول‬ - ‫اليسار‬ ‫إلى‬ ‫محاذاة‬ ‫عناوين‬ ‫وتتوسط‬ ‫غامقة‬ ‫الجدول‬ ‫عناوين‬ ‫تكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ . ‫خاصية‬ ‫استخدم‬ ،‫اليسار‬ ‫إىل‬ ‫الجدول‬ ‫عناوين‬ ‫لمحاذاة‬ text-align ‫ي‬ ‫ف‬ CSS: th { text-align: left; }
  • 42. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 42 ‫جدول‬ - ‫أعمدة‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ‫الخاصية‬ ‫استخدم‬ ، ‫واحد‬ ‫عمود‬ ‫من‬ ‫ر‬ ‫ألكت‬ ‫تمتد‬ ‫الخلية‬ ‫لجعل‬ colspan: <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> ‫جدول‬ - ‫صفوف‬ ‫عدة‬ ‫على‬ ‫تمتد‬ ‫خلية‬ ‫الخاصية‬ ‫استخدم‬ ، ‫واحد‬ ‫صف‬ ‫من‬ ‫ر‬ ‫ألكت‬ ‫تمتد‬ ‫الخلية‬ ‫لجعل‬ rowspan: <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
  • 43. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 43 ‫جدول‬ - ‫توضيحية‬ ‫تسمية‬ ‫أضف‬ ‫وسم‬ ‫استخدم‬ ، ‫جدول‬ ‫إىل‬ ‫تعليق‬ ‫إلضافة‬ <caption> : <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> ‫واحد‬ ‫لجدول‬ ‫خاص‬ ‫نمط‬ ‫خاصية‬ ‫أضف‬ ، ‫ر‬ ‫معي‬ ‫لجدول‬ ‫خاص‬ ‫نمط‬ ‫لتحديد‬ id :‫الجدول‬ ‫إىل‬ <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
  • 44. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 44 :‫الجدول‬ ‫لهذا‬ ‫خاص‬ ‫نمط‬ ‫تحديد‬ ‫اآلن‬ ‫يمكنك‬ #t01 { width: 100%; background-color: #f1f1c1; } And add more styles: #t01 tr:nth-child(even) { background-color: #eee; } #t01 tr:nth-child(odd) { background-color: #fff; } #t01 th { color: white; background-color: black; }
  • 45. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 45 ‫القوائم‬ ‫قوائم‬ ‫تسمح‬ HTML ‫ي‬ ‫ف‬ ‫الصلة‬ ‫ذات‬ ‫العناص‬ ‫من‬ ‫مجموعة‬ ‫بتجميع‬ ‫الويب‬ ‫لمطوري‬ .‫القوائم‬ ‫قائمة‬ ‫مرتبة‬ ‫غير‬ ( Unordered List ) ‫بوسم‬ ‫المرتبة‬ ‫ر‬ ‫غت‬ ‫القائمة‬ ‫تبدأ‬ <ul>. ‫بوسم‬ ‫بالقائمة‬ ‫عنرص‬ ‫كل‬‫يبدأ‬ <li>. :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ )‫ة‬ ‫ر‬ ‫صغت‬ ‫سوداء‬ ‫(دوائر‬ ‫نقطية‬ ‫برموز‬ ‫القائمة‬ ‫عناص‬ ‫ر‬ ‫تميت‬ ‫سيتم‬ <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ‫مرتبة‬ ‫قائمة‬ ( Ordered List ) ‫بوسم‬ ‫المرتبة‬ ‫القائمة‬ ‫تبدأ‬ <ol>. ‫بوسم‬ ‫بالقائمة‬ ‫عنرص‬ ‫كل‬‫يبدأ‬ <li>. :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫باألرقام‬ ‫القائمة‬ ‫عناص‬ ‫ر‬ ‫تميت‬ ‫سيتم‬ <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
  • 46. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 46 ‫قوائم‬ ‫ال‬ ‫وصف‬ ‫يدعم‬ HTML ‫الوصف‬ ‫قوائم‬ ‫ا‬ ً ‫أيض‬ . ‫قائمة‬ ‫ي‬ ‫ه‬ ‫الوصف‬ ‫قائمة‬ ،‫بالمصطلحات‬ ‫مصطلح‬ ‫لكل‬ ‫وصف‬ ‫مع‬ . ‫الوسم‬ ‫يحدد‬ <dl> ‫و‬ ، ‫الوصف‬ ‫قائمة‬ ‫الوسم‬ ‫يحدد‬ <dt> ، )‫(االسم‬ ‫المصطلح‬ ‫الوسم‬ ‫وتصف‬ <dd> :‫مصطلح‬ ‫كل‬ <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
  • 47. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 47 ( ‫السطرية‬ ‫العناصر‬ inline ‫الكتلة‬ ‫عناصر‬ ‫و‬ ) (Block) ‫عنرص‬ ‫يحتوي‬ HTML ‫العنرص‬ ‫نوع‬ ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ، ‫اضية‬ ‫ر‬ ‫افت‬ ‫عرض‬ ‫قيمة‬ ‫عىل‬ ‫ا‬ ً ‫جد‬ . ‫ومضمنة‬ ‫كتلة‬:‫العرض‬ ‫قيم‬ ‫من‬ ‫نوعان‬ ‫هناك‬ . (‫الكتلة‬ ‫عناصر‬ Block-level Elements ) ‫مستوى‬ ‫عنرص‬ ‫يبدأ‬ ‫جديد‬ ‫سطر‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫دائم‬ ‫الكتلة‬ . ‫ر‬ ‫واليمي‬ ‫اليسار‬ ‫إىل‬ ‫(يمتد‬ ‫المتاح‬ ‫الكامل‬ ‫العرض‬ ‫ا‬ ً‫دائم‬ ‫الكتلة‬ ‫مستوى‬ ‫عنرص‬ ‫يشغل‬ )‫اإلمكان‬‫بقدر‬ . ‫العنرص‬ ‫يحتوي‬ ‫ال‬ ‫بينما‬ ، ‫ي‬ ‫وسفىل‬ ‫علوي‬ ‫هامش‬ ‫عىل‬ ‫الكتلة‬ ‫مستوى‬ ‫عنرص‬ ‫يحتوي‬ ‫السطري‬ inline .‫الهامش‬ ‫هذا‬ ‫عىل‬ ‫عنرص‬ <div> ‫هو‬ .‫الكتلة‬ ‫مستوى‬ ‫عىل‬‫عنرص‬ <div>Hello World</div> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> ‫العناصر‬ ‫السطرية‬ ( ‫المضمنة‬ ) ( Inline Elements ) ‫العنرص‬ ‫يبدأ‬ ‫ال‬ ‫السطري‬ inline ‫جديد‬‫سطر‬ ‫ي‬ ‫ف‬ . ‫العنرص‬ ‫يأخذ‬ ‫السطري‬ inline ‫فقط‬ ‫ورة‬‫الرص‬‫بقدر‬ ‫ا‬ ً ‫عرض‬ . ‫عنرص‬ ‫هذا‬ <span> .‫فقرة‬ ‫داخل‬ <span>Hello World</span>
  • 48. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 48 <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> ‫العنرص‬ ‫يحتوي‬ ‫أن‬ ‫يمكن‬ ‫ال‬ :‫مالحظة‬ ‫السطري‬ inline ‫مستوى‬ ‫عىل‬‫عنرص‬ ‫عىل‬ !‫الكتلة‬ ‫عنصر‬ <div> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ ‫ما‬ ‫ا‬ً‫غالب‬ <div> ‫لعناص‬ ‫كحاوية‬ HTML ‫األخرى‬ . ‫عنرص‬ ‫يحتوي‬ ‫ال‬ <div> ‫والمعرف‬ ‫والصف‬ ‫النمط‬ ‫لكن‬ ، ‫مطلوبة‬ ‫خواص‬ ‫عىل‬ ‫شائعان‬ . ‫مع‬ ‫استخدامه‬ ‫عند‬ CSS ، ‫عنرص‬ ‫استخدام‬ ‫يمكن‬ <div> :‫المحتوى‬ ‫كتل‬‫لتصميم‬ <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>
  • 49. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 49 ‫العنصر‬ <span> ‫العنرص‬ <span> ‫من‬ ‫جزء‬‫أو‬ ‫نص‬ ‫من‬ ‫جزء‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫لت‬ ‫ستخدم‬ ُ ‫ت‬ ‫مضمنة‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫مستند‬ . ‫ال‬ ‫العنرص‬ ‫يحتوي‬ <span> ‫والمعرف‬ ‫والصف‬ ‫النمط‬ ‫ولكن‬ ، ‫مطلوبة‬ ‫خواص‬ ‫عىل‬ ‫شائعان‬ . ‫مع‬ ‫استخدامه‬ ‫عند‬ CSS ‫العنرص‬ ‫استخدام‬ ‫يمكن‬ ، <span> ‫من‬ ‫اء‬‫ز‬‫أج‬ ‫لتصميم‬ :‫النص‬ <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font- weight:bold">dark green</span> eyes. </p> ‫الصف‬ ‫خاصية‬ ‫أ‬ ‫الفئة‬ ‫و‬ class ‫لعناص‬ ‫يمكن‬ HTML ‫الصف‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫ك‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫المتعددة‬ . ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫غالب‬ class Attribute ‫إىل‬ ‫لإلشارة‬ class name ‫ي‬ ‫ف‬ style sheet . ‫بواسطة‬ ‫استخدامه‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ JavaScript ‫ومعالجتها‬ ‫العناص‬ ‫إىل‬ ‫للوصول‬ ‫باستخدام‬ class name ‫ر‬ ‫معي‬ .
  • 50. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 50 ‫عناص‬ ‫ثالثة‬ ‫لدينا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <div> ‫بخاصية‬ class ‫بقيمة‬ "city" ‫سيتم‬ ‫عناص‬ ‫جميع‬ ‫تصميم‬ <div> ‫قسم‬ ‫ي‬ ‫ف‬ ‫المدينة‬ ‫نمط‬ ‫لتعريف‬ ‫ا‬ ً ‫وفق‬ ‫بالتساوي‬ ‫الثالثة‬ ‫ال‬ :‫أس‬‫ر‬ <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html>
  • 51. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 51 ‫ا‬‫رص‬‫عن‬ ‫لدينا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <span> ‫خاصية‬ ‫مع‬ class ‫بقيمة‬ "note". ‫سيتم‬ ‫ين‬‫رص‬‫العن‬ ‫كال‬‫تصميم‬ <span> ‫قسم‬ ‫ي‬ ‫ف‬ ‫المالحظة‬ ‫نمط‬ ‫لتعريف‬ ‫ا‬ ً ‫وفق‬ ‫بالتساوي‬ :‫أس‬‫ر‬‫ال‬ <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> ‫استخدام‬ ‫يمكن‬ :‫مالحظة‬ ‫خاصية‬ class ‫عنرص‬ ‫أي‬ ‫ي‬ ‫ف‬ HTML. ‫ال‬ ‫اسم‬ :‫مالحظة‬ ‫صف‬ ‫األحرف‬ ‫لحالة‬ ‫حساس‬ !
  • 52. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 52 ‫الصف‬ ‫كتابة‬ ‫قواعد‬ Class ‫إلنشاء‬ class , ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، ).( ‫نقطة‬ ‫حرف‬ ‫اكتب‬ class ‫حدد‬ ، ‫ذلك‬ ‫بعد‬ . ‫خصائص‬ CSS :}{ ‫المتعرجة‬ ‫األقواس‬ ‫داخل‬ Create a class named "city": <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html> ‫متعدة‬ ‫صفوف‬ Classes ‫عناص‬ ‫ي‬ ‫تنتىم‬ ‫أن‬ ‫يمكن‬ HTML ‫من‬ ‫ر‬ ‫أكت‬ ‫إىل‬ ‫صف‬ .‫واحدة‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ ، ‫بمسافة‬ ‫الفئات‬ ‫أسماء‬ ‫ر‬ ‫بي‬ ‫افصل‬ ، ‫متعددة‬ ‫فئات‬ ‫لتحديد‬ <div class = "city main">. .‫المحددة‬ ‫الفئات‬ ‫لجميع‬ ‫ا‬ ً ‫وفق‬ ‫العنرص‬ ‫تصميم‬ ‫سيتم‬ ‫عنرص‬ ‫ي‬ ‫ينتىم‬ ، ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <h2> ‫ك‬‫إىل‬ ‫األول‬ ‫من‬ ‫ل‬ ‫صف‬ ‫إىل‬ ‫ا‬ ً ‫وأيض‬ ‫المدينة‬ ‫ال‬ ‫صف‬ ‫أنماط‬ ‫عىل‬ ‫وسيحصل‬ ، ‫الرئيسية‬ CSS ‫ر‬ ‫الفئتي‬ ‫كال‬‫من‬
  • 53. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 53 <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> ‫ال‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫المختلفة‬ ‫العناص‬ ‫ك‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫يمكن‬ ‫صف‬ ‫عناص‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫يمكن‬ HTML ‫ال‬ ‫اسم‬ ‫نفس‬ ‫إىل‬ ‫المختلفة‬ ‫صف‬ . ‫من‬ ‫كل‬ ‫ر‬ ‫يشت‬ ، ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <h2> ‫و‬ <p> ‫إىل‬ ‫صف‬ ‫ي‬ ‫ف‬ ‫كان‬ ‫ر‬ ‫وسيشت‬ "‫"المدينة‬ :‫النمط‬ ‫نفس‬ <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> ‫ي‬ ‫ف‬ ‫الصف‬ ‫خاصية‬ ‫استخدام‬ JavaScript ‫ل‬ ‫يمكن‬ JavaScript ‫باسم‬ ‫عناص‬ ‫إىل‬ ‫الوصول‬ ‫صف‬ ‫طريقة‬ ‫باستخدام‬ ‫محدد‬ getElementsByClassName () ‫المعرف‬ ‫خاصية‬ id ‫خاصية‬ ‫استخدام‬ ‫يتم‬ ‫ال‬ ‫معرف‬ id ‫لعنرص‬ ‫فريد‬ ‫معرف‬ ‫لتحديد‬ HTML. ‫بنفس‬ ‫واحد‬ ‫عنرص‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫ال‬ id ‫ي‬ ‫ف‬ ‫المعرف‬ ‫ال‬ ‫مستند‬ . • ‫ستخدم‬ ُ ‫ت‬ ‫خاصية‬ id ‫ر‬ ‫معي‬ ‫نمط‬ ‫إىل‬ ‫لإلشارة‬ style declaration ‫ي‬ ‫ف‬ style sheet . • ‫بواسطة‬ ‫ا‬ ً ‫أيض‬ ‫استخدامه‬ ‫يتم‬ JavaScript ‫ومعالجته‬ ‫العنرص‬ ‫إىل‬ ‫للوصول‬ .‫المحدد‬ ‫بالمعرف‬
  • 54. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 54 ‫ما‬ ‫بمعرف‬ ‫لعنرص‬ ‫لإلشارة‬ ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، )#( ‫اكتب‬ : id ‫حدد‬ ، ‫ذلك‬ ‫بعد‬ . ‫خصائص‬ CSS .}{ ‫المتعرجة‬ ‫األقواس‬ ‫داخل‬ ‫عنرص‬ ‫لدينا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ <h1> ‫المعرف‬ ‫اسم‬ ‫إىل‬ ‫ر‬ ‫يشت‬ "myHeader" ‫سيتم‬ ‫عنرص‬ ‫تصميم‬ <h1> ‫نمط‬ ‫لتعريف‬ ‫ا‬ ً ‫وفق‬ ‫هذا‬ myHeader # :‫أس‬‫ر‬‫ال‬ ‫قسم‬ ‫ي‬ ‫ف‬ <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html> :‫مالحظة‬ ‫المعرف‬ id !‫األحرف‬ ‫لحالة‬ ‫حساس‬ ‫كما‬ ‫اسم‬ ‫يحتوي‬ ‫أن‬ ‫يجب‬ id ‫عىل‬ ، ‫األقل‬ ‫عىل‬ ‫واحد‬ ‫حرف‬ ‫وعالمات‬ ، ‫(مسافات‬ ‫مسافات‬ ‫عىل‬ ‫يحتوي‬ ‫أال‬ ‫ويجب‬ .)‫ذلك‬ ‫إىل‬ ‫وما‬ ، ‫جدولة‬ ‫مرجعية‬ ‫إشارات‬ HTML ‫والروابط‬ ‫المعرف‬ ‫مع‬ ‫ات‬‫ر‬‫إشا‬ ‫ستخدم‬ ُ ‫ت‬ HTML ‫من‬ ‫معينة‬ ‫اء‬‫ز‬‫أج‬ ‫إىل‬ ‫باالنتقال‬ ‫اء‬‫ر‬‫للق‬ ‫للسماح‬ ‫المرجعية‬ .‫الويب‬ ‫صفحة‬ ‫طويلة‬ ‫صفحتك‬ ‫كانت‬‫إذا‬ ‫مفيدة‬ ‫المرجعية‬ ‫ات‬‫ر‬‫اإلشا‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ .‫ا‬ ً ‫جد‬ .‫إليها‬ ‫ارتباط‬ ‫إضافة‬ ‫ثم‬ ، ‫إنشاؤها‬ ً ‫أوال‬ ‫عليك‬ ‫يجب‬ ، ‫مرجعية‬ ‫إشارة‬ ‫الستخدام‬ ‫عىل‬ ‫يحتوي‬ ‫الذي‬ ‫الموقع‬ ‫إىل‬ ‫الصفحة‬ ‫ستنتقل‬ ، ‫ابط‬‫ر‬‫ال‬ ‫عىل‬ ‫النقر‬ ‫عند‬ ، ‫ذلك‬ ‫بعد‬ .‫المرجعية‬ ‫اإلشارة‬
  • 55. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 55 <h2 id="C4">Chapter 4</h2> Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: <a href="#C4">Jump to Chapter 4</a> ‫خاصية‬ ‫استخدام‬ id ‫في‬ JavaScript ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ ‫خاصية‬ id ‫بواسطة‬ JavaScript ‫لهذا‬ ‫المهام‬ ‫بعض‬ ‫لتنفيذ‬ .‫المحدد‬‫العنرص‬ ‫ل‬ ‫يمكن‬ JavaScript ‫طريقة‬ ‫باستخدام‬ ‫محدد‬ ‫بمعرف‬ ‫عنرص‬ ‫إىل‬ ‫الوصول‬ getElementById () : <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> ‫المضمنة‬ ‫األطر‬ Iframes ‫إطار‬ ‫استخدام‬ ‫يتم‬ HTML iframe ‫داخل‬ ‫ويب‬ ‫صفحة‬ ‫لعرض‬ ‫ويب‬ ‫صفحة‬ . ‫كتابة‬ ‫قواعد‬ Iframe ‫تحدد‬ ‫وسم‬ HTML <iframe> .‫ا‬ ً ‫مضمن‬ ‫ا‬ً ‫إطار‬ ‫مستند‬ ‫داخل‬ ‫آخر‬ ‫مستند‬ ‫ر‬ ‫لتضمي‬ ‫المضمن‬ ‫اإلطار‬ ‫استخدام‬ ‫يتم‬ HTML . ‫ي‬ ‫الحاىل‬ <iframe src="url" title="description"> ‫والعرض‬ ‫االرتفاع‬ ‫ضبط‬ Iframe ‫استخدم‬ ‫خواص‬ ‫إطار‬ ‫حجم‬ ‫لتحديد‬ ‫والعرض‬ ‫الطول‬ iframe. :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫بالبكسل‬ ‫والعرض‬ ‫االرتفاع‬ ‫تحديد‬ ‫يتم‬ <iframe src="demo_iframe.htm" height="200" width="300" title="Ifram e Example"></iframe>
  • 56. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 56 ‫الحدود‬ ‫إزالة‬ Iframe ‫إطار‬ ‫يحتوي‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ iframe ‫حوله‬ ‫حدود‬ ‫عىل‬ . ، ‫الحد‬ ‫الة‬‫ز‬‫إل‬ ‫أضف‬ ‫خاصية‬ ‫خاصية‬ ‫واستخدم‬ ‫النمط‬ CSS border: <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> ‫الصفحة‬ ‫رأس‬ Head ‫عنرص‬ <head> :‫التالية‬ ‫للعناص‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ <title> ‫و‬ <style> ‫و‬ <meta> ‫و‬ <link> ‫و‬ <script> ‫و‬ <base>. ‫العنصر‬ <head> ‫عنرص‬ <head> ‫ويتم‬ )‫البيانات‬ ‫حول‬ ‫(بيانات‬ ‫الوصفية‬ ‫للبيانات‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫ر‬ ‫بي‬ ‫وضعه‬ ‫وسم‬ <html> ‫و‬ ‫وسم‬ <body> ‫بيانات‬ HTML ‫مستند‬ ‫حول‬ ‫بيانات‬ ‫ي‬ ‫ه‬ ‫الوصفية‬ HTML. ‫البيانات‬ ‫عرض‬ ‫يتم‬ ‫ال‬ .‫الوصفية‬ ‫األحرف‬ ‫ومجموعة‬ ‫المستند‬ ‫عنوان‬ ً ‫عادة‬ ‫الوصفية‬ ‫البيانات‬ ‫تحدد‬ ‫امج‬ ‫ر‬ ‫والت‬ ‫واألنماط‬ .‫األخرى‬ ‫التعريف‬ ‫ومعلومات‬ ‫النصية‬ ‫عنصر‬ <title> ‫عنرص‬ ‫يحدد‬ <title> ‫ويظهر‬ ، ‫فقط‬ ‫ا‬ً‫نصي‬ ‫العنوان‬ ‫يكون‬ ‫أن‬ ‫يجب‬ .‫المستند‬ ‫عنوان‬ ‫ي‬ ‫ف‬‫أو‬ ‫المتصفح‬ ‫عنوان‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫وسم‬ .‫الصفحة‬ ‫تبويب‬ ‫عنرص‬ <title> ‫مستندات‬ ‫ي‬ ‫ف‬ ‫مطلوب‬ HTML !
  • 57. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 57 ‫مهمة‬ ‫الصفحة‬ ‫عنوان‬ ‫محتويات‬ ‫ر‬ ‫تعتت‬ ( ‫البحث‬ ‫كات‬ ‫ر‬‫مح‬ ‫ر‬ ‫لتحسي‬ ‫ا‬ ً ‫جد‬ SEO)! ‫يتم‬ ‫عند‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫لتحديد‬ ‫البحث‬ ‫محرك‬ ‫خوارزميات‬ ‫بواسطة‬ ‫الصفحة‬ ‫عنوان‬ ‫استخدام‬ .‫البحث‬ ‫نتائج‬ ‫ي‬ ‫ف‬ ‫الصفحات‬ ‫رسد‬ ‫مستند‬ HTML :‫بسيط‬ <!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html> ‫عنصر‬ <style> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <style> ‫لصفحة‬ ‫النمط‬ ‫معلومات‬ ‫لتحديد‬ HTML :‫واحدة‬ <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> ‫عنصر‬ <meta> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <meta> ‫لتحديد‬ ً ‫عادة‬ ‫الصفحة‬ ‫ووصف‬ ‫األحرف‬ ‫مجموعة‬ .‫العرض‬ ‫منفذ‬ ‫وإعدادات‬ ‫المستند‬ ‫ومؤلف‬ ‫األساسية‬ ‫والكلمات‬ ، ‫الصفحة‬ ‫عىل‬ ‫الوصفية‬ ‫البيانات‬ ‫عرض‬ ‫يتم‬ ‫لن‬ ‫بواسطة‬ ‫استخدامها‬ ‫يتم‬ ‫ولكن‬ ‫البحث‬ ‫كات‬ ‫ر‬‫ومح‬ )‫الصفحة‬ ‫تحميل‬ ‫إعادة‬‫أو‬ ‫المحتوى‬ ‫عرض‬ ‫(كيفية‬ ‫المستعرضات‬ .‫األخرى‬ ‫الويب‬ ‫وخدمات‬ )‫الرئيسية‬ ‫(الكلمات‬ <meta charset="UTF-8">
  • 58. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 58 Define keywords for search engines: <meta name="keywords" content="HTML, CSS, JavaScript"> Define a description of your web page: <meta name="description" content="Free Web tutorials"> Define the author of a page: <meta name="author" content="John Doe"> ‫عنصر‬ <script> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <script> ‫لتعريف‬ JavaScripts ‫العميل‬ ‫جانب‬ ‫من‬ client . ‫الكود‬ ‫ي‬ ‫التاىل‬ ‫ي‬ ‫كتب‬ "Hello JavaScript!" ‫عنرص‬ ‫ي‬ ‫ف‬ HTML ‫المعرف‬‫ذو‬ demo <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> ‫عنصر‬ <base> ‫العنرص‬ ‫يحدد‬ <base> ‫عنوان‬ URL ‫عناوين‬ ‫لجميع‬ ‫الهدف‬‫أو‬ / ‫و‬ ‫ي‬ ‫األساش‬ URL ‫النسبية‬ relative URLs .‫الصفحة‬ ‫ي‬ ‫ف‬ ‫ال‬ ‫تحتوي‬ ‫أن‬ ‫يجب‬ ‫وسم‬ <base> ‫عىل‬ ‫خاصية‬ href ‫أو‬ ‫خاصية‬ target .‫كالهما‬‫أو‬ ، ‫يجب‬ ‫عنرص‬ ‫هناك‬ ‫يكون‬ ‫أن‬ <base> ‫فقط‬ ‫واحد‬ !‫المستند‬ ‫ي‬ ‫ف‬ <head> <base href="https://www.yazan.com/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body>
  • 59. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 59 ‫الكود‬ ‫عنصر‬ Code ‫يحتوي‬ HTML .‫الكمبيوتر‬‫ورمز‬ ‫المستخدم‬ ‫إدخال‬ ‫لتحديد‬ ‫عناص‬ ‫عدة‬ ‫عىل‬ <code> x = 5; y = 6; z = x + y; </code> ‫المتغير‬ ‫عنصر‬ <var> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <var> ‫يتم‬ ‫ما‬ ً ‫عادة‬ . ‫ي‬ ‫رياض‬ ‫ر‬ ‫تعبت‬ ‫ي‬ ‫ف‬‫أو‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫متغت‬ ‫لتعريف‬ .‫مائل‬ ‫بخط‬ ‫ي‬ ‫الداخىل‬ ‫المحتوى‬ ‫عرض‬ <p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
  • 60. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 60 ‫المتجاوب‬ ‫التصميم‬ Responsive ‫عىل‬ ‫جيدة‬‫تبدو‬ ‫ويب‬ ‫صفحات‬ ‫بإنشاء‬ ‫االستجابة‬ ‫ع‬ ‫ي‬‫رس‬ ‫الويب‬ ‫تصميم‬ ‫يتعلق‬ !‫األجهزة‬ ‫جميع‬ ‫ع‬ ‫ي‬‫رس‬ ‫الويب‬ ‫تصميم‬ ‫ضبط‬ ‫سيتم‬ ‫الشاشات‬ ‫أحجام‬ ‫حسب‬ ‫ا‬ً‫تلقائي‬ ‫االستجابة‬ .‫المختلفة‬ ‫العرض‬ ‫ات‬‫ر‬‫وإطا‬ ‫االستجابة؟‬ ‫سريع‬ ‫الويب‬ ‫تصميم‬ ‫هو‬ ‫ما‬ ‫باستخدام‬ ‫االستجابة‬ ‫ع‬ ‫ي‬‫رس‬ ‫الويب‬ ‫تصميم‬ ‫يتعلق‬ HTML ‫و‬ CSS ‫حجم‬ ‫ر‬ ‫لتغيت‬ ‫جميع‬ ‫عىل‬ ‫ا‬ ً ‫جيد‬‫يبدو‬ ‫لجعله‬ ‫ا‬ً‫تلقائي‬ ‫ه‬ ‫ر‬ ‫تكبت‬ ‫أو‬ ‫تقليصه‬ ‫أو‬ ‫إخفائه‬‫أو‬ ‫الويب‬ ‫موقع‬ :)‫والهواتف‬ ‫اللوحية‬ ‫واألجهزة‬ ‫المكتبية‬‫الكمبيوتر‬ ‫(أجهزة‬ ‫األجهزة‬ ‫العرض‬ ‫منفذ‬ ‫إعداد‬ ‫باختالف‬ ‫يختلف‬ .‫الويب‬ ‫لصفحة‬ ‫للمستخدم‬ ‫المرئية‬ ‫المنطقة‬‫هو‬ ‫العرض‬ ‫منفذ‬ ‫الجهاز‬ - ‫عىل‬ ‫أصغر‬ ‫سيكون‬ .‫الكمبيوتر‬ ‫شاشة‬ ‫عىل‬ ‫منه‬ ‫المحمول‬ ‫الهاتف‬ <‫عنرص‬ ‫ر‬ ‫تضمي‬ ‫عليك‬ ‫يجب‬ meta :‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫جميع‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التاىل‬ > ‫أضف‬ ‫وسم‬ <meta> :‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫جميع‬ ‫إىل‬ ‫التالية‬ <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 61. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 61 ‫عرض‬‫إطار‬ ‫ر‬ ‫تعيي‬ ‫إىل‬ ‫هذا‬ ‫سيؤدي‬ ،‫صفحتك‬ ‫المتصفح‬ ‫تعليمات‬ ‫ي‬ ‫سيعط‬ ‫والذي‬ .‫وقياسها‬ ‫الصفحة‬ ‫أبعاد‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫كيفية‬‫حول‬ ‫ال‬ ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫ويب‬ ‫لصفحة‬ ‫مثال‬ ‫ي‬ ‫يىل‬ ‫فيما‬ ‫وسم‬ ‫ونفس‬ ، ‫العرض‬‫إلطار‬ ‫الوصفية‬ ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الويب‬ ‫صفحة‬ ‫وسم‬ :‫الوصفية‬ ‫العرض‬ ‫إطار‬ ‫صور‬ ‫متجاوبة‬ ( Responsive Images ) .‫متصفح‬ ‫حجم‬ ‫أي‬ ‫لتناسب‬ ‫جيد‬ ‫بشكل‬ ‫قياسها‬ ‫يتم‬ ‫صور‬ ‫ي‬ ‫ه‬ ‫المتجاوبة‬‫الصور‬ ‫العرض‬ ‫خاصية‬ ‫باستخدام‬ ‫عرض‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫تم‬ ‫إذا‬ CSS ‫عىل‬ 100 ‫االستجابة‬ ‫يعة‬‫رس‬ ‫الصورة‬ ‫فستكون‬ ، ٪ :‫وألسفل‬ ‫ألعىل‬ ‫وتتسع‬ <img src="img_girl.jpg" style="width:100%;"> ‫خاصية‬ ‫استخدام‬ max-width ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫تم‬ ‫إذا‬ max-width ‫إىل‬ 100 ‫األمر‬ ‫لزم‬ ‫إذا‬ ‫الصورة‬ ‫ر‬ ‫تصغت‬ ‫فسيتم‬ ، ٪ : ‫ي‬ ‫األصىل‬ ‫حجمها‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫لتصبح‬ ‫ا‬ ً ‫أبد‬ ‫ها‬ ‫ر‬ ‫تكبت‬ ‫يتم‬ ‫ال‬ ‫ولكن‬ ، <img src="img_girl.jpg" style="max-width:100%;height:auto;">
  • 62. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 62 ‫الداللية‬ ‫العناصر‬ Semantic ‫ذات‬ ‫العناص‬ = ‫الداللية‬ ‫العناص‬ .‫المعت‬ .‫والمطور‬ ‫المتصفح‬ ‫من‬ ‫لكل‬ ‫معناه‬ ‫بوضوح‬ ‫ي‬ ‫الدالىل‬‫العنرص‬ ‫يصف‬ • :‫الداللية‬ ‫ر‬ ‫غت‬ ‫العناص‬ ‫عىل‬ ‫أمثلة‬ <div> ‫و‬ <span> - ‫عن‬ ‫ا‬ ً ‫شيئ‬ ‫ر‬ ‫تخت‬ ‫ال‬ .‫محتواها‬ • :‫الداللية‬ ‫العناص‬ ‫عىل‬ ‫أمثلة‬ <form> ، <table> ‫و‬ ، <article> - ‫تحدد‬ .‫بوضوح‬ ‫محتوياتها‬ ‫ي‬ ‫ف‬ ‫الداللية‬ ‫العنارص‬ HTML • ‫كود‬‫عىل‬ ‫الويب‬ ‫مواقع‬ ‫من‬ ‫العديد‬ ‫تحتوي‬ HTML :‫مثل‬ • <div id = "nav"> • <div class = "header"> • <div id = "footer"> .‫والتذييل‬ ‫والعنوان‬ ‫التنقل‬ ‫إىل‬ ‫لإلشارة‬
  • 63. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 63 ‫ي‬ ‫ف‬ ‫توجد‬ HTML ‫خاصة‬ ‫و‬ 5 HTML ‫استخدامها‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الداللية‬ ‫العناص‬ ‫بعض‬ :‫الويب‬ ‫صفحة‬ ‫من‬ ‫مختلفة‬ ‫اء‬‫ز‬‫أج‬ ‫لتحديد‬ • <article> • <aside> • <details> • <figcaption> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time> ‫عنصر‬ <section> ‫العنرص‬ ‫يحدد‬ <section> .‫المستند‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫قسم‬ ‫ي‬ ‫موضوع‬ ‫تجميع‬ ‫عن‬ ‫عبارة‬ ‫القسم‬ ،‫للمحتوى‬ .‫بعنوان‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ .‫االتصال‬ ‫ومعلومات‬ ‫والمحتوى‬ ‫للمقدمة‬ ‫أقسام‬ ‫إىل‬ ‫الويب‬ ‫صفحة‬ ‫تقسيم‬ ً ‫عادة‬ <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, res earch and restoration of the environment, formerly named the W orld Wildlife Fund. WWF was founded in 1961.</p> </section> <section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well- known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>
  • 64. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 64 ‫عنصر‬ <article> ‫العنرص‬ ‫يحدد‬ <article> .‫بذاته‬ ‫ا‬ ً‫قائم‬ ً ‫مستقًل‬ ‫محتوى‬ ‫تلقاء‬ ‫من‬ ‫معت‬ ‫للمقال‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ،‫نفسه‬ ‫توزيعه‬ ‫الممكن‬ ‫من‬ ‫يكون‬ ‫أن‬ ‫ويجب‬ .‫الويب‬ ‫موقع‬ ‫ي‬ ‫ر‬ ‫باف‬ ‫عن‬ ‫مستقل‬ ‫بشكل‬ <article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> ‫عنصر‬ <header> ‫العنرص‬ ‫يمثل‬ <header> ‫روابط‬ ‫من‬ ‫مجموعة‬‫أو‬ ‫التمهيدي‬ ‫للمحتوى‬ ‫حاوية‬ .‫التنقل‬ ‫عنرص‬ ‫يحتوي‬ <header> :‫عىل‬ ً ‫عادة‬ • ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ ‫عنوان‬‫عنرص‬ (<h1> - <h6>) • logo or icon • ‫التأليف‬ ‫معلومات‬ ‫عناص‬ ‫عدة‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ :‫مالحظة‬ <header> ‫مستند‬ ‫ي‬ ‫ف‬ HTML .‫واحد‬ ‫وضع‬ ‫يمكن‬ ‫ال‬ ، ‫ذلك‬ ‫ومع‬ <header> ‫داخل‬ <footer> ‫أو‬ <address> ‫عنرص‬ ‫أو‬ <header> .‫آخر‬ <article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>
  • 65. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 65 ‫عنصر‬ <footer> ‫العنرص‬ ‫يحدد‬ <footer> .‫قسم‬ ‫أو‬ ‫لمستند‬ ً ‫تذييًل‬ ‫عنرص‬ ‫يحتوي‬ ‫ما‬ ً ‫عادة‬ <footer> :‫عىل‬ • ‫التأليف‬ ‫معلومات‬ • ‫ر‬ ‫والنش‬ ‫التأليف‬ ‫حقوق‬ ‫معلومات‬ • ‫االتصال‬ ‫معلومات‬ • ‫الموقع‬ ‫خريطة‬ • ‫الروابط‬ ‫أعىل‬ ‫إىل‬ ‫العودة‬ • ‫الصلة‬ ‫ذات‬ ‫الوثائق‬ ‫عناص‬ ‫عدة‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ <footer> .‫واحد‬ ‫مستند‬ ‫ي‬ ‫ف‬ <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p > </footer> ‫عنصر‬ <nav> ‫العنرص‬ ‫يحدد‬ <nav> .‫التنقل‬ ‫روابط‬ ‫من‬ ‫مجموعة‬ ‫عنرص‬ ‫داخل‬ ‫المستند‬ ‫روابط‬ ‫جميع‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫ال‬ ‫أنه‬ ‫الحظ‬ <nav>. ‫عنرص‬ <nav> .‫التنقل‬ ‫لروابط‬ ‫الرئيسية‬ ‫للكتلة‬ ‫فقط‬ ‫مخصص‬ <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
  • 66. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 66 ‫عنارص‬ HTML <figure> ‫و‬ <figcaption> ‫ي‬ ‫حدد‬ ‫وسم‬ <figure> ‫والرسوم‬ ‫التوضيحية‬ ‫الرسوم‬ ‫مثل‬ ، ‫مستقل‬ ‫محتوى‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫والصور‬ ‫البيانية‬ ‫الوسم‬ ‫يحدد‬ <figcaption> ‫لعنرص‬ ‫توضيحية‬ ‫تسمية‬ <figure> ‫وضع‬ ‫يمكن‬ ‫عنرص‬ <figcaption> ‫لعنرص‬ ‫ر‬ ‫األخت‬ ‫أو‬ ‫األول‬‫العنرص‬ ‫باعتباره‬ <figure> . ‫ي‬ ‫العنرص‬ ‫حدد‬ <img> ‫ي‬ ‫التوضيح‬ ‫الرسم‬ / ‫الفعلية‬ ‫الصورة‬ <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>
  • 67. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 67 ‫النماذج‬ ‫نموذج‬ ‫استخدام‬ ‫يتم‬ HTML .‫المستخدم‬ ‫مدخالت‬ ‫لتجميع‬ ‫ا‬ ( ‫لنموذج‬ Form ‫جعل‬ ‫بهدف‬ ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫توضع‬ ‫عناص‬ ‫مجموعة‬ ‫عن‬ ‫عبارة‬ ) .‫فيها‬ ‫بيانات‬ ‫يدخل‬ ‫المستخدم‬ ‫مثل‬ ‫إنشاء‬ ‫صفحات‬ ,‫الدخول‬ ‫تسجيل‬ ‫صفحات‬ ,‫تعليق‬ ‫إضافة‬ ,‫جديد‬ ‫حساب‬ ... ‫إرسال‬ ‫يتم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ‫مدخالت‬ .‫للمعالجة‬ ‫الخادم‬ ‫إىل‬ ‫المستخدم‬ ‫عنصر‬ <form> ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <form> ‫نموذج‬ ‫إلنشاء‬ HTML :‫المستخدم‬ ‫إلدخال‬ <form> . form elements . </form> ‫عنرص‬ <form> ، ‫اإلدخال‬ ‫عناص‬ ‫من‬ ‫مختلفة‬ ‫ألنواع‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ‫حقول‬ :‫مثل‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫اإلرسال‬ ‫ار‬‫ر‬‫وأز‬ ‫االختيار‬ ‫ار‬‫ر‬‫وأز‬ ‫االختيار‬ ‫ومربعات‬ ‫النص‬
  • 68. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 68 ‫عنصر‬ <input> ‫عنرص‬ ‫يعد‬ <input> ‫ي‬ ‫ف‬ HTML .‫ا‬ ً‫استخدام‬ ‫النموذج‬ ‫عناص‬ ‫ر‬ ‫أكت‬ ‫عنرص‬ ‫عرض‬ ‫يمكن‬ <input> ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ، ‫طرق‬ ‫بعدة‬ ‫خاصية‬ .‫النوع‬ :‫األمثلة‬ ‫بعض‬ ‫وهنا‬ ‫النص‬ ‫حقول‬ ( Text Fields ) ‫يحدد‬ <input type = "text"> .‫النص‬ ‫إلدخال‬‫السطر‬ ‫أحادي‬ ‫إدخال‬ ‫حقل‬ <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
  • 69. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 69 ‫عنصر‬ <label> ‫ي‬ ‫ال‬ ‫حدد‬ ‫وسم‬ <label> .‫النموذج‬ ‫عناص‬ ‫من‬ ‫للعديد‬ ‫تسمية‬ ‫عنرص‬ ‫يساعد‬ <label> ‫فوق‬ ‫النقر‬ ‫ي‬ ‫ف‬ ‫صعوبة‬ ‫يجدون‬ ‫الذين‬ ‫ر‬ ‫المستخدمي‬ ‫ا‬ ً ‫أيض‬ )‫االختيار‬ ‫مربعات‬ ‫أو‬ ‫االختيار‬ ‫ار‬‫ر‬‫أز‬ ‫(مثل‬ ‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫مناطق‬ - ‫ينقر‬ ‫عندما‬ ‫ألنه‬ ‫عنرص‬ ‫داخل‬ ‫النص‬ ‫عىل‬ ‫المستخدم‬ <label> ‫ع‬‫مرب‬ / ‫االختيار‬‫زر‬ ‫يبدل‬ ‫فإنه‬ ، .‫االختيار‬ ‫ال‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫خاصية‬ for ‫ب‬ ‫وسم‬ <label> ‫ل‬ ‫مساوية‬ ‫خاصية‬ id ‫لع‬ ‫نرص‬ <input> .‫ا‬ ً‫مع‬ ‫لربطهما‬ Radio Button ‫يحدد‬ <input type = "radio"> ‫اختيار‬‫زر‬ ‫المفرد‬ . .‫ات‬‫ر‬‫الخيا‬ ‫من‬ ‫محدود‬ ‫عدد‬ ‫من‬ ‫واحد‬ ‫تحديد‬ ‫للمستخدم‬ ‫االختيار‬‫ار‬‫ر‬‫أز‬ ‫تتيح‬ <form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form>
  • 70. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 70 Checkboxes ‫يحدد‬ <input type = "checkbox"> ‫اختيار‬ ‫ع‬‫مرب‬ . ‫ات‬‫ر‬‫خيا‬ ‫تحديد‬ ‫للمستخدم‬ ‫االختيار‬ ‫مربعات‬ ‫تتيح‬ ‫واحد‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫محدود‬ ‫عدد‬ ‫من‬ ‫ا‬‫ر‬‫الخيا‬ ‫من‬ ‫خيار‬ ‫أي‬ ‫تحديد‬ ‫عدم‬ ‫ر‬ ‫حت‬ ‫أو‬ ‫ت‬ . <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> ‫االرسال‬ ‫زر‬ The Submit Button ‫يحدد‬ <input type = "submit"> ‫معالج‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬ ‫إلرسال‬ ‫ا‬ً ‫زر‬ .‫النموذج‬ ‫ي‬ ‫نص‬ ‫برنامج‬ ‫مع‬ ‫الخادم‬ ‫عىل‬ ‫ملف‬ ‫عن‬ ‫عبارة‬ ‫النموذج‬ ‫معالج‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ .‫اإلدخال‬ ‫بيانات‬ ‫لمعالجة‬ ‫ي‬ ‫ف‬ ‫تحديد‬ ‫يتم‬ form-handler ‫ر‬ ‫عت‬ ‫خاصية‬ action .‫بالنموذج‬ ‫الخاصة‬ <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
  • 71. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 71 ‫لـ‬ ‫االسم‬ ‫خاصية‬ <input> ‫عىل‬ ‫يحتوي‬ ‫أن‬ ‫يجب‬ ‫إدخال‬ ‫حقل‬ ‫كل‬‫أن‬ ‫الحظ‬ ‫خاصية‬ .‫إرسالها‬ ‫ليتم‬ ‫اسم‬ ‫حذف‬ ‫تم‬ ‫إذا‬ ‫خاصية‬ .‫اإلطالق‬ ‫عىل‬ ‫اإلدخال‬ ‫حقل‬ ‫قيمة‬ ‫إرسال‬ ‫يتم‬ ‫فلن‬ ،‫االسم‬ <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> Action Attribute ‫تحدد‬ ‫هذه‬ ‫ال‬ ‫خاصية‬ ‫اء‬‫ر‬‫اإلج‬ Action .‫النموذج‬ ‫إرسال‬ ‫عند‬ ‫تنفيذه‬ ‫المطلوب‬ ‫عىل‬ ‫المستخدم‬ ‫ينقر‬ ‫عندما‬ ‫الخادم‬ ‫عىل‬ ‫ملف‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫يتم‬ ، ‫عادة‬ .‫اإلرسال‬‫زر‬ ‫المثال‬ ‫ي‬ ‫ف‬ ،‫أدناه‬ ‫يسىم‬ ‫ملف‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫يتم‬ "action_page.php" :‫النموذج‬ ‫بيانات‬ ‫يعالج‬ ‫الخادم‬ ‫جانب‬ ‫من‬ ‫ي‬ ‫نص‬ ‫برنامج‬ ‫عىل‬ ‫الملف‬ ‫هذا‬ ‫يحتوي‬ <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
  • 72. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 72 Target Attribute ‫ال‬ ‫تحدد‬ ‫خاصية‬ .‫النموذج‬ ‫إرسال‬ ‫بعد‬ ‫تلقيها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫االستجابة‬ ‫عرض‬ ‫مكان‬ ‫الهدف‬ ‫ال‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ‫خاصية‬ :‫التالية‬ ‫القيم‬ ‫إحدى‬ ‫عىل‬ ‫الهدف‬ Value Description _blank ‫جديدة‬ ‫نافذة‬ ‫في‬ ‫االستجابة‬ ‫تعرض‬ _self ‫االفتارضية‬ ‫القيمة‬ ‫وهي‬ ‫الصفحة‬ ‫نفس‬ ‫في‬ ‫االستجابة‬ ‫تعرض‬ _parent parent frame ‫االب‬ ‫االطار‬ ‫في‬ ‫االستجابة‬ ‫تعرض‬ <form action="/action_page.php" target="_blank"> • The Method Attribute ‫تحدد‬ ‫ال‬ ‫خاصية‬ Method ‫ال‬ ‫طريقة‬ HTTP ‫بيانات‬ ‫إرسال‬ ‫عند‬ ‫الستخدامها‬ .‫النموذج‬ ‫ات‬ ‫ر‬ ‫كمتغت‬‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫يمكن‬ (with method="get")URL ‫أو‬ ‫كمعاملة‬ ‫جسم‬ ‫ي‬ ‫ف‬ HTTP method="post"). ) ‫طريقة‬ HTTP ‫ي‬ ‫ه‬ ‫النموذج‬ ‫بيانات‬ ‫إرسال‬ ‫عند‬ ‫اضية‬ ‫ر‬ ‫االفت‬ GET. <form action="/action_page.php" method="get"> ‫طريقة‬ POST <form action="/action_page.php" method="post">
  • 73. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 73 Canvas Graphics ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <canvas> ‫ي‬ ‫ف‬ HTML .‫الويب‬ ‫صفحة‬ ‫عىل‬ ‫الرسومات‬ ‫لرسم‬ ‫باستخدام‬ ‫اليسار‬ ‫عىل‬ ‫الموجود‬ ‫الرسم‬ ‫إنشاء‬ ‫تم‬ <canvas>. :‫عناص‬ ‫أربعة‬ ‫ظهر‬ُ‫ي‬ ‫متعدد‬ ‫ونص‬ ، ‫األلوان‬ ‫متعدد‬ ‫مستطيل‬ ، ‫متدرج‬ ‫مستطيل‬ ، ‫أحمر‬ ‫مستطيل‬ .‫األلوان‬ ‫هو‬ ‫ما‬ HTML Canvas ‫؟‬ • ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ <canvas> ‫ي‬ ‫ف‬ HTML ‫ر‬ ‫عت‬ ‫فائقة‬ ‫بشعة‬ ‫الرسومات‬ ‫لرسم‬ JavaScript. • ‫ي‬ ‫ف‬ ‫يوجد‬ Canvas ‫والنص‬ ‫والدوائر‬ ‫والمربعات‬ ‫ات‬‫ر‬‫المسا‬ ‫لرسم‬ ‫طرق‬ ‫عدة‬ .‫الصور‬ ‫وإضافة‬ ‫عىل‬ ‫أمثلة‬ canvas canvas ‫صفحة‬ ‫عىل‬ ‫مستطيلة‬ ‫منطقة‬ ‫ي‬ ‫ه‬ HTML. ‫تحتوي‬ ‫ال‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ canvas .‫محتوى‬ ‫عىل‬ ‫تحتوي‬ ‫وال‬ ‫حدود‬ ‫عىل‬ : ‫ي‬ ‫التاىل‬ ‫النحو‬ ‫عىل‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬‫يبدو‬ <canvas id="myCanvas" width="200" height="100"></canvas> ‫لوحة‬ ‫عىل‬ ‫مثال‬ ‫ي‬ ‫يىل‬ ‫فيما‬ canvas :‫فارغة‬ ‫أساسية‬ <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
  • 74. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 74 ‫أضف‬ JavaScript ‫إنشاء‬ ‫بعد‬ canvas ‫إضافة‬ ‫عليك‬ ‫يجب‬ ، ‫مستطيلة‬ JavaScript .‫بالرسم‬ ‫للقيام‬ :‫األمثلة‬ ‫بعض‬ ‫وهنا‬ ‫مستقيم‬ ‫خط‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script> ‫دائرة‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </script>
  • 75. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 75 ‫نص‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script> ‫خطي‬ ‫تدرج‬ ‫رسم‬ <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script>
  • 76. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 76 ‫هو‬ ‫ما‬ SVG ‫؟‬ ‫يرمز‬ SVG ‫إىل‬ Scalable Vector Graphics ‫ف‬ّ ‫يعر‬ SVG ‫الرسومات‬ ‫المعتمدة‬ ‫عىل‬ ‫االشعة‬ ‫ب‬ ‫وتكون‬ ‫تنسيق‬ XML. ‫يستخدم‬ SVG ‫للويب‬ ‫الرسومات‬ ‫لتعريف‬ ‫عنرص‬ HTML <svg> ‫لرسومات‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ SVG. ‫يحتوي‬ SVG ‫والنصوص‬ ‫والدوائر‬ ‫والمربعات‬ ‫ات‬‫ر‬‫المسا‬ ‫لرسم‬ ‫طرق‬ ‫عدة‬ ‫عىل‬ .‫الرسومية‬‫والصور‬ ‫دائرة‬ ‫رسم‬ SVG <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html> ‫مستطيل‬ ‫رسم‬ SVG <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke- width:10;stroke:rgb(0,0,0)" /> </svg>
  • 77. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 77 ‫الزوايا‬ ‫ملتف‬ ‫مستطيل‬ ‫رسم‬ SVG <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
  • 78. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 78 ‫المتعددة‬ ‫الوسائط‬ ‫وأفالم‬ ‫وفيديوهات‬ ‫ر‬ ‫وموسيق‬ ‫صوت‬ ‫عن‬ ‫عبارة‬ ‫الويب‬ ‫عىل‬ ‫المتعددة‬ ‫الوسائط‬ .‫كة‬ ‫متحر‬ ‫ورسوم‬ ‫أي‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ .‫المختلفة‬ ‫التنسيقات‬ ‫من‬ ‫العديد‬ ‫ي‬ ‫ف‬ ‫المتعددة‬ ‫الوسائط‬ ‫ي‬ ‫ر‬ ‫تأن‬ ‫ومقاطع‬ ‫والصوت‬ ‫ر‬ ‫والموسيق‬ ‫الصور‬ ‫مثل‬ ، ‫رؤيته‬ ‫أو‬ ‫سماعه‬ ‫يمكنك‬ ‫ا‬ً‫تقريب‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ .‫والمزيد‬ ‫كة‬ ‫المتحر‬ ‫والرسوم‬ ‫واألفالم‬ ‫والتسجيالت‬ ‫الفيديو‬ ‫أنواع‬ ‫من‬ ‫متعددة‬ ‫وسائط‬ ‫عناص‬ ‫عىل‬ ‫ا‬ً‫غالب‬ ‫الويب‬ ‫صفحات‬ ‫تحتوي‬ ‫وأشكال‬ .‫مختلفة‬ ‫الفيديو‬ Video ‫عنرص‬ ‫ستخدم‬ُ‫ي‬ HTML <video> .‫ويب‬ ‫صفحة‬ ‫عىل‬‫فيديو‬ ‫مقطع‬ ‫لعرض‬ ‫بتنسيق‬ ‫فيديو‬ ‫مقطع‬ ‫إلظهار‬ HTML ‫عنرص‬ ‫استخدم‬ ، <video> : <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ‫تعمل‬ ‫كيف‬ ‫تضيف‬ ‫خاصية‬ ‫التشغيل‬ ‫مثل‬ ، ‫الفيديو‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫التحكم‬ ‫عناص‬ .‫والصوت‬ ‫المؤقت‬ ‫واإليقاف‬ ‫ر‬ ‫تضمي‬ ‫ا‬ ً‫دائم‬ ‫الجيد‬ ‫من‬ ‫خواص‬ ‫االرتفاع‬ ‫ضبط‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫واالرتفاع‬ ‫العرض‬ .‫الفيديو‬ ‫تحميل‬ ‫أثناء‬ ‫الصفحة‬ ‫تومض‬ ‫فقد‬ ، ‫والعرض‬ ‫عنرص‬ ‫لك‬ ‫يتيح‬ <source> ‫للمتصفح‬ ‫يمكن‬ ‫بديلة‬ ‫فيديو‬ ‫ملفات‬ ‫تحديد‬ .‫معروف‬ ‫تنسيق‬ ‫أول‬ ‫المتصفح‬ ‫سيستخدم‬ .‫بينها‬ ‫من‬ ‫االختيار‬ ‫ي‬ ‫ر‬ ‫عالمت‬ ‫ر‬ ‫بي‬ ‫الموجود‬ ‫النص‬ ‫عرض‬ ‫يتم‬ ‫لن‬ <video> ‫و‬ </video> ‫ي‬ ‫ف‬ ‫إال‬ ‫عنرص‬ ‫تدعم‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المتصفحات‬ <video>
  • 79. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 79 HTML <video> Autoplay ‫استخدم‬ ، ‫ا‬ً‫تلقائي‬ ‫فيديو‬ ‫مقطع‬ ‫تشغيل‬ ‫لبدء‬ ‫خاصية‬ : ‫ي‬ ‫التلقان‬ ‫التشغيل‬ <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ‫أضف‬ muted ‫تشغيل‬ ‫ببدء‬ ‫للسماح‬ ‫ي‬ ‫التلقان‬ ‫التشغيل‬ ‫بعد‬ ‫الصوت‬ ‫كتم‬ :)‫الصوت‬ ‫كتم‬‫(ولكن‬ ‫ا‬ً‫تلقائي‬ ‫الفيديو‬ <video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ‫الصوت‬ Audio ‫عنرص‬ ‫استخدم‬ ‫ي‬ ‫ر‬ ‫صون‬ ‫ملف‬ ‫لتشغيل‬ <audio> : <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> ‫صوت‬ HTML - ‫يعمل‬ ‫كيف‬ • ‫تضيف‬ ‫خاصية‬ ‫التشغيل‬ ‫مثل‬ ، ‫الصوت‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫التحكم‬ ‫عناص‬ .‫الصوت‬ ‫ومستوى‬ ‫المؤقت‬ ‫واإليقاف‬ • ‫عنرص‬ ‫لك‬ ‫يتيح‬ <source> ‫يمكن‬ ‫بديلة‬ ‫صوتية‬ ‫ملفات‬ ‫تحديد‬ ‫للمتصفح‬ .‫معروف‬ ‫تنسيق‬ ‫أول‬ ‫المتصفح‬ ‫سيستخدم‬ .‫بينها‬ ‫من‬ ‫االختيار‬ • ‫ي‬ ‫ر‬ ‫عالمت‬ ‫ر‬ ‫بي‬ ‫الموجود‬ ‫النص‬ ‫عرض‬ ‫يتم‬ ‫لن‬ <audio> ‫و‬ </audio> ‫ي‬ ‫ف‬ ‫إال‬ ‫عنرص‬ ‫تدعم‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المتصفحات‬ <audio>.
  • 80. HTML ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 80 ‫ي‬ ‫التلقائ‬ ‫التشغيل‬ HTML <audio> Autoplay ‫استخدم‬ ، ‫ا‬ً‫تلقائي‬ ‫ي‬ ‫ر‬ ‫صون‬ ‫ملف‬ ‫تشغيل‬ ‫لبدء‬ ‫خاصية‬ : ‫ي‬ ‫التلقان‬ ‫التشغيل‬ <audio controls autoplay> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> ‫الصوت‬ ‫كتم‬‫أضف‬ muted ‫لملفك‬ ‫للسماح‬ ‫ي‬ ‫التلقان‬ ‫التشغيل‬ ‫بعد‬ ‫ببدء‬ ‫ي‬ ‫ر‬ ‫الصون‬ :)‫الصوت‬ ‫كتم‬‫(ولكن‬ ‫ا‬ً‫تلقائي‬ ‫التشغيل‬ <audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
  • 82. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 82 CSS - ‫ل‬ ‫اختصار‬ ( Cascading Style Sheet ) ‫ي‬ ‫وه‬ ‫لغة‬ ‫توصيفيه‬ ‫بمنح‬ ‫تقوم‬ .‫الجميل‬ ‫شكله‬ ‫الويب‬ ‫موقع‬ CSS ‫مستند‬ ‫لتصميم‬ ‫نستخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اللغة‬ ‫ي‬ ‫ه‬ HTML. ‫يصف‬ CSS ‫عناص‬ ‫عرض‬ ‫كيفية‬ HTML. ‫هو‬ ‫ما‬ CSS ‫؟‬ CSS ‫ي‬ ‫تعت‬ Cascading Style Sheets ‫يصف‬ CSS ‫عناص‬ ‫عرض‬ ‫كيفية‬ HTML ‫أخرى‬ ‫وسائط‬ ‫أو‬ ‫الشاشة‬ ‫عىل‬ . ‫يمكنه‬ ‫واحدة‬ ‫دفعة‬ ‫الويب‬ ‫صفحات‬ ‫من‬ ‫العديد‬ ‫تخطيط‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫باستخدام‬ CSS ‫ر‬ ‫بي‬ ‫والتباعد‬ ، ‫النص‬ ‫وحجم‬ ، ‫والخط‬ ، ‫اللون‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫يمكنك‬ ، ‫ألوا‬ ‫أو‬ ‫الخلفية‬ ‫صور‬ ‫ي‬ ‫ه‬ ‫وما‬ ، ‫وتخطيطها‬ ‫العناص‬ ‫وضع‬ ‫وكيفية‬ ، ‫العناص‬ ‫ن‬ ‫وأحجام‬ ‫لألجهزة‬ ‫المختلفة‬ ‫العرض‬ ‫وشاشات‬ ، ‫استخدامها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الخلفية‬ ‫ر‬ ‫بكثت‬ ‫ر‬ ‫أكت‬ ‫و‬ ، ‫المختلفة‬ ‫الشاشات‬ ! ‫استخدام‬ ‫يتم‬ CSS ‫أنماط‬ ‫لتحديد‬ ‫تنسيق‬ ‫ي‬ ‫ف‬ ‫بما‬ ، ‫بك‬ ‫الخاصة‬ ‫الويب‬ ‫صفحات‬ ‫واالختالفات‬ ‫والتخطيط‬ ‫التصميم‬ ‫ذلك‬ ‫العرض‬ ‫ي‬ ‫ف‬ ‫ل‬ ‫أل‬ ‫جهزة‬ ‫الشاشة‬ ‫وأحجام‬ .‫المختلفة‬ body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
  • 83. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 83 ‫حل‬ CSS ‫ة‬ ‫ر‬ ‫كبي‬‫مشكلة‬ ‫من‬ ‫القصد‬ ‫يكن‬ ‫لم‬ HTML !‫ويب‬ ‫صفحة‬ ‫لتنسيق‬ ‫عالمات‬ ‫عىل‬ ‫يحتوي‬ ‫أن‬ ‫ا‬ ً ‫أبد‬ ‫إنشاء‬ ‫تم‬ HTML :‫مثل‬ ، ‫الويب‬ ‫صفحة‬ ‫محتوى‬ ‫لوصف‬ <h1> ‫عنوان‬ ‫<هذا‬/h1> <p> ‫فقرة‬ ‫<هذه‬/p> ‫مثل‬ ‫عالمات‬ ‫إضافة‬ ‫تم‬ ‫عندما‬ |<font> ‫مواصفات‬ ‫إىل‬ ‫اللون‬ ‫وسمات‬ HTML 3.2 ، ‫صفحة‬ ‫كل‬‫إىل‬ ‫األلوان‬ ‫ومعلومات‬ ‫الخطوط‬ ‫إضافة‬ ‫تمت‬ ‫حيث‬ ، ‫وهذه‬ ‫عملية‬ .‫ومكلفة‬ ‫طويلة‬ ، ‫المشكلة‬ ‫هذه‬ ‫لحل‬ ‫قامت‬ W3C ‫اتحاد‬ ‫العالمية‬ ‫الويب‬ ‫شبكة‬ ‫بانشاء‬ CSS. ‫ال‬‫ز‬‫أ‬ CSS ‫صفحة‬ ‫من‬ ‫النمط‬ ‫تنسيق‬ HTML ! ‫يوفر‬ CSS !‫العمل‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫ي‬ ‫ما‬ ً ‫عادة‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫األنماط‬ ‫تعريفات‬ ‫حفظ‬ ‫تم‬ css ) ‫ي‬ ‫ر‬ ‫منفصل(خارج‬ . ‫ملف‬ ‫باستخدام‬ css ‫طريق‬ ‫عن‬ ‫بأكمله‬ ‫ويب‬ ‫موقع‬ ‫مظهر‬ ‫ر‬ ‫تغيت‬ ‫يمكنك‬ ، ‫ي‬ ‫ر‬ ‫الخارج‬ !‫فقط‬ ‫واحد‬ ‫ملف‬ ‫ر‬ ‫تغيت‬ ‫استخدام‬ CSS ‫يمك‬ ‫إضافة‬ ‫ن‬ CSS ‫مستندات‬ ‫إىل‬ HTML ‫طرق‬ ‫بثالث‬ : • ‫مضمنة‬ - ‫باستخدام‬ ‫خاصية‬ ‫عناص‬ ‫داخل‬ ‫النمط‬ HTML • ‫ي‬ ‫داخىل‬ - ‫عنرص‬ ‫باستخدام‬ <style> ‫قسم‬ ‫ي‬ ‫ف‬ <head> • ‫ي‬ ‫ر‬ ‫خارج‬ - ‫عنرص‬ ‫باستخدام‬ <link> ‫بملف‬ ‫لالرتباط‬ CSS ‫ي‬ ‫ر‬ ‫خارج‬ ‫إلضافة‬ ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫الطريقة‬ CSS ‫ملفات‬ ‫ي‬ ‫ف‬ ‫باألنماط‬ ‫االحتفاظ‬ ‫ي‬ ‫ه‬ CSS .‫الخارجية‬ ‫مضمنة‬ (Inline CSS) CSS ‫استخدام‬ ‫يتم‬ CSS ‫عنرص‬ ‫عىل‬ ‫فريد‬ ‫نمط‬ ‫لتطبيق‬ ‫المضمن‬ HTML ‫واحد‬ . ‫يستخدم‬ CSS ‫المضمن‬ ‫الخاصية‬ style ‫لعنرص‬ HTML.
  • 84. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 84 ‫العنرص‬ ‫نص‬ ‫لون‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يضبط‬ <h1> ‫النص‬ ‫ولون‬ ، ‫األزرق‬ ‫اللون‬ ‫عىل‬ ‫بالعنرص‬ ‫الخاص‬ <p> :‫األحمر‬ ‫اللون‬ ‫إىل‬ <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> CSS ‫داخلي‬ ( Internal CSS ) ‫استخدام‬ ‫يتم‬ CSS ‫لصفحة‬ ‫نمط‬ ‫لتحديد‬ ‫ي‬ ‫داخىل‬ HTML ‫واحدة‬ . ‫تعريف‬ ‫يتم‬ CSS ‫قسم‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫داخىل‬ <head> ‫لصفحة‬ HTML ‫عنرص‬ ‫داخل‬ ، <style>. ‫عناص‬ ‫لجميع‬ ‫النص‬ ‫لون‬ ‫ر‬ ‫بتعيي‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يقوم‬ <h1> ) ‫إىل‬ )‫الصفحة‬ ‫تلك‬ ‫ي‬ ‫ف‬ ‫عناص‬ ‫لجميع‬ ‫النص‬ ‫ولون‬ ، ‫األزرق‬ ‫اللون‬ <p> ‫إىل‬ ‫باإلضافة‬ .‫األحمر‬ ‫اللون‬ ‫إىل‬ ‫أزرق‬ " ‫خلفية‬ ‫بلون‬ ‫الصفحة‬ ‫عرض‬ ‫سيتم‬ ، ‫ذلك‬ ‫باهت‬ :" <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
  • 85. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 85 CSS ‫خارجي‬ ( External CSS ) ‫من‬ ‫للعديد‬ ‫النمط‬ ‫لتحديد‬ ‫خارجية‬ ‫أنماط‬ ‫ورقة‬ ‫استخدام‬ ‫يتم‬ ‫صفحات‬ HTML. ‫قسم‬ ‫ي‬ ‫ف‬ ‫إليها‬ ‫ا‬ ً ‫ارتباط‬ ‫أضف‬ ، ‫خارجية‬ ‫أنماط‬ ‫ورقة‬ ‫الستخدام‬ <head> ‫لكل‬ ‫صفحة‬ HTML : <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> ‫الملف‬ ‫يحتوي‬ ‫أال‬ ‫يجب‬ .‫نصوص‬ ‫محرر‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫الخارجية‬ ‫األنماط‬ ‫ورقة‬ ‫كتابة‬‫يمكن‬ ‫كود‬‫أي‬ ‫عىل‬ HTML ‫بامتداد‬ ‫حفظه‬ ‫ويجب‬ ، .css ‫ملف‬ ‫عليه‬‫يبدو‬ ‫ما‬ ‫هذا‬ styles.css "styles.css": body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
  • 86. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 86 ‫متعددة‬ ‫نمط‬ ‫اق‬‫ر‬‫أو‬ ( Multiple Style Sheets ) ‫أنماط‬ ‫اق‬‫ر‬‫أو‬ ‫ي‬ ‫ف‬ )‫(العنرص‬ ‫المحدد‬ ‫لنفس‬ ‫الخصائص‬ ‫بعض‬ ‫تحديد‬ ‫تم‬ ‫إذا‬ ،‫مختلفة‬ ‫أنماط‬ ‫ورقة‬ ‫آخر‬ ‫من‬ ‫القيمة‬ ‫استخدام‬ ‫فسيتم‬ style sheet . :‫مثال‬ ‫للعنرص‬ ‫ي‬ ‫التاىل‬ ‫النمط‬ ‫لها‬ ‫الخارجية‬ ‫األنماط‬ ‫ورقة‬ ‫أن‬ ‫ض‬ ‫ر‬ ‫افت‬ <h1> : h1 { color: navy; } ‫للعنرص‬ ‫ي‬ ‫التاىل‬ ‫النمط‬ ‫عىل‬ ‫ا‬ ً ‫أيض‬ ‫تحتوي‬ ‫الداخلية‬ ‫األنماط‬ ‫ورقة‬ ‫أن‬ ‫ض‬ ‫ر‬ ‫افت‬ ، ‫ذلك‬ ‫بعد‬ <h1>: h1 { color: orange; } ‫فستكون‬ ، ‫الخارجية‬ ‫األنماط‬ ‫بورقة‬ ‫االرتباط‬ ‫بعد‬ ‫ي‬ ‫الداخىل‬ ‫النمط‬ ‫تحديد‬ ‫تم‬ ‫إذا‬ ‫عناص‬ <h1> " ‫برتقالية‬ :" <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> <style> h1 { color: orange; } </style> </head> ‫ي‬ ‫الداخىل‬ ‫النمط‬ ‫تحديد‬ ‫تم‬ ‫إذا‬ ‫قبل‬ ‫فستكون‬ ، ‫الخارجية‬ ‫األنماط‬ ‫بورقة‬ ‫االرتباط‬ ‫عناص‬ <h1> " " navy
  • 87. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 87 ‫ي‬ ‫متتال‬ ‫ترتيب‬ ( Cascading Order ) ‫لعنرص‬ ‫محدد‬ ‫نمط‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫هناك‬ ‫يكون‬ ‫عندما‬ ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫النمط‬‫هو‬ ‫ما‬ HTML ‫؟‬ " ‫سيتم‬ ‫ال‬ " ‫ي‬ ‫تتاىل‬ Cascading ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫األنماط‬ ‫جميع‬ ‫ترتب‬ ‫ا‬ ً ‫وفق‬ ، ‫التالية‬ ‫للقواعد‬ ‫االولوية‬ ‫حسب‬ : 1 . ‫عنرص‬ ‫داخل‬ ‫مضمن‬ ‫نمط‬ HTML) ) 2 . )‫أس‬‫ر‬‫ال‬ ‫قسم‬ ‫ي‬ ‫(ف‬ ‫والداخلية‬ ‫الخارجية‬ ‫األنماط‬ ‫اق‬‫ر‬‫أو‬ 3 . ‫المت‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫صفح‬ ‫الخارجية‬ ‫األنماط‬ ‫ي‬ ‫يلغ‬ ‫وسوف‬ ، ‫القصوى‬ ‫األولوية‬ ‫له‬ ‫المضمن‬ ‫النمط‬ ‫فإن‬ ، ‫لذلك‬ .‫المتصفح‬ ‫اضيات‬ ‫ر‬ ‫وافت‬ ‫والداخلية‬ ‫الربط‬ ‫ب‬ CSS ‫ي‬ ‫ر‬ ‫خارج‬ ( Link to External CSS ) ‫بعنوان‬ ‫الخارجية‬ ‫األنماط‬ ‫اق‬‫ر‬‫أو‬ ‫إىل‬ ‫الرجوع‬ ‫يمكن‬ URL ‫بمسار‬ ‫أو‬ ‫كامل‬ ‫ي‬ ‫ر‬ ‫نست‬ .‫الحالية‬ ‫الويب‬ ‫بصفحة‬ <link rel="stylesheet" href="https://www. .com/html/styles.css"> <link rel="stylesheet" href="/html/styles.css"> <link rel="stylesheet" href="styles.css">
  • 88. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 88 ‫كتابة‬ ‫قواعد‬ CSS ‫قاعدة‬ ‫تتكون‬ CSS ‫محدد‬ ‫من‬ ( selector ) ‫إعالن‬ ‫وكتلة‬ ( declaration block ) . ‫عنرص‬ ‫إىل‬ ‫المحدد‬ ‫ر‬ ‫يشت‬ HTML .‫تنسيقه‬ ‫تريد‬ ‫الذي‬ ‫عىل‬ ‫ح‬ ‫ي‬‫رص‬‫الت‬ ‫كتلة‬‫تحتوي‬ ( ‫ح‬ ‫ي‬‫رص‬‫ت‬ declaration ) ‫بفواصل‬ ‫مفصولة‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ .‫منقوطة‬ ‫كل‬‫يتضمن‬ ‫ح‬ ‫ي‬‫رص‬‫ت‬ ‫خاصية‬ ‫اسم‬ CSS . ‫ر‬ ‫بنقطتي‬ ‫مفصولة‬ ‫وقيمة‬ ‫فصل‬ ‫يتم‬ ‫يحات‬‫رص‬‫ت‬ CSS ، ‫منقوطة‬ ‫بفواصل‬ ‫المتعددة‬ ‫كتل‬‫وتحيط‬ ‫ح‬ ‫ي‬‫رص‬‫الت‬ )‫(االعالن‬ .‫معقوفة‬ ‫بأقواس‬ ‫عناص‬ ‫جميع‬ ‫محاذاة‬ ‫ستتم‬ ، ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ <p> ‫أحمر‬ ‫بلون‬ ، ‫المنتصف‬ ‫إىل‬ :‫للنص‬ p { color: red; text-align: center; } ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ p ‫ي‬ ‫ف‬ ‫محدد‬ CSS ( ‫عنرص‬ ‫إىل‬ ‫ر‬ ‫يشت‬ HTML :‫تنسيقه‬ ‫تريد‬ ‫الذي‬ <p> ‫اللون‬ color ، ‫خاصية‬‫هو‬ ‫واألحمر‬ red ‫الخاصية‬ ‫قيمة‬ ‫هو‬ ‫النص‬ ‫محاذاة‬ text-align ، ‫خاصية‬ ‫الوسط‬‫و‬ center ‫الخاصية‬ ‫قيمة‬ ‫هو‬
  • 89. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 89 ‫المحددات‬ CSS ‫محدد‬ ‫االسم‬ ‫ر‬ ‫يعي‬ ‫عناص‬‫العنرص‬ ‫محدد‬ HTML .‫العنرص‬ ‫اسم‬ ‫عىل‬ ً‫بناء‬ p { text-align: center; color: red; } ‫المعرف‬ ‫محدد‬ id Selector ‫محدد‬ ‫يستخدم‬ ‫المعرف‬ ‫ال‬ ‫خاصية‬ id ‫لعنرص‬ HTML . ‫ر‬ ‫معي‬ ‫عنرص‬ ‫لتحديد‬ ‫عنرص‬ ‫معرف‬ id ‫لتحديد‬ ‫الهوية‬ ‫محدد‬ ‫استخدام‬ ‫يتم‬ ‫لذلك‬ ، ‫الصفحة‬ ‫داخل‬ ‫فريد‬ !‫واحد‬ ‫فريد‬ ‫عنرص‬ ‫بمعرف‬ ‫عنرص‬ ‫لتحديد‬ id ‫بمعرف‬ ‫ا‬ ً‫متبوع‬ ، )#( ‫التجزئة‬ ‫حرف‬ ‫اكتب‬ ، ‫ر‬ ‫معي‬ id .‫العنرص‬ ‫قاعدة‬ ‫تطبيق‬ ‫سيتم‬ CSS ‫عنرص‬ ‫عىل‬ ‫أدناه‬ HTML ‫بالمعرف‬ para1 #para1 { text-align: center; color: red; } ‫الصف‬ ‫محدد‬ class Selector ‫محدد‬ ‫يحدد‬ ‫الصف‬ ‫عناص‬ HTML ‫ب‬ ‫ال‬ ‫واسطة‬ ‫خاصية‬ class ‫صف‬ . ‫عناص‬ ‫لتحديد‬ ‫بصف‬ ‫ر‬ ‫معي‬ ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، ).( ‫نقطة‬ ‫حرف‬ ‫اكتب‬ ، ‫الصف‬ . ‫عناص‬ ‫جميع‬ ‫ستكون‬ ، ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ HTML ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ class = "center" ‫للوسط‬ ‫ومحاذاة‬ ‫األحمر‬ ‫باللون‬ .center { text-align: center; color: red; } ‫عناص‬ ‫أن‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ HTML ‫محد‬ ‫تتأثر‬ ‫أن‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ه‬ ‫فقط‬ ‫دة‬ ‫ب‬ ‫الصف‬ .
  • 90. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 90 ‫فقط‬ ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ <p> ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ class = "center" ‫ستكون‬ ‫للوسط‬ ‫ومحاذاة‬ ‫اء‬‫ر‬‫حم‬ : p.center { text-align: center; color: red; } ‫عناص‬ ‫ر‬ ‫تشت‬ ‫أن‬ ‫يمكن‬ HTML .‫واحدة‬ ‫فئة‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ <p class="center large">This paragraph refers to two classes.</p> ‫العام‬ ‫المحدد‬ CSS The CSS Universal Selector) ) ‫عناص‬ ‫جميع‬ )*( ‫العام‬ ‫المحدد‬ ‫يحدد‬ HTML .‫الصفحة‬ ‫عىل‬ * { text-align: center; color: blue; } ‫تجميع‬ ‫محدد‬ CSS ( The CSS Grouping Selector ) ‫عناص‬ ‫جميع‬ ‫التجميع‬ ‫محدد‬ ‫يحدد‬ HTML .‫األنماط‬ ‫تعريفات‬ ‫بنفس‬ ‫كود‬‫إىل‬‫انظر‬ CSS ‫(العناص‬ ‫ي‬ ‫التاىل‬ h1 ‫و‬ h2 ‫و‬ p :)‫النمط‬ ‫تعريفات‬ ‫نفس‬ ‫لها‬ h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center;
  • 91. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 91 color: red; } .‫الكود‬ ‫لتقليل‬ ‫المحددات‬ ‫تجميع‬ ‫األفضل‬ ‫من‬ ‫سيكون‬ .‫بفاصلة‬ ‫محدد‬ ‫كل‬ ‫ر‬ ‫بي‬ ‫افصل‬ ، ‫المحددات‬ ‫لتجميع‬ :‫أعاله‬ ‫الكود‬ ‫من‬ ‫المحددات‬ ‫بتجميع‬ ‫قمنا‬ ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ h1, h2, p { text-align: center; color: red; } ‫التعليقات‬ CSS Comments ‫تساعد‬ ‫وقد‬ ، ‫الكود‬ ‫ح‬ ‫ر‬ ‫لش‬ ‫التعليقات‬ ‫ستخدم‬ ُ ‫ت‬ ‫ك‬ ‫وقت‬ ‫ي‬ ‫ف‬ ‫الكود‬‫بتحرير‬ ‫تقوم‬ ‫عندما‬ ‫الحق‬ . ‫المتصفحات‬ ‫قبل‬ ‫من‬ ‫التعليقات‬ ‫تجاهل‬ ‫يتم‬ . ‫تعليق‬ ‫وضع‬ ‫يتم‬ CSS < ‫عنرص‬ ‫داخل‬ style> :/ * ‫ب‬ ‫ي‬ ‫وينته‬ * / ‫ب‬ ‫ويبدأ‬ ، /* This is a single-line comment */ p { color: red; } ‫إضافة‬ ‫يمكنك‬ ‫الكود‬ ‫ي‬ ‫ف‬ ‫تريد‬ ‫أينما‬ ‫تعليقات‬ : p { color: red; /* Set text color to red */ } :‫أسطر‬ ‫عدة‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ ‫التعليقات‬ ‫تمتد‬ ‫أن‬ ‫يمكن‬ /* This is a multi-line comment */ p { color: red; }
  • 92. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 92 ‫وأحجام‬ ‫وخطوط‬ ‫ألوان‬ CSS ‫خصائص‬ ‫بعض‬ ‫نوضح‬ ‫سوف‬ ، ‫هنا‬ CSS .‫االستخدام‬ ‫شائعة‬ ‫خاصية‬ ‫تحدد‬ color ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫النص‬ ‫لون‬ . ‫خاصية‬ ‫تحدد‬ font-family ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫الخط‬ . ‫خاصية‬ ‫تحدد‬ font-size ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫النص‬ ‫حجم‬ . <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
  • 93. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 93 ( ‫الخط‬ ‫لون‬ Text Color ) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ Color ‫اللون‬ .‫النص‬ ‫لون‬ ‫ر‬ ‫لتعيي‬ :‫بواسطة‬ ‫محدد‬ • ‫لون‬ ‫اسم‬ - " ‫مثل‬ red " • ‫قيمة‬ ‫ية‬ ‫ر‬ ‫عش‬ ‫الست‬ - " ‫مثل‬ ff0000 # " • ‫قيمة‬ RGB - ‫الخلفية‬ ‫ولون‬ ‫النص‬ ‫لون‬ ‫اللون‬ ‫وخاصية‬ ‫الخلفية‬ ‫لون‬ ‫خاصية‬ ‫من‬ ً ‫كال‬‫نحدد‬ ، ‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫لكامل‬ ‫النص‬ ‫الصفحة‬ : body { background-color: lightgrey; color: blue; } h1 { background-color: black; color: white; } ( ‫نص‬ ‫محاذاة‬ CSS Text Alignment ) .‫للنص‬ ‫األفقية‬ ‫المحاذاة‬ ‫ر‬ ‫لتعيي‬ ‫النص‬ ‫محاذاة‬ ‫خاصية‬ ‫استخدام‬ ‫يتم‬ .‫ضبطه‬ ‫أو‬ ‫توسيطه‬ ‫أو‬ ‫ر‬ ‫اليمي‬‫أو‬ ‫اليسار‬ ‫إىل‬ ‫النص‬ ‫محاذاة‬ ‫يمكن‬ ، ‫للوسط‬ ‫محاذاة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫إىل‬ ‫(المحاذاة‬ ‫ر‬ ‫واليمي‬ ‫لليسار‬ ‫ا‬ً‫محاذي‬ ‫ا‬ ً ‫ونص‬ ‫إىل‬ ‫والمحاذاة‬ ، ‫ر‬ ‫اليمي‬ ‫إىل‬‫اليسار‬ ‫من‬ ‫النص‬ ‫اتجاه‬ ‫كان‬‫إذا‬ ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫تكون‬ ‫اليسار‬ :)‫اليسار‬ ‫إىل‬ ‫ر‬ ‫اليمي‬ ‫من‬ ‫النص‬ ‫اتجاه‬ ‫كان‬‫إذا‬ ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫تكون‬ ‫ر‬ ‫اليمي‬ h1 { text-align: center; } h2 { text-align: left; }
  • 94. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 94 h3 { text-align: right; } " ‫عىل‬ ‫النص‬ ‫محاذاة‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫عندما‬ justify ‫سطر‬ ‫كل‬‫تمديد‬ ‫يتم‬ ، " ‫مستقيمة‬ ‫واليشى‬ ‫اليمت‬ ‫الهوامش‬ ‫وتكون‬ ، ٍ ‫متساو‬ ‫عرض‬ ‫سطر‬ ‫لكل‬ ‫يكون‬ ‫بحيث‬ :)‫والصحف‬ ‫المجالت‬ ‫ي‬ ‫ف‬ ‫الحال‬ ‫هو‬ ‫(كما‬ div { text-align: justify; } ‫النص‬ ‫اتجاه‬ ‫خصائص‬ ‫استخدام‬ ‫يمكن‬ direction :‫للعنرص‬ ‫النص‬ ‫اتجاه‬ ‫ر‬ ‫لتغيت‬ p { direction: rtl; } (‫عمودي‬ ‫انحياز‬ Vertical Alignment ) .‫للعنرص‬ ‫أسية‬‫ر‬‫ال‬ ‫المحاذاة‬ ‫أسية‬‫ر‬‫ال‬ ‫المحاذاة‬ ‫خاصية‬ ‫تحدد‬ :‫النص‬ ‫ي‬ ‫ف‬ ‫لصورة‬ ‫أسية‬‫ر‬‫ال‬ ‫المحاذاة‬ ‫ضبط‬ ‫كيفية‬‫المثال‬ ‫هذا‬ ‫يوضح‬ img.top { vertical-align: top; } img.middle { vertical-align: middle; } img.bottom { vertical-align: bottom; }
  • 95. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 95 ‫نص‬ ‫زخرفة‬ (CSS Text Decoration) ‫ستخدم‬ ُ ‫ت‬ text-decoration .‫النص‬ ‫من‬ ‫التها‬‫ز‬‫إ‬ ‫أو‬ ‫الزخارف‬ ‫ر‬ ‫لتعيي‬ text-decoration: none; ‫استخدامه‬ ‫يتم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ‫ا‬ :‫الروابط‬ ‫من‬ ‫ر‬ ‫التسطت‬ ‫الة‬‫ز‬‫إل‬ a { text-decoration: none; } The other text-decoration values are used to decorate text: h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } : ‫الزخرفة‬ ‫ولون‬ ‫شكل‬ ‫ر‬ ‫تغيت‬ ‫يمكن‬ ً ‫أيضا‬ text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: red; ‫النص‬ ‫تحويل‬ ( CSS Text Transformation ) ‫خاصية‬ ‫استخدام‬ ‫يتم‬ text-transform ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫والصغت‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫األحرف‬ ‫لتحديد‬ .‫النص‬ ‫كل‬‫لتحويل‬ ‫استخدامه‬ ‫يمكن‬ ‫األحرف‬ ‫الحرف‬ ‫ر‬ ‫تكبت‬ ‫أو‬ ، ‫ة‬ ‫ر‬ ‫صغت‬ ‫أو‬ ‫ة‬ ‫ر‬ ‫كبت‬‫أحرف‬ ‫إىل‬ :‫كلمة‬‫كل‬‫من‬ ‫األول‬
  • 96. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 96 p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } ( ‫نص‬ ‫تباعد‬ CSS Text Spacing ) ‫للنص‬ ‫البادئة‬ ‫المسافة‬ ( Text Indentation ) ‫من‬ ‫األول‬‫للسطر‬ ‫البادئة‬ ‫المسافة‬ ‫لتحديد‬ ‫للنص‬ ‫البادئة‬ ‫المسافة‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ :‫النص‬ p { text-indent: 50px; } ( ‫األحرف‬ ‫تباعد‬ Letter Spacing ) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ .‫النص‬ ‫ي‬ ‫ف‬ ‫األحرف‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫لتحديد‬ ‫األحرف‬ ‫تباعد‬ :‫األحرف‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫تقليل‬ ‫أو‬ ‫زيادة‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; }
  • 97. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 97 ( ‫خط‬ ‫ارتفاع‬ Line Height ) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ line-height :‫السطور‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫لتحديد‬ p.small { line-height: 0.8; } p.big { line-height: 1.8; } ( ‫نص‬ ‫ظل‬ CSS Text Shadow ) ‫خاصية‬ ‫تضيف‬ text-shadow .‫النص‬ ‫إىل‬ ‫الظل‬ ، ‫له‬ ‫استخدام‬ ‫أبسط‬ ‫ي‬ ‫ف‬ ( ‫ي‬ ‫ر‬ ‫األفق‬ ‫الظل‬ ‫تحديد‬ ‫فقط‬ ‫يمكنك‬ 2 ‫ي‬ ‫أش‬‫ر‬‫ال‬ ‫والظل‬ )‫بكسل‬ ( 2 :)‫بكسل‬ h1 { text-shadow: 2px 2px; } :‫الظل‬ ‫إىل‬ )‫(أحمر‬ ‫ا‬ ً ‫لون‬ ‫أضف‬ ، ‫ذلك‬ ‫بعد‬ h1 { text-shadow: 2px 2px red; } ‫الخطوط‬ ‫خاصية‬ ( The CSS font-family Property ) ‫ي‬ ‫ف‬ CSS ‫خاصية‬ ‫نستخدم‬ ، font-family .‫النص‬ ‫خط‬ ‫لتحديد‬ .p1 { font-family: "Times New Roman", Times, serif; }
  • 98. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 98 ‫خط‬ ‫نمط‬ (CSS Font Style) ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ font-style .‫مائل‬ ‫نص‬ ‫لتحديد‬ ‫الغالب‬ ‫ي‬ ‫ف‬ normal - ‫ي‬ ‫طبيغ‬ ‫بشكل‬ ‫النص‬ ‫عرض‬ ‫يتم‬ italic - ‫مائل‬ ‫بخط‬ ‫النص‬‫يظهر‬ p.normal { font-style: normal; } p.italic { font-style: italic; }
  • 99. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 99 ‫صندوق‬ ‫نموذج‬ CSS Box Model ‫ي‬ ‫ف‬ CSS ‫التصميم‬ ‫عن‬ ‫الحديث‬ ‫عند‬ "‫الصندوق‬ ‫"نموذج‬ ‫مصطلح‬ ‫ستخدم‬ُ‫ي‬ ، .‫والتخطيط‬ ‫عنرص‬ ‫كل‬‫حول‬ ‫يلتف‬ ‫ع‬‫مرب‬ ‫األساس‬ ‫ي‬ ‫ف‬ ‫هو‬ HTML. ‫والحدود‬ ‫الهوامش‬ :‫من‬ ‫يتكون‬ ‫أدناه‬ ‫الصورة‬ . ‫ي‬ ‫الفعىل‬ ‫والمحتوى‬ ‫وكة‬ ‫ر‬ ‫المت‬ ‫والمساحة‬ :‫الصندوق‬ ‫نموذج‬ ‫توضح‬ :‫المختلفة‬ ‫اء‬‫ز‬‫األج‬ ‫ح‬ ‫ر‬ ‫رس‬ Content - ‫والصور‬ ‫النص‬ ‫يظهر‬ ‫حيث‬ ، ‫ع‬‫المرب‬ ‫محتوى‬ Padding - ‫شفاف‬ ‫الحشو‬ .‫المحتوى‬ ‫حول‬ ‫مساحة‬ ‫يزيل‬ Border ‫الحدود‬ - ‫والمحتوى‬ ‫وكة‬ ‫ر‬ ‫المت‬ ‫المساحة‬ ‫حول‬‫يدور‬ ‫حد‬ Margin ‫الهامش‬ - ‫الحد‬ ‫خارج‬ ‫منطقة‬ ‫يمسح‬ ‫ود‬ ‫شفاف‬ ‫الهامش‬ . ‫لنا‬ ‫يتيح‬ ‫حد‬ ‫إضافة‬ ‫الصندوق‬ ‫نموذج‬ ‫ود‬ ‫ر‬ ‫بي‬ ‫المسافة‬ ‫وتحديد‬ ‫العناص‬ ‫حول‬ .‫العناص‬
  • 100. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 100 div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } ‫حدود‬ CSS ( CSS border ) ‫خاصية‬ ‫تحدد‬ CSS border ‫عنرص‬ ‫حول‬ ‫ا‬ ً ‫حد‬ HTML. p { border: 2px solid powderblue; } ‫و‬ ‫ي‬ ‫اليميت‬ ‫و‬ ‫ي‬ ‫السفىل‬ ‫و‬ ‫العلوي‬ ‫الحدود‬ ‫من‬ ‫لكل‬ ‫مختلف‬ ‫بتنسيق‬ ‫حد‬ ‫عمل‬ ‫يمكن‬ ‫اليساري‬ border-top: 1px solid red; border-bottom: 3px solid green; border-right: 2px solid blue; border-left: 4px solid yellow; ‫المسمط‬ ‫النمط‬ ‫ر‬ ‫غت‬ ‫يكون‬ ‫ان‬ ‫يمكن‬ ‫الحدود‬ ‫نمط‬ ‫ان‬ ‫كما‬ solid ‫مثل‬ dotted ‫و‬ dashed ‫و‬ solid ‫و‬ double ‫و‬ groove ‫و‬ ridge ‫و‬ inset ‫و‬ outset ‫و‬ none ‫و‬ hidden
  • 101. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 101 ‫حشوة‬ CSS ( CSS Padding ) ‫ي‬ ‫ف‬‫الحشو‬ ‫خاصية‬ ‫تحدد‬ CSS .‫والحد‬ ‫النص‬ ‫ر‬ ‫بي‬ )‫(المسافة‬ ‫وكة‬ ‫ر‬ ‫المت‬ ‫المساحة‬ ‫لكل‬ ‫هامش‬ ‫إعطاء‬ ‫فيمكن‬ ‫الجهات‬ ‫بكل‬ ‫موحد‬ ‫ر‬ ‫غي‬ ‫يكون‬ ‫ان‬ ‫يمكن‬ ‫الحشو‬ ‫ان‬ ‫كما‬ ‫ي‬ ‫كالتال‬‫اليسارية‬ ‫و‬ ‫السفلية‬ ‫و‬ ‫واليمينية‬ ‫العلوية‬ ‫الهوامش‬ ‫من‬ /* padding: top right bottom left; */ padding: 10px 20px 30px 40px; ‫هامش‬ CSS ( CSS Margin ) ‫هامش‬ ‫خاصية‬ ‫تحدد‬ CSS .‫الحدود‬ ‫خارج‬ )‫(مسافة‬ ‫ا‬ ً ‫هامش‬ p { border: 2px solid powderblue; margin: 50px; } ‫الصندوق‬ ‫من‬ ‫األربعة‬ ‫الجهات‬ ‫لكل‬ ‫ادي‬‫ر‬‫اف‬ ‫بشكل‬ ‫يعط‬ ‫ان‬ ‫يمكن‬ ‫الهامش‬ ً ‫أيضا‬ ‫ي‬ ‫كلتاىل‬ margin-top: 10; margin-right: 20; margin-bottom: 30; margin-left: 40; /* or margin: top right bottom left; */ margin: 10px 20px 30px 40px;
  • 102. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 102 ‫مثال‬ .btn { background-color: purple; border: 3px solid transparent; color: #FFFFFF; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 16px; font-family: cursive; border-radius: 3px; } ‫إخفاء‬ ‫العناصر‬ ‫من‬ ‫الممكن‬ ‫إخفاء‬ ‫عناص‬ HTML ‫باستخدام‬ CSS ‫ر‬ ‫بطريقتي‬ : ‫إسناد‬ ‫القيمة‬ none ‫إىل‬ ‫الخاصية‬ display . ‫إسناد‬ ‫القيمة‬ hidden ‫إىل‬ ‫الخاصية‬ visibility . ‫واالختالف‬ ‫بينهما‬ ‫الطريقة‬ ‫أن‬ ‫الثانية‬ ‫ي‬ ‫تخق‬ ‫العنرص‬ ‫مع‬ ‫الحفاظ‬ ‫عىل‬ ‫ر‬ ‫الحت‬ ‫الذي‬ ‫يشغله‬ ً ‫فارغا‬ ‫أما‬ ‫الطريقة‬ ‫األوىل‬ ‫ي‬ ‫تخق‬ ‫العنرص‬ ‫مع‬ ‫عدم‬ ‫الحفاظ‬ ‫عىل‬ ‫ر‬ ‫الحت‬ ‫الذي‬ ‫يشغله‬ ‫مما‬ ‫يؤثر‬ ‫عىل‬ ‫تموضع‬ ‫العناص‬ . display: none; visibility: hidden;
  • 103. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 103 ‫أنواع‬ ‫عرض‬ ‫العناصر‬ ‫يتم‬ ‫عرض‬ ‫العناص‬ ‫ي‬ ‫ف‬ HTML ‫ر‬ ‫بطريقتي‬ : ‫كتلة‬‫بشكل‬ block : ‫حيث‬ ‫يتم‬ ‫ول‬‫الت‬ ‫ا‬‫ر‬‫سط‬ ‫قبل‬ ‫العنرص‬ ‫و‬ ‫ول‬‫الت‬ ‫سطر‬ ‫بعد‬ ‫العنرص‬ ‫و‬ ‫هذه‬ ‫الحالة‬ ‫مع‬ ‫اها‬‫ر‬‫ن‬ ‫مثل‬ ‫عناص‬ <h1> ‫و‬ <p> ‫و‬ <div> ... ‫إلخ‬ . ‫سطري‬ ‫بشكل‬ inline : ‫حيث‬ ‫يتم‬ ‫وضع‬ ‫العنرص‬ ‫ضمن‬ ‫نفس‬ ‫السطر‬ ‫دون‬ ‫الحاجة‬ ‫ل‬ ‫ل‬ ‫ول‬‫ت‬ ‫س‬ ‫طر‬ ‫و‬ ‫هذه‬ ‫الحالة‬ ‫مع‬ ‫اها‬‫ر‬‫ن‬ ‫عناص‬ ‫مثل‬ <a> ‫و‬ <span> ... ‫إلخ‬ . ‫تسمح‬ CSS ‫ر‬ ‫بتغيت‬ ‫نوع‬ ‫العرض‬ ‫للعناص‬ ‫من‬ block ‫إىل‬ inline ‫و‬ ‫بالعكس‬ ‫عن‬ ‫طريق‬ ‫إسناد‬ ‫إحدى‬ ‫ر‬ ‫القيمتي‬ block ‫و‬ inline ‫إىل‬ ‫الخاصية‬ display . display: inline-block ‫قيمة‬ :‫العرض‬ ‫مضمنة‬ ‫كتلية‬ The display: inline-block Value ‫بالمقارنة‬ ‫بالنسبة‬ : inline-block :‫العرض‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ‫يتمثل‬ ، ‫تسمح‬ inline-bloc .‫العنرص‬ ‫عىل‬ ‫واالرتفاع‬ ‫العرض‬ ‫ر‬ ‫بتعيي‬ ‫مع‬ ، ‫ا‬ ً ‫أيض‬ inline-block ‫الهوامش‬ ‫ام‬ ‫ر‬ ‫احت‬ ‫يتم‬ ، / ‫والسفلية‬ ‫العلوية‬‫الحشو‬ . ‫بالمقارنة‬ block ، :‫العرض‬ ‫أن‬ ‫هو‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ‫فإن‬ inline-block ‫يضيف‬ ‫ال‬ ‫أن‬ ‫يمكن‬ ‫لذلك‬ ، ‫العنرص‬ ‫بعد‬ ‫سطر‬ ‫فاصل‬ ‫يتموضع‬ .‫األخرى‬ ‫العناص‬ ‫بجوار‬ ‫العنرص‬ :‫للعرض‬ ‫المختلف‬ ‫السلوك‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ inline ، display: inline-block and display: block:
  • 104. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 104 span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
  • 105. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 105 ‫خاصية‬ ‫التموضع‬ position ‫ال‬ ‫طريقة‬ ‫نوع‬ ‫الموضع‬ ‫خاصية‬ ‫تحدد‬ ‫ت‬ ‫أو‬ ‫(ثابت‬‫لعنرص‬ ‫المستخدمة‬ ‫موضع‬ ‫أو‬ ‫ي‬ ‫ر‬ ‫نست‬ .)‫ثابت‬ ‫أو‬ ‫مطلق‬ ‫أو‬ ‫ثابت‬ :‫للموضع‬ ‫مختلفة‬ ‫قيم‬ ‫خمس‬ ‫هناك‬ • static • relative • fixed • absolute • sticky .‫واليمت‬ ‫واليشى‬ ‫والسفلية‬ ‫العلوية‬ ‫الخصائص‬ ‫باستخدام‬ ‫العناص‬ ‫وضع‬ ‫يتم‬ ‫ثم‬ ‫أنها‬ ‫كما‬.ً ‫أوال‬ ‫الموضع‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫لم‬ ‫ما‬ ‫الخصائص‬ ‫هذه‬ ‫تعمل‬ ‫لن‬ ، ‫ذلك‬ ‫ومع‬ ‫مختل‬ ‫بشكل‬ ‫تعمل‬ .‫كز‬ ‫المر‬ ‫قيمة‬ ‫عىل‬ ً‫بناء‬ ‫ف‬
  • 106. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 106 position: static ‫ال‬ ‫وضع‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفي‬ ‫ل‬ ‫عناص‬ HTML ‫هو‬ static ‫الستاتيكس‬ . ‫العناص‬‫تتأثر‬ ‫ال‬ static ‫واليمت‬ ‫واليشى‬ ‫والسفلية‬ ‫العلوية‬ ‫بالخصائص‬ (top,bottom,right,left) . :‫للصفحة‬ ‫ي‬ ‫الطبيغ‬ ‫للتدفق‬ ‫ا‬ ً ‫وفق‬ ‫ا‬ ً‫دائم‬ ‫وضعه‬ ‫يتم‬ div.static { position: static; border: 3px solid #73AD21; } position: relative ‫ي‬ ‫ر‬ ‫نست‬ :‫موقع‬ ‫ذو‬ ‫عنرص‬ , . ‫ي‬ ‫الطبيغ‬ ‫وضعه‬ ‫إىل‬ ‫بالنسبة‬ ‫وضعه‬ ‫يتم‬ ‫موضع‬ ‫ذي‬ ‫لعنرص‬ ‫واليشى‬ ‫والسفلية‬ ‫واليمت‬ ‫العلوية‬ ‫الخصائص‬ ‫ر‬ ‫تعيي‬ ‫سيؤدي‬ ‫تعديل‬ ‫يتم‬ ‫لن‬ . ‫ي‬ ‫الطبيغ‬ ‫موضعه‬ ‫عن‬ ‫ا‬ ً ‫بعيد‬ ‫تعديله‬ ‫إىل‬ ‫ا‬ً‫نسبي‬ ‫اآلخر‬ ‫المحتوى‬ .‫العنرص‬ ‫كها‬ ‫ر‬ ‫يت‬ ‫فجوة‬ ‫أي‬ ‫ليناسب‬ ‫الخاصيتان‬ ‫د‬ ِّ ‫حد‬ ُ ‫ت‬ top ‫و‬ bottom ، ‫ي‬ ‫األصىل‬ ‫مكانه‬ ‫من‬ ‫ا‬ ً ‫انطالق‬ ‫أسية‬‫ر‬‫ال‬ ‫احة‬‫ز‬‫اإل‬ ‫الخاصيتان‬ ‫د‬ ِّ ‫حد‬ ُ ‫وت‬ left ‫و‬ right . ‫ي‬ ‫األصىل‬ ‫مكانه‬ ‫من‬ ‫ا‬ ً ‫انطالق‬ ‫األفقية‬ ‫احة‬‫ز‬‫اإل‬ div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }
  • 107. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 107 position: absolute ‫سلف‬ ‫أقرب‬ ‫إىل‬ ‫بالنسبة‬ ‫وضعه‬ ‫يتم‬ ‫مطلق‬ :‫موقع‬ ‫ذو‬ ‫عنرص‬ )‫(اب‬ ( ‫وضعه‬ ‫تم‬ ‫بقيمة‬ ‫عن‬ ‫مخالفة‬ ‫موضع‬ static ) ، ‫واال‬ ‫يستخدم‬ ‫فإنه‬ body .‫المستند‬ :‫بسيط‬ ‫مثال‬ ‫اليك‬ div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }
  • 108. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 108 position: fixed; ‫ثابت‬ :‫موضع‬ ‫ذو‬ ‫عنرص‬ , ‫العرض‬‫إطار‬ ‫إىل‬ ‫بالنسبة‬ ‫وضعه‬ ‫يتم‬ viewport ‫مما‬ ، ‫استخدام‬ ‫يتم‬ .‫الصفحة‬‫تمرير‬ ‫تم‬ ‫إذا‬ ‫ر‬ ‫حت‬ ‫المكان‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫ا‬ ً‫دائم‬ ‫يظل‬ ‫أنه‬ ‫ي‬ ‫يعت‬ .‫العنرص‬ ‫موضع‬ ‫لتحديد‬ ‫واليشى‬ ‫والسفلية‬ ‫واليمت‬ ‫العلوية‬ ‫الخصائص‬ ‫ا‬ ً ‫موجود‬ ‫يكون‬ ‫أن‬ ‫ي‬ ‫الطبيغ‬ ‫من‬ ‫حيث‬ ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫فجوة‬ ‫الثابت‬‫العنرص‬ ‫ك‬ ‫ر‬ ‫يت‬ ‫ال‬ .‫فيه‬ div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; } position: sticky ‫التموضع‬ ‫الملتصق‬ ‫من‬ ‫خليط‬ ‫هو‬ relative ‫و‬ fixed ‫ه‬ َّ ‫أن‬ ‫لو‬ ‫كما‬‫العنرص‬ ‫مع‬ ‫التعامل‬ ‫سيتم‬ relative ‫التمرير‬ ‫عند‬ ّ ‫ر‬ ‫معي‬ ‫حد‬‫تجاوز‬ ‫وبعد‬ ‫أنه‬ ‫عىل‬ ‫ل‬ َ‫عام‬ُ‫فسي‬ fixed div.sticky { position: sticky; top: 15px; } ‫الطفو‬ ‫خاصية‬ float and clear ‫خاصية‬ ‫تحدد‬ float .‫العنرص‬ ‫تعويم‬ ‫كيفية‬ ‫خاصية‬ ‫تحدد‬ clear ‫مسحه‬ ‫تم‬ ‫الذي‬‫العنرص‬ ‫بجانب‬ ‫تطفو‬ ‫أن‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ .‫جانب‬ ‫أي‬ ‫وعىل‬ ‫خاصية‬ ‫الطفو‬ ( The float Property ) ‫دع‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫وتنسيقه‬ ‫المحتوى‬ ‫موضع‬ ‫لتحديد‬ ‫الطفو‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ .‫الحاوية‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫عىل‬ ‫اليسار‬ ‫إىل‬ ‫تطفو‬ ‫الصورة‬
  • 109. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 109 ‫الخاصية‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ float :‫التالية‬ ‫القيم‬ ‫إحدى‬ ‫عىل‬ left - ‫به‬ ‫الخاصة‬ ‫الحاوية‬‫يسار‬ ‫إىل‬ ‫العنرص‬‫يطفو‬ right - ‫به‬ ‫الخاصة‬ ‫الحاوية‬ ‫ر‬ ‫يمي‬ ‫عىل‬ ‫العنرص‬‫يطفو‬ none - ‫هو‬ ‫هذا‬ .)‫فقط‬ ‫النص‬ ‫ي‬ ‫ف‬ ‫ظهوره‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫عرضه‬ ‫(سيتم‬‫العنرص‬ ‫يطفو‬ ‫ال‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ inherit - ‫العائ‬ ‫القيمة‬ ‫العنرص‬ ‫يرث‬ ‫األصل‬‫للعنرص‬ ‫مة‬ ‫حول‬ ‫النص‬ ‫اللتفاف‬‫الطفو‬ ‫خاصية‬ ‫استخدام‬ ‫يمكن‬ ، ‫لها‬ ‫استخدام‬ ‫أبسط‬ ‫ي‬ ‫ف‬ .‫الصور‬ - float: right; :‫النص‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫تطفو‬ ‫أن‬ ‫يجب‬ ‫الصورة‬ ‫أن‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحدد‬ img { float: right; } - float: left; ‫أن‬ ‫يجب‬ ‫الصورة‬ ‫أن‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحدد‬ :‫النص‬ ‫ي‬ ‫ف‬‫اليسار‬ ‫إىل‬ ‫تطفو‬
  • 110. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 110 img { float: left; } - No float ‫النص‬ ‫ي‬ ‫ف‬ ‫ظهورها‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫فقط‬ ‫الصورة‬ ‫عرض‬ ‫سيتم‬ ، ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ي‬ ‫ف‬ ( float: none :) img { float: none; }
  • 111. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 111 CSS ‫ورأسية‬ ‫أفقية‬ ‫محاذاة‬ ‫كتلة‬‫عنرص‬ ‫لتوسيط‬ block ‫ا‬ً‫أفقي‬ ) ‫استخدم‬ margin: auto ) .‫به‬ ‫الخاصة‬ ‫الحاوية‬ ‫حواف‬ ‫إىل‬ ‫التمدد‬ ‫من‬ ‫منعه‬ ‫إىل‬‫العنرص‬ ‫عرض‬ ‫ضبط‬ ‫سيؤدي‬ ‫المتبقية‬ ‫المساحة‬ ‫تقسيم‬ ‫وسيتم‬ ، ‫المحدد‬ ‫العرض‬ ‫ذلك‬ ‫بعد‬ ‫العنرص‬ ‫سيأخذ‬ : ‫ر‬ ‫الهامشي‬ ‫ر‬ ‫بي‬ ‫بالتساوي‬ .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } ‫(أو‬ ‫العرض‬ ‫خاصية‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫لم‬ ‫إذا‬ ‫ر‬ ‫تأثت‬ ‫أي‬ ‫الوسط‬ ‫إىل‬ ‫للمحاذاة‬ ‫يكون‬ ‫ال‬ :‫مالحظة‬ ‫عىل‬ ‫تعيينها‬ ‫تم‬ 100 .)٪ ‫النص‬ ‫توسيط‬ ‫استخدم‬ ، ‫فقط‬ ‫عنرص‬ ‫داخل‬ ‫النص‬ ‫لتوسيط‬ text-align: center; .center { text-align: center; border: 3px solid green; } ‫الصورة‬ ‫توسيط‬ ‫ي‬ ‫ف‬ ‫واجعله‬ ‫ي‬ ‫التلقان‬ ‫الوضع‬ ‫عىل‬ ‫واأليش‬ ‫األيمن‬ ‫الهامش‬ ‫اضبط‬ ، ‫صورة‬ ‫لتوسيط‬ :‫كتلة‬‫عنرص‬
  • 112. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 112 img { display: block; margin-left: auto; margin-right: auto; width: 40%; } ‫ولليسار‬ ‫لليمين‬ ‫محاذاة‬ - ‫الموضع‬ ‫استخدام‬ Using position ‫استخدام‬ ‫ي‬ ‫ف‬ ‫العناص‬ ‫محاذاة‬ ‫طرق‬ ‫إحدى‬ ‫تتمثل‬ position: absolute;: .right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } ‫واليسار‬ ‫ر‬ ‫لليمي‬ ‫محاذاة‬ - ‫تعويم‬ ‫استخدام‬ Using float ‫لمحاذاة‬ ‫أخرى‬ ‫طريقة‬ ‫هناك‬ ‫الطفو‬ ‫خاصية‬ ‫استخدام‬ ‫ي‬ ‫وه‬ ‫العناص‬ float : .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
  • 113. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 113 ، ‫يحتويه‬ ‫الذي‬‫العنرص‬ ‫من‬ ‫أطول‬ ‫العناص‬ ‫أحد‬ ‫كان‬‫إذا‬ :‫مالحظة‬ ، ‫تعويمه‬ ‫وتم‬ " ‫استخدام‬ ‫يمكنك‬ .‫به‬ ‫الخاصة‬ ‫الحاوية‬ ‫خارج‬ ‫تجاوزه‬ ‫فسيتم‬ clearfix" ‫إلصالح‬ .)‫أدناه‬ ‫المثال‬ ‫(انظر‬ ‫ذلك‬ The clearfix Hack ‫او‬ ‫إضافة‬ ‫يمكننا‬ overflow: auto; :‫المشكلة‬ ‫هذه‬ ‫إلصالح‬ ‫المحتوي‬ ‫العنرص‬ ‫إىل‬ .clearfix { overflow: auto; } ‫توسيط‬ ‫ا‬ً‫ي‬‫عمود‬ - ‫الحشو‬ ‫استخدام‬ ( padding ) ‫ي‬ ‫ف‬ ‫ا‬ً‫عمودي‬‫عنرص‬ ‫لتوسيط‬ ‫عديدة‬ ‫طرق‬ ‫توجد‬ CSS. ‫استخدام‬‫هو‬ ‫البسيط‬ ‫الحل‬ :‫والسفلية‬ ‫العلوية‬ ‫الحشوة‬ .center { padding: 70px 0; border: 3px solid green; }
  • 114. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 114 ‫استخدم‬ ، ‫ا‬ً‫وأفقي‬ ‫ا‬ً‫عمودي‬ ‫للتوسيط‬ padding and text-align: center: .center { padding: 70px 0; border: 3px solid green; text-align: center; } ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫الخط‬ ‫ارتفاع‬ ‫استخدام‬ Using line-height ‫خاصية‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫أخرى‬ ‫حيلة‬ line-height :‫االرتفاع‬ ‫خاصية‬ ‫تساوي‬ ‫بقيمة‬ .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* If the text has multiple lines, add the following: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
  • 115. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 115 ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫استخدام‬ position & transform ‫استخدام‬ ‫ي‬ ‫ف‬ ‫يتمثل‬ ‫آخر‬ ‫حل‬ ‫فهناك‬ ، ‫خيارين‬ ‫الخط‬ ‫وارتفاع‬ ‫الحشو‬ ‫يكن‬ ‫لم‬ ‫إذا‬ ‫الموضع‬ ‫تحديد‬ ‫خاصية‬ position ‫التحويل‬ ‫وخاصية‬ transform : .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ‫ا‬ً‫ي‬‫عمود‬ ‫توسيط‬ - ‫باستخدام‬ Flexbox ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ flexbox .‫األشياء‬ ‫لتوسيط‬ .center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }
  • 116. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 116 ‫العمودي‬ ‫التنقل‬ ‫شريط‬ ‫مثال‬ ‫خلفية‬ ‫لون‬ ‫ر‬ ‫بتغيت‬ ‫وقم‬ ‫رمادية‬ ‫خلفية‬ ‫بلون‬ ‫ي‬ ‫أساش‬ ‫عمودي‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫بإنشاء‬ ‫قم‬ :‫فوقها‬ ‫الماوس‬ ‫المستخدم‬ ‫يحرك‬ ‫عندما‬ ‫الروابط‬ ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* Change the link color on hover */ li a:hover { background-color: #555; color: white; } ‫ال‬ ‫ي‬ ‫الحال‬ / ‫النشط‬ ‫ابط‬‫ر‬ " ‫أضف‬ active " class ‫الصفحة‬ ‫بمعرفة‬ ‫للمستخدم‬ ‫للسماح‬ ‫ي‬ ‫الحاىل‬ ‫ابط‬‫ر‬‫ال‬ ‫إىل‬ :‫فيها‬ ‫يتواجد‬ ‫ي‬ ‫ر‬ ‫الت‬ .active { background-color: #4CAF50; color: white; }
  • 117. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 117 ‫الروابط‬ ‫توسيط‬ ‫حدود‬ ‫وإضافة‬ ‫إىل‬‫كز‬ ‫مر‬ :‫النص‬ ‫محاذاة‬ ‫أضف‬ <li> ‫أو‬ <a> .‫الروابط‬ ‫لتوسيط‬ ‫خاصية‬ ‫أضف‬ border ‫إىل‬ <ul> ‫تريد‬ ‫كنت‬‫إذا‬ .‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫حول‬ ‫حد‬ ‫إلضافة‬ ‫العناص‬ ‫لجميع‬ ‫ا‬ً‫سفلي‬ ‫ا‬ ً ‫حد‬ ‫فأضف‬ ، ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫داخل‬ ‫ا‬ ً ‫حدود‬ ‫ا‬ ً ‫أيض‬ <li> ، : ‫ر‬ ‫األخت‬‫العنرص‬ ‫باستثناء‬ ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; } ‫االفقي‬ ‫التجوال‬ ‫شريط‬ ‫عندما‬ ‫الروابط‬ ‫خلفية‬ ‫لون‬ ‫ر‬ ‫بتغيت‬ ‫وقم‬ ‫داكن‬ ‫خلفية‬ ‫بلون‬ ‫ا‬ً‫أفقي‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ر‬ ‫أنىس‬ :‫فوقها‬ ‫الماوس‬ ‫المستخدم‬ ‫يحرك‬ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }
  • 118. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 118 li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ li a:hover { background-color: #111; } )‫(النشط‬ ‫الحالي‬ ‫الرابط‬ ‫أضف‬ ‫صف‬ " active " ‫ي‬ ‫الحاىل‬ ‫ابط‬‫ر‬‫ال‬ ‫إىل‬ ‫للتيح‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الصفحة‬ ‫معرفة‬ ‫للمستخدم‬ :‫فيها‬ ‫يتواجد‬ .active { background-color: #4CAF50; } ‫محاذاة‬ ‫ر‬ ‫لليمي‬ ‫روابط‬ ‫قم‬ ( ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫القائمة‬ ‫عناص‬ ‫تعويم‬ ‫طريق‬ ‫عن‬ ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫الروابط‬ ‫بمحاذاة‬ float: right :) <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right"><a class="active" href="#about">About</ a></li> </ul>
  • 119. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 119 ‫الحدود‬ ‫فواصل‬ ‫خاصية‬ ‫أضف‬ border-right ‫إىل‬ <li> :‫الروابط‬ ‫فواصل‬ ‫إلنشاء‬ /* Add a gray right border to all list items, except the last item (last-child) */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; } ‫الثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫ش‬ ‫عندما‬ ‫ر‬ ‫حت‬ ، ‫الصفحة‬ ‫من‬ ‫ي‬ ‫السفىل‬‫أو‬ ‫العلوي‬ ‫الجزء‬ ‫ي‬ ‫ف‬ ‫يظل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫اجعل‬ :‫الصفحة‬ ‫بتمرير‬ ‫المستخدم‬ ‫يقوم‬ Fixed Top ul { position: fixed; top: 0; width: 100%; } Fixed Bottom ul { position: fixed; bottom: 0; width: 100%; }
  • 120. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 120 ‫الخلفيات‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫خصائص‬ ‫ستخدم‬ ُ ‫ت‬ CSS .‫للعناص‬ ‫الخلفية‬ ‫ات‬ ‫ر‬ ‫تأثت‬ ‫إلضافة‬ ‫الخلفية‬ ‫لون‬ (CSS background-color) .‫العنرص‬ ‫خلفية‬ ‫لون‬ ‫الخلفية‬ ‫لون‬ ‫خاصية‬ ‫تحدد‬ body { background-color: lightblue; } ‫باستخدام‬ CSS ، :‫بواسطة‬ ‫ا‬ً‫غالب‬ ‫اللون‬ ‫تحديد‬ ‫يتم‬ • ‫لون‬ ‫اسم‬ - "‫"أحمر‬ ‫مثل‬ • ‫قيمة‬ HEX - " ‫مثل‬ ff0000 # " • ‫قيمة‬ RGB - ‫أخرى‬ ‫عنارص‬ ‫عناص‬ ‫من‬ ‫ألي‬ ‫الخلفية‬ ‫لون‬ ‫ضبط‬ ‫يمكنك‬ HTML: h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } ‫كخلفية‬ ‫صورة‬ ‫استخدم‬ .‫لعنرص‬ ‫كخلفية‬‫الستخدامها‬ ‫صورة‬ ‫الخلفية‬ ‫صورة‬ ‫خاصية‬ ‫تحدد‬ .‫بأكمله‬ ‫العنرص‬ ‫ي‬ ‫تغط‬ ‫بحيث‬ ‫الصورة‬ ‫تتكرر‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ body { background-image: url("paper.gif"); }
  • 121. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 121 ‫خلفية‬ ‫تكرار‬ CSS ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ .‫أسية‬‫ر‬‫و‬ ‫أفقية‬ ‫صورة‬ ‫الخلفية‬ ‫صورة‬ ‫خاصية‬‫تكرر‬ : ‫ي‬ ‫كالتاىل‬، ‫غريبة‬‫ستبدو‬ ‫وإال‬ ، ‫فقط‬ ‫ا‬ً‫أسي‬‫ر‬ ‫أو‬ ‫ا‬ً‫أفقي‬ ‫تتكرر‬ ‫أن‬ ‫يجب‬ ‫الصور‬ ‫بعض‬ body { background-image: url("gradient_bg.png"); } ( ‫فقط‬ ‫ا‬ً‫أفقي‬ ‫أعاله‬ ‫الصورة‬‫ار‬‫ر‬‫تك‬ ‫تم‬ ‫إذا‬ background-repeat: repeat-x ) ، ‫ستبدو‬ :‫أفضل‬ ‫الخلفية‬ body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } ‫عدم‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫ار‬‫ر‬‫تك‬ CSS: :‫الخلفية‬‫ار‬‫ر‬‫تك‬ ‫خاصية‬ ‫بواسطة‬ ‫فقط‬ ‫واحدة‬ ‫مرة‬ ‫الخلفية‬ ‫صورة‬ ‫عرض‬ ‫تحديد‬ ‫يتم‬ body { background-image: url("img_tree.png"); background-repeat: no-repeat; } ‫موضع‬ ‫ر‬ ‫تغيت‬ ‫نريد‬ .‫النص‬ ‫مكان‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫صورة‬ ‫وضع‬ ‫يتم‬ ، ‫أعاله‬ ‫المثال‬ ‫ي‬ ‫ف‬ .‫ا‬ً ‫ر‬ ‫كثت‬‫النص‬ ‫تزعج‬ ‫ال‬ ‫بحيث‬ ، ‫الصورة‬
  • 122. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 122 ‫الخلفية‬ ‫تموضع‬ ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ background-position .‫الخلفية‬ ‫صورة‬ ‫موضع‬ ‫لتحديد‬ body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } ‫ال‬ ‫خاصية‬ ( ‫المختصرة‬ background - Shorthand property ) ، ‫الكود‬ ‫ر‬ ‫لتقصت‬ ‫خاصية‬ ‫ي‬ ‫ف‬ ‫الخلفية‬ ‫خصائص‬ ‫جميع‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫الممكن‬ ‫من‬ .‫ال‬ ‫ر‬ ‫االخت‬ ‫خاصية‬ ‫يسىم‬ ‫ما‬ ‫وهذا‬ .‫واحدة‬ :‫الكتابة‬ ‫من‬ ً ‫بدال‬ body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } ‫استخدام‬ ‫يمكنك‬ :‫ال‬ ‫ر‬ ‫االخت‬ ‫خاصية‬ body { background: #ffffff url("img_tree.png") no-repeat right top; } ‫خاصية‬ ‫استخدام‬ ‫عند‬ ‫المخترصة‬ : ‫ي‬ ‫يىل‬ ‫كما‬‫الخاصية‬ ‫قيم‬ ‫ترتيب‬ ‫يكون‬ ، background-color background-image background-repeat background-attachment background-position
  • 123. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 123 ‫الظل‬ Box Shadow ‫خاصية‬ ‫تطبق‬ CSS box-shadow .‫العناص‬ ‫عىل‬ ‫الظل‬ : ‫ي‬ ‫أش‬‫ر‬‫ال‬ ‫والظل‬ ‫ي‬ ‫ر‬ ‫األفق‬ ‫الظل‬ ‫تحديد‬ ‫فقط‬ ‫يمكنك‬ ، ‫له‬ ‫استخدام‬ ‫أبسط‬ ‫ي‬ ‫ف‬ div { box-shadow: 10px 10px; } :‫الظل‬ ‫إل‬ ‫ا‬ ً ‫لون‬ ‫أضف‬ ، ‫ذلك‬ ‫بعد‬ div { box-shadow: 10px 10px grey; } ‫ر‬ ‫تأثت‬ ‫أضف‬ ، ‫ذلك‬ ‫بعد‬ blur :‫الظل‬ ‫إىل‬ ‫تمويه‬
  • 124. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 124 ‫الحدود‬ ‫تدوير‬ CSS3 border-radius ‫الخاصية‬ ‫ستخدم‬ ُ ‫ت‬ border-radius :‫عنرص‬ ‫إىل‬ ‫مستديرة‬ ‫حدود‬ ‫إلضافة‬ p { border: 2px solid red; border-radius: 5px; } ‫واالستخدام‬ ‫التعريف‬ ‫تحدد‬ ‫خاصية‬ border-radius ‫العنرص‬ ‫زوايا‬ ‫قطر‬ ‫نصف‬ . ‫عىل‬ ‫األوىل‬ ‫(القيمة‬ .‫قيم‬ ‫ع‬‫أرب‬ ‫إىل‬ ‫واحد‬ ‫من‬ ‫عىل‬ ‫الخاصية‬ ‫هذه‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ‫والقيمة‬ ، ‫اليمت‬ ‫العلوية‬ ‫اوية‬‫ز‬‫ال‬ ‫عىل‬ ‫تنطبق‬ ‫الثانية‬ ‫والقيمة‬ ، ‫اليشى‬ ‫العلوية‬ ‫اوية‬‫ز‬‫ال‬ ‫ابعة‬‫ر‬‫ال‬ ‫والقيمة‬ ، ‫السفلية‬ ‫اليمت‬ ‫اوية‬‫ز‬‫ال‬ ‫عىل‬ ‫تنطبق‬ ‫الثالثة‬ ‫اوية‬‫ز‬‫ال‬ ‫عىل‬ ‫تنطبق‬ :)‫السفلية‬ ‫اليشى‬ border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
  • 125. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 125 ‫المرن‬ ‫الصندوق‬ CSS3- Flexbox ‫اص‬‫ز‬‫الخ‬ ‫اهم‬ ‫احد‬ ‫المرن‬ ‫الصندوق‬ ‫الثالث‬‫اإلصدار‬ ‫ي‬ ‫ف‬ ‫أضيفت‬ ‫ي‬ ‫ر‬ ‫الت‬ CSS3 ‫تخطيط‬ ‫وحدة‬ CSS Flexbox ‫وحدة‬ ‫قبل‬ Flexbox Layout :‫تخطيط‬ ‫أوضاع‬ ‫أربعة‬ ‫هناك‬ ‫كانت‬، Block ‫ويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫ألقسام‬ ، Inline ‫للنص‬ ‫مضمنة‬ Table Positioned ‫ما‬ ‫لعنرص‬ ‫واضح‬ ‫موضع‬ ‫عىل‬ ‫للحصول‬ ، ‫تخ‬ ‫هيكل‬ ‫تصميم‬ ‫المرن‬ ‫الصندوق‬ ‫تخطيط‬ ‫وحدة‬ ‫تسهل‬ ‫االستجابة‬ ‫ع‬ ‫ي‬‫رس‬ ‫طيط‬ .‫الموضع‬ ‫تحديد‬ ‫أو‬ ‫تعويم‬ ‫استخدام‬ ‫دون‬ ‫مرن‬
  • 126. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 126 ‫عناصر‬ Flexbox ‫نموذج‬ ‫استخدام‬ ‫لبدء‬ Flexbox .‫مرنة‬ ‫حاوية‬ ‫تحديد‬ ‫إىل‬ ً ‫أوال‬ ‫تحتاج‬ ، .‫مرنة‬ ‫عناص‬ ‫بثالثة‬ )‫الزرقاء‬ ‫(المنطقة‬ ‫مرنة‬ ‫حاوية‬ ‫أعاله‬ ‫العنرص‬ ‫يمثل‬ A flex container with three flex items: <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> ‫عىل‬ ‫العرض‬ ‫خاصية‬ ‫ضبط‬ ‫طريق‬ ‫عن‬ ‫مرنة‬ ‫المرنة‬ ‫الحاوية‬ ‫تصبح‬ flex : .flex-container { display: flex; } : ‫ي‬ ‫ه‬ ‫المرنة‬ ‫الحاوية‬ ‫خصائص‬ • flex-direction • flex-wrap • flex-flow • justify-content • align-items • align-content
  • 127. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 127 The flex-direction Property ‫خاصية‬ ‫تحدد‬ flex-direction .‫المرنة‬ ‫العناص‬ ‫تكديس‬ ‫الحاوية‬ ‫تريد‬ ‫اتجاه‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫قيمة‬ ‫تكدس‬ column )‫أسفل‬ ‫إىل‬ ‫أعىل‬ ‫(من‬ ‫ا‬ً‫عمودي‬ ‫المرنة‬ ‫العناص‬ : The column value stacks the flex items vertically (from top to bottom): .flex-container { display: flex; flex-direction: column; } ‫قيمة‬ ‫تقوم‬ column-reverse ‫أسفل‬ ‫من‬ ‫(ولكن‬ ‫ا‬ً‫عمودي‬ ‫المرنة‬ ‫العناص‬ ‫بتكديس‬ :)‫أعىل‬ ‫إىل‬ .flex-container { display: flex; flex-direction: column-reverse; } ‫قيمة‬ ‫تكدس‬ row :) ‫ر‬ ‫اليمي‬ ‫إىل‬‫اليسار‬ ‫(من‬ ‫ا‬ً‫أفقي‬ ‫المرنة‬ ‫العناص‬ .flex-container { display: flex; flex-direction: row; }
  • 128. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 128 ‫قيمة‬ ‫تكدس‬ row-reverse :)‫اليسار‬ ‫إىل‬ ‫ر‬ ‫اليمي‬ ‫من‬ ‫(ولكن‬ ‫ا‬ً‫أفقي‬ ‫المرنة‬ ‫العناص‬ The flex-wrap Property ‫خاصية‬ ‫تحدد‬ flex-wrap .‫ال‬ ‫أم‬ ‫المرنة‬ ‫العناص‬ ‫التفاف‬ ‫يجب‬ ‫كان‬‫إذا‬ ‫ما‬ ‫عىل‬ ‫أدناه‬ ‫األمثلة‬ ‫تحتوي‬ 12 ‫بشكل‬ ‫المرن‬ ‫االلتفاف‬ ‫خاصية‬ ‫لتوضيح‬ ، ‫ا‬ ً ‫مرن‬ ‫ا‬ً ‫عنرص‬ .‫أفضل‬ The wrap value specifies that the flex items will wrap if necessary: .flex-container { display: flex; flex-wrap: wrap; } ‫قيمة‬ ‫تحدد‬ nowrap :) ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫(هذا‬ ‫تلتف‬ ‫لن‬ ‫المرنة‬ ‫العناص‬ ‫أن‬ The nowrap value specifies that the flex items will not wrap (this is default): .flex-container { display: flex; flex-wrap: nowrap; } ‫تيب‬ ‫ر‬ ‫بت‬ ، ‫األمر‬ ‫لزم‬ ‫إذا‬ ‫ستلتف‬ ‫المرنة‬ ‫العناص‬ ‫أن‬ ‫ي‬ ‫العكىس‬ ‫االلتفاف‬ ‫قيمة‬ ‫تحدد‬ : ‫ي‬ ‫عكىس‬ .flex-container { display: flex; flex-wrap: wrap-reverse; }
  • 129. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 129 The flex-flow Property ‫خاصية‬ flex-flow .‫واللف‬ ‫االتجاه‬ ‫خصائص‬ ‫من‬ ‫كل‬‫إلعداد‬ ‫مخترصة‬ ‫خاصية‬ ‫ي‬ ‫ه‬ .flex-container { display: flex; flex-flow: row wrap; } The justify-content Property ‫خاصية‬ ‫ستخدم‬ ُ ‫ت‬ justify-content :‫المرنة‬ ‫العناص‬ ‫لمحاذاة‬ .flex-container { display: flex; justify-content: center; } ‫قيمة‬ ‫تقوم‬ flex-start ‫العناص‬ ‫بمحاذاة‬ ‫المرنة‬ ‫(هذا‬ ‫الحاوية‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫المرنة‬ :) ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ .flex-container { display: flex; justify-content: flex-start; }
  • 130. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 130 ‫قيمة‬ ‫تقوم‬ flex-end :‫الحاوية‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫المرنة‬ ‫العناص‬ ‫بمحاذاة‬ ‫المرن‬ .flex-container { display: flex; justify-content: flex-end; } The align-items Property .‫المرنة‬ ‫العناص‬ ‫لمحاذاة‬ ‫العناص‬ ‫محاذاة‬ ‫خاصية‬ ‫استخدام‬ ‫يتم‬ ‫بارتفاع‬ ‫حاوية‬ ‫نستخدم‬ ، ‫األمثلة‬ ‫هذه‬ ‫ي‬ ‫ف‬ 200 ‫محاذاة‬ ‫خاصية‬ ‫لتوضيح‬ ، ‫بكسل‬ .‫أفضل‬ ‫بشكل‬ ‫العناص‬ ‫قيمة‬ ‫تقوم‬ center :‫الحاوية‬ ‫منتصف‬ ‫ي‬ ‫ف‬ ‫المرنة‬ ‫العناص‬ ‫بمحاذاة‬ ‫كز‬ ‫المر‬ .flex-container { display: flex; height: 200px; align-items: center; } ‫قيمة‬ ‫تعمل‬ flex-start :‫الحاوية‬ ‫أعىل‬ ‫المرنة‬ ‫العناص‬ ‫محاذاة‬ ‫عىل‬ ‫المرنة‬ The flex-start value aligns the flex items at the top of the container: .flex-container { display: flex; height: 200px; align-items: flex-start; } CSS Flex Responsive ‫يمكن‬ ‫الشاشات‬ ‫ألحجام‬ ‫مختلفة‬ ‫تخطيطات‬ ‫إلنشاء‬ ‫الوسائط‬ ‫استعالمات‬ ‫استخدام‬ .‫المختلفة‬ ‫واألجهزة‬ ، ‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫أحجام‬ ‫لمعظم‬ ‫عمودين‬ ‫من‬ ‫تخطيط‬ ‫إنشاء‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫الهواتف‬ ‫(مثل‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الشاشات‬ ‫ألحجام‬ ‫واحد‬ ‫عمود‬ ‫من‬ ‫وتخطيط‬ ، ‫الشاشات‬ ‫نقطة‬ ‫عند‬ ‫عمود‬ ‫إىل‬ ‫صف‬ ‫من‬ ‫المرن‬ ‫االتجاه‬ ‫ر‬ ‫تغيت‬ ‫فيمكنك‬ ، )‫اللوحية‬ ‫واألجهزة‬ ( ‫توقف‬ 800 :)‫أدناه‬ ‫المثال‬ ‫ي‬ ‫ف‬ ‫بكسل‬
  • 131. CSS ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 131 .flex-container { display: flex; flex-direction: row; } @media (max-width: 800px) { .flex-container { flex-direction: column; } } ‫المرنة‬ ‫للعناص‬ ‫المرنة‬ ‫للخاصية‬ ‫المئوية‬ ‫النسبة‬ ‫ر‬ ‫تغيت‬ ‫ي‬ ‫وه‬ ‫أخرى‬ ‫طريقة‬ ‫هناك‬ ‫ا‬ ً ‫أيض‬ ‫علينا‬ ‫ر‬ ‫يتعي‬ ‫أنه‬ ‫الحظ‬ .‫مختلفة‬ ‫شاشات‬ ‫ألحجام‬ ‫مختلفة‬ ‫تخطيطات‬ ‫إلنشاء‬ ‫ر‬ ‫تضمي‬ flex-wrap: wrap :‫المثال‬ ‫هذا‬ ‫يعمل‬ ‫ي‬ ‫لك‬ ‫المرنة‬ ‫الحاوية‬ ‫عىل‬ .flex-container { display: flex; flex-wrap: wrap; } .flex-item-left { flex: 50%; } .flex-item-right { flex: 50%; } @media (max-width: 800px) { .flex-item-right, .flex-item-left { flex: 100%; } }
  • 133. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 133 Bootstrap 4 ‫يعد‬ Bootstrap 4 ‫من‬ ‫إصدار‬ ‫ات‬‫ر‬‫اصدا‬ Bootstrap ‫عمل‬‫إطار‬ ‫ر‬ ‫أكت‬ ‫وهو‬ ، HTML ‫و‬ CSS ‫و‬ JavaScript ‫الويب‬ ‫مواقع‬ ‫لتطوير‬ ‫ا‬ ً ‫شيوع‬ ‫المتجاوبة‬ .‫المحمولة‬ ‫األجهزة‬ ‫مع‬ ‫والمتوافقة‬ Bootstrap 4 !‫واالستخدام‬ ‫يل‬‫للتت‬ ‫ا‬ ً‫تمام‬ ‫ي‬ ‫مجان‬ ‫مع‬ ‫ابدأ‬ Bootstrap 4 : ‫هو‬ ‫ما‬ Bootstrap ‫؟‬ Bootstrap ‫عمل‬‫إطار‬‫هو‬ ‫للواجه‬ ‫ي‬ ‫مجان‬ ‫ات‬ ‫وأسهل‬ ‫ع‬ ‫أرس‬ ‫بشكل‬ ‫الويب‬‫لتطوير‬ ‫األمامية‬ ‫يتضمن‬ Bootstrap ‫إىل‬ ‫تستند‬ ‫تصميم‬ ‫قوالب‬ HTML ‫و‬ CSS ‫ل‬ ، ‫والتنقل‬ ، ‫والجداول‬ ،‫ار‬‫ر‬‫واألز‬ ، ‫لنماذج‬ ‫مكونات‬ ‫إىل‬ ‫باإلضافة‬ ، ‫األخرى‬ ‫المكونات‬ ‫من‬ ‫والعديد‬ ، ‫والنماذج‬ JavaScript ‫االختيارية‬ ‫اإلضافية‬ ‫يمنحك‬ Bootstrap ‫تصميمات‬ ‫إنشاء‬ ‫عىل‬ ‫القدرة‬ ‫ا‬ ً ‫أيض‬ ‫متجاوبة‬ ‫بسهولة‬ ‫الويب‬ ‫تصميم‬‫هو‬ ‫ما‬ ‫المتجاوبة‬ ‫؟‬ ‫الويب‬ ‫تصميم‬ ‫يتعلق‬ ‫المتجاوبة‬ ‫من‬ ، ‫األجهزة‬ ‫جميع‬ ‫عىل‬ ‫جيدة‬ ‫لتبدو‬ ‫ا‬ً‫تلقائي‬ ‫نفسها‬ ‫تضبط‬ ‫ويب‬ ‫مواقع‬ ‫بإنشاء‬ .‫ة‬ ‫ر‬ ‫الكبت‬ ‫المكتبية‬‫الكمبيوتر‬ ‫أجهزة‬ ‫إىل‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الهواتف‬ • ‫ايا‬‫ز‬‫م‬ Bootstrap : o ‫ب‬ ‫فقط‬ ‫أساسية‬ ‫معرفة‬ ‫لديه‬ ‫شخص‬ ‫ألي‬ ‫يمكن‬ :‫االستخدام‬ ‫سهل‬ HTML ‫و‬ CSS ‫استخدام‬ ‫ي‬ ‫ف‬ ‫البدء‬ Bootstrap o :‫المتجاوبة‬ ‫ات‬ ‫ر‬ ‫المت‬ ‫ي‬ ‫تكيف‬ Bootstrap ‫المكتب‬ ‫سطح‬ ‫وأجهزة‬ ‫اللوحية‬ ‫واألجهزة‬ ‫الهواتف‬ ‫مع‬ o ‫ي‬ ‫ف‬ :ً ‫أوال‬ ‫الجوال‬ ‫نهج‬ Bootstrap ‫تعد‬ ، ‫نهج‬ ‫األساسي‬ ‫العمل‬‫إطار‬ ‫من‬ ‫ا‬ً‫جزء‬ ً ‫أوال‬ ‫الجوال‬ ‫ة‬ o :‫المتصفح‬ ‫توافق‬ Bootstrap 4 ( ‫الحديثة‬ ‫المتصفحات‬ ‫جميع‬ ‫مع‬ ‫متوافق‬ Chrome ‫و‬ Firefox ‫و‬ Internet Explorer 10 ‫و‬ + Edge ‫و‬ Safari ‫و‬ Opera )
  • 134. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 134 ‫على‬ ‫تحصل‬ ‫أين‬ ‫من‬ Bootstrap 4 ‫؟‬ ‫استخدام‬ ‫لبدء‬ ‫طريقتان‬ ‫هناك‬ Bootstrap 4 ‫صفحات‬ ‫ي‬ ‫ف‬ ‫الخا‬ ‫الويب‬ .‫بك‬ ‫ص‬ 1 . ‫ر‬ ‫بتضمي‬ ‫قم‬ Bootstrap 4 ‫من‬ CDN 2 . ‫يل‬‫بتت‬ ‫قم‬ Bootstrap 4 ‫من‬ getbootstrap.com Bootstrap 4 CDN ‫يل‬‫تت‬ ‫تريد‬ ‫ال‬ ‫كنت‬‫إذا‬ Bootstrap 4 ‫واستضافته‬ ،‫بنفسك‬ ‫من‬ ‫تضمينه‬ ‫فيمكنك‬ CDN ‫توصيل‬ ‫(شبكة‬ .)‫المحتوى‬ ‫يوفر‬ MaxCDN ‫دعم‬ CDN ‫من‬ ‫لكل‬ Bootstrap's CSS ‫و‬ JavaScript ‫ر‬ ‫تضمي‬ ‫ا‬ ً ‫أيض‬ ‫عليك‬ ‫يجب‬ . jQuery : MaxCDN : <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5. 2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min. js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/po pper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.m in.js"></script> ‫استخدام‬ ‫ايا‬‫ز‬‫م‬ Bootstrap 4 CDN : ‫ي‬ ‫عندمت‬ ‫ق‬ ‫و‬ ‫يل‬‫بتت‬ ‫بالفعل‬ ‫ر‬ ‫المستخدمي‬ ‫من‬ ‫العديد‬ ‫م‬ Bootstrap 4 ‫من‬ MaxCDN .‫آخر‬ ‫موقع‬ ‫زيارة‬ ‫عند‬ ، ‫ا‬ ً ‫أيض‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫يؤدي‬ ‫مما‬ ، ‫موقعك‬ ‫يزورون‬ ‫عندما‬ ‫المؤقت‬ ‫التخزين‬ ‫ذاكرة‬ ‫من‬ ‫تحميله‬ ‫سيتم‬ ‫شبكات‬ ‫معظم‬ ‫ستتأكد‬ CDN ‫األقرب‬ ‫الخادم‬ ‫من‬ ‫تقديمه‬ ‫سيتم‬ ، ‫منه‬ ‫ا‬ ً ‫ملف‬ ‫المستخدم‬ ‫يطلب‬ ‫أن‬ ‫بمجرد‬ ‫أنه‬ ‫من‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ ‫يؤدي‬ ‫مما‬ ، ‫إليهم‬ ‫تنز‬ ‫يل‬ Bootstrap 4 ‫يل‬‫تت‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫كنت‬‫إذا‬ Bootstrap 4 ‫إىل‬ ‫فانتقل‬ ، ‫بنفسك‬ ‫واستضافته‬ https://getbootstrap.com / .‫هناك‬ ‫الموجودة‬ ‫التعليمات‬ ‫واتبع‬ ‫باستخدام‬ ‫ويب‬ ‫صفحة‬ ‫أول‬ ‫إنشاء‬ Bootstrap 4 1 ‫مستند‬ ‫أضف‬ . HTML5
  • 135. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 135 ‫مستند‬ ‫نوع‬ ‫ر‬ ‫بتضمي‬ ‫قم‬ HTML5 ‫مع‬ ‫جنب‬ ‫إىل‬ ‫ا‬ً‫جنب‬ ، ‫الصفحة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫ال‬ ‫خاصية‬ lang ‫األحرف‬ ‫ومجموعة‬ :‫الصحيحة‬ <!DOCTYPE html> <html lang="en"> > head < > 8" - ="utf charset meta < > /head < </html> 2 ‫يعد‬ . Bootstrap 4 ً ‫أوال‬ ‫ال‬ ّ ‫الجو‬ ‫هو‬ ‫تصميم‬ ‫تم‬ Bootstrap 4 .‫المحمولة‬ ‫لألجهزة‬ ‫ا‬ً‫مستجيب‬ ‫ليكون‬ ‫ي‬ ‫عد‬ ‫نهج‬ ‫العمل‬‫إطار‬ ‫من‬ ‫ا‬ً‫جزء‬ ً ‫أوال‬ ‫الجوال‬ . ‫ي‬ ‫األساش‬ ‫ر‬ ‫والتكبت‬ ‫الصحيح‬ ‫العرض‬ ‫لضمان‬ ،‫باللمس‬ < ‫عالمة‬ ‫أضف‬ meta < ‫عنرص‬ ‫داخل‬ ‫التالية‬ > head :> > scale=1" - width, initial - ="width=device content ="viewport" name meta < (‫الجهاز‬ ‫شاشة‬ ‫عرض‬ ‫لمتابعة‬ ‫الصفحة‬ ‫عرض‬‫الجهاز‬ ‫عرض‬ ‫جزء‬ = ‫العرض‬ ‫يحدد‬ ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ‫سيختلف‬ ‫والذي‬ .)‫الجهاز‬ .‫المستعرض‬ ‫بواسطة‬ ‫مرة‬ ‫ألول‬ ‫الصفحة‬ ‫تحميل‬ ‫عند‬ ‫ي‬ ‫األوىل‬ ‫ر‬ ‫التكبت‬ ‫مستوى‬ ‫واحد‬ ‫جزء‬ = ‫ي‬ ‫األوىل‬ ‫المقياس‬ ّ ‫ر‬ ‫يعي‬ 3 . ‫اكود‬ ‫ر‬ ‫تضمي‬ Bootstrap ‫ر‬ ‫بتضمي‬ ‫قم‬ Bootstrap ‫من‬ CDN ً ‫محليا‬ ‫الملفات‬ ‫يل‬‫بتت‬ ‫قم‬ ‫او‬ .
  • 136. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 136 Containers ‫الحاويات‬ ‫الحاويات‬ ‫من‬ ‫متاحتان‬ ‫فئتان‬ ‫وهناك‬ ، ‫بداخلها‬ ‫المحتوى‬ ‫لتغليف‬ ‫الحاويات‬ ‫ستخدم‬ ُ ‫ت‬ : • ‫الصف‬‫يوفر‬ .container ‫ثابتة‬ ‫عرض‬ ‫حاوية‬ ‫متجاوبة‬ • . ‫الصف‬‫يوفر‬ container-fluid ‫حاوية‬ ‫عرض‬ ‫العرض‬‫إلطار‬ ‫الكامل‬ ‫العرض‬ ‫ي‬ ‫تغط‬ ، ‫كاملة‬ ‫ثابتة‬ ‫حاوية‬ ‫استخدم‬ ‫ال‬ ‫صف‬ .container ‫حاوية‬ ‫إلنشاء‬ ‫متجاوبة‬ .‫ثابت‬ ‫عرض‬ ‫ذات‬ :‫المختلفة‬ ‫الشاشة‬ ‫ألحجام‬ ‫ا‬ ً ‫وفق‬ ‫ر‬ ‫سيتغت‬ )‫للعرض‬ ‫األقص‬ ‫(الحد‬ ‫عرضه‬ ‫أن‬ ‫الحظ‬ <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> : ‫المرنة‬ ‫الحاوية‬ ‫استخدم‬ ‫صف‬ .container-fluid ‫بالكامل‬ ‫الشاشة‬ ‫بعرض‬ ‫ا‬ ً‫دائم‬ ‫ستمتد‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫العرض‬ ‫كاملة‬‫حاوية‬ ‫إلنشاء‬ ‫ا‬ ً‫دائم‬ ‫العرض‬ ‫(يكون‬ 100 :)٪ <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> ‫الحاوية‬ ‫حشو‬ Padding ‫حشوة‬ ‫عىل‬ ‫الحاويات‬ ‫تحتوي‬ ‫يس‬ ‫ا‬ ‫ر‬ ‫ي‬ ‫ويم‬ ‫ي‬ ‫يت‬ 15 ‫بكسل‬ ً ‫اضيا‬ ‫ر‬ ‫افت‬ . ‫ي‬ ‫سفىل‬ ‫أو‬ ‫علوي‬ ‫حشوة‬ ‫وجود‬ ‫عدم‬ ‫مع‬ ، ،‫لذلك‬ ‫مساعدة‬ ‫أدوات‬ ‫نستخدم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ،‫للمسافات‬ ‫عىل‬ .‫أفضل‬ ‫تبدو‬ ‫لجعلها‬ ‫والهوامش‬ ‫ي‬ ‫اإلضاف‬ ‫الحشو‬ ‫مثل‬ . ‫ي‬ ‫تعت‬ ، ‫المثال‬ ‫سبيل‬ pt-3 ‫تبلغ‬ ‫علوية‬ ‫وكة‬ ‫ر‬ ‫مت‬ ‫مساحة‬ ‫"إضافة‬ 16 :"‫بكسل‬ <div class="container pt-3"></div> ‫للحاوية‬ ‫حدود‬ ‫و‬ ‫الوان‬ ‫المساعدة‬ ‫األدوات‬ ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫غالب‬ ،‫األخرى‬ ‫الحدود‬ ‫مثل‬ ،‫واأللوان‬ :‫الحاويات‬ ‫مع‬
  • 137. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 137 <div class="container p-3 my-3 border"></div> <div class="container p-3 my-3 bg-dark text-white"></div> <div class="container p-3 my-3 bg-primary text-white"></div> ‫المتجاوبة‬ ‫الحاوية‬ ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ ‫الصفوف‬ .container-sm | md | lg | xl ‫حاويات‬ ‫إلنشاء‬ ‫متجاوبة‬ . ‫عىل‬ ‫الحاوية‬ ‫لعرض‬ ‫األقص‬ ‫الحد‬ ‫ر‬ ‫سيتغت‬ :‫المختلفة‬ ‫العرض‬ ‫منافذ‬ / ‫الشاشة‬ ‫أحجام‬ <div class="container-sm">.container-sm</div> <div class="container-md">.container-md</div> <div class="container-lg">.container-lg</div> <div class="container-xl">.container-xl</div>
  • 138. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 138 ‫في‬ ‫الشبكي‬ ‫النظام‬ Bootstrap 4 ‫شبكة‬ ‫نظام‬ ‫إنشاء‬ ‫تم‬ ‫ي‬ ‫ف‬ Bootstrap ‫باستخدام‬ flexbox ‫ويسمح‬ ‫ب‬ 12 .‫الصفحة‬ ‫ر‬ ‫عت‬ ‫ا‬ ً ‫عمود‬ :‫أوسع‬ ‫أعمدة‬ ‫إلنشاء‬ ‫ا‬ ً‫مع‬ ‫األعمدة‬ ‫تجميع‬ ‫يمكنك‬ ، ‫فردي‬ ‫بشكل‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫االثت‬ ‫األعمدة‬ ‫استخدام‬ ‫تريد‬ ‫ال‬ ‫كنت‬‫إذا‬ ‫إىل‬ ‫يصل‬ ‫المجموع‬ ‫أن‬ ‫من‬ ‫تأكد‬ 12 ‫أقل‬ ‫أو‬ ‫ال‬ ‫األعمدة‬ ‫جميع‬ ‫تستخدم‬ ‫أن‬ ‫ا‬ً‫مطلوب‬ ‫(ليس‬ 12 .)‫المتوفرة‬ ‫الشبكة‬ ‫صفوف‬ ‫شبكة‬ ‫نظام‬ ‫يتكون‬ Bootstrap 4 ‫خمس‬ ‫من‬ ‫الصفوف‬ : col - ‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫(أجهزة‬ - ‫من‬ ‫أقل‬ ‫الشاشة‬ ‫عرض‬ 576 )‫بكسل‬ .col-sm - ‫ة‬ ‫ر‬ ‫الصغت‬ ‫(األجهزة‬ - ‫عن‬ ‫يزيد‬ ‫أو‬ ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 576 )‫بكسل‬ .col-md - ‫المتوسطة‬ ‫(األجهزة‬ - ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 768 ) ‫ر‬ ‫أكت‬ ‫أو‬ ‫بكسل‬ .col-lg - ‫ة‬ ‫ر‬ ‫الكبت‬ ‫(األجهزة‬ - ‫عن‬ ‫يزيد‬ ‫أو‬ ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 992 )‫بكسل‬ .col-xl - ‫(أجهزة‬ xlarge - ‫يساوي‬ ‫الشاشة‬ ‫عرض‬ 1200 )‫منها‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫بكسل‬ ‫دمج‬ ‫يمكن‬ ‫ال‬ ‫صفوف‬ .‫ومرونة‬ ‫ديناميكية‬ ‫ر‬ ‫أكت‬ ‫تخطيطات‬ ‫إلنشاء‬ ‫أعاله‬ ‫متساوية‬ ‫أعمدة‬ ‫ثالث‬ ‫عمل‬ <div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
  • 139. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 139 Responsive Columns ‫أسطح‬ ‫إىل‬ ‫والتحجيم‬ ‫اللوحية‬ ‫األجهزة‬ ‫من‬ ‫ا‬ً‫بدء‬ ‫العرض‬ ‫متساوية‬ ‫أعمدة‬ ‫أربعة‬ ‫إنشاء‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫عن‬ ‫عرضها‬ ‫يقل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الشاشات‬ ‫أو‬ ‫المحمولة‬ ‫الهواتف‬ ‫عىل‬ .‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫المكتب‬ 576 ‫األعمدة‬ ‫اكم‬ ‫ر‬ ‫ستت‬ ، ‫بكسل‬ :‫ا‬ً‫تلقائي‬ ‫بعضها‬ ‫فوق‬ <div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> ‫أجهزة‬ ‫ي‬ ‫ف‬ ‫والتوسع‬ ‫اللوحية‬ ‫األجهزة‬ ‫من‬ ‫ا‬ً‫بدء‬ ‫العرض‬ ‫ر‬ ‫متنوعي‬ ‫عمودين‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫سطح‬ :‫ة‬ ‫ر‬ ‫الكبت‬ ‫اإلضافية‬ ‫المكتب‬ <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
  • 140. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 140 Bootstrap ‫الفقرات‬/‫النصوص‬ ‫يستخدم‬ Bootstrap 4 ‫يبلغ‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫خط‬ ‫حجم‬ 16 ‫خطه‬ ‫ارتفاع‬ ‫ويبلغ‬ ، ‫بكسل‬ 1.5 . ‫الخطوط‬ ‫مجموعة‬ " ‫ي‬ ‫ه‬ ‫اضية‬ ‫ر‬ ‫االفت‬ Helvetica Neue ‫و‬ " Helvetica ‫و‬ Arial ‫و‬ sans-serif . < ‫عناص‬ ‫جميع‬ ‫تحتوي‬ ، ‫ذلك‬ ‫إىل‬ ‫باإلضافة‬ p ‫عىل‬ > margin-top: 0 ‫و‬ margin-bottom: 1rem ‫ا‬ً‫اضي‬ ‫ر‬ ‫(افت‬ 16 .)‫بكسل‬ Bootstrap 4 ‫عناوين‬ ‫أنماط‬ HTML < ‫(من‬ h1 < ‫إىل‬ > h6 : ‫ر‬ ‫أكت‬ ‫خط‬ ‫وحجم‬ ‫ر‬ ‫أكت‬ ‫خط‬ ‫وزن‬ ‫مع‬ )> h1 Bootstrap heading (2.5rem = 40px) h2 Bootstrap heading (2rem = 32px) h3 Bootstrap heading (1.75rem = 28px) h4 Bootstrap heading (1.5rem = 24px) h5 Bootstrap heading (1.25rem = 20px) h6 Bootstrap heading (1rem = 16px) Display Headings ‫ستخدم‬ ُ ‫ت‬ ‫ع‬‫أرب‬ ‫وهناك‬ ، )‫أخف‬ ‫خط‬ ‫ووزن‬ ‫ر‬ ‫أكت‬ ‫خط‬ ‫(حجم‬ ‫العادية‬ ‫العناوين‬ ‫من‬ ‫ر‬ ‫أكت‬‫ز‬ ‫ر‬ ‫لتت‬ ‫العرض‬ ‫عناوين‬ ‫الصفوف‬ . :‫بينها‬ ‫من‬ ‫لالختيار‬ display-1 ، .display-2 ، .display-3 ، .display- 4 <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> ‫ي‬ ‫ف‬ Bootstrap 4 < ‫عنرص‬ ‫استخدام‬ ‫يتم‬ ، small ‫ي‬ ‫ف‬ > HTML :‫عنوان‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫ثانوي‬ ‫نص‬ ‫إلنشاء‬ <h3> Fancy display heading <small class="text-muted">With faded secondary text</small> </h3>
  • 141. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 141 ‫في‬ ‫األلوان‬ Bootstrap ‫النصوص‬ ‫الوان‬ ‫صفوف‬ : ‫ي‬ ‫ه‬ ‫النص‬ ‫ألوان‬ .text-primary , .text-secondary , .text-success , .text-danger , .text- warning , .text-info , .text-light , .text-dark , .text-muted , .text- white <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> ‫الخلفية‬ ‫الوان‬ ‫صفوف‬ : ‫ي‬ ‫ه‬ ‫الخلفية‬ ‫ألوان‬ <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
  • 142. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 142 ‫في‬ ‫الجداول‬ Bootstrap ‫جدول‬ ‫يحتوي‬ Bootstrap 4 ‫حشو‬ ‫عىل‬ ‫ي‬ ‫األساش‬ ‫خفيف‬ .‫أفقية‬ ‫وفواصل‬ ‫تضيف‬ ‫الصف‬ .table :‫الجدول‬ ‫إىل‬ ‫ا‬ً‫أساسي‬ ‫ا‬ ً ‫نمط‬ ‫الحدود‬ ‫ذات‬ ‫الجداول‬ ‫تضيف‬ ‫الصف‬ .table-bordered ‫ًا‬‫د‬‫حدو‬ ‫على‬ ‫جميع‬ ‫جوانب‬ ‫الجدول‬ ‫والخاليا‬ :
  • 143. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 143 ‫المرور‬ ‫بحدث‬ ‫االسطر‬ ‫تاثر‬ Hover ‫تضيف‬ ‫الصف‬ . table-hover ‫تأثير‬ ‫التمرير‬ ( ‫لون‬ ‫الخلفية‬ ‫الرمادي‬ ) ‫على‬ ‫صفوف‬ ‫الجدول‬ : ‫المعتمة‬ ‫الجداول‬ ‫تضيف‬ ‫الصف‬ . table-dark ‫خلفية‬ ‫سوداء‬ ‫إلى‬ ‫الجدول‬ : ‫المخططة‬ ‫الجداول‬ ‫اجمع‬ ‫بين‬ . table-dark ‫و‬ . table-striped ‫إلنشاء‬ ‫جدول‬ ‫مخطط‬ ‫وفاتح‬ ‫داكن‬ : ‫السياق‬ ‫ذات‬ ‫الصفوف‬ ‫يمكن‬ ‫استخدام‬ ‫ال‬ ‫صفوف‬ ‫تابعة‬ ‫للسياق‬ ‫لتلوين‬ ‫الجدول‬ ‫بأكمله‬ <( table )> ، ‫أو‬ ‫صفوف‬ ‫الجدول‬ <( tr )> ‫أو‬ ‫خاليا‬ ‫الجدول‬ <( td .)> <!-- On rows --> <tr class="table-active">...</tr> <tr class="table-primary">...</tr> <tr class="table-secondary">...</tr> <tr class="table-success">...</tr> <tr class="table-danger">...</tr> <tr class="table-warning">...</tr> <tr class="table-info">...</tr> <tr class="table-light">...</tr>
  • 144. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 144 <tr class="table-dark">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="table-active">...</td> <td class="table-primary">...</td> <td class="table-secondary">...</td> <td class="table-success">...</td> <td class="table-danger">...</td> <td class="table-warning">...</td> <td class="table-info">...</td> <td class="table-light">...</td> <td class="table-dark">...</td> </tr>
  • 145. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 145 ‫المتجاوبة‬ ‫الجداول‬ ‫تضيف‬ ‫الصف‬ . table-responsive ‫شريط‬ ‫تمرير‬ ‫إلى‬ ‫الجدول‬ ‫عند‬ ‫الحاجة‬ ( ‫عندما‬ ‫يكون‬ ‫ا‬ً‫كبير‬ ‫ًا‬‫د‬‫ج‬ ‫ًا‬‫ي‬‫أفق‬ :) ‫اذا‬ ‫الصف‬ ‫اسنخدام‬ ‫يمكنك‬ ‫معينة‬ ‫نقطة‬ ‫عند‬ ‫متجاوب‬ ‫الجدول‬ ‫يصبح‬ ‫ان‬ ‫اردت‬ .table-responsive{-sm|-md|-lg|-xl} <div class="table-responsive-sm"> <table class="table"> ... </table> </div> ‫في‬ ‫الصور‬ Bootstrap ‫منحنية‬ ‫الزوايا‬ ‫تضيف‬ ‫الصف‬ .rounded ‫زوايا‬ ‫مستديرة‬ ‫للصورة‬ : <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
  • 146. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 146 ‫مستديرة‬ ‫زوايا‬ ‫تشكل‬ ‫الصف‬ ‫الدائرة‬ ‫الدائرية‬ ‫الصورة‬ ‫على‬ ‫شكل‬ ‫دائرة‬ : <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> ‫المصغرة‬ ‫الصورة‬ Thumbnail ‫تشكل‬ ‫الصف‬ ‫الصور‬ ‫المصغرة‬ . img ‫الصورة‬ ‫في‬ ‫صورة‬ ‫مصغرة‬ ( ‫بحدود‬ :) <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> ‫المتجاوبة‬ ‫الصورة‬ .‫الشاشة‬ ‫حجم‬ ‫لتناسب‬ ‫ا‬ً‫تلقائي‬ ‫المتجاوبة‬‫الصور‬ ‫ضبط‬ ‫يتم‬ .‫الشاشات‬ ‫وكذلك‬ .‫األحجام‬ ‫بجميع‬ ‫ي‬ ‫ر‬ ‫تأن‬ ‫الصور‬ ‫ا‬ ً ‫صور‬ ‫ر‬ ‫أنىس‬ ‫متجاوبة‬ ‫إضافة‬ ‫طريق‬ ‫عن‬ ‫الصف‬ . img-fluid < ‫عالمة‬ ‫إىل‬ img ‫حجم‬ ‫ر‬ ‫تغيت‬ ‫ذلك‬ ‫بعد‬ ‫سيتم‬ .> . ‫ي‬ ‫األصىل‬ ‫العنرص‬ ‫مع‬ ‫جيد‬ ‫بشكل‬ ‫الصورة‬ ‫الصف‬ img-fluid . :‫عرض‬ ‫أقص‬ ‫تطبق‬ 100 :‫الصورة‬ ‫عىل‬ ‫ي‬ ‫تلقان‬ :‫واالرتفاع‬ ٪ <img class="img-fluid" src="img_chania.jpg" alt="Chania">
  • 147. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 147 Bootstrap 4 Jumbotron ‫ر‬ ‫يشت‬ jumbotron ‫ر‬ ‫كبت‬‫رمادي‬ ‫صندوق‬ ‫إىل‬ ‫ي‬ ‫بعط‬ ‫من‬ ‫مزيد‬ ‫االهمية‬ .‫الخاصة‬ ‫المعلومات‬ ‫أو‬ ‫المحتويات‬ ‫لبعض‬ < ‫عنرص‬ ‫استخدم‬ div ‫مع‬ > class .jumbotron ‫إلنشاء‬ jumbotron : <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS...</p> </div> ‫التنبيه‬ ‫رسائل‬ Alerts ‫يوفر‬ Bootstrap 4 :‫ا‬ ً ‫مسبق‬ ‫محددة‬ ‫تنبيه‬ ‫رسائل‬ ‫إلنشاء‬ ‫سهلة‬ ‫طريقة‬ ‫باستخدام‬ ‫التنبيهات‬ ‫إنشاء‬ ‫يتم‬ ‫الصف‬ . alert ‫بأحد‬ ‫متبوعة‬ ، ‫ال‬ ‫صفوف‬ ‫السياقية‬ . alert-Success . ‫و‬ alert-info . ‫و‬ alert-warning . ‫و‬ alert-danger ‫و‬ . alert-Primary . ‫و‬ alert-Secondary . ‫و‬ alert-light . ‫أو‬ alert-dark : <div class="alert alert-success"> <strong>Success!</strong> Indicates a successful or positive action. </div> ‫أضف‬ ‫الصف‬ alert-link ‫ملونة‬ ‫"روابط‬ ‫إلنشاء‬ ‫التنبيه‬ ‫ع‬‫مرب‬ ‫داخل‬ ‫روابط‬ ‫أي‬ ‫إىل‬ :"‫متطابقة‬ <div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>
  • 148. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 148 ‫رسالة‬ ‫إلغالق‬ ،‫التنبيه‬ ‫فوق‬ ‫النقر‬ ‫عند‬ ‫االغالق‬ ‫زر‬ ‫التنبيه‬ ‫ع‬‫مرب‬ ‫ي‬ ‫سيختق‬ <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Success!</strong> Indicates a successful or positive action. </div>
  • 149. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 149 ‫ازرار‬ Bootstrap Button Styles <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> ‫استخدام‬ ‫يمكن‬ ‫الصفوف‬ < ‫عناص‬ ‫ي‬ ‫ف‬ ‫ار‬‫ر‬‫األز‬ a < ‫أو‬ > button < ‫أو‬ > input :> <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> ‫حدود‬ ‫ذات‬ ‫أزرار‬ ‫يوفر‬ Bootstrap 4 :‫حدود‬ / ‫خارجية‬ ‫ار‬‫ر‬‫أز‬ ‫ثمانية‬ <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button>
  • 150. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 150 ‫الزر‬ ‫حجم‬ ‫استخدم‬ ‫الصف‬ . btn-lg ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫ار‬‫ر‬‫لألز‬ ‫الصف‬ . btn-sm :‫ة‬ ‫ر‬ ‫الصغت‬ ‫ار‬‫ر‬‫لألز‬ <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button> ‫كتلة‬‫كعنرص‬‫الزر‬ ‫جعل‬ Block ‫بإضافة‬ ‫قم‬ .btn-block .‫بالكامل‬ ‫ي‬ ‫األصىل‬ ‫العنرص‬ ‫بعرض‬ ‫يمتد‬ ‫الذي‬ ‫الكتلة‬ ‫مستوى‬ ‫زر‬ ‫إلنشاء‬ <button type="button" class="btn btn-primary btn-block">Full-Width Button</button> ‫الزر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ :)‫للنقر‬ ‫قابلة‬ ‫ر‬ ‫(غت‬ ‫تعطيل‬ ‫حالة‬ ‫أو‬ )‫ا‬ ً ‫مضغوط‬ ‫(يظهر‬ ‫نشطة‬ ‫حالة‬ ‫عىل‬‫الزر‬ ‫ضبط‬ ‫يمكن‬ ‫يجعل‬ .active ‫وال‬ ، ‫ا‬ ً ‫مضغوط‬ ‫يظهر‬ ‫ا‬ً ‫زر‬ ‫خاصية‬ disabled ‫معطلة‬ ‫أن‬ ‫الحظ‬ .‫للنقر‬ ‫قابل‬ ‫ر‬ ‫غت‬‫الزر‬ ‫تجعل‬ < ‫العناص‬ a ‫ال‬ ‫تدعم‬ ‫ال‬ > ‫خاصية‬ disabled ‫تستخدم‬ ‫أن‬ ‫يجب‬ ‫ي‬ ‫وبالتاىل‬ ‫المعطلة‬ ‫الصف‬ . disabled ‫لجعلها‬ .‫معطلة‬ ‫ي‬ ‫مرن‬ ‫بشكل‬ ‫تظهر‬ <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> <a href="#" class="btn btn-primary disabled">Disabled Link</a>
  • 151. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 151 ‫األزار‬ ‫مجموعات‬ ‫لك‬ ‫يتيح‬ Bootstrap 4 :‫ار‬‫ر‬‫أز‬ ‫مجموعة‬ ‫ي‬ ‫ف‬ )‫واحد‬‫سطر‬ ‫(عىل‬ ‫ا‬ ً‫مع‬ ‫ار‬‫ر‬‫األز‬ ‫من‬ ‫سلسلة‬ ‫تجميع‬ < ‫عنرص‬ ‫استخدم‬ div ‫مع‬ > class .btn-group :‫ار‬‫ر‬‫أز‬ ‫مجموعة‬ ‫إلنشاء‬ <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> ‫مالحظة‬ ‫استخدم‬ ، ‫مجموعة‬ ‫ي‬ ‫ف‬‫زر‬ ‫كل‬‫عىل‬‫ار‬‫ر‬‫األز‬ ‫أحجام‬ ‫تطبيق‬ ‫من‬ ً ‫بدال‬ : class .btn-group-lg ‫لمجموعة‬ . ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬‫ار‬‫ر‬‫األز‬ btn-group-sm :‫ة‬ ‫ر‬ ‫الصغت‬ ‫ار‬‫ر‬‫األز‬ ‫لمجموعة‬ :‫ة‬ ‫ر‬ ‫كبت‬‫ار‬‫ر‬‫أز‬ :‫اضية‬ ‫ر‬ ‫االفت‬‫ار‬‫ر‬‫األز‬ :‫ة‬ ‫ر‬ ‫صغت‬‫ار‬‫ر‬‫أز‬ <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>
  • 152. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 152 ‫العمودية‬ ‫األزرار‬ ‫مجموعة‬ ‫يدعم‬ Bootstrap 4 :‫العمودية‬‫ار‬‫ر‬‫األز‬ ‫مجموعات‬ ‫ا‬ ً ‫أيض‬ ‫استخدم‬ ‫ال‬ ‫الصف‬ . btn-group-vertical :‫عمودية‬‫ار‬‫ر‬‫أز‬ ‫مجموعة‬ ‫إلنشاء‬ <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> ‫المنسدلة‬ ‫القائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ ‫تداخل‬ ‫ار‬‫ر‬‫أز‬ ‫مجموعات‬ Nest :)‫الحق‬ ‫فصل‬ ‫ي‬ ‫ف‬ ‫المنسدلة‬ ‫القوائم‬ ‫عن‬ ‫المزيد‬ ‫(ستتعلم‬ ‫منسدلة‬ ‫قوائم‬ ‫إلنشاء‬ <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data- toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>
  • 153. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 153 ‫الشارات‬ Bootstrap Badges heading New heading New heading New heading New heading New heading New ‫استخدم‬ .‫محتوى‬ ‫أي‬ ‫إىل‬ ‫إضافية‬ ‫معلومات‬ ‫إلضافة‬ ‫ات‬‫ر‬‫الشا‬ ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . badge ‫مع‬ ‫الصف‬ ‫سياقية‬ . ‫(مثل‬ badge-Secondary < ‫عناص‬ ‫داخل‬ ) span ‫ات‬‫ر‬‫الشا‬ ‫مقياس‬ ‫أن‬ ‫الحظ‬ .‫مستطيلة‬ ‫ات‬‫ر‬‫شا‬ ‫إلنشاء‬ > :)‫وجد‬ ‫(إن‬ ‫ي‬ ‫األصىل‬ ‫العنرص‬ ‫حجم‬ ‫مع‬ ‫يتناسب‬ <h1> heading <span class="badge badge-secondary">New</span></h1> <h2> heading <span class="badge badge-secondary">New</span></h2> <h3> heading <span class="badge badge-secondary">New</span></h3> <h4> heading <span class="badge badge-secondary">New</span></h4> <h5> heading <span class="badge badge-secondary">New</span></h5> <h6> heading <span class="badge badge-secondary">New</span></h6> ‫السياقية‬ ‫الشارات‬ ‫اال‬ ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ ‫لصفوف‬ .( ‫السياقية‬ badge - :‫الشارة‬ ‫لون‬ ‫ر‬ ‫لتغيت‬ )* <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>
  • 154. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 154 Pill Badges ‫استخدم‬ ‫الصف‬ badge-pill : ‫ر‬ ‫أكت‬ ‫مستديرة‬ ‫ات‬‫ر‬‫الشا‬ ‫لتجعل‬ <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span> :‫زر‬ ‫داخل‬ ‫شارة‬ ‫استخدام‬ ‫عىل‬ ‫مثال‬ <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">4</span> </button>
  • 155. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 155 ‫في‬ ‫التقدم‬ ‫شريط‬ Bootstrap .‫العملية‬ ‫ي‬ ‫ف‬ ‫المستخدم‬ ‫تقدم‬ ‫مدى‬ ‫إلظهار‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫استخدام‬ ‫يمكن‬ 25 ‫اكتمل‬ ٪ 50 ‫اكتمل‬ ٪ 100 ‫مكتمل‬ ٪ ‫أضف‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫تقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلنشاء‬ ‫الصف‬ . progress ‫وأضف‬ ‫حاوية‬ ‫عنرص‬ ‫إىل‬ ‫الصف‬ . progress-bar ‫إىل‬ ‫عرض‬ ‫خاصية‬ ‫استخدم‬ .‫به‬ ‫الخاص‬ ‫ي‬ ‫الفرع‬ ‫العنرص‬ CSS :‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫عرض‬ ‫ر‬ ‫لتعيي‬ <div class="progress"> <div class="progress-bar" style="width:70%"></div> </div> ‫االرتفاع‬ ‫تحديد‬ ‫هو‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ارتفاع‬ 16 ‫ارتفاع‬ ‫خاصية‬ ‫استخدم‬ .‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫بكسل‬ CSS ‫عليك‬ ‫يجب‬ ‫أنه‬ ‫الحظ‬ .‫ها‬ ‫ر‬ ‫لتغيت‬ :‫التقدم‬ ‫يط‬ ‫ر‬ ‫ورس‬ ‫التقدم‬ ‫لحاوية‬ ‫االرتفاع‬ ‫نفس‬ ‫ر‬ ‫تعيي‬ <div class="progress" style="height:20px"> <div class="progress-bar" style="width:40%;height:20px"></div> </div>
  • 156. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 156 ‫ي‬ ‫توضيح‬ ‫نص‬ ‫إضافة‬ :‫ئية‬‫ر‬‫الم‬ ‫المئوية‬ ‫النسبة‬‫إلظهار‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫داخل‬ ‫ا‬ ً ‫نص‬ ‫أضف‬ <div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div> ‫ملون‬ ‫تقدم‬ ‫يط‬ ‫ر‬ ‫ش‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ .) ‫ي‬ ‫(أساش‬ ‫األزرق‬ ‫باللون‬ ‫التقدم‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫يكون‬ ‫الصفوف‬ ‫ي‬ ‫ف‬ ‫السياقية‬ ‫الخلفية‬ Bootstrap 4 :‫لونها‬ ‫ر‬ ‫حت‬ <!-- Blue --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div> <!-- Green --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div> <!-- Turquoise -->
  • 157. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 157 <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div> <!-- Orange --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div> ‫التالي‬ ‫الشكل‬ ‫على‬ ‫الحصول‬ ‫من‬ ‫تمكنك‬ ‫التي‬ ‫الصفوف‬ ‫عن‬ ‫ابحث‬ Striped Progress Bars
  • 158. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 158 ‫الصفحات‬ ‫ترقيم‬ Pagination ‫أضف‬ ، ‫ي‬ ‫أساش‬ ‫صفحات‬ ‫ترقيم‬ ‫إلنشاء‬ ‫الصف‬ . pagination < ‫عنرص‬ ‫إىل‬ ul .> ‫أضف‬ ‫ثم‬ page-item ‫كل‬‫إىل‬ < li ‫و‬ > ‫الصف‬ page-link < ‫داخل‬ ‫ابط‬‫ر‬ ‫كل‬‫إىل‬ . li :> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> ‫النشطة‬ ‫الصفحة‬ ‫استخدام‬ ‫يتم‬ ‫الصف‬ . active :‫الحالية‬ ‫الصفحة‬ " ‫ر‬ ‫"لتميت‬ <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> ‫المعطلة‬ ‫الحالة‬ ‫استخدام‬ ‫يتم‬ ‫الصف‬ . disabled :‫للنقر‬ ‫القابلة‬ ‫ر‬ ‫غت‬ ‫للروابط‬ <ul class="pagination"> <li class="page-item disabled"><a class="page- link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
  • 159. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 159 Pagination Sizing :‫أصغر‬ ‫أو‬ ‫ر‬ ‫أكت‬ ‫حجم‬ ‫إىل‬ ‫الصفحات‬ ‫ترقيم‬ ‫كتل‬‫حجم‬ ‫ر‬ ‫تغيت‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ ‫أضف‬ class .pagination-lg . ‫أو‬ ‫ر‬ ‫األكت‬ ‫للكتل‬ pagination-sm :‫األصغر‬ ‫للكتل‬ <ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
  • 160. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 160 Breadcrumbs ‫ر‬ ‫تشت‬ ‫الصفوف‬ .breadcrumb ‫و‬ .breadcrumb-item ‫ي‬ ‫الهرم‬ ‫التسلسل‬ ‫ضمن‬ ‫الحالية‬ ‫الصفحة‬ ‫موقع‬ ‫إىل‬ ‫الويب‬ ‫لموقع‬ <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Summer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italy</a></li> <li class="breadcrumb-item active">Rome</li> </ul> ‫القوائم‬ ‫مجموعات‬ ‫عناصر‬ ‫على‬ ‫تحتوي‬ ‫مرتبة‬ ‫غير‬ ‫قائمة‬ ‫هي‬ ‫األساسية‬ ‫القائمة‬ ‫مجموعة‬ li : < ‫عنصر‬ ‫استخدم‬ ، ‫أساسية‬ ‫قائمة‬ ‫مجموعة‬ ‫إلنشاء‬ ul ‫مع‬ > .list-group < ‫و‬ li ‫مع‬ > .list-group-item ‫كالتال‬ ‫ي‬ : <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> Active State ‫استخدم‬ ‫الصف‬ .active : ‫ي‬ ‫الحاىل‬ ‫العنرص‬ ‫ر‬ ‫لتميت‬ <ul class="list-group"> <li class="list-group-item active">Active item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul>
  • 161. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 161 ‫روابط‬ ‫مع‬ ‫قائمة‬ ‫مجموعة‬ ‫بالعناص‬ ‫قائمة‬ ‫مجموعة‬ ‫إلنشاء‬ ‫ابط‬‫ر‬‫ال‬ <a> < ‫استخدم‬ ، div < ‫من‬ ً ‫بدال‬ > ul < ‫و‬ > a < ‫من‬ ً ‫بدال‬ > li ، ‫ا‬ً‫اختياري‬ .> ‫أضف‬ ‫الصف‬ . list-group-item-action :‫التمرير‬ ‫عند‬ ‫رمادية‬ ‫خلفية‬ ‫لون‬ ‫تريد‬ ‫كنت‬‫إذا‬ <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">First item</a> <a href="#" class="list-group-item list-group-item-action">Second item</a> <a href="#" class="list-group-item list-group-item-action">Third item</a> </div> ‫عنصر‬ ‫تعطيل‬ ‫تضيف‬ ‫الصف‬ .disabled ‫ر‬ ‫تأثت‬ ‫يل‬ ‫ر‬ ‫ست‬ ، ‫الروابط‬ ‫عىل‬ ‫استخدامه‬ ‫وعند‬ .‫المعطل‬‫العنرص‬ ‫إىل‬ ‫أفتح‬ ‫نص‬ ‫لون‬ :‫التمرير‬ <div class="list-group"> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item disabled">Disabled item</a> <a href="#" class="list-group-item">Third item</a> </div> ‫استخدم‬ ‫الصف‬ list-group-flush :‫المستديرة‬ ‫والزوايا‬ ‫الحدود‬ ‫بعض‬ ‫الة‬‫ز‬‫إل‬ <ul class="list-group list-group-flush"> …. </ul>
  • 162. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 162 ‫االفقية‬ ‫القوائم‬ ‫مجموعات‬ ‫بعضها‬ ‫فوق‬ ‫تكون‬ ‫أن‬ ‫من‬ ً ‫بدال‬ ‫جنب‬ ‫إىل‬ ‫ا‬ً‫(جنب‬ ‫ا‬ً‫عمودي‬ ‫عرضها‬ ‫من‬ ً ‫بدال‬ ‫ا‬ً‫أفقي‬ ‫القائمة‬ ‫عناص‬ ‫عرض‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫اال‬ ‫فأضف‬ ، )‫البعض‬ ‫لصف‬ . list-group -orizontal . ‫إىل‬ list-group : <ul class="list-group list-group-horizontal"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> <li class="list-group-item">Fourth item</li> </ul> ‫العالقة‬ ‫ذات‬ ‫الصفوف‬ ‫استخدام‬ ‫يمكن‬ ‫ال‬ ‫صفوف‬ :‫القائمة‬ ‫عناص‬ ‫لتلوين‬ ‫السياقية‬ ‫لتلوين‬ ‫استخدامها‬ ‫يمكن‬ ‫التي‬ ‫الصفوف‬ list-items : ‫هي‬ .list-group-item-success, list-group-item-secondary, list-group-item- info, list-group-item-warning, .list-group-item-danger, .list-group-item- primary, list-group-item-dark and list-group-item-light,: <ul class="list-group"> <li class="list-group-item list-group-item-success">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul>
  • 163. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 163 ‫اإلشارات‬ ‫مع‬ ‫قوائم‬ ‫مجموعة‬ Badges ‫ر‬ ‫بي‬ ‫اجمع‬ ‫الصفوف‬ . badge ‫و‬ ‫الصفوف‬ :‫القائمة‬ ‫مجموعة‬ ‫داخل‬ ‫ات‬‫ر‬‫شا‬ ‫إلضافة‬ ‫المساعدة‬ <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Inbox <span class="badge badge-primary badge-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Ads <span class="badge badge-primary badge-pill">50</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Junk <span class="badge badge-primary badge-pill">99</span> </li> </ul>
  • 164. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 164 ‫او‬ ‫البطاقة‬ ‫الكارد‬ Cards ‫ي‬ ‫ف‬ ‫البطاقة‬ Bootstrap 4 ‫للرؤوس‬ ‫ات‬‫ر‬‫خيا‬ ‫يتضمن‬ .‫محتواه‬ ‫حول‬ ‫الحشو‬ ‫ببعض‬ ‫محاط‬ ‫صندوق‬ ‫عن‬ ‫عبارة‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫واأللوان‬ ‫والمحتوى‬ ‫والتذييالت‬ ‫باستخدام‬ ‫أساسية‬ ‫بطاقة‬ ‫إنشاء‬ ‫يتم‬ ‫الصف‬ card ‫عىل‬ ‫البطاقة‬ ‫داخل‬ ‫الموجود‬ ‫المحتوى‬ ‫ويحتوي‬ ، ‫الصف‬ . card-body : <div class="card"> <div class="card-body">Basic card</div> </div> ‫التذييل‬ ‫و‬ ‫الرأس‬ ‫ي‬ ‫ضيف‬ ‫الصف‬ card-header ‫و‬ ‫البطاقة‬ ‫إىل‬ ‫ا‬ ً ‫عنوان‬ ‫ي‬ ‫ضيف‬ ‫الصف‬ card-footer :‫البطاقة‬ ‫إىل‬ ً ‫تذييال‬ <div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> ‫استخدم‬ ، ‫للبطاقة‬ ‫الخلفية‬ ‫لون‬ ‫إلضافة‬ ‫ال‬ ‫صفوف‬ ‫السياقية‬
  • 165. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 165 .bg-Primary , . bg-Success , . bg-info , . bg-warning , .bg-danger , . bg-… Titles, text, and links . ‫استخدم‬ card-title ‫ستخدم‬ ُ ‫ت‬ .‫عنوان‬ ‫عنرص‬ ‫أي‬ ‫إىل‬ ‫البطاقة‬ ‫عناوين‬ ‫إلضافة‬ ‫الصف‬ card-text ‫الة‬‫ز‬‫إل‬ < ‫لعنرص‬ ‫السفلية‬ ‫الهوامش‬ p . ‫داخل‬ )‫الوحيد‬ ‫(أو‬ ‫ي‬ ‫فرع‬ ‫عنرص‬‫آخر‬ ‫كان‬‫إذا‬ > card-body ‫تضيف‬ . ‫الصف‬ . card-link .‫الماوس‬‫تمرير‬ ‫ر‬ ‫وتأثت‬ ‫تباط‬‫ر‬‫ا‬ ‫أي‬ ‫إىل‬ ‫أزرق‬ ‫ا‬ ً ‫لون‬ <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some text. Some text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> Card Images . ‫أضف‬ card-img-top . ‫أو‬ card-img-bottom < ‫إىل‬ img ‫ي‬ ‫السفىل‬ ‫أو‬ ‫العلوي‬ ‫الجزء‬ ‫ي‬ ‫ف‬ ‫الصورة‬ ‫لوضع‬ > . ‫خارج‬ ‫الصورة‬ ‫أضفنا‬ ‫أننا‬ ‫الحظ‬ .‫البطاقة‬ ‫داخل‬ card-body ‫بالكامل‬ ‫بالعرض‬ ‫لتمتد‬ . <div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>
  • 166. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 166 ‫الممتد‬ ‫الرابط‬ ‫أضف‬ ‫الصف‬ . stretched-link ‫وقابلة‬ ‫عليها‬‫للنقر‬ ‫قابلة‬ ‫بأكملها‬ ‫البطاقة‬ ‫وستجعل‬ ، ‫البطاقة‬ ‫داخل‬ ‫ابط‬‫ر‬ ‫إىل‬ :)‫ابط‬‫ر‬ ‫بمثابة‬ ‫البطاقة‬ ‫(ستكون‬ ‫فوقها‬‫للتمرير‬ <a href="#" class="btn btn-primary stretched-link">See Profile</a> ‫وشاح‬ ‫عمل‬ Overlays . ‫واستخدم‬ ‫بطاقة‬ ‫خلفية‬ ‫إىل‬ ‫صورة‬ ‫ل‬ ّ ‫حو‬ card-img-overlay :‫الصورة‬ ‫أعىل‬ ‫نص‬ ‫إلضافة‬ <div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>
  • 167. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 167 ‫االرتفاع‬ ‫المساوية‬ ‫البطاقات‬ Card Deck ‫ر‬ ‫تنىس‬ ‫الصف‬ . card-deck ‫ا‬ً‫تلقائي‬ ‫التخطيط‬ ‫ضبط‬ ‫سيتم‬ . ‫ر‬ ‫متساويي‬ ‫وعرض‬ ‫ارتفاع‬ ‫ذات‬ ‫البطاقات‬ ‫من‬ ‫شبكة‬ .‫البطاقات‬ ‫من‬ ‫المزيد‬ ‫إدخال‬ ‫عند‬ ‫من‬ ‫(أقل‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫شاشات‬ ‫عىل‬ ‫ا‬ً‫عمودي‬ ‫البطاقات‬ ‫عرض‬ ‫يتم‬ :‫مالحظة‬ 576 :)‫بكسل‬ <div class="card-deck"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div>
  • 168. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 168 ‫البطاقات‬ ‫مجموعة‬ ‫تشبه‬ ‫الصف‬ . card-group ‫الصف‬ . card-deck ‫أن‬‫هو‬ ‫الوحيد‬ ‫والفرق‬ . ‫الصف‬ . card-group ‫تزيل‬ .‫بطاقة‬ ‫كل‬ ‫ر‬ ‫بي‬ ‫واليشى‬ ‫اليمت‬ ‫الهوامش‬ ‫عىل‬ ‫ا‬ً‫عمودي‬ ‫البطاقات‬ ‫عرض‬ ‫يتم‬ :‫مالحظة‬ ‫من‬ ‫(أقل‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫شاشات‬ 576 : ‫ي‬ ‫وسفىل‬ ‫علوي‬ ‫بهامش‬ ، )‫بكسل‬ <div class="card-group"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">Some text inside the first card</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">Some text inside the second card</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">Some text inside the third card</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">Some text inside the fourth card</p> </div> </div> </div>
  • 169. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 169 ‫المنسدلة‬ ‫القوائم‬ Dropdowns ‫القائمة‬ :‫ا‬ ً ‫مسبق‬ ‫محددة‬ ‫قائمة‬ ‫من‬ ‫واحدة‬ ‫قيمة‬ ‫باختيار‬ ‫للمستخدم‬ ‫تسمح‬ ‫للتبديل‬ ‫قابلة‬ ‫قائمة‬ ‫ي‬ ‫ه‬ ‫المنسدلة‬ <div class="dropdown"> <button type="button" class="btn btn-primary dropdown- toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ : ‫ر‬ ‫تشت‬ ‫الصف‬ . dropdown .‫منسدلة‬ ‫قائمة‬ ‫إىل‬ ‫أضف‬ ‫الصف‬ dropdown < ‫عنرص‬ ‫إىل‬ div ‫أضف‬ ‫ثم‬ .‫بالفعل‬ ‫المنسدلة‬ ‫القائمة‬ ‫إلنشاء‬ > ‫الصف‬ . dropdown-item .‫المنسدلة‬ ‫القائمة‬ ‫داخل‬ )‫ار‬‫ر‬‫أز‬ ‫أو‬ ‫(روابط‬ ‫عنرص‬ ‫كل‬‫إىل‬ ‫المنسدل‬ ‫القائمة‬ ‫فاصل‬ ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . dropdown-divider :‫رفيع‬ ‫ي‬ ‫ر‬ ‫أفق‬ ‫بحد‬ ‫المنسدلة‬ ‫القائمة‬ ‫داخل‬ ‫الروابط‬ ‫لفصل‬ <div class="dropdown-divider"></div>
  • 170. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 170 ‫المنسدلة‬ ‫القائمة‬ ‫رأس‬ ‫استخدام‬ ‫يتم‬ ‫الصف‬ . dropdown-header :‫المنسدلة‬ ‫القائمة‬ ‫داخل‬ ‫رؤوس‬ ‫إلضافة‬ <div class="dropdown-header">Dropdown header 1</div> ‫العنصر‬ ‫تفعيل‬ ‫الغاء‬ ‫و‬ ‫تفعيل‬ ‫ا‬ ‫باستخدام‬ ‫محدد‬ ‫منسدلة‬ ‫قائمة‬ ‫عنرص‬ ‫ر‬ ‫بتميت‬ ‫قم‬ ‫لصف‬ active .)‫أزرق‬ ‫خلفية‬ ‫لون‬ ‫(يضيف‬ ‫استخدم‬ ، ‫المنسدلة‬ ‫القائمة‬ ‫ي‬ ‫ف‬ ‫عنرص‬ ‫لتعطيل‬ ‫الصف‬ . disabled ‫ورمز‬ ‫فاتح‬ ‫رمادي‬ ‫نص‬ ‫لون‬ ‫عىل‬ ‫(تحصل‬ :)‫التمرير‬ ‫عند‬ "‫الوقوف‬ ‫ممنوع‬ ‫"عالمة‬ <a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a> Dropdown Position " ‫قائمة‬ ‫إنشاء‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ dropright " ‫أو‬ " dropleft ‫إضافة‬ ‫طريق‬ ‫عن‬ ، " ‫الصف‬ . dropright ‫أو‬ . dropleft :‫ا‬ً‫تلقائي‬ ‫السهم‬ / ‫اإلقحام‬ ‫عالمة‬ ‫إضافة‬ ‫تتم‬ ‫أنه‬ ‫الحظ‬ .‫المنسدلة‬ ‫القائمة‬‫عنرص‬ ‫إىل‬ <div class="dropdown dropright"> <div class="dropdown dropleft">
  • 171. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 171 ‫األسفل‬ ‫من‬ ً ‫بدال‬ ‫ألعىل‬ ‫المنسدلة‬ ‫القائمة‬ ‫توسيع‬ ‫تريد‬ ‫كنت‬‫إذا‬ <div class="dropup"> ‫القائمة‬ ‫ضمن‬ ‫نص‬ ‫المنسدلة‬ ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . dropdown-item-text ‫عىل‬ ‫ستخدم‬ ُ ‫ت‬ ‫أو‬ ، ‫منسدلة‬ ‫قائمة‬ ‫عنرص‬ ‫إىل‬ ‫عادي‬ ‫نص‬ ‫إلضافة‬ . ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫االرتباط‬ ‫لتصميم‬ ‫الروابط‬ <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item-text" href="#">Text Link</a> <span class="dropdown-item-text">Just Text</span> </div> ‫منسدلة‬ ‫قائمة‬ ‫مع‬ ‫االزرار‬ ‫مجموعة‬ <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data- toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>
  • 172. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 172 ‫الطي‬ Collapse :‫وإظهارها‬ ‫المحتوى‬ ‫من‬ ‫ة‬ ‫ر‬ ‫كبت‬‫كمية‬‫إخفاء‬ ‫تريد‬ ‫عندما‬ ‫مفيدة‬ ‫ي‬ ‫للط‬ ‫القابلة‬ ‫العناص‬ ‫تعد‬ <button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫ش‬ ‫ر‬ ‫تشت‬ ‫الصف‬ . collapse <( ‫ي‬ ‫للط‬ ‫قابل‬ ‫عنرص‬ ‫إىل‬ div ‫أو‬ ‫عرضه‬ ‫سيتم‬ ‫الذي‬ ‫المحتوى‬ ‫هو‬ ‫هذا‬ )‫مثالنا‬ ‫ي‬ ‫ف‬ > .‫واحدة‬‫زر‬ ‫بنقرة‬ ‫إخفاؤه‬ ‫أضف‬ ، ‫ي‬ ‫للط‬ ‫القابل‬ ‫المحتوى‬ )‫إخفاء‬ / ‫(إظهار‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ‫الخاصية‬ data-toggle = "collapse ‫عنرص‬ ‫إىل‬ " < a < ‫أو‬ > button ‫أضف‬ ‫ثم‬ .> ‫الخاصية‬ data-target = "# id" ‫ي‬ ‫للط‬ ‫القابل‬ ‫بالمحتوى‬ ‫الزر‬ ‫لربط‬ < ‫لعناص‬ ‫بالنسبة‬ :‫مالحظة‬ a ‫استخدام‬ ‫يمكنك‬ ، > ‫الخاصية‬ href ‫من‬ ً ‫بدال‬ ‫الخاصية‬ data-target : <a href="#demo" data-toggle="collapse">Collapsible</a> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> ‫إضافة‬ ‫يمكنك‬ ، ‫ذلك‬ ‫ومع‬ .‫ا‬ً‫مخفي‬ ‫ي‬ ‫للط‬ ‫القابل‬ ‫المحتوى‬ ‫يكون‬ ، ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫الصف‬ . show ‫المحتوى‬‫إلظهار‬ :‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ <div id="demo" class="collapse show"> Lorem ipsum dolor text.... </div>
  • 173. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 173 ‫أكورديون‬ Accordion ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ Accordion .‫البطاقة‬ ‫مكون‬ ‫توسيع‬ ‫خالل‬ ‫من‬ ‫ا‬ ً ‫بسيط‬ ‫استخدم‬ :‫مالحظة‬ ‫الخاصية‬ data-parent ‫جميع‬ ‫إغالق‬ ‫من‬ ‫للتأكد‬ ‫العنرص‬ ‫ضمن‬ ‫ي‬ ‫للط‬ ‫القابلة‬ ‫العناص‬ . ‫ي‬ ‫للط‬ ‫القابلة‬ ‫العناص‬ ‫أحد‬ ‫عرض‬ ‫عند‬ ‫المحدد‬ ‫ي‬ ‫الرئيىس‬ <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data- toggle="collapse" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data- toggle="collapse" href="#collapseThree"> Collapsible Group Item #3
  • 174. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 174 </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div> </div> </div> </div> ‫التجوال‬ ‫قائمة‬ Navs ‫بإضافة‬ ‫فقم‬ ، ‫بسيطة‬ ‫أفقية‬ ‫قائمة‬ ‫إنشاء‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫الصف‬ . nav < ‫عنرص‬ ‫إىل‬ ul ، > . ‫ب‬ ‫ا‬ ً ‫متبوع‬ nav-item < ‫لكل‬ li ‫وإضافة‬ > ‫الصف‬ . nav-link :‫روابطها‬ ‫إىل‬ <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> ‫التبويبات‬ tabs <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
  • 175. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 175 ‫التجوال‬ ‫شريط‬ Navigation :‫الصفحة‬ ‫أعىل‬ ‫وضعه‬ ‫يتم‬ ‫تنقل‬ ‫أس‬‫ر‬ ‫هو‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ Basic Navbar ‫باستخدام‬ Bootstrap .‫الشاشة‬ ‫حجم‬ ‫حسب‬ ،‫ينهار‬ ‫أو‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫يمتد‬ ‫أن‬ ‫يمكن‬ ، ‫باستخدام‬ ‫ي‬ ‫قياش‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إنشاء‬ ‫يتم‬ ‫الصف‬ . navbar ‫ب‬ ‫ا‬ ً ‫متبوع‬ ، ‫الصف‬ ‫ي‬ ‫للط‬ ‫قابلة‬ ‫متجاوبة‬ . : navbar- expand-xl | lg | md | sm ‫أو‬ ‫متوسطة‬ ‫أو‬ ‫ة‬ ‫ر‬ ‫كبت‬‫أو‬ ‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫كبت‬‫شاشات‬ ‫عىل‬ ‫ا‬ً‫عمودي‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫(يكدس‬ .)‫ة‬ ‫ر‬ ‫صغت‬ < ‫عنرص‬ ‫استخدم‬ ، ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫داخل‬ ‫روابط‬ ‫إلضافة‬ ul ‫مع‬ > class = "navbar-nav < ‫أضف‬ ‫ثم‬ ." li > ‫ب‬ ‫عناص‬ ‫الصف‬ . nav-item ‫م‬ < ‫بعنرص‬ ‫تبوعة‬ a ‫ب‬ > ‫الصف‬ . nav-link : <!-- A grey horizontal navbar that becomes vertical on small screens --> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>
  • 176. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 176 Vertical Navbar ‫الة‬‫ز‬‫بإ‬ ‫قم‬ ‫الصف‬ . navbar-expand-xl | lg | md | sm :‫عمودي‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلنشاء‬ <!-- A vertical navbar --> <nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav> Centered Navbar ‫أضف‬ ‫الصف‬ . justify-content-center .‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫لتوسيط‬ ‫الشاشات‬ ‫عىل‬ .‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫والكبت‬ ‫ة‬ ‫ر‬ ‫والكبت‬ ‫المتوسطة‬ ‫الشاشات‬ ‫عىل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫بتوسيط‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيقوم‬ ‫(بسبب‬‫اليسار‬ ‫إىل‬ ‫ومحاذاة‬ ‫ا‬ً‫عمودي‬ ‫عرضها‬ ‫سيتم‬ ، ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الصف‬ . navbar-expand-sm :) <nav class="navbar navbar-expand-sm bg-light justify-content- center"> ... </nav>
  • 177. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 177 Colored Navbar ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ ‫الصفوف‬ . bg-color .( ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫خلفية‬ ‫لون‬ ‫ر‬ ‫لتغيت‬ bg-Primary . ‫و‬ bg-Success ‫و‬ . bg-info . ‫و‬ bg-warning . ‫و‬ bg-danger .‫و‬ bg-Secondary . ‫و‬ bg - . ‫و‬ ‫الظالم‬ bg-light ) . ‫مالحظة‬ ‫باستخدام‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫الروابط‬ ‫جميع‬ ‫إىل‬ ‫أبيض‬ ‫نص‬ ‫لون‬ ‫أضف‬ : ‫الصف‬ . navbar-dark ‫أو‬ ، ‫استخدم‬ ‫الصف‬ . navbar-light .‫أسود‬ ‫نص‬ ‫لون‬ ‫إلضافة‬ <!-- Grey with black text --> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <!-- Black with white text --> <nav class="navbar navbar-expand-sm bg-dark navbar- dark">...</nav> <!-- Blue with white text --> <nav class="navbar navbar-expand-sm bg-primary navbar- dark">...</nav> ‫اال‬ ‫أضف‬ :‫المعطلة‬ / ‫النشطة‬ ‫الحالة‬ ‫لصف‬ . active < ‫عنرص‬ ‫إىل‬ a ‫أو‬ ، ‫ي‬ ‫الحاىل‬ ‫تباط‬‫ر‬‫اال‬ ‫ر‬ ‫لتميت‬ > ‫الصف‬ . disabled .‫للنقر‬ ‫قابل‬ ‫ر‬ ‫غت‬ ‫االرتباط‬ ‫أن‬ ‫إىل‬ ‫لإلشارة‬
  • 178. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 178 Brand / Logo ‫ستخدم‬ ُ ‫ت‬ ‫الصف‬ . navbar-brand :‫لصفحتك‬ ‫وع‬ ‫ر‬ ‫المش‬ / ‫الشعار‬ / ‫التجارية‬ ‫العالمة‬ ‫اسم‬ ‫از‬‫ر‬‫إلب‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav> ‫استخدام‬ ‫عند‬ ‫الصف‬ . ‫التجارية‬ ‫العالمة‬ navbar ‫سيقوم‬ ،‫الصور‬ ‫عىل‬ Bootstrap 4 ‫الصورة‬ ‫بتصميم‬ ‫ا‬ً‫تلقائي‬ .‫ا‬ً‫عمودي‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫لتالئم‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav> Collapsing The Navigation Bar ‫عنها‬ ‫يكشف‬‫بزر‬ ‫واستبدالها‬ ‫التنقل‬ ‫روابط‬ ‫إخفاء‬ ‫تريد‬ ، ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الشاشات‬ ‫عىل‬ ً ‫خاصة‬ ، ‫األحيان‬ ‫من‬ ‫ر‬ ‫كثت‬ ‫ي‬ ‫ف‬ .‫فوقها‬ ‫النقر‬ ‫عند‬ ‫به‬ ‫ا‬ً ‫زر‬ ‫استخدم‬ ، ‫ي‬ ‫للط‬ ‫قابل‬ ‫تنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلنشاء‬ class = "navbar-toggler ‫و‬ " data-toggle = "collapse ‫و‬ " data-target = "# thetarget ‫داخل‬ )‫إلخ‬ ، ‫(الروابط‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫محتوى‬ ‫بلف‬ ‫قم‬ ‫ثم‬ ." ‫عنرص‬ div ‫باستخدام‬ class = "collapse navbar-collapse :‫للزر‬ ‫البيانات‬ ‫هدف‬ ‫يطابق‬ ‫بمعرف‬ ‫ا‬ ً ‫متبوع‬ ، " " thetarget ." <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsibleNavbar">
  • 179. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 179 <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> ‫مالحظة‬ ‫الة‬‫ز‬‫إ‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ : ‫الصف‬ . navbar-expand-md ‫زر‬ ‫وعرض‬ ‫ا‬ ً‫دائم‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫ارتباطات‬ ‫إلخفاء‬ .‫التبديل‬ Navbar With Dropdown <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data- toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>
  • 180. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 180 ‫المثبت‬ ‫التجوال‬ ‫شريط‬ .‫أسفلها‬ ‫أو‬ ‫الصفحة‬ ‫أعىل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إصالح‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ .‫الصفحة‬‫تمرير‬ ‫عن‬ ‫مستقل‬ )‫أسفل‬ ‫أو‬ ‫(أعىل‬ ‫ثابت‬ ‫موضع‬ ‫ي‬ ‫ف‬ ‫ا‬ً‫مرئي‬ ‫الثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫يظل‬ ‫تجعل‬ ‫الصف‬ . fixed-top :‫األعىل‬ ‫ي‬ ‫ف‬ ‫ا‬ ً ‫ثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> ‫استخدم‬ ‫الصف‬ . fixed-bottom :‫الصفحة‬ ‫أسفل‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إلبقاء‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav> ‫استخدم‬ ‫الصف‬ . sticky-top :‫مالحظة‬ .‫بعده‬‫التمرير‬ ‫عند‬ ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫يظل‬ / ‫ا‬ ً ‫ثابت‬ ‫التنقل‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫لجعل‬ ‫اال‬ ‫هذه‬ ‫لصف‬ ‫ي‬ ‫ف‬ ‫تعمل‬ ‫ال‬ IE11 .) ‫ي‬ ‫ر‬ ‫نست‬ :‫موضع‬ ‫أنها‬ ‫عىل‬ ‫(ستعاملها‬ ‫السابقة‬ ‫ات‬‫ر‬‫واإلصدا‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
  • 181. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 181 ‫النماذج‬ Forms ‫باستخدام‬ ‫العام‬ ‫التصميم‬ ‫بعض‬ ‫ا‬ً‫تلقائي‬ ‫النموذج‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ ‫ر‬ ‫تتلق‬ Bootstrap : < ‫النصية‬ ‫العناص‬ ‫جميع‬ input < ‫و‬ > textarea < ‫و‬ > select ‫مع‬ > class .form-control ‫عرض‬ ‫لها‬ 100 .٪ ‫يوفر‬ Bootstrap :‫النموذج‬ ‫تخطيطات‬ ‫من‬ ‫ر‬ ‫نوعي‬ )‫العرض‬ ‫(كامل‬ ‫مكدس‬ ‫نموذج‬ .‫إرسال‬‫وزر‬ ، ‫واحد‬‫اختيار‬ ‫ع‬‫ومرب‬ ، ‫إدخال‬ ‫ي‬ ‫حقىل‬ ‫عىل‬ ‫يحتوي‬ ‫ا‬ ً ‫مكدس‬ ‫ا‬ ً ‫نموذج‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ر‬ ‫ينىس‬ . ‫مع‬ ‫غالف‬ ‫عنرص‬ ‫أضف‬ form-group :‫المناسبة‬ ‫الهوامش‬ ‫لضمان‬ ، ‫النموذج‬ ‫ي‬ ‫ف‬ ‫تحكم‬ ‫عنرص‬ ‫كل‬‫حول‬ ، <form action="/action_page.php"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
  • 182. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 182 ‫واحد‬ ‫سطر‬ ‫على‬ ‫النموذج‬ .‫اليسار‬ ‫إىل‬ ‫ومحاذاة‬ ‫مضمنة‬ ‫العناص‬ ‫جميع‬ ‫تكون‬ ، ‫مضمن‬ ‫نموذج‬ ‫ي‬ ‫ف‬ ‫عن‬ ‫عرضها‬ ‫يقل‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العرض‬ ‫ات‬‫ر‬‫إطا‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫النماذج‬ ‫عىل‬ ‫فقط‬ ‫هذا‬ ‫ينطبق‬ :‫مالحظة‬ 576 ‫عىل‬ .‫بكسل‬ ‫عن‬ ‫حجمها‬ ‫يقل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الشاشات‬ 576 .‫ا‬ً‫أفقي‬ ‫تكديسها‬ ‫سيتم‬ ، ‫بكسل‬ :‫المضمن‬ ‫للنموذج‬ ‫إضافية‬ ‫قاعدة‬ ‫أضف‬ class <‫عنرص‬ ‫إىل‬ ‫مضمنة‬ . form > ‫ي‬ ‫حقىل‬ ‫مع‬ ‫ا‬ ً ‫ن‬ ّ‫مضم‬ ‫ا‬ ً ‫نموذج‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫ر‬ ‫ينىس‬ :‫واحد‬ ‫إرسال‬‫وزر‬ ، ‫واحد‬‫اختيار‬ ‫ع‬‫ومرب‬ ، ‫إدخال‬ <form class="form-inline" action="/action_page.php"> <label for="email">Email address:</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> <label for="pwd">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> Form Row/Grid ( ‫األعمدة‬ ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ col ‫أدوات‬ ‫استخدام‬ ‫دون‬ ‫النموذج‬ ‫مدخالت‬ ‫ومحاذاة‬ ‫عرض‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ) ‫حاوية‬ ‫داخل‬ ‫تضعها‬ ‫أن‬‫تذكر‬ ‫فقط‬ .‫التباعد‬ row . ، ‫أدناه‬ ‫المثال‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫ف‬ ‫والصفوف‬ ‫األعمدة‬ ‫عن‬ ‫المزيد‬ ‫تتعلم‬ ‫سوف‬ .‫جنب‬ ‫إىل‬ ‫ا‬ً‫جنب‬ ‫ان‬‫ر‬‫سيظه‬ ‫عمودين‬ ‫نستخدم‬ ‫الفصل‬ Bootstrap Grids . <form> <div class="row"> <div class="col"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pswd"> </div> </div> </form>
  • 183. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 183 . ‫فاستخدم‬ ، )‫اضية‬ ‫ر‬ ‫االفت‬ ‫العمود‬ ‫اريب‬‫ز‬‫م‬ ‫(تجاوز‬ ‫الشبكة‬ ‫هوامش‬ ‫تقليل‬ ‫تريد‬ ‫كنت‬‫إذا‬ form-row ‫من‬ ً ‫بدال‬ . row : <form> <div class="form-row"> <div class="col"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pswd"> </div> </div> </form> ‫النموذج‬ ‫تدقيق‬ Validation ‫استخدام‬ ‫يمكنك‬ ‫الصفوف‬ ‫من‬ ‫التحقق‬ ‫تم‬ .‫إما‬ ‫أضف‬ . ‫ر‬ ‫للمستخدمي‬ ‫قيمة‬ ‫مالحظات‬ ‫لتقديم‬ ‫مختلفة‬ ‫تحقق‬ < ‫عنرص‬ ‫إىل‬ ‫الصحة‬ ‫من‬ ‫التحقق‬ ‫إىل‬ ‫يحتاج‬ .‫أو‬ ‫صحته‬ form ‫مالحظات‬ ‫تقديم‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫ما‬ ‫عىل‬ ‫ا‬ ً ‫اعتماد‬ ، > ‫لإلشا‬ )‫صالح‬ ‫ر‬ ‫(غت‬‫أحمر‬ ‫أو‬ )‫(صالح‬ ‫أخرص‬ ‫حد‬ ‫اإلدخال‬ ‫لحقول‬ ‫سيكون‬ .‫بعده‬ ‫أو‬ ‫النموذج‬ ‫إرسال‬ ‫قبل‬ ‫التحقق‬ ‫رة‬ . ‫رسالة‬ ‫إضافة‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ .‫النموذج‬ ‫ي‬ ‫ف‬ ‫مفقود‬ ‫هو‬ ‫ما‬ ‫إىل‬ valid-feedback . ‫أو‬ invalid-feedback ‫إلخبار‬ .‫النموذج‬ ‫إرسال‬ ‫قبل‬ ‫به‬ ‫القيام‬ ‫يجب‬ ‫أو‬ ‫مفقود‬ ‫هو‬ ‫بما‬ ‫احة‬‫ص‬ ‫المستخدم‬ <form action="/action_page.php" class="was-validated"> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
  • 184. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 184 <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check- input" type="checkbox" name="remember" required> I agree on blabla. <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ‫نستخدم‬ ، ‫المثال‬ ‫هذا‬ ‫في‬ .needs-validation ‫شيء‬ ‫أي‬ ‫هناك‬ ‫كان‬ ‫(إذا‬ ‫النموذج‬ ‫إرسال‬ ‫بعد‬ ‫التحقق‬ ‫تأثير‬ ‫سيضيف‬ ‫والذي‬ ، ‫أكواد‬ ‫بعض‬ ‫إضافة‬ ‫ًا‬‫ض‬‫أي‬ ‫عليك‬ ‫سيتعين‬ ‫أنه‬ ‫الحظ‬ .)‫مفقود‬ jQuery ‫صحيح‬ ‫بشكل‬ ‫لتعمل‬ ‫المثال‬ ‫لهذا‬: <form action="/action_page.php" class="needs-validation" novalidate> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check- input" type="checkbox" name="remember" required> I agree on blabla. <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <script> // Disable form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Get the forms we want to add validation styles to var forms = document.getElementsByClassName('needs-validation');
  • 185. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 185 // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> ‫االدخال‬ ‫حقول‬ ‫يدعم‬ Bootstrap :‫التالية‬ ‫النموذج‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫عناص‬ • ‫إدخال‬ • ‫النص‬ ‫منطقة‬ • ‫االختيار‬ ‫خانة‬ • ‫تحديد‬ • ...... Input Bootstrap: Textarea ‫نصي‬ ‫حقل‬ <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> Bootstrap Checkboxes ‫ات؟‬‫ر‬‫الخيا‬ ‫قائمة‬ ‫ات‬‫ر‬‫خيا‬ ‫من‬ ‫تستخدمه‬ ‫أن‬ ‫تريد‬ ‫ما‬ :‫معطل‬ ‫ر‬ ‫األخت‬‫الخيار‬ .‫اختيار‬ ‫مربعات‬ ‫ثالثة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬
  • 186. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 186 <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check- input" value="" disabled>Option 3 </label> </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ ‫مع‬ ‫غالف‬ ‫عنرص‬ ‫استخدم‬ form-check ‫الهوامش‬ ‫لضمان‬ ‫أضف‬ ‫الصف‬ form-check-label ‫التسمية‬ ‫عناص‬ ‫إىل‬ label ‫و‬ ، form-check-input ‫إىل‬ input ‫استخدم‬ ‫الصف‬ . form-check-inline :‫السطر‬ ‫نفس‬ ‫عىل‬‫االختيار‬ ‫مربعات‬‫تظهر‬ ‫أن‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫االختيار‬ ‫أزرار‬ Radio Buttons ‫استخدام‬ ‫يتم‬ ‫تريد‬ ‫كنت‬‫إذا‬‫االختيار‬‫ار‬‫ر‬‫أز‬ ‫اجبار‬ ‫المحددة‬ ‫ات‬‫ر‬‫الخيا‬ ‫قائمة‬ ‫من‬ ‫فقط‬ ‫واحد‬‫اختيار‬ ‫عىل‬ ‫المستخدم‬ .‫ا‬ ً ‫مسبق‬ :‫معطل‬ ‫ر‬ ‫األخت‬‫الخيار‬ .‫اختيار‬ ‫ار‬‫ر‬‫أز‬ ‫ثالثة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحتوي‬ <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label">
  • 187. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 187 <input type="radio" class="form-check- input" name="optradio" disabled>Option 3 </label> </div> ‫استخدم‬ ‫الصف‬ . form-check-inline :‫السطر‬ ‫نفس‬ ‫عىل‬‫االختيار‬‫ار‬‫ر‬‫أز‬‫تظهر‬ ‫أن‬ ‫تريد‬ ‫كنت‬‫إذا‬ <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check-inline disabled"> <label class="form-check-label"> <input type="radio" class="form-check- input" name="optradio" disabled>Option 3 </label> </div> Bootstrap Select List .‫متعددة‬ ‫ات‬‫ر‬‫خيا‬ ‫ر‬ ‫بي‬ ‫من‬ ‫باالختيار‬ ‫للمستخدم‬ ‫السماح‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫التحديد‬ ‫قوائم‬ ‫استخدام‬ ‫يتم‬ :)‫القائمة‬ ‫ر‬ ‫(اخت‬ ‫منسدلة‬ ‫قائمة‬ ‫عىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يحتوي‬ <div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>
  • 188. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 188 Form Control Sizing . ‫باستخدام‬ ‫النموذج‬ ‫ي‬ ‫ف‬ ‫التحكم‬‫عنرص‬ ‫حجم‬ ‫ر‬ ‫بتغيت‬ ‫قم‬ form-control-sm . ‫أو‬ form-control-lg : <input type="text" class="form-control form-control-sm"> <input type="text" class="form-control form-control"> <input type="text" class="form-control form-control-lg"> Form Control File and Range ‫أضف‬ ‫الصف‬ . form-control-range " ‫اإلدخال‬ ‫نوع‬ ‫إىل‬ range . ‫أو‬ " form-control-file ‫اإلدخال‬ ‫نوع‬ ‫إىل‬ ‫تحكم‬ ‫عنرص‬ ‫لتصميم‬ "‫"ملف‬ ‫المجال‬ :‫الكامل‬ ‫بالعرض‬ ‫ملف‬ ‫حقل‬ ‫أو‬ <input type="range" class="form-control-range"> <input type="file" class="form-control-file border">
  • 189. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 189 ‫الحقول‬ ‫مجموعة‬ Input Groups ‫الصف‬ . input-group ‫خلف‬ ‫أو‬ ‫أمام‬‫زر‬ ‫أو‬ ‫نص‬ ‫أو‬‫رمز‬ ‫إضافة‬ ‫طريق‬ ‫عن‬ ‫اإلدخال‬ ‫ر‬ ‫لتحسي‬ ‫حاوية‬ ‫عن‬ ‫عبارة‬ ."‫تعليمات‬ ‫"نص‬ ‫باعتباره‬ ‫اإلدخال‬ ‫حقل‬ . ‫استخدم‬ input-group-prepend .‫و‬ ، ‫اإلدخال‬ ‫أمام‬ ‫التعليمات‬ ‫نص‬ ‫إلضافة‬ input-group-append .‫اإلدخال‬ ‫خلف‬ ‫إلضافته‬ ‫أضف‬ ، ‫ا‬ً ‫ر‬ ‫أخت‬ ‫الصف‬ . input-group-text ‫لتصميم‬ .‫المحدد‬ ‫التعليمات‬ ‫نص‬ <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email"> <div class="input-group-append"> <span class="input-group-text">@.com</span> </div> </div> </form> ‫المجموعات‬ ‫حجم‬ ‫استخدم‬ ‫الصف‬ . input-group-sm . ‫و‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫اإلدخال‬ ‫لمجموعات‬ input-group-lg ‫لمجموعات‬ :‫ة‬ ‫ر‬ ‫الكبت‬ ‫اإلدخال‬ <form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control"> </div> </form>
  • 190. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 190 <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control"> </div> </form> Multiple Inputs and Helpers <!-- Multiple inputs --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Person</span> </div> <input type="text" class="form-control" placeholder="First Name"> <input type="text" class="form-control" placeholder="Last Name"> </div> </form> <!-- Multiple addons / help text --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input type="text" class="form-control"> </div> </form>
  • 191. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 191 ‫ضمن‬ ‫االزرار‬ Input Group <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button">Basic Button</button> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> ‫تسميات‬ Input Group ‫مجموعة‬ ‫خارج‬ ‫تسميات‬ ‫ضع‬ ،‫اإلدخال‬ ‫قيمة‬ ‫أن‬‫وتذكر‬ ‫الخاصية‬ for .‫اإلدخال‬ ‫معرف‬ ‫مع‬ ‫تتطابق‬ ‫أن‬ ‫يجب‬ :‫المدخالت‬ ‫عىل‬ ‫الضوء‬ ‫يسلط‬ ‫وسوف‬ ‫الملصق‬ ‫عىل‬‫انقر‬ :‫هنا‬ ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫بريدك‬ ‫اكتب‬ <label for="demo">Write your email here:</label> <div class="input-group mb-3"> <input type="text" class="form- control" placeholder="Email" id="demo" name="email"> <div class="input-group-append"> <span class="input-group-text">@.com</span> </div> </div>
  • 192. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 192 ‫مخصص‬ ‫اختيار‬ ‫حقل‬ Checkbox < ‫مثل‬ ، ‫حاوية‬ ‫عنرص‬ ‫بلف‬ ‫قم‬ ، ‫مخصص‬ ‫اختيار‬ ‫ع‬‫مرب‬ ‫إلنشاء‬ div ‫ب‬ ، > ‫الصف‬ . custom-control .‫و‬ custom-checkbox . ‫أضف‬ ‫ثم‬ .‫االختيار‬ ‫ع‬‫مرب‬ ‫حول‬ custom-control-input = ‫بالنوع‬ ‫اإلدخال‬ ‫إىل‬ " checkbox ." ‫بإضافة‬ ‫فقم‬ ، ‫المصاحب‬ ‫للنص‬ ‫تسميات‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ :‫تلميح‬ ‫الصف‬ . custom-control-label .‫إليه‬ ‫قيمة‬ ‫أن‬ ‫الحظ‬ ‫الخاصية‬ for :‫االختيار‬ ‫ع‬‫مرب‬ ‫معرف‬ ‫مع‬ ‫تتطابق‬ ‫أن‬ ‫يجب‬ <form> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control- input" id="customCheck" name="1"> <label class="custom-control-label" for="customCheck">Check this custom checkbox</label> </div> </form> ‫مخصص‬ ‫تبديل‬ ‫مفتاح‬ Switch < ‫مثل‬ ، ‫حاوية‬ ‫عنرص‬ ‫بلف‬ ‫قم‬ ، ‫مخصص‬ "‫تبديل‬ ‫"مفتاح‬ ‫إلنشاء‬ div ‫ب‬ ، > ‫الصف‬ . custom-control .‫و‬ custom-switch ‫أضف‬ ‫ثم‬ .‫اختيار‬ ‫ع‬‫مرب‬ ‫حول‬ ‫الصف‬ . custom-control-input :‫االختيار‬ ‫ع‬‫مرب‬ ‫إىل‬ <form> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="switch1"> <label class="custom-control-label" for="switch1">Toggle me</label> </div> </form> ‫مخصص‬ ‫وحيد‬ ‫اختيار‬ ‫حقل‬ Radio buttons < ‫مثل‬ ، ‫حاوية‬ ‫عنرص‬ ‫بلف‬ ‫قم‬ ، ‫مخصص‬ ‫اختيار‬‫زر‬ ‫إلنشاء‬ div ‫ب‬ ، > ‫الصف‬ ‫اديو‬‫ر‬‫وال‬ ‫المخصص‬ ‫التحكم‬ . ‫أضف‬ ‫ثم‬ .‫االختيار‬‫زر‬ ‫حول‬ ‫المخصص‬ custom-control-input " = ‫بالنوع‬ ‫اإلدخال‬ ‫إىل‬ radio ." ‫بإضافة‬ ‫فقم‬ ، ‫المصاحب‬ ‫للنص‬ ‫تسميات‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ :‫تلميح‬ ‫الصف‬ . custom-control-label .‫إليه‬ ‫قيمة‬ ‫أن‬ ‫الحظ‬ ‫الخاصية‬ for ‫اديو‬‫ر‬‫ال‬ ‫معرف‬ ‫مع‬ ‫تتطابق‬ ‫أن‬ ‫يجب‬ <form> <div class="custom-control custom-radio"> <input type="radio" class="custom-control- input" id="customRadio" name="1" value="customEx"> <label class="custom-control-label" for="customRadio">Custom radio</label> </div> </form>
  • 193. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 193 Custom Select Menu ‫أضف‬ ، ‫مخصصة‬ ‫تحديد‬ ‫قائمة‬ ‫إلنشاء‬ ‫الصف‬ custom-select < ‫عنرص‬ ‫إىل‬ select > ‫يوج‬ ‫ال‬ ‫عندما‬ ‫د‬ ‫مساحة‬ ‫تلقائيا‬ ‫لألعىل‬ ‫ترتفع‬ ‫للقائمة‬ : <form> <select name="cars" class="custom-select"> <option selected>Custom Select Menu</option> <option value="volvo">Volvo</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> ‫ة‬ ‫ر‬ ‫كبت‬ . Custom Range ‫إلنشاء‬ ‫حقل‬ ‫نطاق‬ ‫أضف‬ ، ‫مخصص‬ ‫الصف‬ custom-range ‫إىل‬ ‫حقل‬ <" = ‫بالنوع‬ ‫إدخال‬ range :"> <form> <label for="customRange">Custom range</label> <input type="range" class="custom- range" id="customRange" name="points1"> </form> Custom File Upload ‫قم‬ ، ‫مخصص‬ ‫ملف‬ ‫تحميل‬ ‫إلنشاء‬ ‫بتغليف‬ ‫ب‬ ‫حاوية‬ ‫عنرص‬ ‫الصف‬ . custom-file ‫حول‬ ‫حقل‬ ‫بالنوع‬ ‫اإلدخال‬ " = file . ‫بإضافة‬ ‫قم‬ ‫ثم‬ ." custom-file-input .‫إليه‬ ‫بإضافة‬ ‫فقم‬ ، ‫المصاحب‬ ‫للنص‬ ‫تسميات‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ :‫تلميح‬ ‫الصف‬ . custom-file-label ‫الحظ‬ .‫إليه‬ ‫قيمة‬ ‫أن‬ ‫الخاصية‬ for ‫تتط‬ ‫أن‬ ‫يجب‬ :‫االختيار‬ ‫ع‬‫مرب‬ ‫معرف‬ ‫مع‬ ‫ابق‬
  • 194. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 194 <form> <div class="custom-file"> <input type="file" class="custom-file- input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label> </div> </form> <script> // Add the following code if you want the name of the file appear on select $(".custom-file-input").on("change", function() { var fileName = $(this).val().split("").pop(); $(this).siblings(".custom-file- label").addClass("selected").html(fileName); }); </script> ‫المعرض‬ Carousel Carousel .‫العناص‬ ‫ر‬ ‫بي‬ ‫للتنقل‬ ‫ائح‬ ‫ر‬ ‫رس‬ ‫عرض‬ ‫عن‬ ‫عبارة‬ <div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="la.jpg" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="chicago.jpg" alt="Chicago"> </div>
  • 195. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 195 <div class="carousel-item"> <img src="ny.jpg" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> ‫المثال‬ ‫ح‬ ‫ر‬ ‫رس‬ :‫أعاله‬ ‫المثال‬ ‫من‬ ‫فصل‬ ‫كل‬‫يفعله‬ ‫لما‬ ‫وصف‬ . carousel ‫ر‬ ‫نىس‬ُ‫ي‬ ‫يطا‬ ‫ر‬ ‫رس‬ ‫ا‬ً‫دائري‬ . carousel-sources ‫ي‬ ‫ر‬ ‫(والت‬ ‫يحة‬ ‫ر‬ ‫رس‬ ‫كل‬‫أسفل‬ ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫النقاط‬ ‫ي‬ ‫ه‬ ‫هذه‬ .‫الدائري‬ ‫للعرض‬ ‫ات‬ ‫ر‬ ‫مؤرس‬ ‫يضيف‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫ائح‬ ‫ر‬ ‫الش‬ ‫عدد‬ ‫إىل‬ ‫ر‬ ‫تشت‬ )‫ا‬ً‫حالي‬ ‫المستخدم‬ ‫يشاهدها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫يحة‬ ‫ر‬ ‫والش‬ ‫الدائري‬ ‫الرف‬ . carousel-inner ‫الدائري‬ ‫الرف‬ ‫إىل‬ ‫ائح‬ ‫ر‬ ‫الش‬ ‫يضيف‬ . carousel-item ‫يحة‬ ‫ر‬ ‫رس‬ ‫كل‬‫محتوى‬ ‫يحدد‬ . carousel-control-prev ‫ر‬ ‫بي‬ ‫بالرجوع‬ ‫للمستخدم‬ ‫يسمح‬ ‫مما‬ ، ‫الدائري‬ ‫الرف‬ ‫إىل‬ )‫ا‬ ً ‫(سابق‬ ‫ا‬ً ‫يسار‬ ‫ا‬ً ‫زر‬ ‫يضيف‬ ‫ائح‬ ‫ر‬ ‫الش‬ . carousel-control-next ‫إىل‬ ‫باالنتقال‬ ‫للمستخدم‬ ‫يسمح‬ ‫مما‬ ، ‫الدائري‬ ‫الرف‬ ‫إىل‬ ) ‫ي‬ ‫(التاىل‬ ‫ا‬ ً ‫يمين‬ ‫ا‬ً ‫زر‬ ‫يضيف‬ ‫ائح‬ ‫ر‬ ‫الش‬ ‫ر‬ ‫بي‬ ‫األمام‬ carousel-control-prev-icon ‫مع‬ ‫ستخدم‬ُ‫ي‬ carousel-control-prev "‫"سابق‬‫زر‬ ‫إلنشاء‬ . carousel-control-next-icon ‫مع‬ ‫ستخدم‬ُ‫ي‬ carousel-control-next " ‫ي‬ ‫"التاىل‬‫زر‬ ‫إلنشاء‬ . slide ‫انتقال‬ ‫يضيف‬ CSS ‫اال‬ ‫هذه‬ ‫الة‬‫ز‬‫بإ‬ ‫قم‬ . ‫ي‬ ‫التاىل‬ ‫العنرص‬ ‫إىل‬ ‫عنرص‬ ‫من‬ ‫االنزالق‬ ‫عند‬ ‫كة‬ ‫الحر‬ ‫ر‬ ‫وتأثت‬ ‫لصف‬ ‫إذا‬ ‫ر‬ ‫التأثت‬ ‫هذا‬ ‫تريد‬ ‫ال‬ ‫كنت‬
  • 196. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 196 Add Captions to Slides < ‫داخل‬ ‫عناص‬ ‫أضف‬ div class = "carousel-caption < ‫كل‬‫داخل‬ >" div class = "carousel-item >" :‫يحة‬ ‫ر‬ ‫رس‬ ‫لكل‬ ‫توضيحية‬ ‫تسمية‬ ‫إلنشاء‬ <div class="carousel-item"> <img src="la.jpg" alt="Los Angeles"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div>
  • 197. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 197 ‫التلميح‬ Tooltip :‫عنرص‬ ‫فوق‬ ‫الماوس‬ ‫ر‬ ‫مؤرس‬ ‫المستخدم‬ ‫يحرك‬ ‫عندما‬‫يظهر‬ ‫ر‬ ‫صغت‬ ‫منبثق‬ ‫ع‬‫مرب‬ ‫عن‬ ‫عبارة‬ ‫األدوات‬ ‫تلميح‬ ‫مكون‬ ‫تلميح‬ ‫إنشاء‬ ‫كيفية‬ ‫أضف‬ ، ‫أداة‬ ‫تلميح‬ ‫إلنشاء‬ ‫الخاصية‬ data-toggle = "tooltip .‫عنرص‬ ‫إىل‬ " <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> ‫استخدم‬ ‫الخاصية‬ :‫األداة‬ ‫تلميح‬ ‫داخل‬ ‫عرضه‬ ‫يجب‬ ‫الذي‬ ‫النص‬ ‫لتحديد‬ ‫العنوان‬ <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> ‫التلميح‬ ‫تموضع‬ .‫العنرص‬ ‫أعىل‬ ‫األداة‬ ‫تلميح‬ ‫سيظهر‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫استخدم‬ ‫الخاصية‬ ‫من‬ ‫األيمن‬ ‫أو‬ ‫األيش‬ ‫أو‬ ‫ي‬ ‫السفىل‬ ‫أو‬ ‫العلوي‬ ‫الجانب‬ ‫عىل‬ ‫التلميح‬ ‫موضع‬ ‫ر‬ ‫لتعيي‬ ‫البيانات‬ ‫وضع‬ :‫العنرص‬ <a href="#" data-toggle="tooltip" data- placement="top" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data- placement="bottom" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data- placement="left" title="Hooray!">Hover</a> <a href="#" data-toggle="tooltip" data- placement="right" title="Hooray!">Hover</a>
  • 198. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 198 ‫المنبثقة‬ ‫نوافذ‬ Modal ‫هب‬ ‫المنبثقة‬ ‫النافذة‬ :‫الحالية‬ ‫الصفحة‬ ‫أعىل‬ ‫عرضها‬ ‫يتم‬ ‫منبثقة‬ ‫نافذة‬ / ‫حوار‬ ‫ع‬‫مرب‬ <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data- target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data- dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data- dismiss="modal">Close</button> </div> </div> </div> </div>
  • 199. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 199 ‫انميشن‬ ‫إضافة‬ animation ‫استخدم‬ ‫الصف‬ . fade :‫النموذج‬ ‫وإغالق‬ ‫فتح‬ ‫عند‬ ‫ر‬ ‫يتالش‬ ‫ر‬ ‫تأثت‬ ‫إلضافة‬ <!-- Fading modal --> <div class="modal fade"></div> <!-- Modal without animation --> <div class="modal"></div> ‫حجم‬ Modal ‫إضافة‬ ‫طريق‬ ‫عن‬ ‫النموذج‬ ‫حجم‬ ‫ر‬ ‫بتغيت‬ ‫قم‬ ‫الصف‬ modal-sm ‫أو‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫وط‬ ‫ر‬ ‫للش‬ ‫الصف‬ modal-lg ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫للنماذج‬ modal-xl .‫ا‬ ً ‫جد‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫وط‬ ‫ر‬ ‫للش‬ ‫أضف‬ ‫الصف‬ < ‫عنرص‬ ‫إىل‬ ‫الحجم‬ div ‫مع‬ > class .modal - :‫الحوار‬ Small Modal <div class="modal-dialog modal-sm"> Large Modal <div class="modal-dialog modal-lg"> Extra Large Modal <div class="modal-dialog modal-xl"> .‫الحجم‬ ‫ي‬ ‫ف‬ "‫"متوسطة‬ ‫الوسائط‬ ‫تكون‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫المنبثقة‬ ‫النافذة‬ ‫توسيط‬ ‫باستخدام‬ ، ‫الصفحة‬ ‫داخل‬ ‫ا‬ً‫وأفقي‬ ‫ا‬ً‫عمودي‬ ‫النموذج‬ ‫بتوسيط‬ ‫قم‬ ‫الصف‬ modal - :‫الحوار‬ ‫عىل‬‫كز‬ ‫تر‬ ‫ي‬ ‫ر‬ ‫الت‬‫الحوار‬ <div class="modal-dialog modal-dialog-centered"> Scrolling Modal ، ‫النموذج‬ ‫داخل‬ ‫المحتوى‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫لديك‬ ‫يكون‬ ‫عندما‬ ‫أدناه‬ ‫األمثلة‬‫انظر‬ .‫الصفحة‬ ‫إىل‬‫تمرير‬ ‫يط‬ ‫ر‬ ‫رس‬ ‫إضافة‬ ‫تتم‬ :‫لفهمها‬ <div class="modal-dialog"> ‫إضافة‬ ‫طريق‬ ‫عن‬ ، ‫نفسها‬ ‫الصفحة‬ ‫من‬ ً ‫بدال‬ ، ‫فقط‬ ‫النموذج‬ ‫داخل‬‫التمرير‬ ‫الممكن‬ ‫من‬ ، ‫ذلك‬ ‫ومع‬ modal- dialog-scrollable . ‫إىل‬ modal - :‫الحوار‬ <div class="modal-dialog modal-dialog-scrollable">
  • 200. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 200 ‫األدوات‬ ‫صفوف‬ Utilities ‫يحتوي‬ Bootstrap 4 ‫من‬ ‫ر‬ ‫الكثت‬ ‫عىل‬ ‫الصفوف‬ ‫أي‬ ‫استخدام‬ ‫دون‬ ‫بشعة‬ ‫العناص‬ ‫لتصميم‬ ‫المساعدة‬ ‫األدوات‬ ‫كود‬ CSS . Borders ‫استخدم‬ ‫الصفوف‬ :‫عنرص‬ ‫من‬ ‫حدود‬ ‫الة‬‫ز‬‫إ‬ ‫أو‬ ‫إلضافة‬ ‫الحدود‬ <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> Border Color <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> Float and Clearfix ‫باستخدام‬ ‫ر‬ ‫اليمي‬ ‫إىل‬‫عنرص‬ ‫بتحريك‬ ‫قم‬ ‫الصف‬ . float-right . ‫باستخدام‬ ‫اليسار‬ ‫إىل‬ ‫أو‬ float-left ‫وقم‬ ، ‫باستخدام‬ ‫العوامات‬ ‫تحديد‬ ‫بإلغاء‬ ‫الصف‬ . clearfix : <div class="clearfix"> <span class="float-left">Float left</span> <span class="float-right">Float right</span> </div>
  • 201. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 201 Shadows ‫الظل‬ <div class="shadow-none p-4 mb-4 bg-light">No shadow</div> <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div> <div class="shadow p-4 mb-4 bg-white">Default shadow</div> <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div> Vertical Align ‫استخدم‬ ‫الصفوف‬ ، ‫مضمنة‬ ‫ومكتلة‬ ، ‫مضمنة‬ ‫عناص‬ ‫عىل‬ ‫فقط‬ ‫(تعمل‬ ‫العناص‬ ‫محاذاة‬ ‫ر‬ ‫لتغيت‬ ‫المحاذاة‬ :)‫الجدول‬ ‫وخاليا‬ ، ‫مضمنة‬ ‫جدول‬ ‫وعناص‬ <span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> Responsive Embeds ‫ر‬ ‫تضمي‬ ‫أو‬ ‫متجاوب‬ ‫فيديو‬ ‫بإنشاء‬ ‫قم‬ .‫األصل‬ ‫عرض‬ ‫عىل‬ ً‫بناء‬ ‫ائح‬ ‫ر‬ ‫رس‬ ‫عرض‬ . ‫عنرص‬ ‫أضف‬ embed-responsive - < ‫(مثل‬ ‫ر‬ ‫تضمي‬ ‫عناص‬ ‫أي‬ ‫إىل‬ iframe < ‫أو‬ > video ‫ي‬ ‫رئيىس‬ ‫عنرص‬ ‫ي‬ ‫ف‬ )> . ‫مع‬ embed-response :‫تختارها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫االرتفاع‬ ‫إىل‬ ‫العرض‬ ‫ونسبة‬ <!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
  • 202. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 202 <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div> Visibility ‫الرؤية‬ ‫اال‬ ‫استخدم‬ ‫لصفوف‬ ‫اال‬ ‫هذه‬ :‫مالحظة‬ .‫العناص‬ ‫رؤية‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ‫المرئية‬ ‫ر‬ ‫غت‬ ‫أو‬ ‫ئية‬‫ر‬‫الم‬ ‫لصفوف‬ ‫قيمة‬ ‫ر‬ ‫تغت‬ ‫ال‬ ‫عرض‬ CSS : ‫ي‬ ‫مخق‬ : ‫ي‬ ‫مرن‬ ‫أو‬ ‫ي‬ ‫مرن‬ :‫الرؤية‬ ‫فقط‬ ‫يضيفون‬ . <div class="visible">I am visible</div> <div class="invisible">I am invisible</div> Position ‫التموضع‬ ‫استخدم‬ ‫الصف‬ . fixed-top :‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫عنرص‬ ‫أي‬ ‫بقاء‬ / ‫إلصالح‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav> ‫استخدم‬ ‫الصف‬ . fixed-bottom :‫الصفحة‬ ‫أسفل‬ ‫ي‬ ‫ف‬ ‫عنرص‬ ‫أي‬ ‫بقاء‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed- bottom"> ... </nav>
  • 203. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 203 ‫استخدم‬ ‫الصف‬ . sticky-top ‫هذه‬ :‫مالحظة‬ .‫بعده‬‫التمرير‬ ‫عند‬ ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫يبق‬ / ‫ا‬ ً ‫ثابت‬ ‫عنرص‬ ‫أي‬ ‫لجعل‬ ‫اال‬ ‫لصف‬ ‫ي‬ ‫ف‬ ‫تعمل‬ ‫ال‬ IE11 .) ‫ي‬ ‫ر‬ ‫نست‬ :‫موضع‬ ‫أنها‬ ‫عىل‬ ‫(ستعاملها‬ ‫السابقة‬ ‫ات‬‫ر‬‫واإلصدا‬ <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav> Colors ‫االلوان‬ ‫الصفوف‬ . : ‫ي‬ ‫ه‬ ‫النص‬ ‫ألوان‬ text-muted . ‫و‬ text-Primary . ‫و‬ text-Success . ‫و‬ text-info . ‫و‬ text- warning . ‫و‬ text-risk . ‫و‬ text-Secondary .‫و‬ text-white . ‫و‬ text - ‫النص‬ ‫(لون‬ ‫ي‬ ‫نص‬ ‫ونص‬ ، ‫غامق‬ . ‫و‬ )‫أسود‬ ‫ا‬ً‫غالب‬ / ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ text-light : Background Colors ‫الصفوف‬ . : ‫ي‬ ‫ه‬ ‫الخلفية‬ ‫ألوان‬ bg-Primary .‫و‬ bg-Success . ‫و‬ bg-info . ‫و‬ bg-warning .‫و‬ bg-danger . ‫و‬ bg-Secondary .‫و‬ bg-dark . ‫و‬ bg-light . ‫مع‬ ‫استخدامها‬ ‫ي‬ ‫ف‬ ‫غب‬ ‫ر‬ ‫ست‬ ‫الحاالت‬ ‫بعض‬ ‫ي‬ ‫ف‬ ‫لذا‬ ، ‫النص‬ ‫لون‬ ‫تحدد‬ ‫ال‬ ‫الخلفية‬ ‫ألوان‬ ‫أن‬ ‫الحظ‬ ‫الصف‬ .* ‫نصية‬
  • 204. Bootstrap 4 ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 204 Block Elements ‫عنرص‬ ‫إىل‬ ‫عنرص‬ ‫لتحويل‬ ‫أضف‬ ، ‫كتلة‬ ‫الصف‬ . d-block ‫من‬ ‫ا‬ً‫أي‬ ‫استخدم‬ . ‫الصفوف‬ d - * - block ‫ي‬ ‫ف‬ ‫للتحكم‬ : ‫ر‬ ‫معي‬ ‫شاشة‬ ‫عرض‬ ‫عىل‬ ‫كتلة‬‫عنرص‬ ‫العنرص‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫ر‬ ‫مت‬ <span class="d-block bg-success">d-block</span> <span class="d-sm-block bg-success">d-sm-block</span> <span class="d-md-block bg-success">d-md-block</span> <span class="d-lg-block bg-success">d-lg-block</span> <span class="d-xl-block bg-success">d-xl-block</span> Flex ‫استخدم‬ ‫الصفوف‬ . flex - ‫باستخدام‬ ‫التخطيط‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ * flexbox . <div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div>
  • 206. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 206 ‫مقدمة‬ ‫عام‬ ‫ايش‬ ‫برندان‬ ‫الجافا‬ ‫لغة‬ ‫ابتكر‬ 1995 ‫كة‬ ‫ر‬ ‫رس‬ ‫ي‬ ‫ف‬ ‫عمله‬ ‫أثناء‬ ‫موكا‬ ‫اسم‬ ‫تحت‬ ‫نتسكيب‬ , ‫جافا‬ ‫لغة‬ ‫من‬ ‫إياها‬ ‫ا‬ ً‫مستلهم‬ Java ‫لكنها‬ , ‫من‬ ‫الجافا‬ ‫لغة‬ ‫عن‬ ‫تختلف‬ ‫كة‬ ‫ر‬ ‫رس‬ Sun Microsystems ،‫بعضهما‬ ‫مثل‬ ‫ألنهما‬ ‫يرجع‬ ‫ال‬ ‫االسم‬ ‫ي‬ ‫ف‬ ‫والتشابه‬ ‫الحياة‬ ّ ‫بث‬ ‫ي‬ ‫ه‬ ‫اللغة‬ ‫هذه‬ ‫وفائدة‬ ‫الويب‬ ‫صفحات‬ ‫ي‬ ‫ف‬ ‫إلنشاء‬ ‫تستخدم‬ ‫حيث‬ ، ‫صفحات‬ ‫ويب‬ ‫تفاعلية‬ ‫ر‬ ‫أكت‬ . ‫سكرب‬ ‫جافا‬ ‫لغة‬ : ‫مالحظة‬ ‫ت‬ ‫الويب‬ ‫واجهات‬ ‫ي‬ ‫ف‬ ‫أهمها‬ ‫عديدة‬ ‫مجاالت‬ ‫ي‬ ‫ف‬ ‫تستخدم‬ . ً ‫حاليا‬ ‫عنه‬ ‫نتكلم‬ ‫الذي‬ ‫الويب‬ ‫صفحات‬ ‫او‬ ‫االمامية‬ ‫لمواصفات‬ ‫تخضع‬ ‫المستوى‬ ‫عالية‬ ‫لفة‬ ‫سكربت‬ ‫جافا‬ ‫لغة‬ ECMAScript ‫انها‬ ‫كما‬ ‫التوجه‬ ‫كائنية‬ OOP ‫لغة‬ ‫تفعل‬ ‫أن‬ ‫يمكن‬ ‫ماذا‬ JavaScript ‫؟‬ ‫عىل‬ ‫لغة‬ ‫أن‬ ‫من‬ ‫الرغم‬ ‫سكربت‬ ‫الجافا‬ ‫برمجية‬ ‫لغة‬ ‫اجها‬‫ر‬‫اد‬ ‫يمكن‬ ‫لكن‬ ‫ب‬ ‫ب‬ ‫س‬ ‫ا‬ ‫ي‬ ‫ف‬ ‫طة‬ ‫صفحات‬ HTML .
  • 207. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 207 ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫األ‬ ‫مع‬ ‫الخاصية‬ ‫هذه‬ ‫مع‬ : ‫حداث‬ ‫صفحات‬ ‫ي‬ ‫ف‬ ‫أحداث‬ ‫ارفاق‬ ‫يمكن‬ HTML ‫تحميل‬ ‫انتهاء‬ ‫مثل‬ ‫ما‬ ‫ر‬ ‫شت‬ ‫حدوث‬ ‫عند‬ ‫عنرص‬ ‫عىل‬ ‫المستخدم‬ ‫ضغط‬ ‫عند‬ ‫أو‬ ‫الصفحة‬ HTML . ‫الويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫معي‬ ‫للغة‬ ‫يمكن‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫عناص‬ ‫اءة‬‫ر‬‫وق‬ ‫كتابة‬ HTML ‫للغة‬ ‫يمكن‬ : ‫سكربت‬ ‫الجافا‬ ‫عناص‬ ‫محتوى‬ ‫ر‬ ‫وتغيت‬ ‫كتابة‬ HTML . ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫لغة‬ ‫تسمح‬ ‫حيث‬ : ‫النماذج‬ ‫مع‬ ‫سكربت‬ ‫الجافا‬ JavaScript ‫أجل‬ ‫من‬ ‫فر‬ ‫ر‬ ‫الست‬ ‫اىل‬ ‫ارساله‬ ‫قبل‬ ‫النموذج‬ ‫من‬ ‫بالتأكد‬ . ‫فر‬ ‫ر‬ ‫الست‬ ‫عىل‬ ‫تحميلها‬ ‫يتم‬ ‫اضافية‬ ‫عمليات‬ ‫تجنب‬ ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكرب‬ ‫الجافا‬ ‫ت‬ JavaScript : ‫المستخدم‬ ‫متصفح‬ ‫لمعرفة‬ ‫معينة‬ ‫صفحة‬ ‫فتح‬ ‫ثم‬ ‫ائر‬‫ز‬‫ال‬ ‫يستخدمه‬ ‫الذي‬ ‫المتصفح‬ ‫نوع‬ ‫تحديد‬ ‫يمكن‬ ‫حيث‬ . ‫لديه‬ ‫الذي‬ ‫المتصفح‬ ‫حسب‬ ‫مختلفة‬ ‫لغة‬ ‫استخدام‬ ‫يمكن‬ ‫سكرب‬ ‫الجافا‬ ‫ت‬ JavaScript ‫المتصفح‬ ‫ر‬ ‫كوكت‬‫إلنشاء‬ cookies ‫ائر‬‫ز‬‫ال‬ ‫حاسوب‬ ‫عىل‬ ‫ومعلومات‬ ‫بيانات‬ ‫تحميل‬ ‫يمكن‬ ‫حيث‬
  • 208. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 208 ‫ج‬ ‫كود‬ ‫اول‬ ‫لك‬ ‫سكربت‬ ‫افا‬ ‫الوسم‬ ‫استخدام‬ ‫<يمكن‬script> ‫كود‬‫اج‬‫ر‬‫إلد‬ ‫سكرب‬ ‫جافا‬ ‫ت‬ ‫صفحة‬ ‫داخل‬ HTML ‫كود‬ ‫سكربت‬ ‫الجافا‬ ‫يكتب‬ ‫ان‬ ‫يجب‬ ‫الوسم‬ ‫بداية‬ ‫ر‬ ‫بي‬ <script> ‫ونهايته‬</script> <script> // JavaScript goes here </script> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js</title> </head> <body> <h1 id="js-title">hello js</h1> <script> document.getElementById("js- title").innerHTML="hello php"; </script> </body> </html> ‫أننا‬ ‫الحظ‬ ‫وضع‬ ‫كود‬‫نا‬ ‫سكرب‬ ‫الجافا‬ ‫ت‬ ‫الصفحة‬ ‫أسفل‬ ‫ي‬ ‫ف‬ ‫اال‬‫و‬ ‫بشكل‬ ‫يعمل‬ ‫فلن‬ .‫جيد‬ ‫يمكنك‬ ‫وضع‬ ‫سكرب‬ ‫الجافا‬ ‫أكواد‬ ‫ت‬ ً‫كل‬ ‫من‬ <body> ‫و‬ <head> ‫الوقت‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫تالحظ؟‬ ‫ماذا‬, ‫الصفحة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫الكود‬ ‫وضع‬ ‫جرب‬
  • 209. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 209 ‫ملف‬ ‫استخدام‬ JavaScript ‫خارجي‬ • . ‫منفصلة‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫الجافاسكربت‬ ‫أكواد‬ ‫استخدام‬ ‫يمكن‬ • ‫يمكن‬ ‫أكواد‬ ‫عىل‬ ‫ي‬ ‫ر‬ ‫الخارج‬ ‫الملف‬ ‫مايحتوي‬ ً ‫غالبا‬ ‫ي‬ ‫ف‬ ‫استخدامها‬ ‫صفحات‬ .‫متعددة‬ • ‫ي‬ ‫ه‬ ‫الجافاسكربت‬ ‫ملف‬ ‫صيغة‬ js < ‫وسوم‬ ‫استخدام‬ ‫اليجب‬ : ‫مالحظة‬ script></script ‫الملف‬ ‫استخدام‬ ‫عند‬ > ‫ي‬ ‫ر‬ ‫الخارج‬ ‫سكرب‬ ‫للجافا‬ ‫ت‬ . ‫كود‬‫الستخدام‬ ‫سكرب‬ ‫جافا‬ ‫ت‬ ‫باستخدام‬ ‫الملف‬ ‫ومكان‬ ‫اسم‬ ‫تحديد‬ ‫يجب‬ ‫منفصل‬ ‫الالحقة‬ src < ‫الوسم‬ ‫ضمن‬ script ‫صفحة‬ ‫ي‬ ‫ف‬ > HTML index.html <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js</title> </head> <body> <h1 id="js-title">hello js</h1> <script type="text/javascript" src="main.js"></scri pt> </body> </html> main.js document.getElementById("js-title").innerHTML="hello php";
  • 210. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 210 ‫االحرف‬ ‫لحالة‬ ‫الحساسية‬ Case Sensitive ‫األكواد‬ ‫كتابة‬ ‫ي‬ ‫ف‬ ‫حساسة‬ ‫حاسة‬ ‫الجافاسكربت‬ ‫ر‬ ‫تعتت‬ , ‫استخدام‬ ‫عن‬ ً ‫ا‬‫ر‬‫حذ‬ ‫كن‬ ‫كتابة‬‫عند‬ ‫ة‬ ‫ر‬ ‫الصغت‬ ‫أو‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫األحرف‬ keywords, variables ‫استدعاء‬‫أو‬ function <!DOCTYPE html> <html> <body> <h3>My favorite subject</h3> <p id="demo"></p> <script> var subject, Subject; subject = "Java"; Subject = "Maths"; document.getElementById("demo").innerHTML = subject; </script> </body> </html> ‫التعليقات‬ ‫ح‬ ‫ر‬ ‫لش‬ ‫التعليقات‬ ‫اضافة‬ ‫يمكن‬ ‫الكود‬ ً ‫وضوحا‬ ‫ر‬ ‫أكت‬ ‫الكود‬ ‫لجعل‬ ‫أو‬ . ‫واحد‬ ‫سطر‬ ‫التعليق‬ ‫كان‬‫اذا‬ ‫البداية‬ ‫ي‬ ‫ف‬ // ‫استخدام‬ ‫يمكن‬ . // add title to page document.write("<h1>hello Javascript</h1>"); ‫ونجمة‬ ‫مائل‬ ‫بفاصل‬ ‫األسطر‬ ‫متعددة‬ ‫التعليقات‬ /* ‫فاصل‬ ‫ثم‬ ‫بنجمة‬ ‫ي‬ ‫تنته‬ ‫ثم‬ ‫مائل‬ */ . /* this is a longer, multi-line comment */
  • 211. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 211 ‫المتغيرات‬ ‫قواعد‬ ‫كتابة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أسماء‬ ‫ي‬ ‫ف‬ JavaScript : o .)$( ‫دوالر‬ ‫عالمة‬ ‫أو‬ )_( ‫سفلية‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫أو‬ ‫بحرف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يبدأ‬ ‫أن‬ ‫يجب‬ o .‫برقم‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يبدأ‬ ‫أن‬ ‫يمكن‬ ‫ال‬ o ( ‫رقمية‬ ‫أبجدية‬ ‫أحرف‬ ‫عىل‬ ‫إال‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يحتوي‬ ‫أن‬ ‫يمكن‬ ‫ال‬ A-z ، 0 - 9 ) .‫سفلية‬ ‫طات‬ ‫ر‬ ‫ورس‬ o ‫عىل‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يحتوي‬ ‫أن‬ ‫يمكن‬ ‫ال‬ .‫مسافات‬ o ‫أساسية‬ ‫كلمة‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫ال‬ JavaScript ‫محجوزة‬ ‫كلمة‬‫أو‬ ‫ي‬ ‫ف‬ JavaScript . ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ :‫مالحظة‬ JavaScript ‫أن‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ ، ‫األحرف‬ ‫لحالة‬ ‫حساسة‬ $ myvar $‫و‬ myVar . ‫ر‬ ‫مختلفي‬ ‫ين‬ ‫ر‬ ‫متغت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫اسماء‬ ‫عن‬ ‫امثلة‬ Number_hits, temp99, $credit, and_name ‫ثالثة‬ ‫هناك‬ ‫ل‬ ‫طرق‬ ‫إلعالن‬ ‫ر‬ ‫متغت‬ ‫عن‬ .‫سكريبت‬ ‫جافا‬ ‫ي‬ ‫ف‬ var ‫المحجوزة‬ ‫الكلمة‬ var ‫ر‬ ‫المتغت‬ ‫باسم‬ ‫متبوعة‬ ( var x ،) ‫ويمكن‬ ‫له‬ ‫اولية‬ ‫قيمة‬ ‫اسناد‬ ،‫(اي‬ ‫تهيئته‬ var x = value ) ‫الصيغة‬ ‫هذه‬ ‫استخدام‬ ‫يمكن‬ ‫لإلعالن‬ ‫سواء‬ ‫حد‬ ‫عىل‬ ‫ي‬ ‫محىل‬ ‫ر‬ ‫ومتغت‬ ‫عام‬ ‫ر‬ ‫متغت‬ ‫عن‬ let ( ‫الكتلة‬ ‫نطاق‬ ‫ضمن‬ ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫عن‬ ‫االعالن‬ block .) const
  • 212. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 212 ‫ثابت‬ ‫عن‬ ‫االعالن‬ ً ‫الحقا‬ ‫تعديلها‬ ‫يمكن‬ ‫وال‬ ‫له‬ ‫قيمة‬ ‫اسناد‬ ‫و‬ . ‫ر‬ ‫المتغت‬ ‫قواعد‬ ‫نفسها‬ ‫ي‬ ‫ه‬ ‫الثابت‬ ‫نطاق‬ ‫قواعد‬ let ‫ال‬ ‫نطاق‬ ‫يخص‬ ‫فيما‬ block . ‫ر‬ ‫متغت‬ ‫عن‬ ‫االعالن‬ ‫باستخدام‬ var ‫او‬ let ‫تهيئته‬ ‫سيتم‬ ،‫تهيئته‬ ‫دون‬ ‫من‬ ‫بالقيمة‬ undefined ‫ي‬ ‫تلقان‬ ‫بشكل‬ . ‫ال‬ ‫اىل‬ ‫سيؤدي‬ ‫عنه‬ ‫معلن‬ ‫ر‬ ‫غت‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫الوصول‬ ‫محاولة‬ ReferenceError. ‫استخدام‬ ‫يمكنك‬ undefined ‫ال‬ ‫ام‬ ‫مهيأ‬ ‫ر‬ ‫المتغت‬ ‫كان‬‫إذا‬ ‫ما‬ ‫الختبار‬ var input; if(input === undefined){ doThis(); } else { doThat(); } ‫ات‬ ‫ر‬ ‫المتغت‬ ‫نطاق‬ - Variable scope ‫متاحا‬ ‫سيصبح‬ ‫ألنه‬ ،‫عام‬ ‫ر‬ ‫متغت‬ ‫سيسىم‬ ‫دالة‬ ‫أي‬ ‫خارج‬ ‫ر‬ ‫متغت‬ ‫بتعريف‬ ‫سنقوم‬ ‫عندما‬ ‫داخل‬ ‫ر‬ ‫متغت‬ ‫بتعريف‬ ‫نقوم‬ ‫وعندما‬ . ‫ي‬ ‫الحاىل‬ ‫المستند‬ ‫ي‬ ‫ف‬ ‫أخرى‬ ‫برمجية‬ ‫تعليمات‬ ‫ألية‬ ‫فقط‬ ‫متاحا‬ ‫سيصبح‬ ‫ألنه‬ ، ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫سيسىم‬ ،‫دالة‬ ‫الدالة‬ ‫هذه‬ ‫داخل‬ . ‫داخل‬ ‫تعريفه‬ ‫يتم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ block ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫او‬ ‫للدالة‬ ‫محىل‬ ‫ر‬ ‫متغت‬ ‫اما‬‫هو‬ ‫البلوك‬ ‫هذا‬ ‫تواجد‬ ‫حسب‬ ‫العام‬ ‫للنطاق‬ . if (true) { var x = 5; } console.log(x); // 5 if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined Keyword Scope Hoisting Can Be Reassigned Can Be Redeclared var Function scope Yes Yes Yes
  • 213. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 213 let Block scope No Yes No const Block scope No No No Variable hoisting ‫الرفع‬ hoisting ‫سلوك‬ ‫هو‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫تلقان‬ ،‫سكريبت‬ ‫جافا‬ ‫يتم‬ ‫خيث‬ ‫جميع‬ ‫رفع‬ ‫التعليمة‬ ‫من‬ ‫العلوي‬ ‫الجزء‬ ‫ي‬ ‫(ف‬ ‫ي‬ ‫الحاىل‬ ‫النطاق‬ ‫أعىل‬ ‫إىل‬ ، ‫الدوال‬ ‫او‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أو‬ ‫الحالية‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫الدالة‬ .)‫الحالية‬ ‫لذلك‬ .‫عنه‬ ‫االعالن‬ ‫قبل‬ ‫ر‬ ‫المتغت‬ ‫استخدام‬ ‫يمكن‬ console.log(x === undefined); // logs "true" var x = 3; ‫ر‬ ‫المتغت‬ ‫باستخدا‬ ‫المعرف‬ ‫م‬ let ‫رفعه‬ ‫يتم‬ ‫لن‬ hoisting ‫ال‬ ‫نطاق‬ ‫اعىل‬ ‫اىل‬ block console.log(x); // ReferenceError let x = 3; ‫ال‬ ‫فقط‬ ،‫للدوال‬ ‫بالنسبة‬ function declaration ‫االعىل‬ ‫اىل‬ ‫فع‬ ‫ر‬ ‫ست‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ه‬ ‫ال‬ ‫وليست‬ function expression /* Function declaration */ foo(); // "bar" function foo() { console.log('bar'); } /* Function expression */ baz(); // TypeError: baz is not a function var baz = function() { console.log('bar2'); };
  • 214. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 214 :‫البيانات‬ ‫انواع‬ • ‫يوجد‬ ‫ستة‬ ‫انواع‬ ‫اولية‬ primitives : 1 . Boolean ‫منطقية‬ 2 . null .‫خالية‬ ‫قيمة‬ ‫ي‬ ‫تعت‬ ،‫المحجوزة‬ ‫الكلمات‬ ‫من‬ 3 . undefined ‫ر‬ ‫الغت‬ ‫القيم‬ ‫عن‬ ‫ر‬ ‫يعت‬ ‫ال‬ ‫معرفة‬ 4 . ‫النوع‬ Number ‫مثل‬ ‫ي‬ ‫رقىم‬ . 42 ‫او‬ 3.14159 . 5 . ‫النوع‬ String " ‫مثل‬ ‫نصية‬ ‫سلسلة‬ . Anas " 6 . Symbol (ES6) ‫ر‬ ‫والغت‬ ‫نوعها‬ ‫من‬ ‫فريدة‬ ‫بيانات‬ . ‫ر‬ ‫للتغيت‬ ‫قابلة‬ . • ‫الكائنية‬ Object ‫أرقام‬ ‫إىل‬ ‫النصية‬ ‫القيم‬ ‫تحويل‬ )( parseInt )( parseFloat var str = "3.14"; console.log( typeof str ) // string var parse1 = parseInt(str) console.log( typeof parse1 ) // number. var parse2 = parseFloat(str) console.log( typeof parse2 ) // number. ‫العامل‬ ‫باستخدام‬ ،‫حرفية‬ ‫سلسلة‬ ‫شكل‬ ‫عىل‬ ‫رقمية‬ ‫قيمة‬ ‫لتحويل‬ ‫بديلة‬ ‫طريقة‬ (unary plus)+
  • 215. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 215 ‫المعامالت‬ Operators ‫الحسابية‬ ‫المعامالت‬ ‫الرمز‬ ‫الوصف‬ ‫مثال‬ + ‫جمع‬ x=y+2 - ‫طرح‬ x=y-2 * ‫ب‬‫ص‬ x=y*2 / ‫قسمة‬ x=y/2 % ) ‫القسمة‬ ‫ي‬ ‫ر‬ ‫باف‬ ( ‫ي‬ ‫ر‬ ‫الباف‬ x=y%2 ++ ‫(إضافة‬ ‫إضافة‬ 1 ) x=++y x=y++ -- ‫(نقص‬ ‫نقص‬ 1 ) x=--y x=y-- ‫معامالت‬ ‫االسناد‬ ‫الحسابية‬ ‫الرمز‬ ‫المثال‬ ‫المطابقة‬ ‫العملية‬ = x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y ‫القيم‬ ‫مع‬ +‫الرمز‬ ‫يستخدم‬ Strings ‫إلضافة‬ ‫سلسلة‬ ‫أخرى‬ ‫قيم‬ ‫مع‬ ‫مع‬ ‫ودمجهم‬ . ‫بعض‬
  • 216. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 216 ‫معامالت‬ ‫المقارنة‬ ‫المنطقية‬ ‫المعامالت‬ ‫و‬ var $age = 8; if ($age<10) document.write("you ara a child"); ‫ي‬ ‫ر‬ ‫الثالن‬ ‫المعامل‬ (condition) ? value1:value2 var msg = (age < 10) ? "you ara a child":"you ara a young"; ‫المنطقية‬ ‫المعامالت‬ var $age = 25; if ($age>10 && $age<40) document.write("you ara a young"); ‫الرمز‬ ‫ح‬ ‫ر‬ ‫الش‬ == ‫ل‬ ٍ ‫مساو‬ === ) ‫والنوع‬ ‫القيمة‬ ( ‫ل‬ ٍ ‫مساو‬ ً ‫تماما‬ != ‫ل‬ ٍ ‫مساو‬ ‫ر‬ ‫غت‬ > ‫من‬ ‫ر‬ ‫أكت‬ < ‫من‬ ‫أصغر‬ >= ‫يساوي‬ ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ <= ‫من‬ ‫أصغر‬ ‫يساوي‬ ‫أو‬ ‫؟‬ ternary operator ‫الرمز‬ ‫ح‬ ‫ر‬ ‫الش‬ && ‫و‬ / and || ‫أو‬ / or ! ‫ليس‬ / not
  • 217. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 217 ‫الشرطية‬ ‫التعابير‬ ً ‫غالبا‬ ‫ر‬ ‫معي‬ ‫كود‬‫تكتب‬ ‫عندما‬ ‫تري‬ ‫ما‬ ‫د‬ ‫ولهذا‬ ‫مختلفة‬ ‫وط‬ ‫ر‬ ‫رس‬ ‫حسب‬ ‫ر‬ ‫معي‬ ‫أمر‬ ‫إنشاء‬ . ‫األمثلة‬ ‫ي‬ ‫ف‬ ‫كيف‬‫وسنتعلم‬ ‫ذلك‬ ‫لفعل‬ ‫طية‬ ‫ر‬ ‫الش‬ ‫ر‬ ‫التعابت‬ ‫خاصية‬ ‫استخدام‬ ‫يمكنك‬ ‫لدينا‬ 4 : ‫ي‬ ‫وه‬ ‫طية‬ ‫ر‬ ‫رس‬ ‫ر‬ ‫تعابت‬ ‫ر‬ ‫تعبت‬ if ‫صحيحة‬ ‫الحالة‬ ‫كانت‬‫حال‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫معي‬ ‫كود‬‫إلظهار‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ : . ً ‫تماما‬ ‫ر‬ ‫تعبت‬ if … else ‫ال‬ ‫هذا‬ ‫استخدام‬ ‫يمكن‬ : ‫حالة‬ ‫كانت‬‫اذا‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫الكود‬ ‫من‬ ‫نوع‬ ‫األول‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫جملة‬ ‫فينفذ‬ ‫صحيح‬ ‫ر‬ ‫غت‬ else . ‫ر‬ ‫تعبت‬ if … else if ….else ‫أي‬ ‫أكواد‬ ‫مجموعة‬ ‫من‬ ‫واحد‬ ‫مع‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ : ‫لم‬ ‫واذا‬ ‫آخر‬ ‫ط‬ ‫ر‬ ‫رس‬‫إظهار‬ ‫سيتم‬ ‫يتحقق‬ ‫لم‬ ‫واذا‬ ‫ر‬ ‫معي‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫تحقق‬ ‫عند‬ ‫يستخدم‬ ‫عند‬ ‫الكود‬ ‫تطبيق‬ ً ‫تلقائيا‬ ‫سيتم‬ ‫يتحقق‬ else . ‫ر‬ ‫تعبت‬ switch ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ : ‫لتنفيذ‬ ‫أكواد‬ ‫مجموعة‬ ‫من‬ ‫كود‬ ‫عىل‬ ‫اعتمادا‬ ‫ما‬ ‫قيمة‬ .
  • 218. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 218 ‫ر‬ ‫تعبت‬ If . ً ‫تماما‬ ‫صحيحة‬ ‫الحالة‬ ‫كانت‬‫حال‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫معي‬ ‫كود‬‫إلظهار‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ ‫نستخدم‬ if ‫ر‬ ‫بي‬ ‫ثم‬ ‫استخدامه‬ ‫نود‬ ‫الذي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫بوضع‬ ‫نقوم‬ ‫ر‬ ‫قوسي‬ ‫ر‬ ‫بي‬ ‫ثم‬ ‫نقوم‬ ‫المنحنية‬ ‫األقواس‬ ‫اج‬‫ر‬‫بإد‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫هذا‬ ‫تحقق‬ ‫عند‬ ‫يظهر‬ ‫أن‬ ‫نود‬ ‫الذي‬ ‫الكود‬ . ‫نتيجة‬ ‫أي‬ ‫عرض‬ ‫يتم‬ ‫لن‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫يتحقق‬ ‫لم‬ ‫وإن‬ var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<strong>Good morning</strong>"); } ‫ر‬ ‫تعبت‬ if … else var d=new Date(); var time=d.getHours(); if (time<12) { document.write("<strong>Good morning</strong>"); } else { document.write("<strong>Good evening</strong>"); } ‫ر‬ ‫تعبت‬ if … else if ….else ‫ط‬ ‫ر‬ ‫رس‬ ‫تحقق‬ ‫عند‬ ‫يستخدم‬ ‫أي‬ ‫أكواد‬ ‫مجموعة‬ ‫من‬ ‫واحد‬ ‫مع‬ ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫يستخدم‬ ‫تطبيق‬ ً ‫تلقائيا‬ ‫سيتم‬ ‫يتحقق‬ ‫لم‬ ‫واذا‬ ‫آخر‬ ‫ط‬ ‫ر‬ ‫رس‬‫إظهار‬ ‫سيتم‬ ‫يتحقق‬ ‫لم‬ ‫واذا‬ ‫ر‬ ‫معي‬ ‫عند‬ ‫الكود‬ else . var d=new Date(); var time=d.getHours(); if (time<12) { document.write("<strong>Good morning</strong>"); } else if (time<12 && time<14) { document.write("<strong>Good afternoon</strong>"); } else { document.write("<strong>Good evening</strong>"); }
  • 219. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 219 ‫القيم‬ Falsy ‫قيم‬ ُ ‫ت‬ ‫التالية‬ ‫القيم‬ false ‫طية‬ ‫ر‬ ‫رس‬ ‫تعليمة‬ ‫ي‬ ‫ف‬ ‫اختباها‬ ‫عند‬ o false o undefined o null o 0 o NaN o )""( ‫الفارغة‬ ‫النصية‬ ‫السلسلة‬ ‫ر‬ ‫تعبت‬ switch var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("‫;)"الجمعة‬ break; case 6: document.write("‫;)"السبت‬ break; case 0: document.write("‫;)"األحد‬ break; default: document.write(" ‫قيمة‬ ‫افتراضية‬ "); }
  • 220. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 220 ‫المنبثقة‬ ‫الصناديق‬ ‫التنبيه‬ ‫صندوق‬ ً ‫عادة‬ ‫التنبيه‬ ‫صندوق‬ ‫يستخدم‬ ‫الصال‬ ‫معلومات‬ ‫ل‬ ‫هامة‬ .‫لمستخدم‬ alert(" ً‫ا‬‫مرحب‬ ‫أنا‬ ‫صندوق‬ ‫تنبيه‬ ‫جديد‬ "); ‫التوكيد‬ ‫صندوق‬ . ‫ر‬ ‫معي‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫عىل‬ ‫المستخدم‬ ‫موافقة‬ ‫أردت‬ ‫اذا‬ ‫التوكيد‬ ‫صندوق‬ ً ‫عادة‬ ‫يستخدم‬ " ‫عىل‬ ‫الضغط‬ ‫اما‬ ‫للتوكيد‬ ‫المستخدم‬‫سيختار‬ ‫التوكيد‬ ‫صندوق‬ ‫ظهور‬ ‫عند‬ OK " "‫أو‬ ‫موافق‬ Cancel . ‫إلغاء‬ " var r=confirm(" ‫هل‬ ‫انت‬ ‫موافق؟‬ "); if (r==true) { alert(" ‫قمت‬ ‫بالضغط‬ ‫على‬ ‫موافق‬ "); } else { alert(" ‫قمت‬ ‫بالضغط‬ ‫على‬ ‫إلغاء‬ "); } ‫االدخال‬ ‫صندوق‬ ‫صندوق‬ ً ‫عادة‬ ‫يستخدم‬ ‫االدخال‬ ‫أردت‬ ‫اذا‬ ‫المستخدم‬ ‫من‬ ‫ما‬ ‫بيانات‬ ‫عىل‬ ‫الحصول‬ ‫صندوق‬ ‫ظهور‬ ‫عند‬ ‫االدخال‬ " ‫عىل‬ ‫اما‬ ‫الضغط‬ ‫المستخدم‬ ‫عىل‬ ‫سيتوجب‬ OK " "‫أو‬ ‫موافق‬ Cancel . ‫القيمة‬ ‫ادخال‬ ‫بعد‬ ‫العملية‬ ‫إلكمال‬ ‫إلغاء‬ " var fName=prompt(" ‫الرجاء‬ ‫ادخل‬ ‫اسمك‬ ‫هنا‬ ","‫;)"محمد‬ if (fName!=null && fName!="") { document.write("<p> ً‫ا‬‫مرحب‬ ‫بك‬ " + fName + " , ‫كيف‬ ‫حالك‬ ‫اليوم؟‬ </p>"); }
  • 221. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 221 ‫الدوال‬ functions ‫عن‬ ‫عبارة‬ ‫ي‬ ‫ه‬ ،‫الدالة‬ .‫جافاسكريبت‬ ‫ي‬ ‫ف‬ ‫األساسية‬ ‫اللبنات‬ ‫من‬ ‫واحدة‬ ‫ي‬ ‫ه‬ ‫الدوال‬ ‫من‬ ‫تتمكن‬ ‫ر‬ ‫حت‬ .‫معينة‬ ‫وظيفة‬ ‫تؤدي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫مجموعة‬ ‫إستدعائها‬ ‫تود‬ ‫الذي‬ ‫النطاق‬ ‫من‬ ‫ما‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫تعريفها‬ ‫أوال‬ ‫عليك‬ ،‫الدالة‬ ‫إستخدام‬ .‫منه‬ Function declarations ‫المحجوزة‬ ‫الكلمة‬ ‫من‬ ‫الدالة‬ ‫تتكون‬ function : ‫ب‬ ‫متبوعة‬ ، • ‫اسم‬ .‫الدالة‬ • .‫بفواصل‬ ‫بينها‬ ‫ويفصل‬ ‫ر‬ ‫قوسي‬ ‫ر‬ ‫بي‬ ‫محصورة‬ ،‫الدالة‬ ‫ات‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫قائمة‬ • ‫تعليمات‬ ‫سكريب‬ ‫الجافا‬ ‫ت‬ .}{ ‫المتعرجة‬ ‫األقواس‬ ‫داخل‬ ،‫الدالة‬ ‫عرف‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫الت‬ function square(number) { return number * number; } ‫االولية‬ ‫ات‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬‫تمرير‬ ‫يتم‬ primitives ‫اىل‬ )‫الخ‬...‫االعداد‬ ،‫الحرفية‬ ‫(كالسالسل‬ ،‫بالقيمة‬ ‫االستدعاء‬ ،‫تسىم‬ ‫بوسيلة‬ ،‫الدالة‬ call by value var value = 10; square(value); document.write(value); // log: 10 ‫كتابة‬‫الصحيح‬ var value = 10; var res = square(value); document.write(res); // log: 100 ‫ك‬ ‫اولية‬ ‫ر‬ ‫غت‬ ‫قيمة‬ ،‫(مثال‬ ‫كائن‬‫بتمرير‬ ‫قمت‬ ‫اذا‬ Array ‫قبل‬ ‫من‬ ‫معرف‬ ‫كائن‬‫او‬ ‫ر‬ ‫التغيت‬ ‫هذا‬ ‫سيكون‬ ،‫الكائن‬ ‫خصائص‬ ‫ر‬ ‫بتغيت‬ ‫الدالة‬ ‫وقامت‬ ، ‫ر‬ ‫امت‬‫ر‬‫كبا‬)‫المستخدم‬ ‫الدالة‬ ‫خارج‬ ‫مرئيا‬
  • 222. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 222 Function expressions ‫بصيغة‬ ‫عنها‬ ‫االعالن‬ ‫تم‬ ‫اعاله‬ ‫الدالة‬ ‫ان‬ ‫ر‬ ‫حي‬ ‫ي‬ ‫ف‬ function declaration ‫يمكن‬ ، ‫ال‬ ‫بصيغة‬ ‫الدوال‬ ‫انشاء‬ ‫ايضا‬ function expression ‫ان‬ ‫للدوال‬ ‫ايضا‬ ‫يمكن‬ ‫كما‬. ‫ال‬ ‫بصيغة‬ ‫تكون‬ anonymous ‫الدالة‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .)‫االسم‬ ‫مجهولة‬ ‫(دوال‬ square ‫ال‬ ‫بصيغة‬ ‫ايضا‬ ‫تعريفها‬ ‫يمكن‬ function expression ‫النحو‬ ‫عىل‬ :‫التاىل‬ var square = function(number) { return number * number }; var x = square(4) // x gets the value 16 ‫الدالة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬‫يظهر‬ .‫اخرى‬ ‫لدالة‬ ‫ر‬ ‫امت‬‫ر‬‫كبا‬‫دالة‬ ‫تمرير‬ ‫يمكنك‬ map ‫تستخدم‬ : ‫لها‬ ‫اول‬ ‫ر‬ ‫امت‬‫ر‬‫كبا‬‫اخرى‬ ‫دالة‬ function map(f,a) { var result = [], // Create a new Array i; for (i = 0; i != a.length; i++) result[i] = f(a[i]); return result; } ‫الصيغة‬ ‫مع‬ ‫استخدامها‬ ‫طريقة‬ function expression : var multiply = function(x) { return x * x * x; }; map(multiply, [0, 1, 2, 5, 10]); ‫الصيغة‬ ‫مع‬ ‫استخدامها‬ ‫طريقة‬ anonymous function :‫ة‬ ‫ر‬ ‫مبارس‬ map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]) ‫تقوم‬ ‫أن‬ ‫للدالة‬ ‫يمكن‬ ‫باستدعاء‬ ‫بحساب‬ ‫تقوم‬ ‫الدالة‬ ‫هذه‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫ذاتها‬ ‫بشكل‬ ‫وب‬‫المرص‬ :‫متكرر‬
  • 223. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 223 function factorial(n){ if ((n === 0) || (n === 1)) return 1; else return (n * factorial(n - 1)); } ‫المعادة‬ ‫القيمة‬ return ‫باستخدا‬ ‫الدالة‬ ‫من‬ ‫خرج‬ ‫ارجاع‬ ‫يمكن‬ ‫م‬ return ‫تؤ‬ ‫الدالة‬ ‫تنفيذ‬ ‫إنهاء‬ ‫إىل‬ ‫دي‬ ‫يرجع‬ .‫استدعاها‬ ‫الذي‬ ‫ر‬ ‫التعبت‬ ‫إىل‬ ‫قيمة‬ var square = function(number) { return number * number }; Arrow functions ‫دوال‬ ‫ات‬ ‫ر‬ ‫تعبت‬ Arrow function ‫من‬ ً ‫ا‬‫ز‬‫إيجا‬ ‫ر‬ ‫أكت‬ ‫ا‬ ‫ر‬ ‫تعبت‬ ‫باستخدام‬ ‫لك‬ ‫تسمح‬ ‫والقيمة‬ .‫الكالسيكية‬ ‫الوظائف‬ ‫عن‬ ‫ر‬ ‫التعبت‬ this ‫نحوي‬ ‫بشكل‬ ‫ربطها‬ ‫يتم‬ Lexical . var fun = (x)=>{ return x*x } //or var fun = x=> x*x rest parameter ‫الصيغة‬ rest parameter ‫ال‬ ‫من‬ ‫محدود‬ ‫ر‬ ‫غت‬ ‫عدد‬ ‫بتمثيل‬ ‫تسمح‬ arguments ‫ال‬ ‫لتجميع‬ ‫ات‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬ ‫بقية‬ ‫نستخدم‬ ،‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ .‫كمصفوفة‬ arguments ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫باول‬ ‫ها‬‫ب‬‫برص‬ ‫نقوم‬ ‫ثم‬ .‫النهاية‬ ‫لغاية‬ ‫ي‬ ‫الثان‬ ‫ر‬ ‫امت‬ ‫ر‬ ‫الت‬ ‫من‬ ‫ابتداءا‬ function multiply(multiplier, ...theArgs) { return theArgs.map(x => multiplier * x); } var arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6]
  • 224. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 224 ‫التكرار‬ ‫حلقات‬ ‫تقوم‬ ‫انها‬‫هو‬ ‫والمهم‬ ،‫الحلقات‬ ‫من‬ ‫مختلفة‬ ‫أنواع‬ ‫هناك‬ ‫ي‬ ‫ر‬ ‫بىس‬ ‫ء‬ ‫ار‬‫ر‬‫تك‬ ‫وهو‬ :‫واحد‬ ‫مختلفة‬ ‫طرقا‬ ‫تقدم‬ ،‫انواعها‬ ‫بمختلف‬ ‫الحلقات‬ .‫ات‬‫ر‬‫م‬ ‫عدة‬ ‫اءات‬‫ر‬‫االج‬ ‫بعض‬ ‫من‬ ‫ر‬ ‫معي‬ ‫نوع‬ ‫استخدام‬ ‫يمكن‬ .‫للحلقة‬ ‫النهاية‬ ‫ونقطة‬ ‫البداية‬ ‫نقطة‬ ‫لتحديد‬ .‫المشاكل‬ ‫من‬ ‫ر‬ ‫معي‬ ‫نوع‬ ‫لحل‬ ،‫الحلقات‬ : ‫ي‬ ‫وه‬ ‫جافاسكريبت‬ ‫ي‬ ‫ف‬ ‫المتوفرة‬ ‫الحلقات‬ o for statement o do...while statement o while statement o for...in statement o for...of statement ‫الحلقة‬ for for ([initialExpression]; [condition]; [incrementExpression]) ‫التعليمة‬ for ‫ر‬ ‫المتغت‬ ‫عن‬ ‫تعلن‬ i ‫ب‬ ‫بتهيئته‬ ‫وتقوم‬ 0 ‫ان‬ ‫من‬ ‫وتتحقق‬ . i ‫من‬ ‫اصغر‬ ‫العدد‬ 5 ‫اذا‬ ‫الحلقة‬ ‫جسم‬ ‫تنفيذ‬ ‫يتم‬ ‫السابق‬ ‫الحلقة‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫تحقق‬ ‫قيمة‬ ‫يد‬ ‫ر‬ ‫وست‬ i ‫ار‬‫ر‬‫بالتك‬ ‫مستمرة‬ ‫الحلقة‬ ‫دامت‬ ‫ما‬ ‫بواحد‬ . for (let i = 0; i < 5; i++) { document.writeln('# '+i); }
  • 225. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 225 ‫الحلقة‬ do...while ‫الحلقة‬ do...while ‫تتوق‬ ‫ال‬ ‫ف‬ ‫ب‬ ‫المحدد‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫تحقق‬ ‫يتم‬ ‫ر‬ ‫حت‬ ‫ار‬‫ر‬‫التك‬ ‫عن‬ false ‫للحلقة‬ ‫االساسية‬ ‫كيبة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫يوضح‬ . do...while do statement while (condition); statement ‫البدا‬ ‫عند‬ .‫ط‬ ‫ر‬ ‫الش‬ ‫من‬ ‫التحقق‬ ‫عملية‬ ‫تبدا‬ ‫أن‬ ‫قبل‬ ‫واحدة‬ ‫مرة‬ ‫تنفذ‬ : ( ‫ط‬ ‫ر‬ ‫الش‬ ‫كان‬‫اذا‬ ،‫التحقق‬ ‫بعملية‬ condition ‫يساوي‬ ) true ‫التعليمة‬ ‫تنفذ‬ ، ( ‫مجية‬ ‫ر‬ ‫الت‬ statement ‫من‬ ‫اخرى‬ ‫مرة‬ ‫التحقق‬ ‫يتم‬ ،‫التنفيذ‬ ‫انهاء‬ ‫بعد‬ .‫اخرى‬ ‫مرة‬ ) ‫يساوي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫يصبح‬ ‫ان‬ ‫اىل‬ .‫ط‬ ‫ر‬ ‫الش‬ false ‫التن‬ ‫يتوقف‬ ‫عندها‬ ، ‫انتقال‬ ‫ويتم‬ ‫فيذ‬ ‫ي‬ ‫تىل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمة‬ ‫اىل‬ ‫التحكم‬ do...while ‫برمجية‬ ‫تعليمات‬ ‫لتنفيذ‬ . .)} ... {( ‫بلوك‬ ‫التعليمة‬ ‫استخدم‬ ،‫متعددة‬ var i = 0; do { i += 1; console.log(i); } while (i < 5); ‫الحلقة‬ while ‫الحلقة‬ while ‫ستستمر‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫طالما‬ ‫بها‬ ‫المرتبطة‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمة‬ ‫بتنفيذ‬ ‫يساوي‬ ‫المحدد‬ true ‫للحلقة‬ ‫االساسية‬ ‫كيبة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫يوضح‬ . while while (condition) statement
  • 226. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 226 var n = 0; var x = 0; while (n < 3) { n++; x += n; } ‫كل‬‫مع‬ ‫ار‬‫ر‬‫تك‬ ‫عىل‬ ‫بالزيادات‬ ‫الحلقة‬ ‫ستقوم‬ ، n ‫إىل‬ ‫قيمته‬ ‫وتضيف‬ x ‫لذالك‬ . x ‫و‬ n :‫التالية‬ ‫القيم‬ ‫ستمتلك‬ :‫األول‬‫المرور‬ ‫بعد‬ n = 1 ‫و‬ x = 1 : ‫ي‬ ‫الثان‬‫المرور‬ ‫بعد‬ n = 2 ‫و‬ x = 3 :‫الثالث‬‫المرور‬ ‫بعد‬ n = 3 ‫و‬ x = 6 ‫ط‬ ‫ر‬ ‫الش‬ ،‫الثالث‬‫المرور‬ ‫من‬ ‫االنتهاء‬ ‫بعد‬ ( n < 3 ) ‫يعد‬ ‫لم‬ ‫يساوي‬ true ‫لذلك‬ ، ‫الحلقة‬ ‫ي‬ ‫ستنته‬ . ‫تحذير‬ : ‫عن‬ ‫المتصفحات‬ ‫توقف‬ ‫ي‬ ‫ف‬ ‫سيتسبب‬ ‫نهاية‬ ‫ال‬ ‫ما‬ ‫اىل‬ ‫الحلقة‬‫ار‬‫ر‬‫تك‬‫ار‬‫ر‬‫استم‬ ‫العمل‬ . ‫الحلقة‬ for...in ‫الحلقة‬ ‫تستخدم‬ for...in ‫ار‬‫ر‬‫للتك‬ ‫القابلة‬ ‫الكائن‬ ‫خصائص‬ ‫جميع‬ ‫عىل‬‫ار‬‫ر‬‫للتك‬ enumerable ‫الجافا‬ ‫ستنفذ‬ ،‫ة‬ ‫ر‬ ‫ممت‬ ‫خاصية‬ ‫كل‬‫مقابل‬ ‫تعليمات‬ ‫سكريبت‬ ‫للحلقة‬ ‫االساسية‬ ‫كيبة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫يوضح‬ .‫محددة‬ ‫برمجية‬ for...in for (variable in object){ statements }
  • 227. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 227 ‫االستثناءات‬ ‫معالجة‬ ‫التعليمة‬ try...catch ‫البلوك‬ ‫من‬ ‫تتكون‬ try ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ ‫عىل‬ ‫سيحتوي‬ ‫الذي‬ ‫والبلوك‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ catch ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫عىل‬ ‫سيحتوي‬ ‫البلوك‬ ‫من‬ ‫االستثناء‬ ‫قذف‬ ‫تم‬ ‫اذا‬ ‫فعله‬ ‫يجب‬ ‫ما‬ ‫تحدد‬ try ‫معظم‬ ‫ي‬ ‫ف‬ ،‫اخر‬ ‫بمعت‬ . ‫البلوك‬ ‫داخل‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫نريد‬ .‫الحاالت‬ try ، ‫ي‬ ‫طبيغ‬ ‫بشكل‬ ‫ر‬ ‫تست‬ ‫ان‬ ‫حالة‬ ‫ي‬ ‫وف‬ ‫البلوك‬ ‫اىل‬ ‫التحكم‬‫ر‬ ّ ‫يمر‬ ‫مشاكل‬ ‫حدوث‬ catch ‫احدى‬ ‫هناك‬ ‫كانت‬‫إذا‬ . ‫البلوك‬ ‫داخل‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ try ً ‫استثناءا‬ ‫تقذف‬ ‫إىل‬ ‫ا‬‫ر‬‫فو‬ ‫التحكم‬ ‫نقل‬ ‫سيتم‬ ، ‫البلوك‬ catch ‫البلوك‬ ‫داخل‬ ‫من‬ ‫استثناء‬ ‫أي‬ ‫إرسال‬ ‫يتم‬ ‫لم‬ ‫وإذا‬ . try ‫فالبلوك‬ ، catch ‫لن‬ ‫ينفذ‬ ‫تحت‬ ‫ان‬ ‫يمكن‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمة‬ ‫هذه‬ . ‫البلوك‬ ‫عىل‬ ‫وي‬ finally ‫تنفيذ‬ ‫بعد‬ ‫سينفذ‬ ‫والذي‬ ‫البلوك‬ try ‫و‬ catch ‫التعليمات‬ ‫تنفيذ‬ ‫قبل‬ ‫سينفذ‬ ‫وايضا‬ ، ‫التعليمة‬ ‫ي‬ ‫تىل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ try...catch ، ‫ان‬ .‫وجدت‬ function getMonthName(mo) { mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Ma y', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'De c']; if (months[mo]) { return months[mo]; } else { throw 'InvalidMonthNo'; //throw keyword is used here } } try { monthName = getMonthName(13); } catch (e) { console.log(e); }
  • 228. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 228 String ‫النصية‬ ‫السالسل‬ ‫او‬ ‫المفردة‬ ‫االقتباس‬ ‫عالمة‬ ‫استخدام‬ ‫مثل‬ ‫طرق‬ ‫بعدة‬ ‫نصية‬ ‫سلسلة‬ ‫انشاء‬ ‫يمكن‬ ‫طريق‬ ‫عن‬ ‫او‬ ‫المزدوجة‬ ( Template literals ) .‫ا‬ً‫نصي‬ ‫ا‬ ً‫كالم‬‫ل‬ ِّ ‫مث‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫بالبيانات‬ ‫لالحتفاظ‬ ‫مفيدة‬ ‫النصية‬ ‫السالسل‬ ‫طولها‬ ‫من‬ ‫التحقق‬ ‫ي‬ ‫ه‬ ‫النصية‬ ‫السالسل‬ ‫عىل‬ ‫االستخدام‬ ‫شائعة‬ ‫العمليات‬ ‫ر‬ ‫أكت‬ ‫من‬ ‫الخاصية‬ ‫ر‬ ‫(عت‬ length ،+=‫و‬ + ‫ر‬ ‫المعاملي‬ ‫باستخدام‬ ‫النصية‬ ‫السالسل‬ ‫وجمع‬ ،) ‫الدالة‬ ‫باستخدام‬ ‫الفرعية‬ ‫النصية‬ ‫السالسل‬ ‫مكان‬ ‫أو‬ ‫وجود‬ ‫من‬ ‫والتحقق‬ indexOf() ‫المحارف‬ ‫إىل‬ ‫الوصول‬ var str = 'cat'; console.log(str.charAt(1));//a console.log(str[1]); //a ‫الدوال‬ String.prototype.charAt() .‫د‬ َّ ‫حد‬ ُ‫الم‬ ‫الفهرس‬ ‫عند‬ ‫الموجود‬ ‫المحرف‬ ‫إعادة‬ String.prototype.charCodeAt() .‫د‬ َّ ‫حد‬ ُ‫الم‬ ‫الفهرس‬ ‫عند‬ ‫الموجود‬ ‫المحرف‬ ‫إعادة‬
  • 229. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 229 String.prototype.codePointAt() . ّ ‫ر‬ ‫عي‬ ُ‫الم‬ ‫الموضع‬ ‫ي‬ ‫ف‬ ‫يونيكود‬ ‫رمز‬ ‫ل‬ ِّ ‫مث‬ُ‫ي‬ ‫موجب‬ ‫صحيح‬ ‫عدد‬ ‫إعادة‬ String.prototype.concat() .‫جديدة‬ ‫نصية‬ ‫سلسلة‬ ‫وإعادة‬ ‫ر‬ ‫نصيتي‬ ‫ر‬ ‫سلسلتي‬ ‫ي‬ ‫ف‬ ‫الموجود‬ ‫النص‬ ‫دمج‬ String.prototype.includes() ‫نص‬ ٍ‫سلسلة‬ ‫عىل‬ ٌ ‫نصية‬ ٌ ‫سلسلة‬ ‫تحتوي‬ ‫كانت‬‫إن‬ ‫معرفة‬ .‫أخرى‬ ٍ‫ية‬ String.prototype.endsWith() .‫أخرى‬ ٍ‫نصية‬ ٍ‫سلسلة‬ ‫بمحارف‬ ٌ ‫نصية‬ ٌ ‫سلسلة‬ ‫ي‬ ‫تنته‬ ‫كانت‬‫إن‬ ‫معرفة‬ String.prototype.indexOf() ‫كائن‬‫ضمن‬ ‫الموجود‬ ‫الفهرس‬ ‫إعادة‬ String ‫يكون‬ ‫والذي‬ ‫الدالة‬ ‫ي‬ ‫يستدع‬ ‫الذي‬ ‫القيمة‬‫أو‬ ،‫الدالة‬ ‫لهذه‬ ‫دة‬ َّ ‫حد‬ ُ‫الم‬ ‫للقيمة‬ ‫قة‬َ‫طاب‬ ُ‫م‬ ‫ل‬ ّ ‫أو‬ ‫موضع‬ -1 .‫عليها‬ َ‫ر‬ ‫عت‬ُ‫ي‬ ‫لم‬ ‫إن‬ String.prototype.lastIndexOf() ‫كائن‬‫ضمن‬ ‫الموجود‬ ‫الفهرس‬ ‫إعادة‬ String ‫يكون‬ ‫والذي‬ ‫الدالة‬ ‫ي‬ ‫يستدع‬ ‫الذي‬ ‫لهذه‬ ‫دة‬ َّ ‫حد‬ ُ‫الم‬ ‫للقيمة‬ ‫قة‬َ‫طاب‬ ُ‫م‬ ‫آخر‬ ‫موضع‬ ‫القيمة‬‫أو‬ ،‫الدالة‬ -1 .‫عليها‬ َ‫ر‬ ‫عت‬ُ‫ي‬ ‫لم‬ ‫إن‬ String.prototype.localeCompare() ‫مع‬ ‫أو‬ ‫بعد‬ ‫أو‬ ‫قبل‬ ‫تقع‬ ‫إليها‬ ‫شار‬ ُ‫الم‬ ‫النصية‬ ‫السلسلة‬ ‫كانت‬‫إن‬ ّ ‫ر‬ ‫يبي‬ ‫رقم‬ ‫إعادة‬ . ّ ‫ر‬ ‫معي‬ ٍ ‫ترتيب‬ ‫ي‬ ‫ف‬ ‫عطاة‬ ُ‫الم‬ ‫النصية‬ ‫السلسلة‬
  • 230. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 230 String.prototype.match() ( ‫ي‬ ‫نمط‬ ‫ر‬ ‫تعبت‬ ‫قة‬َ‫طاب‬ ُ‫م‬ regular expression .‫نصية‬ ‫سلسلة‬ ‫عىل‬ ) String.prototype.repeat() .‫ات‬‫ر‬‫الم‬ ‫من‬ ٍ ‫د‬ ِّ ‫حد‬ ُ‫م‬ ٍ ‫لعدد‬ ‫ما‬ ‫نصية‬ ‫لسلسلة‬ ‫ار‬‫ر‬‫تك‬ ‫عىل‬ ‫تحتوي‬ ‫نصية‬ ‫سلسلة‬ ‫إعادة‬ String.prototype.replace() ( ‫ي‬ ‫نمط‬ ٍ ‫ر‬ ‫تعبت‬ ‫ر‬ ‫بي‬ ‫مطابقة‬ ‫عىل‬‫العثور‬ regular expression ،‫نصية‬ ‫وسلسلة‬ ) ‫من‬ ً ‫بدًل‬ ‫فرعية‬ ‫نصية‬ ‫سلسلة‬ ‫ووضع‬ .‫قة‬َ‫طاب‬ ُ‫الم‬ ‫النصية‬ ‫السلسلة‬ String.prototype.search() .‫المعطاة‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫النمط‬ ‫ر‬ ‫للتعبت‬ ‫مطابقة‬ ‫عن‬ ‫البحث‬ String.prototype.slice() .‫وإعادته‬ ‫النصية‬ ‫السلسلة‬ ‫من‬ ‫قسم‬ ‫اج‬‫ر‬‫استخ‬ String.prototype.split() ‫كائن‬‫تقسم‬ String .‫النصية‬ ‫السالسل‬ ‫من‬ ‫مصفوفة‬ ‫إىل‬ String.prototype.startsWith() .‫أخرى‬ ‫نصية‬ ‫سلسلة‬ ‫بمحارف‬ ‫تبدأ‬ ‫النصية‬ ‫السلسلة‬ ‫كانت‬‫إذا‬ ‫تحديد‬ String.prototype.substr() . ّ ‫ر‬ ‫معي‬ ٍ ‫مكان‬ ‫من‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المحارف‬ ‫د‬ َّ ‫محد‬ ‫عدد‬ ‫إعادة‬
  • 231. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 231 String.prototype.substring() َّ ‫حد‬ ُ‫م‬ ‫ر‬ ‫فهرسي‬ ‫ر‬ ‫بي‬ ‫الموجودة‬ ‫المحارف‬ ‫إعادة‬ .‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫دين‬ String.prototype.toLocaleLowerCase() ( ‫ة‬ ‫ر‬ ‫الصغت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المحارف‬ ‫ل‬ ّ ‫ستحو‬ lower case ( ‫ة‬ّ‫المحلي‬ ‫مع‬ ‫يتوافق‬ ‫بما‬ ) locale ‫نتيجة‬ ‫نفس‬ ‫عيد‬ ُ ‫ست‬ ‫الدالة‬ ‫وهذه‬ ‫الحالية‬ ) ‫الدالة‬ toLowerCase() .‫اللغات‬ ‫أغلبية‬ ‫ي‬ ‫ف‬ String.prototype.toLocaleUpperCase() ( ‫ة‬ ‫ر‬ ‫الكبت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المحارف‬ ‫ل‬ ّ ‫ستحو‬ upper case ) ( ‫ة‬ّ‫المحلي‬ ‫مع‬ ‫يتوافق‬ ‫بما‬ locale ‫الدالة‬ ‫نتيجة‬ ‫نفس‬ ‫عيد‬ ُ ‫ست‬ ‫الدالة‬ ‫وهذه‬ ‫الحالية‬ ) toUpperCase() .‫اللغات‬ ‫أغلبية‬ ‫ي‬ ‫ف‬ String.prototype.toLowerCase() ‫السلس‬ ‫تحويل‬ .‫ة‬ ‫ر‬ ‫الصغت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫لة‬ String.prototype.toUpperCase() .‫ة‬ ‫ر‬ ‫الكبت‬ ‫الحالة‬ ‫إىل‬ ‫النصية‬ ‫السلسلة‬ ‫تحويل‬ String.prototype.trim() .‫النصية‬ ‫السلسلة‬ ‫ونهاية‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫اغات‬‫ر‬‫الف‬ ‫الة‬‫ز‬‫إ‬
  • 232. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 232 String.prototype.trimLeft() ‫هذه‬ .‫النصية‬ ‫السلسلة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫اغات‬‫ر‬‫الف‬ ‫الة‬‫ز‬‫إ‬ ‫ل‬ َّ ‫فض‬ُ‫ي‬ ‫وال‬ ‫معيارية‬ ‫ر‬ ‫غت‬ ‫الدالة‬ .‫استخدامها‬ String.prototype.trimRight() ‫ل‬ َّ ‫فض‬ُ‫ي‬ ‫وال‬ ‫معيارية‬ ‫ر‬ ‫غت‬ ‫الدالة‬ ‫هذه‬ .‫النصية‬ ‫السلسلة‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫اغات‬‫ر‬‫الف‬ ‫الة‬‫ز‬‫إ‬ .‫استخدامها‬
  • 233. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 233 Array ‫المصفوفات‬ ‫المصفوفة‬ ‫البيانات‬ ‫قيم‬ ‫من‬ ‫مجموعة‬ ‫ي‬ ‫ه‬ : . ‫نوع‬ ‫عىل‬ ‫المصفوفات‬ ‫قيم‬ ‫تقترص‬ ‫ال‬ ‫م‬ ‫واحد‬ ‫منطقية‬ ‫وقيم‬ ‫صحيحة‬ ‫وأعداد‬ ‫سالسل‬ ‫عىل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ .‫البيانات‬ ‫ن‬ ‫صفوفات‬ ‫عىل‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المصفوفات‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ،‫ذلك‬ ‫إىل‬ ‫باإلضافة‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫أخرى‬ . ‫ي‬ ‫ف‬ ‫(كما‬ ‫المصفوفات‬ ‫ي‬ ‫ف‬ ‫للعناص‬ ‫كفهارس‬‫النصية‬ ‫السالسل‬ ‫استخدام‬ ‫يمكن‬ ‫ال‬ ‫األعداد‬ ‫استخدام‬ ‫يجب‬ ‫وإنما‬ ،)‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفات‬ ‫فقط‬ ‫الصحيحة‬ ‫مصفوفة‬ ‫إنشاء‬ ‫مربعة‬ ‫االقواس‬ ‫استخدام‬ ‫][يمكن‬‫المصفوفات‬ ‫لتعريف‬ ‫الشكل‬ var fruits = ['Apple', 'Banana']; ‫طول‬ ‫عىل‬ ‫الحصول‬ ‫ال‬ ‫مصفوفة‬ console.log(fruits.length);// 2 ‫المصفوفة‬ ‫عناص‬ ‫من‬‫عنرص‬ ‫إىل‬ ‫الوصول‬ ‫ي‬ ‫ف‬ ‫العناص‬ ّ ‫عد‬ ‫يبدأ‬ JavaScript ‫الفهرس‬ ‫من‬ 0 ‫أي‬ ، ‫له‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫ل‬ ّ ‫أو‬ َّ ‫أن‬ ‫الفهرس‬ 0 ‫الخاصية‬ ‫قيمة‬ ‫هو‬ ‫عنرص‬ ‫آخر‬ ‫وفهرس‬ ، length ‫منها‬ ‫ا‬ ً ‫مطروح‬ 1 ‫الحظ‬ ‫القيمة‬ ‫إعادة‬ ‫إىل‬ ‫سيؤدي‬ ‫صالحة‬ ‫ر‬ ‫غت‬ ‫فهارس‬ ‫استخدام‬ َّ ‫أن‬ undefined. var first = fruits[0];// Apple var last = fruits[fruits.length - 1];// Banana ‫عىل‬ ‫المرور‬ ‫ار‬‫ر‬‫تك‬ ‫بحلقة‬ ‫المصفوفة‬ ‫عناص‬ fruits.forEach(function(item, index, array) { console.log(item, index); }); ‫المصفوفة‬ ‫نهاية‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫إضافة‬ var newLength = fruits.push('Orange'); ‫المصفوفة‬ ‫نهاية‬ ‫من‬‫عنرص‬ ‫الة‬‫ز‬‫إ‬ var last = fruits.pop();
  • 234. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 234 ‫بداية‬ ‫من‬‫عنرص‬ ‫الة‬‫ز‬‫إ‬ ‫المصفوفة‬ var first = fruits.shift(); ‫المصفوفة‬ ‫بداية‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫إضافة‬ var newLength = fruits.unshift('Strawberry'); ‫المصفوفة‬ ‫عناص‬ ‫أحد‬ ‫فهرس‬ ‫عىل‬ ‫العثور‬ var pos = fruits.indexOf('Banana') ّ ‫ر‬ ‫معي‬ ‫فهرس‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫حذف‬ var removedItem = fruits.splice(pos, 1); ‫جمع‬ ‫نصية‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫المصفوفة‬ ‫عناص‬ ‫جميع‬ var str = fruits.join() ‫ال‬ ‫مصفوف‬ ‫ات‬ ‫األبعاد‬ ‫ثنائية‬ var mat = [ [1,2,3], [4,5,6], [7,8,9], ] console.log(mat[2][2]);//9
  • 235. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 235 Math Object ‫الكائن‬ ،‫األخرى‬ ‫العامة‬ ‫الكائنات‬ ‫من‬ ‫النقيض‬ ‫عىل‬ Math ً ‫بانية‬ ً ‫دالة‬ ‫ليس‬ (constructor) ‫للكائن‬ ‫التابعة‬ ‫والدوال‬ ‫الخاصيات‬ ‫وجميع‬ ، Math ‫ساكنة‬ ‫ي‬ ‫ه‬ (static) ، ‫ي‬ ‫الرياض‬ ‫الثابت‬ π )‫(باي‬ ‫بواسطة‬ ‫له‬ ‫الوصول‬ ‫يمكنك‬ Math.PI ‫وتستطيع‬ ‫اوية‬‫ز‬‫ال‬ ‫جيب‬ ‫دالة‬ ‫استخدام‬ (sin) ‫ي‬ ‫يىل‬ ‫كما‬ Math.sin(x) ‫القيمة‬ َّ ‫إن‬ ‫إذ‬ ، x ‫ي‬ ‫ه‬ .‫الدالة‬ ‫إىل‬ ‫ر‬ َّ ‫مر‬ ُ‫الم‬ ‫الوسيط‬ ‫المثلثا‬ ‫دوال‬ ( ‫ت‬ sin() ‫و‬ cos() ‫و‬ tan() ‫و‬ asin() ‫و‬ acos() ‫و‬ atan() ‫(أو‬ ‫تتوقع‬ ) ( ‫اديان‬‫ر‬‫ال‬ ‫بواحدة‬ ‫الزوايا‬ )‫عيد‬ ُ ‫ت‬ radian ) . Math.abs(x) .‫للعدد‬ ‫المطلقة‬ ‫القيمة‬ ‫إعادة‬ Math.acos(x) ( ‫التجيب‬ ‫معكوس‬ ‫إعادة‬ arccosine .‫للعدد‬ ) Math.asin(x) ( ‫الجيب‬ ‫معكوس‬ ‫إعادة‬ arcsine .‫للعدد‬ ) Math.atan(x) ( ‫الظل‬ ‫معكوس‬ ‫إعادة‬ arctangent .‫للعدد‬ ) Math.ceil(x) ‫عدد‬ ‫ر‬ ‫أكت‬ ‫إىل‬ ‫التقريب‬ ‫(أي‬ ‫العدد‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫ا‬ً‫مساوي‬ ‫يكون‬ ‫صحيح‬ ‫عدد‬ ‫أصغر‬ ‫إعادة‬ .)‫صحيح‬
  • 236. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 236 Math.cos(x) ( ‫تجيب‬ ‫إعادة‬ cosine .‫للعدد‬ ) Math.floor(x) ‫من‬ ‫أصغر‬ ‫أو‬ ‫ا‬ً‫مساوي‬ ‫يكون‬ ‫صحيح‬ ‫عدد‬ ‫ر‬ ‫أكت‬ ‫إعادة‬ ‫أصغر‬ ‫إىل‬ ‫التقريب‬ ‫(أي‬ ‫العدد‬ .)‫صحيح‬ ‫عدد‬ Math.max([x[, y[, …]]]) .‫الوسائط‬ ‫ر‬ ‫بي‬ ‫من‬ ‫قيمة‬ ‫ر‬ ‫أكت‬ ‫إعادة‬ Math.min([x[, y[, …]]]) .‫الوسائط‬ ‫ر‬ ‫بي‬ ‫من‬ ‫قيمة‬ ‫أصغر‬ ‫إعادة‬ Math.pow(x, y) ‫أي‬ ،‫األس‬ ‫قوة‬ ‫إىل‬ ‫األساس‬ ‫رفع‬ baseexponent . Math.random() ( ‫ائف‬‫ز‬ ‫ي‬ ‫عشوان‬ ‫عدد‬ ‫إعادة‬ pseudo-random number ‫ر‬ ‫بي‬ ) 0 ‫و‬ 1 . Math.round(x) .‫صحيح‬ ‫عدد‬ ‫أقرب‬ ‫إىل‬ ً ‫مقربة‬ ‫العدد‬ ‫قيمة‬ ‫إعادة‬
  • 237. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 237 Math.sign(x) ‫العدد‬ ‫إشارة‬ ‫إعادة‬ x ‫العدد‬ َّ ‫أن‬ ‫إىل‬ ‫ر‬ ‫شت‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫الت‬ ، x .‫صفر‬ ‫أم‬ ٌ ‫سالب‬ ‫أم‬ ٌ ‫موجب‬ Math.sin(x) ( ‫جيب‬ ‫إعادة‬ sine .‫للعدد‬ ) Math.sqrt(x) ‫الجذر‬ ‫إعادة‬ .‫للعدد‬ ‫الموجب‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬ Math.tan(x) ( ‫ظل‬ ‫إعادة‬ tangent .‫العدد‬ )
  • 238. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 238 DOM ‫المستند‬ ‫تمثيل‬ ‫نموذج‬ ‫ب‬ ‫كائن‬ Document Object Model ‫له‬ ‫يشار‬ ‫والذي‬ ‫ب‬ ‫ا‬‫ر‬‫اختصا‬ DOM ‫ر‬ ‫عتت‬ ُ ‫ت‬ ‫حيث‬ ، ‫متفاعلة‬ ‫مواقع‬ ‫بناء‬ ‫ي‬ ‫ف‬ ‫األساسية‬ ‫الطرق‬ ‫أحد‬ ‫ر‬ ‫يعتت‬ .‫وهيكليتها‬ ‫المواقع‬ ‫محتوى‬ ‫بمعالجة‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫للغات‬ ‫تسمح‬ ‫واجهة‬ ‫الطريقة‬ ‫هذه‬ ‫ببناء‬ ‫المتصفح‬ ‫يقوم‬ Document Object Model ‫و‬ ‫الصفحة‬ ‫تحميل‬ ‫عند‬ ‫عنه‬ ّ ‫ر‬ ‫عت‬ ُ‫الم‬ ‫المحتوى‬ ‫إىل‬ ‫بالوصول‬ ‫سكربت‬ ‫للجافا‬ ‫النموذج‬ ‫هذا‬ ‫يسمح‬ ‫كنص‬ text ‫كعناص‬‫أو‬ element ‫اض‬‫ر‬‫أغ‬ ‫شكل‬ ‫عىل‬ ‫ورؤيتها‬ ‫المستند‬ ‫ضمن‬ objects . ‫المستند‬ ‫كائن‬ Document ‫المستند‬ ‫كائن‬ document ‫الخصائص‬ ‫من‬ ‫عدد‬ ‫يملك‬ ‫دمج‬ ُ‫م‬ ‫كائن‬‫عن‬ ‫عبارة‬ ‫هو‬ properties ‫والطرق‬ methods ‫إىل‬ ‫للوصول‬ ‫استخدامها‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫خصائص‬ ‫الصفحة‬ ‫وتعديله‬ ‫ا‬ . ‫الصفحة‬ ‫خلفية‬ ‫جعل‬ ‫األحمر‬ ‫بالون‬ document.body.style.backgroundColor = '#f00';
  • 239. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 239 ‫تعديله‬ ‫و‬ ‫لعنرص‬ ‫الوصول‬ ‫طرق‬ ‫بعدة‬ ‫لعنرص‬ ‫الوصول‬ ‫يمكن‬ getElementById ‫عنرص‬ ‫تجلب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطرق‬ ‫اسهل‬ ‫من‬ element ‫المعرف‬‫ذو‬ ‫وحيد‬ id ‫المحدد‬ getElementsByClassName <div id="demo">Access me by ID</div> getElementsByClassName ‫تملك‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫جميع‬ ‫بجلب‬ ‫تقوم‬ class ‫عىل‬ ‫ان‬‫ر‬‫الدو‬ ‫يمكن‬ ,‫محدد‬ ‫صف‬ ‫مثل‬ ‫حلقة‬ ‫بستخدام‬ ‫المعادة‬ ‫العناص‬ for <div class="demo">Access me by class (1)</div> Gets Method ID getElementById() Class getElementsByClassName() Tag getElementsByTagName() Selector (single) querySelector() Selector (all) querySelectorAll()
  • 240. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 240 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> </head> <body> <h1>Title</h1> <div class="demo">Access me by class (1)</div> <div id="second">Access me by class (2)</div> <script> let element = document.getElementsByClassName('demo')[0]; element.style.border = '1px solid orange'; document.getElementById('second').style.color = '#ff0'; document.getElementsByTagName('h1')[0].style.color = '#0f0'; </script> </body> </html> querySelector ‫و‬ querySelectorAll ‫ال‬ ‫عناص‬ ‫اىل‬ ‫للوصول‬ ‫الطريقتان‬ ‫هاتان‬ ‫تستخدم‬ DOM ‫طريق‬ ‫عن‬ CSS selectors ‫حيث‬ querySelector ‫وحيد‬ ‫عنرص‬ ‫تعيد‬ ‫اما‬ querySelectorAll ‫للمحدد‬ ‫الموافقة‬ ‫العناص‬ ‫جميع‬ ‫فتعيد‬ selector <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> </head>
  • 241. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 241 <body> <h1>Title</h1> <div class="demo">Access me by class (1)</div> <div id="second">Access me by class (2)</div> <script> let element = document.querySelector('.demo'); element.style.border = '1px solid orange'; document.querySelector('#second').style.color = '#f00'; document.querySelectorAll('h1')[0].style.color = '#0f0'; </script> </body> </html> Modifying Classes ‫الصفوف‬ ‫تعديل‬ Method/Property Description className ‫للخاصية‬ ‫قيم‬ ‫وضع‬ ‫او‬ ‫الحصول‬ class classList.add() ‫ر‬ ‫أكت‬ ‫صف‬ ‫إضافة‬ classList.toggle() ‫قلب‬ Toggles ‫كلس‬ classList.contains() ‫يملك‬ ‫العنرص‬ ‫كان‬‫إذا‬ ‫فيما‬ ‫فحص‬ class ‫ما‬ classList.replace() ‫اخر‬ ‫بصف‬ ‫صف‬ ‫استبدال‬ classList.remove() ‫ما‬ ‫صف‬ ‫حذف‬ <!DOCTYPE html>
  • 242. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 242 <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <div>Div 1</div> <div class="active">Div 2</div> <script> // Select the first div const div = document.querySelector('div'); div.className = 'warning'; const activeDiv = document.querySelector('.active'); activeDiv.classList.add('hidden'); activeDiv.classList.remove('hidden'); activeDiv.classList.toggle('hidden'); activeDiv.classList.toggle('hidden'); activeDiv.classList.replace('active', 'warning'); </script> </body> </html>
  • 243. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 243 Event Handlers and Event Listeners ‫لألحداث‬ ‫االستماع‬ ‫ما‬ ‫عنرص‬ ‫فوق‬ ‫بلقارة‬ ‫كة‬ ‫الحر‬‫او‬ ‫المفاتيح‬ ‫لوحة‬ ‫ي‬ ‫ف‬‫زر‬ ‫ضغط‬ ‫مثل‬ ‫ما‬ ‫حدث‬ ‫وقع‬ ‫عند‬ ‫بواسطة‬ ‫ذلك‬ ‫فيمننا‬ ‫ما‬ ‫استجابة‬ ‫حصول‬ ‫نريد‬ ‫وكنا‬ .... ‫ما‬ ‫عنرص‬ ‫عىل‬ ‫الضغط‬‫او‬ ‫الطريقة‬ addEventListener <!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <button>click here</button> <p>Hi</p> <script> const changeText = () => { const p = document.querySelector('p'); p.textContent = "Hello"; } // Add event handler as a property of the button element const button = document.querySelector('button');
  • 244. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 244 button.onclick = changeText; </script> </body> </html> ------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <button>click here</button> <p>Hi</p> <script> const changeText = () => { const p = document.querySelector('p'); p.textContent = "Hello"; } // Add event handler as a property of the button element
  • 245. JavaScript ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 245 const button = document.querySelector('button'); button.addEventListener('click',changeText); </script> </body> </html>
  • 247. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 247 jQuery Introduction ‫من‬ ‫الغرض‬ jQuery ‫استخدام‬ ‫تسهيل‬ ‫هو‬ JavaScript ‫ي‬ ‫ف‬ . ‫الويب‬ ‫موقع‬ ‫هو‬ ‫ما‬ jQuery ‫؟‬ jQuery ، ‫أقل‬ ‫"اكتب‬ ، ‫الوزن‬ ‫خفيفة‬ ‫سكريبت‬ ‫جافا‬ ‫مكتبة‬ ‫ي‬ ‫ه‬ ‫ر‬ ‫الكثت‬ ‫وفعل‬ ." ‫من‬ ‫الغرض‬ jQuery ‫استخدام‬ ‫تسهيل‬ ‫هو‬ JavaScript ‫الخاص‬ ‫الويب‬ ‫موقع‬ ‫عىل‬ .‫بك‬ ‫يأخذ‬ jQuery ‫تعليمات‬ ‫سطور‬ ‫من‬ ‫العديد‬ ‫تتطلب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الشائعة‬ ‫المهام‬ ‫من‬ ‫ر‬ ‫الكثت‬ JavaScript ‫مجية‬ ‫ر‬ ‫الت‬ ،‫إلنجازها‬ ‫وتغلفها‬ ‫يمكنك‬ ‫طرق‬ ‫ي‬ ‫ف‬ ‫استدعائها‬ .‫واحد‬ ‫بسطر‬ ‫يبسط‬ jQuery ‫من‬ ‫المعقدة‬ ‫األشياء‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫ا‬ ً ‫أيض‬ JavaScript ‫مثل‬ ، ‫استدعاءات‬ AJAX ‫التع‬ ‫و‬ ‫ال‬ ‫مع‬ ‫امل‬ DOM. ‫مكتبة‬ ‫تحتوي‬ jQuery :‫التالية‬ ‫ات‬ ‫ر‬ ‫المت‬ ‫عىل‬ • ‫معالجة‬ HTML / DOM • ‫ي‬ ‫ف‬ ‫التالعب‬ CSS • ‫االحداث‬ • ‫ات‬‫ر‬‫المؤث‬ Effects ‫كة‬ ‫المتحر‬ ‫والرسوم‬ • ‫أجاكس‬ AJAX • ‫خدمات‬ ‫أخرى‬ Utilities ‫إىل‬ ‫باإلضافة‬ ،‫ذلك‬ ‫ت‬ ‫حتوي‬ jQuery ‫إضافية‬ ‫مكونات‬ ‫عىل‬ ‫من‬ ‫ر‬ ‫للكثت‬ ‫المهام‬ . ‫مكتبات‬ ‫من‬ ‫ر‬ ‫الكثت‬ ‫هناك‬ JavaScript ‫يكون‬ ‫أن‬ ‫المحتمل‬ ‫من‬ ‫ولكن‬ ، ‫األخرى‬ jQuery ‫هو‬ ‫من‬ ‫للتمديد‬ ‫قابلية‬ ‫ر‬ ‫واألكت‬ ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫يزداد‬ ‫أخرى‬ ‫مكتبات‬ ‫وجود‬ ‫مع‬ ً ‫ايضا‬ ‫استخدامها‬ .
  • 248. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 248 ‫تضمين‬ jQuery ‫استخدام‬ ‫لبدء‬ ‫طرق‬ ‫عدة‬ ‫هناك‬ jQuery ‫عىل‬ ‫صفحات‬ .‫الويب‬ ‫مثل‬ : 1 . ‫مكتبة‬ ‫يل‬‫بتت‬ ‫قم‬ jQuery ‫من‬ jQuery.com 2 . ‫ر‬ ‫بتضمي‬ ‫قم‬ jQuery ‫من‬ CDN ‫مثل‬ ، Google ‫تنزيل‬ jQuery ‫من‬ ‫ان‬‫ر‬‫إصدا‬‫يتوفر‬ jQuery :‫يل‬‫للتت‬ • ‫اإلنتاج‬‫إصدار‬ ( Production version ) - ‫بموقعك‬ ‫خاص‬ ‫هذا‬ ‫المنشور‬ ‫العام‬ ‫لالستخدام‬ ‫وضغطه‬ ‫ه‬ ‫ر‬ ‫تصغت‬ ‫تم‬ ‫ألنه‬ • ‫التطوير‬‫إصدار‬ ( Development version ) - ‫لالختبار‬ ‫مخصص‬ ‫هذا‬ ‫مضغوط‬ ‫ر‬ ‫غت‬‫(رمز‬‫والتطوير‬ ‫ائة‬‫ر‬‫للق‬ ‫قابل‬ ‫و‬ ) ‫من‬ ‫اإلصدارين‬ ‫كال‬‫يل‬‫تت‬ ‫يمكن‬ https://jquery.com/ ‫مكتبة‬ jQuery ‫ملف‬ ‫ي‬ ‫ه‬ JavaScript ‫ب‬ ‫إليه‬ ‫الرجوع‬ ‫ويمكنك‬ ، ‫واحد‬ ‫وسم‬ HTML <script> ‫ر‬ ‫تضمي‬ ‫يتم‬ ‫غالبا‬, JQuery ‫الجزء‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫األخت‬ ‫من‬ <body> ‫االنتباه‬ ‫مع‬ ‫طلب‬ ‫عدم‬ ‫اىل‬ ‫أي‬ . ‫ر‬ ‫التضمي‬ ‫هذا‬ ‫قبل‬ ‫دالة‬ ‫ويمكن‬ ‫أيضا‬ ‫تضمينها‬ ‫قسم‬ ‫داخل‬ <head> <head> <script src="jquery-3.5.1.min.js"></script> </head> ‫باستخدا‬ ‫تضمين‬ ‫م‬ CDN ‫يل‬‫تت‬ ‫تريد‬ ‫ال‬ ‫كنت‬‫إذا‬ jQuery ، ‫واستضافته‬ ‫من‬ ‫تضمينه‬ ‫فيمكنك‬ ‫توصيل‬ ‫"شبكة‬ "‫المحتوى‬ CDN Content Delivery Network) .) ‫عد‬ُ‫ي‬ Google ‫من‬‫خيار‬ SDN ‫يستضيف‬ jQuery
  • 249. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 249 Google CDN: <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/j query.min.js"></script> </head> ‫الستخدام‬ ‫ة‬ ‫ر‬ ‫الكبت‬ ‫ات‬ ‫ر‬ ‫المت‬ ‫إحدى‬ jQuery ‫المستضاف‬ ‫عىل‬ CDN ‫قام‬ ‫المستخدم‬ ‫يل‬‫بتت‬ ‫بالفعل‬ jQuery ‫من‬ CDN ‫نتيجة‬ .‫آخر‬ ‫موقع‬ ‫زيارة‬ ‫عند‬ ‫المؤقت‬ ‫التخزين‬ ‫ذاكرة‬ ‫من‬ ‫تحميله‬ ‫سيتم‬ ، ‫لذلك‬ cache ، ‫موقعك‬ ‫يزورون‬ ‫عندما‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫يؤدي‬ ‫مما‬ ‫شبكات‬ ‫معظم‬ ‫ستتأكد‬ ، ‫ا‬ ً ‫أيض‬ CDN ‫سيتم‬ ، ‫منه‬ ‫ا‬ ً ‫ملف‬ ‫المستخدم‬ ‫يطلب‬ ‫أن‬ ‫بمجرد‬ .‫ع‬ ‫أرس‬ ‫تحميل‬ ‫وقت‬ ‫إىل‬ ‫ا‬ ً ‫أيض‬ ‫يؤدي‬ ‫مما‬ ، ‫إليهم‬ ‫األقرب‬ ‫الخادم‬ ‫من‬ ‫تقديمه‬ ‫الكتابة‬ ‫قواعد‬ jQuery ‫باستخدام‬ jQuery ‫(ا‬ ‫تحديد‬ ‫يمكنك‬ ، ‫ال‬ ‫عناص‬ )‫ستعالم‬ HTML ‫وتنفيذ‬ .‫عليها‬ "‫اءات‬‫ر‬‫"اإلج‬ ‫ي‬ ‫ه‬ ‫األساسية‬ ‫الصيغة‬ : $(selector).action() • ‫العالمة‬ ‫إىل‬ ‫الوصول‬ / ‫لتعريف‬ $ jQuery • ( selector ) ‫المحدد‬ ")‫البحث‬ ‫(أو‬ ‫"االستعالم‬ ‫ل‬ ‫عناص‬ HTML • action() )‫(العناص‬ ‫العنرص‬ ‫عىل‬ ‫تنفيذه‬ ‫ليتم‬ $(this).hide() – ‫إخفاء‬ ‫الحالي‬ ‫العنصر‬ $("p").hide() – ‫إخفاء‬ ‫عناصر‬ ‫كل‬ <p> $(".test").hide() – ‫إخفاء‬ ‫صف‬ ‫تملك‬ ‫التي‬ ‫العناصر‬ ‫كل‬ test $("#test").hide() - ‫إخفاء‬ ‫معرفها‬ ‫التي‬ ‫العناصر‬ ‫كل‬ test
  • 250. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 250 The Document Ready Event ‫اغلب‬ ‫األوقات‬ ‫اكود‬ ‫كتابة‬‫يتم‬ jQuery ‫حدث‬ ‫داخل‬ ready :‫للمستند‬ $(document).ready(function(){ // jQuery methods go here... }); ‫كود‬‫أي‬ ‫تشغيل‬ ‫لمنع‬ ‫هذا‬ jQuery .)‫(جاهز‬ ‫المستند‬ ‫تحميل‬ ‫من‬ ‫االنتهاء‬ ‫قبل‬ .‫معه‬ ‫التعامل‬ ‫قبل‬ ‫بالكامل‬ ‫المستند‬ ‫تحميل‬ ‫يتم‬ ‫ر‬ ‫حت‬ ‫االنتظار‬ ‫الجيد‬ ‫من‬ ‫الطرق‬ ‫تشغيل‬ ‫تم‬ ‫إذا‬ ‫تفشل‬ ‫أن‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اءات‬‫ر‬‫اإلج‬ ‫عىل‬ ‫األمثلة‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ :‫بالكامل‬ ‫المستند‬ ‫تحميل‬ ‫قبل‬ • ‫لم‬ ‫عنرص‬ ‫إخفاء‬ ‫محاولة‬ ‫بعد‬ ‫إنشاؤه‬ ‫يتم‬ • ‫بعد‬ ‫تحميلها‬ ‫يتم‬ ‫لم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الصورة‬ ‫حجم‬ ‫عىل‬ ‫الحصول‬ ‫محاولة‬ • ..... ‫المحددات‬ Selectors ‫محددات‬ ‫تعد‬ jQuery ‫مكتبة‬ ‫اء‬‫ز‬‫أج‬ ‫أهم‬ ‫أحد‬ jQuery. ‫محددات‬ ‫لك‬ ‫تسمح‬ jQuery )‫(عناص‬‫عنرص‬ ‫ومعالجة‬ ‫بتحديد‬ HTML. ‫محددات‬ ‫ستخدم‬ ُ ‫ت‬ jQuery " ‫عناص‬ )‫تحديد‬ ‫(أو‬ ‫إليجاد‬ " HTML ‫االسم‬ ‫عىل‬ ً‫بناء‬ ‫و‬ ‫والمعرف‬ ‫الصفوف‬ ‫وا‬ ‫واألنواع‬ ‫لخواص‬ ‫ال‬ ‫وقيم‬ ‫خواص‬ ‫يعتمد‬ . ‫ر‬ ‫الكثت‬ ‫ذلك‬ ‫ر‬ ‫وغت‬ ‫محددات‬ ‫عىل‬ CSS ‫المحددات‬ ‫بعض‬ ‫عىل‬ ‫يحتوي‬ ‫أنه‬ ‫إىل‬ ‫باإلضافة‬ ، ‫الحالية‬ .‫الخاصة‬ ‫ي‬ ‫ف‬ ‫المحددات‬ ‫جميع‬ ‫تبدأ‬ jQuery ‫ب‬ ‫وسم‬ .)( $ :‫واألقواس‬ ‫الدوالر‬
  • 251. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 251 ‫عنص‬ ‫تحديد‬ ‫اسمه‬ ‫طريق‬ ‫عن‬ ‫ر‬ ‫عنرص‬ ‫محدد‬ ‫يحدد‬ jQuery .‫العنرص‬ ‫اسم‬ ‫عىل‬ ً‫بناء‬ ‫العناص‬ ‫العناص‬ ‫كل‬‫تحديد‬ ‫يمكنك‬ <p> ‫ي‬ ‫ف‬ ‫صفحة‬ ‫ي‬ ‫كلتاىل‬ : $("p") ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ ‫اي‬ ‫عناص‬ ‫جميع‬ ‫إخفاء‬ ‫سيتم‬ ، ‫زر‬ <p>: $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); ‫المعرف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫محدد‬ ‫يستخدم‬ #id ‫الخاصية‬ id ‫ل‬ ‫وسم‬ HTML ‫العنرص‬ ‫عىل‬‫للعثور‬ ‫المطلوب‬ . ‫محدد‬ ‫استخدام‬ ‫عليك‬ ‫يجب‬ ‫لذا‬ ، ‫الصفحة‬ ‫داخل‬ ‫ا‬ ً ‫فريد‬ ‫المعرف‬ ‫يكون‬ ‫أن‬ ‫يجب‬ # id .‫فريد‬ ‫واحد‬ ‫عنرص‬ ‫عن‬ ‫البحث‬ ‫تريد‬ ‫عندما‬ ، ‫محدد‬ ‫بمعرف‬ ‫عنرص‬ ‫عىل‬‫للعثور‬ ‫حرف‬ ‫اكتب‬ # ‫عنرص‬ ‫بمعرف‬ ‫ا‬ ً‫متبوع‬ HTML: $("#test") ‫المعرف‬ ‫ذي‬ ‫العنرص‬ ‫إخفاء‬ ‫سيتم‬ ، ‫زر‬ ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ "test" $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
  • 252. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 252 ‫الصف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫د‬ ّ ‫محد‬ ‫يبحث‬ .class ‫ب‬ ‫عناص‬ ‫عن‬ ‫صف‬ class .‫معينة‬ ‫ب‬ ‫عناص‬ ‫عىل‬‫للعثور‬ ‫صف‬ ‫اكتب‬ ، ‫معينة‬ ". " ‫الحرف‬ ‫ال‬ ‫باسم‬ ‫ا‬ ً‫متبوع‬ ، ‫صف‬ : $(".test") ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫فإن‬ ، ‫زر‬ ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ ‫صف‬ ‫تملك‬ test ‫ي‬ ‫ستختق‬ : $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); ‫الصف‬ ‫طرق‬ ‫عن‬ ‫تحديد‬ ‫ة‬ ‫ر‬ ‫كثت‬‫بطرق‬ ‫التحديد‬ ‫يمكن‬ ‫أيضا‬ ‫الواصفات‬ ‫أحد‬ ‫طريق‬ ‫عن‬ ‫مثال‬ atteibutes $( "input[name='message']" ).val( "hello anas" ); ‫تحديد‬ ‫يمكن‬ ‫الفردي‬‫او‬ ‫ي‬ ‫ر‬ ‫الزج‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫ذات‬ ‫العناص‬ $( "p:even" ).text( "even" ); $( "p:odd" ).text( "odd" );
  • 253. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 253 : ‫المزيد‬ ‫واكتشاف‬ ‫التالية‬ ‫االكواد‬ ‫تجريب‬ ‫يمكنك‬ $( "tr:first" ).css( "font-style", "italic" ); $( "tr" ).last().css({ fontWeight: "bolder" }); $( "div span:last-child" ).text('last item') $( "td:lt(4)" ).css( "backgroundColor", "yellow" ); $( "label + input" ).css( "color", "blue" ) $( "#prev ~ div" ).css( "border", "3px groove blue" ); $( "input:password" ).css({border: "3px red solid"}); $( "input[type=checkbox]" ).css({border: "3px blue solid"});
  • 254. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 254 ‫االحداث‬ ‫تصميم‬ ‫تم‬ jQuery ‫صفحة‬ ‫ي‬ ‫ف‬ ‫لألحداث‬ ‫لالستجابة‬ ‫ا‬ ً ‫خصيص‬ HTML. ‫األحداث؟‬ ‫ي‬ ‫ه‬ ‫ما‬ ‫اءات‬‫ر‬‫إج‬ ‫جميع‬ ‫تسىم‬ ‫المستخدم‬ ‫االستجابة‬ ‫الويب‬ ‫لصفحة‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المختلفة‬ .‫باألحداث‬ ‫لها‬ ‫ما‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫يحدث‬ ‫عندما‬ ‫اللحظة‬ ‫الحدث‬ ‫يمثل‬ ‫مثل‬, : • ‫عنرص‬ ‫فوق‬ ‫الماوس‬ ‫تحريك‬ • ‫االختيار‬‫زر‬ ‫اختيار‬ • ‫فوق‬ ‫النقر‬ ‫عنرص‬ .‫األحداث‬ ‫مع‬ "‫أطلقت‬ / ‫ائق‬‫ر‬‫"ح‬ ‫مصطلح‬ ‫يستخدم‬ ‫ما‬ ‫ا‬ً‫غالب‬ ."‫مفتاح‬ ‫عىل‬ ‫الضغط‬ ‫لحظة‬ ، ‫المفتاح‬ ‫عىل‬ ‫الضغط‬ ‫حدث‬ ‫تشغيل‬ ‫"يتم‬ :‫مثال‬ ‫أحداث‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ DOM :‫الشائعة‬ Mouse Keyboard Form Document/Window click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload ‫ما‬ ‫لحدث‬ ‫االستماع‬ ‫طريقة‬ ‫القيام‬ ‫يمكنك‬ ، ‫الصفحة‬ ‫ي‬ ‫ف‬ ‫ات‬‫ر‬‫الفق‬ ‫لجميع‬ ‫نقرة‬ ‫حدث‬ ‫ر‬ ‫لتعيي‬ ‫ي‬ ‫يىل‬ ‫بما‬ : $("p").click(); ‫عليك‬ ‫يجب‬ .‫الحدث‬ ‫وقوع‬ ‫عند‬ ‫يحدث‬ ‫أن‬ ‫يجب‬ ‫ما‬ ‫تحديد‬ ‫ي‬ ‫ه‬ ‫التالية‬ ‫الخطوة‬ ‫تمرير‬ function :‫الحدث‬ ‫إىل‬
  • 255. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 255 $("p").click(function(){ // action goes here!! }); ‫بالحداث‬ ‫الخاصة‬ ‫المساعدة‬ ‫الدوال‬ $(document).ready() ‫الطريقة‬ ‫لنا‬ ‫تتيح‬ $(document).ready() ‫تنفيذ‬ ‫دالة‬ ‫يتم‬ ‫عندما‬ ‫المستند‬ ‫تحميل‬ .‫بالكامل‬ click() ‫طريقة‬ ‫تقوم‬ click () ‫بإرفاق‬ ‫دالة‬ ‫معالج‬ ‫النقر‬ ‫حدث‬ ‫بعنرص‬ HTML. ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫عىل‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ HTML. ‫عند‬ : ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫انطالق‬ ‫عنرص‬ ‫عىل‬ ‫نقرة‬ ‫حدث‬ <p> ‫العنرص‬ ‫إخفاء‬ <p> : ‫ي‬ ‫الحاىل‬ $("p").click(function(){ $(this).hide(); }); dblclick() ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫فوق‬ ‫ا‬ ً ‫مزدوج‬ ‫ا‬ً ‫نقر‬ ‫المستخدم‬‫ينقر‬ ‫عندما‬ HTML: $("p").dblclick(function(){ $(this).hide(); }); Mouseenter () ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫إىل‬ ‫الماوس‬ ‫ر‬ ‫مؤرس‬ ‫يدخل‬ ‫عندما‬ HTML: $("#p1").mouseenter(function(){ alert("You entered p1!"); });
  • 256. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 256 mouseleave () ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫الماوس‬ ‫ر‬ ‫مؤرس‬ ‫ك‬ ‫ر‬ ‫يت‬ ‫عندما‬ HTML: $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); mousedown () ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ، ‫ألسفل‬ ‫األيمن‬‫أو‬ ‫األوسط‬‫أو‬ ‫األيش‬ ‫الماوس‬‫زر‬ ‫عىل‬ ‫الضغط‬ ‫عند‬ ‫عنرص‬ ‫فوق‬ ‫الماوس‬ ‫يكون‬ ‫بينما‬ ، HTML: $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); mouseup () ‫طريقة‬ ‫تقوم‬ mouseup () ‫بإرفاق‬ ‫دالة‬ ‫بعنرص‬ ‫الحدث‬ ‫معالج‬ HTML. ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ، ‫يكون‬ ‫بينما‬ ، ‫األيمن‬‫أو‬ ‫األوسط‬‫أو‬ ‫األيش‬ ‫الماوس‬‫زر‬ ‫تحرير‬ ‫عند‬ ‫عنرص‬ ‫فوق‬ ‫الماوس‬ HTML: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); hover () ‫طريقة‬ ‫تأخذ‬ hover () ‫من‬ ‫ج‬ ‫مزي‬ ‫ي‬ ‫وه‬ ‫ر‬ ‫وظيفتي‬ Mouseenter() ‫و‬ mouseleave (). ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ ‫عنرص‬ ‫الماوس‬ ‫يدخل‬ ‫عندما‬ ‫األوىل‬ HTML ‫ال‬ ‫تنفيذ‬ ‫ويتم‬ ، ‫دالة‬ ‫عندما‬ ‫الثانية‬ ‫يغادر‬ ‫عنرص‬ ‫الماوس‬ HTML: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });
  • 257. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 257 focus() ‫طريقة‬ ‫تقوم‬ focus() ‫بإرفاق‬ ‫دالة‬ ‫نموذج‬ ‫بحقل‬ ‫الحدث‬ ‫معالج‬ HTML. ‫ال‬ ‫تنفيذ‬ ‫يتم‬ ‫دالة‬ :‫النموذج‬ ‫حقل‬ ‫عىل‬ ‫ر‬ ‫كت‬ ‫ر‬ ‫الت‬ ‫يتم‬ ‫عندما‬ $("input").focus(function(){ $(this).css("background-color", "#cccccc"); }); ‫الطريقة‬ on() ‫تقوم‬ ‫ال‬ ‫طريقة‬ on () ‫بإرفاق‬ .‫المحددة‬ ‫للعناص‬ ‫األحداث‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ ‫بعنرص‬ ‫نقرة‬ ‫حدث‬ ‫أرفق‬ <p>: $("p").on("click", function(){ $(this).hide(); }); ‫عنرص‬ ‫إىل‬ ‫متعددة‬ ‫أحداث‬ ‫معالجات‬ ‫أرفق‬ <p>: $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });
  • 258. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 258 ‫التاثيرات‬ ‫االخفاء‬ ‫و‬ ‫االظهار‬ ‫باستخدام‬ jQuery ‫عناص‬ ‫إخفاء‬ ‫يمكنك‬ ، HTML ‫ر‬ ‫التابعي‬ ‫باستخدام‬ ‫وإظهارها‬ hide () ‫و‬ show (): $(selector).hide(speed,callback); $(selector).show(speed,callback); $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); ‫تحدد‬ ‫االختياري‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬ speed ‫القيم‬ ‫تأخذ‬ ‫أن‬ ‫ويمكن‬ ، ‫العرض‬ / ‫اإلخفاء‬ ‫رسعة‬ " :‫التالية‬ slow "‫أو‬ " fast ‫أو‬ " ‫ال‬ ‫عدد‬ .‫ثانية‬ ‫ي‬ ‫مىل‬ ‫ر‬ ‫امت‬‫ر‬‫البا‬ callback ‫اختياري‬ ‫أيضا‬ ‫يدد‬ ‫دالة‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫يتم‬ ‫اإل‬ ‫أو‬ ‫خفاء‬ ‫اإل‬ ‫ظهار‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫الشعة‬ $("button").click(function(){ $("p").hide(1000); });
  • 259. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 259 toggle() ‫التبديل‬ ‫طريقة‬ ‫باستخدام‬ ‫وإظهاره‬ ‫عنرص‬ ‫إخفاء‬ ‫ر‬ ‫بي‬ ‫التبديل‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ ( toggle .) ‫الظاهرة‬ ‫العناص‬ ‫اخفائها‬ ‫يتم‬ :‫المخفية‬ ‫العناص‬ ‫وتظهر‬ $(selector).toggle(speed,callback); $("button").click(function(){ $("p").toggle(); }); ‫تأخذ‬ ‫أن‬ ‫يمكن‬ ‫الدالة‬ toggle ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫الشعة‬ . ‫تأخذ‬ ‫أن‬ ‫يمكن‬ ‫الدالة‬ toggle ‫ر‬ ‫امت‬‫ر‬‫با‬ callback . ‫السحب‬ Sliding ‫طرق‬ ‫تعمل‬ slide .‫وألسفل‬ ‫ألعىل‬ ‫العناص‬ ‫تحريك‬ ‫عىل‬ ‫باستخدام‬ jQuery ‫ر‬ ‫تأثت‬ ‫إنشاء‬ ‫يمكنك‬ ، ‫السحب‬ .‫العناص‬ ‫عىل‬ ‫يحتوي‬ jQuery ‫طرق‬ ‫عىل‬ ‫السحب‬ slide :‫التالية‬ • slideDown() • slideUp() • slideToggle() slideDown() ‫طريقة‬ ‫ستخدم‬ ُ ‫ت‬ jQuery slideDown () .‫ألسفل‬‫عنرص‬ ‫لتحريك‬ $(selector).slideDown(speed,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ " :‫التالية‬ ‫القيم‬ ‫يأخذ‬ ‫أن‬ ‫يمكن‬ . ‫ر‬ ‫التأثت‬ ‫مدة‬ ‫االختياري‬ ‫الشعة‬ slow " ‫أو‬ " fast .‫ثانية‬ ‫ي‬ ‫ملىل‬ ‫أو‬ " ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫يتم‬ ‫ر‬ ‫التاثت‬ .
  • 260. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 260 ‫طريقة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ slideDown (): $("#flip").click(function(){ $("#panel").slideDown(); }); slideUp() ‫طريقة‬ ‫ستخدم‬ ُ ‫ت‬ jQuery slideUp () ‫عنرص‬ ‫لتحريك‬ .‫ألعىل‬ $(selector).slideUp(speed,callback); $("#flip").click(function(){ $("#panel").slideUp(); }); slideToggle ‫طريقة‬ ‫تقوم‬ slideToggle () ‫ي‬ ‫ر‬ ‫طريقت‬ ‫ر‬ ‫بي‬ ‫بالتبديل‬ slideDown () ‫و‬ slideUp (). • ‫تم‬ ‫إذا‬ ‫سحب‬ ‫ل‬ ‫العناص‬ ‫أل‬ ‫فإن‬ ، ‫سفل‬ slideToggle () ‫إىل‬ ‫سيؤدي‬ ‫تحريكها‬ .‫ألعىل‬ • ‫تم‬ ‫إذا‬ ‫سحب‬ ‫فإن‬ ، ‫ألعىل‬ ‫العناص‬ slideToggle () ‫كها‬ ‫ستحر‬ .‫ألسفل‬ $(selector).slideToggle(speed,callback); $("#flip").click(function(){ $("#panel").slideToggle(); });
  • 261. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 261 ‫التالشي‬ Fading ‫يحتوي‬ jQuery ‫طرق‬ ‫عىل‬ ‫ي‬ ‫ر‬ ‫التالش‬ fade :‫التالية‬ • fadeDown() • fadeUp() • fadeToggle() $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); Animation ‫ستخدم‬ ُ ‫ت‬ ‫طريقة‬ animate () ‫إلنشاء‬ ‫كة‬ ‫حر‬ .‫مخصصة‬ $(selector).animate({params},speed,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ params ‫خصائص‬ ‫المطلوبة‬ CSS .‫تحريكها‬ ‫ليتم‬ ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ " :‫التالية‬ ‫القيم‬ ‫يأخذ‬ ‫أن‬ ‫يمكن‬ . ‫ر‬ ‫التأثت‬ ‫مدة‬ ‫االختياري‬ ‫الشعة‬ slow ‫أو‬ " " fast ‫أو‬ " milliseconds . ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ ‫التحر‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫يتم‬ ‫ي‬ .‫ك‬ ً ‫بسيط‬ ‫ا‬ ً‫استخدام‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫لطريقة‬ ‫ا‬ animate () ‫عنرص‬ ‫ينقل‬ <div> ‫بمقدار‬ ‫اليسار‬ ‫خاصية‬ ‫إىل‬ ‫يصل‬ ‫ر‬ ‫حت‬ ، ‫ر‬ ‫اليمي‬ ‫إىل‬ 250 :‫بكسل‬ $("button").click(function(){ $("div").animate({left: '250px'}); }); :‫الوقت‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫الخصائص‬ ‫من‬ ‫العديد‬ ‫تحريك‬ ‫يمكن‬ ‫أنه‬ ‫الحظ‬
  • 262. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 262 $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); ‫باستخدا‬ ‫التحريك‬ ‫م‬ ‫نسبية‬ ‫قيم‬ ‫الحالية‬ ‫بالقيمة‬ ‫مرتبطة‬ ‫إذن‬ ‫القيمة‬ ‫(تكون‬ ‫النسبية‬ ‫القيم‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫الممكن‬ ‫من‬ .)‫للعنرص‬ $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); ‫عنرص‬ ً ‫أوال‬ ‫أدناه‬ ‫المثال‬ ‫ينقل‬ <div> :‫النص‬ ‫خط‬ ‫حجم‬ ‫يزيد‬ ‫ثم‬ ، ‫ر‬ ‫اليمي‬ ‫إىل‬ $("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); }); ‫التحريك‬ ‫او‬ ‫التأثير‬ ‫اقاف‬ ‫طريقة‬ ‫ستخدم‬ ُ ‫ت‬ jQuery stop () .‫انتهائه‬ ‫قبل‬ ‫ر‬ ‫تأثت‬ ‫أو‬ ‫متحرك‬ ‫رسم‬ ‫إليقاف‬ ‫طريقة‬ ‫تعمل‬ stop () ‫ر‬ ‫تأثت‬ ‫وظائف‬ ‫جميع‬ ‫مع‬ jQuery ‫ا‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ، ‫لسحب‬ .‫المخصصة‬ ‫كة‬ ‫المتحر‬ ‫والرسوم‬ ‫ي‬ ‫ر‬ ‫والتالش‬ $(selector).stop(stopAll,goToEnd);
  • 263. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 263 $("#stop").click(function(){ $("#panel").stop(); }); ‫التسلسل‬ Chaining ‫ات‬‫ر‬‫عبا‬ ‫نكتب‬ ‫كنا‬، ‫اآلن‬ ‫ر‬ ‫حت‬ jQuery ‫واحدة‬ ‫تلو‬ ‫ه‬ ‫األخرى‬ ‫ومع‬ ،‫ذلك‬ ‫لنا‬ ‫تتيح‬ ‫التسلسل‬ ‫تسىم‬ ‫تقنية‬ ‫هناك‬ ‫تنفيذ‬ ‫أوامر‬ jQuery ، ‫متعددة‬ .)‫(العناص‬‫العنرص‬ ‫نفس‬ ‫عىل‬ ، ‫األخرى‬‫تلو‬ ‫واحدة‬ ‫مالحظة‬ ، ‫الطريقة‬ ‫بهذه‬ : ‫العنرص‬ ‫نفس‬ ‫عىل‬‫العثور‬ ‫المتصفحات‬ ‫عىل‬ ‫ر‬ ‫يتعي‬ ‫ال‬ .‫مرة‬ ‫من‬ ‫ر‬ ‫أكت‬ )‫(العناص‬ .‫السابق‬ ‫اء‬‫ر‬‫باإلج‬ ‫اء‬‫ر‬‫اإلج‬ ‫إلحاق‬ ‫سوى‬ ‫عليك‬ ‫ما‬ ، ‫اء‬‫ر‬‫إج‬ ‫لتسلسل‬ ‫طرق‬ ‫مع‬ ‫التالية‬ ‫األمثلة‬ ‫ابط‬ ‫ر‬ ‫تت‬ css () ‫و‬ slideUp () ‫و‬ slideDown (). ‫ر‬ ‫يتغت‬ ‫عنرص‬ <p> ‫أ‬ ً ‫وال‬ ، ‫ألعىل‬ ‫لق‬‫يت‬ ‫ثم‬ ، ‫األحمر‬ ‫اللون‬ ‫إىل‬ :‫ألسفل‬ ‫لق‬‫يت‬ ‫ثم‬ $("#p1").css("color", "red").slideUp(2000).slideDown(2000); ‫الطريقة‬ ‫بهذه‬ ‫نكتبها‬ ‫وعادة‬ $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000);
  • 264. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 264 ‫مع‬ ‫التعامل‬ classes ‫باستخدام‬ jQuery ‫مع‬ ‫التعامل‬ ‫السهل‬ ‫من‬ ، ‫ستايل‬ .‫العناص‬ ‫يحتوي‬ jQuery ‫لمعالجة‬ ‫طرق‬ ‫عدة‬ ‫عىل‬ CSS. :‫التالية‬ ‫الطرق‬ ‫ي‬ ‫ف‬‫سننظر‬ addClass () - ‫ضيف‬ ‫صف‬ ‫المحددة‬ ‫العناص‬ ‫إىل‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ removeClass () - ‫زيل‬ ‫صف‬ ‫المحددة‬ ‫العناص‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ toggleClass () - ‫الة‬‫ز‬‫إ‬ / ‫إضافة‬ ‫ر‬ ‫بي‬ ‫للتبديل‬ ‫الصفوف‬ ‫المحددة‬ ‫العناص‬ ‫من‬ css () - ‫إرجاع‬‫أو‬ ‫ر‬ ‫تعيي‬ ‫الخاصية‬ ‫النمط‬ ‫ر‬ ‫الصفي‬ ‫هذين‬ important ‫و‬ blue ‫االحقة‬ ‫األمثلة‬ ‫ي‬ ‫ف‬ ‫سنستعملهما‬ .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } addClass() ‫إضافة‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫صف‬ ‫تحديد‬ ‫يمكنك‬ ‫بالطبع‬ .‫مختلفة‬ ‫عناص‬ ‫إىل‬ ‫إضافة‬ ‫عند‬ ‫عناص‬ ‫عدة‬ ‫الصفوف‬ : $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); ‫طريقة‬ ‫ي‬ ‫ف‬ ‫متعددة‬ ‫فئات‬ ‫تحديد‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ addClass (): $("button").click(function(){ $("#div1").addClass("important blue"); });
  • 265. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 265 removeClass() ‫الة‬‫ز‬‫إ‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫الخاصية‬ ‫صف‬ :‫مختلفة‬ ‫عناص‬ ‫من‬ ‫معينة‬ $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); toggleClass() ‫طريقة‬ ‫استخدام‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيوضح‬ jQuery toggleClass (). ‫تقوم‬ ‫الة‬‫ز‬‫إ‬ / ‫إضافة‬ ‫ر‬ ‫بي‬ ‫بالتبديل‬ ‫الطريقة‬ ‫هذه‬ ‫الصفوف‬ :‫المحددة‬ ‫العناص‬ ‫من‬ $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); }); css() ‫طريقة‬ ‫تقوم‬ css () .‫المحددة‬ ‫للعناص‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحدة‬ ‫نمط‬ ‫خاصية‬ ‫إرجاع‬‫أو‬ ‫ر‬ ‫بتعيي‬ ‫إعادة‬ ‫خاصية‬ css ‫خاصية‬ ‫قيمة‬ ‫إلرجاع‬ CSS : ‫ي‬ ‫التاىل‬ ‫الجملة‬ ‫بناء‬ ‫استخدم‬ ، ‫محددة‬ css("propertyname"); :‫األول‬ ‫المطابق‬‫للعنرص‬ ‫الخلفية‬ ‫لون‬ ‫قيمة‬ ‫إىل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيعود‬ $("p").css("background-color"); ‫خاصية‬ ‫قيمة‬ ‫ضبط‬ ss ‫خاصية‬ ‫ر‬ ‫لتعيي‬ CSS : ‫ي‬ ‫التاىل‬ ‫الجملة‬ ‫بناء‬ ‫استخدم‬ ، ‫محددة‬ css("propertyname","value"); :‫المتطابقة‬ ‫العناص‬ ‫لجميع‬ ‫الخلفية‬ ‫لون‬ ‫قيمة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيحدد‬ $("p").css("background-color", "yellow");
  • 266. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 266 ‫خصائص‬ ‫عدة‬ ‫ضبط‬ css ‫خصائص‬ ‫عدة‬ ‫ر‬ ‫لتعيي‬ CSS : ‫ي‬ ‫التاىل‬ ‫الجملة‬ ‫بناء‬ ‫استخدم‬ ، css({"propertyname":"value","propertyname":"value",...}); :‫المتطابقة‬ ‫العناص‬ ‫لجميع‬ ‫الخط‬ ‫وحجم‬ ‫الخلفية‬ ‫لون‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫سيحدد‬ $("p").css({ "background-color": "yellow", "font-size": "200%" });
  • 267. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 267 ‫االجاكس‬ AJAX AJAX ‫هو‬ ‫ل‬ ‫تقنية‬ ‫الويب‬ ‫صفحة‬ ‫من‬ ‫اء‬‫ز‬‫أج‬ ‫وتحديث‬ ‫الخادم‬ ‫مع‬ ‫البيانات‬ ‫تبادل‬ - .‫بأكملها‬ ‫الصفحة‬ ‫تحميل‬ ‫إعادة‬ ‫دون‬ AJAX ‫ل‬‫اختصار‬ AJAX = Asynchronous JavaScript and XML. ‫الطريقة‬ load() ‫طريقة‬ load () ‫طريقة‬ ‫ي‬ ‫ه‬ AJAX .‫فعالة‬ ‫لكنها‬ ‫بسيطة‬ ‫طريقة‬ ‫تقوم‬ load () ‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫وتضع‬ ‫الخادم‬ ‫من‬ ‫البيانات‬ ‫بتحميل‬ .‫المحدد‬‫العنرص‬ ‫ي‬ ‫ف‬ $(selector).load(URL,data,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ URL ‫االجبارية‬ ‫عنوان‬ URL .‫تحميله‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫الذي‬ ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫سلسلة‬ ‫قيمة‬ / ‫مفتاح‬ ‫أزواج‬ ‫من‬ ‫مجموعة‬ ‫االختياري‬ ‫البيانات‬ ‫االستعالم‬ .‫الطلب‬ ‫مع‬ ‫إلرسالها‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ال‬ ‫االختياري‬ ‫دالة‬ ‫طريقة‬ ‫اكتمال‬ ‫بعد‬ ‫تنفيذها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ load ‫ي‬ ‫التاىل‬ ‫الملف‬ ‫لدينا‬ ‫ليكن‬ ‫مثال‬ demo_test.txt <h2>jQuery and AJAX is FUN!!!</h2> <p id="p1">This is some text in a paragraph.</p> ‫الملف‬ ‫محتوى‬ ‫بتحميل‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يقوم‬ demo_test.txt ‫عنرص‬ ‫ي‬ ‫ف‬ ‫المحدد‬ $("#div1").load("demo_test.txt");
  • 268. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 268 ‫الدوال‬ get() and post() ‫استخدام‬ ‫يتم‬ ‫ر‬ ‫الطريقتي‬ get () ‫و‬ post () ‫بطلب‬ ‫الخادم‬ ‫من‬ ‫البيانات‬ ‫لطلب‬ HTTP GET ‫أو‬ POST. ‫طلب‬ HTTP: GET ‫مقابل‬ POST :‫هما‬ ‫والخادم‬ ‫العميل‬ ‫ر‬ ‫بي‬ ‫للطلب‬ ‫لالستجابة‬ ‫شائعتان‬ ‫طريقتان‬ ‫هناك‬ GET ‫و‬ POST. GET - ‫محدد‬ ‫مورد‬ ‫من‬ ‫بيانات‬ ‫يطلب‬ POST - ‫محدد‬ ‫مورد‬ ‫إىل‬ ‫معالجتها‬ ‫لتتم‬ ‫البيانات‬ ‫يرسل‬ ‫يستخدم‬ GET .‫الخادم‬ ‫من‬ ‫البيانات‬ ‫بعض‬ )‫داد‬ ‫ر‬ ‫(است‬ ‫عىل‬ ‫للحصول‬ ‫ا‬ ً ‫أساس‬ ‫استخدام‬ ‫ا‬ ً ‫أيض‬ ‫يمكن‬ POST ‫ب‬ ‫عىل‬ ‫للحصول‬ ، ‫ذلك‬ ‫ومع‬ .‫الخادم‬ ‫من‬ ‫البيانات‬ ‫عض‬ ‫طريقة‬ ‫فإن‬ POST ‫مع‬ ‫البيانات‬ ‫إلرسال‬ ‫ستخدم‬ ُ ‫ت‬ ‫ما‬ ‫ا‬ً‫وغالب‬ ، ‫ا‬ ً ‫مؤقت‬ ‫البيانات‬ ‫تخزن‬ ‫ال‬ .‫الطلب‬ ‫الطريقة‬ $.get() ‫طريقة‬ ‫تطلب‬ get () ‫بطلب‬ ‫الخادم‬ ‫من‬ ‫بيانات‬ HTTP GET. $.get(URL,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ URL ‫عنوان‬ ‫المطلوبة‬ URL .‫طلبه‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫الذي‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ال‬ ‫اسم‬ ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ .‫الطلب‬ ‫نجاح‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫تنفيذها‬ ‫اد‬‫ر‬‫الم‬ ‫طريقة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يستخدم‬ get () ‫عىل‬ ‫موجود‬ ‫ملف‬ ‫من‬ ‫البيانات‬ ‫داد‬ ‫ر‬ ‫الست‬ :‫الخادم‬ $("button").click(function(){ $.get("demo_test.php", function(data, status){ alert("Data: " + data + "nStatus: " + status); }); });
  • 269. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 269 ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫ل‬ ‫األوىل‬ get () ‫عنوان‬ ‫ي‬ ‫ه‬ URL ‫طلبه‬ ‫ي‬ ‫ف‬ ‫نرغب‬ ‫الذي‬ ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫ي‬ ‫ه‬ ‫الثانية‬ ‫الدالة‬ callback ‫يحتفظ‬ . ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫األول‬ ‫يحتفظ‬ ‫بينما‬ ، ‫المطلوبة‬ ‫الصفحة‬ ‫بمحتوى‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ .‫الطلب‬ ‫بحالة‬ ‫ي‬ ‫الثان‬ ‫الطريقة‬ $.post() ‫طريقة‬ ‫تطلب‬ post () ‫طلب‬ ‫باستخدام‬ ‫الخادم‬ ‫من‬ ‫بيانات‬ HTTP POST. $.post(URL,data,callback); ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ URL ‫عنوان‬ ‫المطلوبة‬ URL .‫طلبه‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫الذي‬ ‫تحدد‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ .‫الطلب‬ ‫مع‬ ‫إلرسالها‬ ‫البيانات‬ ‫بعض‬ ‫االختياري‬ ‫البيانات‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫ال‬ ‫اسم‬ ‫ي‬ ‫ه‬ ‫االختياري‬ ‫دالة‬ .‫الطلب‬ ‫نجاح‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫تنفيذها‬ ‫اد‬‫ر‬‫الم‬ ‫طريقة‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يستخدم‬ post () :‫الطلب‬ ‫مع‬ ‫البيانات‬ ‫بعض‬ ‫إلرسال‬ $("button").click(function(){ $.post("demo_test_post.php", { name: "anas alpure", city: "Mara" }, function(data, status){ alert("Data: " + data + "nStatus: " + status); }); }); ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ . $ ‫ل‬ ‫األوىل‬ post () ‫عنوان‬ ‫ي‬ ‫ه‬ URL ‫طلبه‬ ‫ي‬ ‫ف‬ ‫نرغب‬ ‫الذي‬ ‫إلرسا‬ ‫البيانات‬ ‫بعض‬ ‫بتمرير‬ ‫نقوم‬ ‫ثم‬ .)‫والمدينة‬ ‫(االسم‬ ‫الطلب‬ ‫مع‬ ‫لها‬ ‫ل‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫يقوم‬ PHP " ‫ي‬ ‫ف‬ demo_test_post.php" ‫المعلمات‬ ‫اءة‬‫ر‬‫بق‬ .‫نتيجة‬ ‫وإرجاع‬ ‫ومعالجتها‬ ‫ال‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫ي‬ ‫ه‬ ‫الثالثة‬ ‫دالة‬ callback ‫يحتفظ‬ . ‫ر‬ ‫امت‬‫ر‬‫با‬ callback ‫بمحتوى‬ ‫األول‬ ‫يحتفظ‬ ‫بينما‬ ، ‫المطلوبة‬ ‫الصفحة‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ .‫الطلب‬ ‫بحالة‬ ‫ي‬ ‫الثان‬
  • 270. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 270 ‫الخصائص‬ ‫و‬ ‫بالمحتوى‬ ‫التحكم‬ ‫يحتوي‬ jQuery ‫عناص‬ ‫ر‬ ‫لتغيت‬ ‫فعالة‬ ‫طرق‬ ‫عىل‬ ‫وخصائص‬ HTML .‫ومعالجتها‬ ‫ي‬ ‫ف‬ ‫ا‬ ً ‫جد‬ ‫المهمة‬ ‫اء‬‫ز‬‫األج‬ ‫أحد‬ jQuery ‫معالجة‬ ‫إمكانية‬‫هو‬ DOM. ‫ي‬ ‫ر‬ ‫يأن‬ jQuery ‫من‬ ‫مجموعة‬ ‫مع‬ ‫الطرق‬ ‫ب‬ ‫الصلة‬ ‫ذات‬ DOM ‫السهل‬ ‫من‬ ‫تجعل‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫وال‬ ‫العناص‬ ‫إىل‬ ‫الوصول‬ ‫خواص‬ .‫ومعالجتها‬ ‫للمحتوى‬ ‫الوصول‬ ‫لمعالجة‬ ‫مفيدة‬ ‫ولكنها‬ ‫بسيطة‬ ‫طرق‬ ‫ثالث‬ DOM : ‫ي‬ ‫ه‬ text () - ‫إرجاعه‬‫أو‬ ‫المحددة‬ ‫للعناص‬ ‫النص‬ ‫محتوى‬ ‫ر‬ ‫لتعيي‬ html () - ‫ر‬ ‫تعيي‬ ‫ر‬ ‫ترمت‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫(بما‬ ‫المحددة‬ ‫العناص‬ ‫محتوى‬ ‫إرجاع‬ ‫أو‬ HTML ) val () - ‫النموذج‬ ‫حقول‬ ‫قيمة‬ ‫إرجاع‬ ‫أو‬ ‫ر‬ ‫تعيي‬ ‫باستخدام‬ ‫محتوى‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫الطرق‬ text () ‫و‬ html (): $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); ‫طريقة‬ ‫باستخدام‬ ‫اإلدخال‬ ‫حقل‬ ‫قيمة‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ jQuery val (): $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); ‫الخصائص‬ ‫على‬ ‫الحصول‬ ‫طريقة‬ ‫استخدام‬ ‫يتم‬ attr () ‫قيم‬ ‫عىل‬ ‫للحصول‬ ‫الخواص‬ . ‫قيمة‬ ‫عىل‬ ‫الحصول‬ ‫كيفية‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يوضح‬ ‫الخاصية‬ href :‫ارتباط‬ ‫ي‬ ‫ف‬ $("button").click(function(){ alert($("#site").attr("href")); });
  • 271. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 271 ‫عناصر‬ ‫إضافة‬ ‫باستخدام‬ jQuery ، .‫جديد‬ ‫محتوى‬ / ‫عناص‬ ‫إضافة‬ ‫السهل‬ ‫من‬ ‫محتوى‬ ‫أضف‬ HTML ‫جديد‬ ‫طرق‬ ‫ع‬‫أرب‬ ‫ي‬ ‫ف‬‫سننظر‬ jQuery :‫جديد‬ ‫محتوى‬ ‫إلضافة‬ ‫ستخدم‬ ُ ‫ت‬ 1 . append() - ‫المحددة‬ ‫العناص‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ ‫درج‬ُ‫ي‬ 2 . prepend () - ‫المحددة‬ ‫العناص‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫محتوى‬ ‫اج‬‫ر‬‫إد‬ 3 . after () - ‫العناص‬ ‫بعد‬ ‫المحتوى‬ ‫اج‬‫ر‬‫إلد‬ ‫المحددة‬ 4 . before() - ‫المحددة‬ ‫العناص‬ ‫قبل‬ ‫المحتوى‬ ‫اج‬‫ر‬‫إد‬ ‫الطريقة‬ append() ‫طريقة‬ ‫درج‬ ُ ‫ت‬ append () ‫عناص‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ HTML .‫المحددة‬ $("p").append("Some appended text."); ‫الطريقة‬ prepend() ‫طريقة‬ ‫درج‬ ُ ‫ت‬ jQuery prepend () ‫عناص‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ HTML .‫المحددة‬ $("p").prepend("Some prepended text."); ‫الطرائق‬ after() and before() ‫طريقة‬ ‫تقوم‬ jQuery after () ‫عناص‬ ‫بعد‬ ‫المحتوى‬ ‫اج‬‫ر‬‫بإد‬ HTML .‫المحددة‬ ‫طريقة‬ ‫درج‬ ُ ‫ت‬ jQuery before () ‫عناص‬ ‫قبل‬ ‫المحتوى‬ HTML .‫المحددة‬ $("img").after("Some text after"); $("img").before("Some text before");
  • 272. jQuery ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 272 ‫عنصر‬ ‫حذف‬ ‫باستخدام‬ jQuery ‫عناص‬ ‫الة‬‫ز‬‫إ‬ ‫السهل‬ ‫من‬ ، HTML .‫الموجودة‬ ‫المحتوى‬ / ‫العناص‬ ‫الة‬‫ز‬‫إ‬ ‫ل‬ ‫أساسيتان‬ ‫طريقتان‬ ‫توجد‬ ، ‫والمحتوى‬ ‫العناص‬ ‫الة‬‫ز‬‫إل‬ jQuery: 1 . remove() - ‫له‬ ‫التابعة‬ ‫(والعناص‬ ‫المحدد‬‫العنرص‬ ‫يزيل‬ ) 2 . empty() - ‫المحدد‬ ‫العنرص‬ ‫من‬ ‫الفرعية‬ ‫العناص‬ ‫يزيل‬ ‫الطريقة‬ remove() ‫طريقة‬ ‫تزيل‬ jQuery remove () .‫الفرعية‬ ‫وعناصها‬ ‫المحددة‬ )‫(العناص‬‫العنرص‬ $("#div1").remove(); ‫الطريقة‬ empty() ‫األسلوب‬ ‫يزيل‬ ‫العناص‬ .‫المحددة‬ )‫(العناص‬ ‫للعنرص‬ ‫الفرعية‬ $("#div1").empty(); ‫التها‬‫ز‬‫إ‬ ‫اد‬‫ر‬‫الم‬ ‫العناص‬ ‫تصفية‬ ‫طريقة‬ ‫تقبل‬ remove () ‫ا‬ ً ‫أيض‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫العناص‬ ‫بتصفية‬ ‫لك‬ ‫يسمح‬ ‫مما‬ ، ‫واحدة‬ .‫التها‬‫ز‬‫إ‬ ‫اد‬‫ر‬‫الم‬ ‫ال‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ ‫ر‬ ‫امت‬‫ر‬‫با‬ ‫محدد‬ ‫صيغ‬ ‫من‬ ‫ا‬ً‫أي‬ jQuery. ‫عناص‬ ‫جميع‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ ‫يزيل‬ <p> ‫مع‬ class = "test": $("p").remove(".test"); ‫العناص‬ ‫كل‬‫المثال‬ ‫هذا‬ ‫يزيل‬ <p> ‫الصف‬ ‫ذات‬ "test" ‫و‬ "demo" $("p").remove(".test, .demo");
  • 274. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 274 ‫أو‬ ‫البيانات‬ ‫قاعدة‬ Database ‫تعريف‬ ‫يمكن‬ ‫ي‬ ‫وبالتاىل‬ ،‫المعلومات‬ ‫لتخزين‬ ‫منظمة‬ ‫طريقة‬ ‫أنها‬ ‫عىل‬ ‫البيانات‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫معلومات‬ ‫عدة‬ ‫أو‬ ‫المعلومة‬ ‫وضع‬ ‫كيفية‬‫إىل‬ ‫ر‬ ‫يشت‬ ‫البيانات‬ ‫قاعدة‬ ‫مصطلح‬ ‫فإن‬ .‫معها‬ ‫التعامل‬ ‫يسهل‬ ‫مرتبة‬ ‫صورة‬ ‫ال‬ ‫لغة‬ SQL SQL ‫يرمز‬ Structured Query Language ‫ي‬ ‫ف‬ ‫تستخدم‬ ‫لغة‬ ‫عن‬ ‫عبارة‬ ‫وه‬ ‫ب‬ ‫يعرف‬ ‫فيما‬ ‫أو‬ ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ ‫إدارة‬ ‫نظم‬ ‫ي‬ ‫ف‬ ‫المخزنة‬ ‫البيانات‬ ‫معالجة‬ RDBMS ‫أو‬ Relational Database Management System . ‫مصطلح‬ Relational ‫جداول‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫تخزين‬ ‫تستطيع‬ ‫أنك‬ ‫يعت‬ ،‫مختلفة‬ ‫البعض‬ ‫ببعضها‬ ‫مرتبطة‬ ‫الجدول‬ ‫تلك‬ ‫تكون‬ ‫بصورة‬ ،‫معينة‬ ‫أن‬ ‫القول‬ ‫نستطيع‬ ‫أو‬ ‫الجداول‬ ‫تلك‬ ‫متعلقة‬ ‫تكون‬ .‫البعض‬ ‫ببعضها‬ ‫أن‬ ‫يمكن‬ ‫تستخدم‬ SQL ‫مثل‬ ‫مختلفة‬ ‫بيانات‬ ‫قواعد‬ ‫إدارة‬ ‫أنظمة‬ ‫مع‬ MySQL ، PostgreSQL ، Oracle ، Microsoft SQL Server ، Access ‫ها‬ ‫ر‬ ‫وغت‬ ، . ‫وجمل‬ ‫أوامر‬ ‫معظم‬ SQL ‫قبل‬ ‫من‬ ‫مدعومة‬ ‫تكون‬ RDBMS ، ‫لكن‬ ‫بعض‬ ‫توجد‬ ‫االختالفا‬ ‫ت‬ ‫ال‬ ‫ر‬ ‫بي‬ RDBMS ‫عىل‬ ‫منها‬ ‫كل‬‫تخص‬ ‫جديدة‬‫أوامر‬ ‫ي‬ ‫ف‬ ‫يتضح‬ ‫وذلك‬ ‫حده‬ . ‫تثبيت‬ MySQL ‫تثبيت‬ ‫يمكن‬ MySQL ‫التشغيل‬ ‫نظام‬ ‫سنستخدم‬ ،‫التشغيل‬ ‫نظم‬ ‫مختلف‬ ‫عىل‬ ‫وندز‬ Windows ‫حزمة‬‫و‬ XAMPP ‫لك‬ ‫تتيح‬ ‫األنظمة‬ ‫مختلف‬ ‫عىل‬ ‫يعمل‬ ‫المصدر‬ ‫مفتوحة‬ ‫مجانية‬ ‫برمجية‬ ‫وهو‬ ‫مثل‬ ‫الخدمات‬ ‫من‬ ‫مجموعة‬ ‫فر‬ ‫ر‬ ‫ست‬ Apache ‫و‬ ‫البيانات‬ ‫قواعد‬ MySQL ‫ها‬ ‫ر‬ ‫وغت‬ ‫أي‬ ‫استخدام‬ ‫يمكنك‬ ‫كما‬‫و‬ ‫عىل‬ ‫نعتمد‬ ‫سوف‬ ,‫استعالماتك‬ ‫اء‬‫ر‬‫إلج‬ ‫أداة‬ ‫أي‬ ‫أو‬ ‫أخرى‬ ‫برمجية‬ phpMyAdmin ‫برمجية‬ ‫عن‬ ‫عبارة‬‫وهو‬ , ‫ح‬ ‫ر‬ ‫الش‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫بالغة‬ ‫مكتوبة‬ ‫مجانية‬ PHP ‫بقواعد‬ ‫للتحكم‬ ‫بيانات‬ MYSQL
  • 275. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 275 https://www.apachefriends.org/download.html ‫بيانات‬ ‫قاعدة‬ ‫إنشاء‬ Database ‫خالل‬ ‫من‬ ‫الحالية‬ ‫البيانات‬ ‫قواعد‬ ‫لعرض‬ SQL SHOW DATABASES;
  • 276. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 276 ‫إل‬ ‫باستخدا‬ ‫بيانات‬ ‫قاعدة‬ ‫نشاء‬ ‫م‬ ‫أوامر‬ SQL ‫كتابة‬‫يمكن‬ CREATE DATABASE library; ‫فتح‬ ‫يمكن‬ phpMyAdmin ‫يمكنك‬ ‫وأيضا‬ ‫الجديدة‬ ‫البيانات‬ ‫قاعدة‬ ‫ومالحظة‬ ‫موجودة‬ ‫بيانات‬ ‫قاعدة‬ ‫حذف‬ ‫او‬ ‫جديدة‬ ‫بيانات‬ ‫لقاعدة‬ ‫إضافة‬ ‫لعمل‬ ‫استخدامه‬ ‫الجداول‬ ‫إنشاء‬ Tables ‫ال‬ ‫أو‬ ‫الجدول‬ Table ‫ه‬ ‫عن‬ ‫عبارة‬ ‫صفوف‬ ‫من‬ ‫مكون‬ ‫يكل‬ rows ‫وأعمدة‬ columns ‫أو‬ ‫البيانات‬ ‫من‬ ‫ر‬ ‫معي‬ ‫نوع‬ ‫بتعريف‬ ‫يقوم‬ ‫عمود‬ ‫وكل‬ data type ‫أما‬ ، ‫وتسىم‬ ‫تخزينها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫مجموع‬ ‫عىل‬ ‫فتحتوى‬ ‫الصفوف‬ ‫سجل‬ records ‫باستخدا‬ ‫جدول‬ ‫انشاء‬ ‫يمكنك‬ ‫م‬ phpMyAdmin ‫كود‬‫استخدام‬ ‫ويمكن‬ SQL ‫ي‬ ‫التاىل‬ CREATE TABLE library.books ( id int unsigned not null auto_increment primary key, name varchar(90), auther varchar(90), pages_count int unsigned ); create table ‫ت‬ ‫ر‬ ‫نىس‬ ‫ء‬ ‫اسم‬ ‫إلحاق‬ ‫ويتم‬ ‫عليها‬ ‫نعمل‬ ‫بيانات‬ ‫قاعدة‬ ‫داخل‬ ‫جدول‬ ‫األ‬ ‫بعد‬ ‫إنشاؤه‬ ‫اد‬‫ر‬‫الم‬ ‫الجدول‬ ‫مر‬ create table . ‫ال‬ ‫عمود‬ ‫األول‬ ‫ي‬ ‫ف‬ ‫الجدول‬ ‫ب‬ ‫اسم‬ id ‫ال‬ ‫عىل‬ ‫يحتوى‬ ‫سوف‬ ‫والذي‬ ‫المعرف‬ ‫الخاص‬ ‫بكل‬ ‫كتاب‬ ‫العمود‬ ‫ذلك‬ ‫بتعريف‬ ‫قمنا‬ ‫وهنا‬ ‫بالنوع‬ integer ‫أو‬ int ‫ر‬ ‫المتغت‬ ‫أن‬ ‫أي‬ id ‫صحيحة‬ ‫قيم‬ ‫يأخذ‬ ‫سوف‬ ، attribute ‫وه‬ ‫به‬ ‫الخاصة‬ unsigned ‫رقم‬ ‫أن‬ ‫أي‬ ‫الكتاب‬ ‫وه‬ ‫أخرى‬ ‫خاصية‬ ‫أضفنا‬ ‫ثم‬ ، ‫موجب‬ ‫صحيح‬ ‫عدد‬ ‫سيكون‬ not null ‫أي‬ ‫العمود‬ ‫أن‬ id ‫وال‬ ‫الدوام‬ ‫عىل‬ ‫قيمة‬ ‫يأخذ‬ ‫سوف‬ ، ً ‫فارغا‬ ‫يكون‬ ‫أن‬ ‫يمكن‬
  • 277. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 277 ‫الخاصية‬ ‫أضفنا‬ ‫ذلك‬ ‫بعد‬ auto_increment ‫بشكل‬ ‫العضوية‬ ‫رقم‬ ‫زيادة‬ ‫تعت‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫ي‬ ‫تلقان‬ ‫ال‬ ً ‫أبدا‬ ‫نحتاج‬ ‫لن‬ ‫ي‬ ‫وبالتاىل‬ ، ‫منا‬ ‫تدخل‬ ‫دون‬ ‫أن‬ ‫طالما‬ ‫العمود‬ ‫لهذا‬ ‫قيم‬ ‫ضافة‬ MySQL ‫ب‬ ‫تقوم‬ ‫سوف‬ ‫ذلك‬ ‫أن‬ ‫كما‬، ‫ت‬ ‫ان‬ ‫يجب‬ ‫العمود‬ ‫قيم‬ ‫كون‬ id ‫قيم‬ ‫فريدة‬ ‫ال‬ ‫الصفة‬ ً ‫ا‬ ‫ر‬ ‫أخت‬ ‫ثم‬ ، ‫تتكرر‬ primary key ‫لتسه‬ ‫العمود‬ ‫فهرسة‬ ‫ي‬ ‫ف‬ ‫تساعد‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫ي‬ ‫ل‬ .‫معينة‬ ‫قيمة‬ ‫عن‬ ‫البحث‬ ‫عملية‬ ‫العمود‬ ‫ي‬ ‫الثائ‬ ‫ب‬ ‫خاص‬ ‫وهو‬ ‫ا‬ ‫سم‬ ‫الكتاب‬ ‫ذلك‬ ‫سيتضمنها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫نوع‬ ‫وعرفنا‬ ‫نوع‬ ‫من‬ ‫الحقل‬ varchar ‫ب‬ ‫حد‬ ‫ا‬ ‫قص‬ ‫ل‬ ‫عدد‬ ‫المحارف‬ 90 ، ‫كل‬‫لعرض‬ ‫اكتب‬ ‫المنشأة‬ ‫الجداول‬ : show tables; ‫المر‬ ‫وهو‬ ‫بداخله‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الحقول‬ ً ‫أو‬ ‫الجدول‬ describe : ‫ي‬ ‫يىل‬ ‫كما‬ ‫ال‬ ‫داخل‬ ‫بيانات‬ ‫إضافة‬ Tables ‫الضافة‬ ‫التعليمة‬ ‫نستخدم‬ ‫البيانات‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫جدول‬ ‫اىل‬ ‫بيانات‬ INSERT ‫ي‬ ‫يىل‬ ‫كما‬ INSERT into table_name (column1, column2....) values (value1, value2...); table_name ‫إضافة‬ ‫ويكون‬ ‫فيه‬ ‫البيانات‬ ‫إضافة‬ ‫سيتم‬ ‫الذي‬ ‫الجدول‬ ‫اسم‬ ‫اال‬ ‫داخل‬ ‫البيانات‬ ‫و‬ ‫التحديد‬ ‫وجه‬ ‫عىل‬ ‫نريدها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫عمدة‬ ‫العمود‬ ‫اسم‬ ‫ي‬ ‫ف‬ ‫تتمثل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اال‬ ‫والعمود‬ ‫ول‬ ‫ا‬ ‫ل‬ ‫ثا‬ ‫إضافتها‬ ‫ي‬ ‫ينبغ‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫القيم‬ ‫ر‬ ‫تأن‬ ‫ذلك‬ ‫بعد‬ ‫ثم‬ .... ‫وهكذا‬ ‫ي‬ ‫ن‬ INSERT INTO `books`(`name`, `auther`,`pages_count`) V ALUES ('php', 'anas', '100');
  • 278. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 278 ‫الجداول‬ ‫داخل‬ ‫بيانات‬ ‫عن‬ ‫االستعالم‬ ‫ال‬ ‫أو‬ ‫بيانات‬ ‫اج‬‫ر‬‫ستخ‬ ‫االستعالم‬ ‫عنها‬ ‫ن‬ ‫األ‬ ‫ستخدم‬ ‫مر‬ select ‫وتكون‬ ‫ال‬ ‫العامة‬ ‫صيغته‬ : ‫ي‬ ‫كالتاىل‬ SELECT column_names from table_name [WHERE ...conditi ons]; column_names ‫اسم‬ ‫اء‬ ‫الحق‬ ‫و‬ ‫اج‬‫ر‬‫استخ‬ ‫اد‬‫ر‬‫الم‬ ‫ل‬ ‫ها‬ ‫الجدول‬ ‫من‬ ‫وذلك‬ table_name [ ‫جملة‬ ‫أما‬ ، WHERE ...conditions ‫ف‬ ] ‫حها‬ ‫ر‬ ‫نش‬ ‫سوف‬ ً ‫الحقا‬ SELECT name, auther FROM books; ‫الحظ‬ ‫ا‬ ‫لفاصلة‬ colon ‫وعمود‬ ‫عمود‬ ‫اسم‬ ‫كل‬ ‫ر‬ ‫بي‬ ‫و‬ ‫جملة‬ ‫آخر‬ ‫ي‬ ‫ف‬ ‫االستعال‬ ‫م‬ ‫نضع‬ ; ‫األ‬ ‫كل‬‫تعت‬ ‫ي‬ ‫ر‬ ‫والت‬ * ‫ال‬ ‫استخدام‬ ‫أيضا‬ ‫وتستطيع‬ ‫الحقول‬ ‫كل‬‫لجلب‬ ‫عمدة‬ ‫ك‬ : ‫ي‬ ‫التاىل‬ SELECT * FROM books ‫االستعال‬ ‫م‬ ‫شروط‬ ‫وضع‬ ‫مع‬ ‫البيانات‬ ‫عن‬ ‫جملة‬ ‫ي‬ ‫ف‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫وضع‬ select ‫بجملة‬ where ‫اد‬‫ر‬‫الم‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫بعدها‬ ‫ي‬ ‫ر‬ ‫يأن‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫عىل‬ ‫وضعه‬ ‫االستعال‬ ‫م‬ . SELECT column_names from table_name [WHERE ...condi tions]; : ‫مثال‬ - ‫صفحاتها‬ ‫عدد‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ 320 SELECT name, auther FROM books WHERE pages_count = 32 0;
  • 279. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 279 - ‫عدد‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫أكبر‬ ‫صفحاتها‬ ‫من‬ ً‫م‬‫تما‬ 160 SELECT name, auther FROM books WHERE pages_count > 16 0; - ‫أكبر‬ ‫صفحاتها‬ ‫عدد‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫يساوي‬ ‫او‬ 200 SELECT name, auther FROM books WHERE pages_count >= 2 00; - ‫هو‬ ‫مؤلفها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ Kahlil Gibran SELECT * FROM books WHERE auther = 'Kahlil Gibran'; - ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫هو‬ ‫مؤلفها‬ ‫ليس‬ Kahlil Gibran SELECT * FROM books WHERE auther != 'Kahlil Gibran'; - ‫التي‬ ‫الكتب‬ ‫جلب‬ ‫بالكلمة‬ ‫يبدأ‬ ‫مؤلفها‬ Kahlil SELECT * FROM books WHERE auther LIKE 'Kahlil%'; ‫العمليات‬ ‫المنطقية‬ ‫استخدام‬ ‫العلميا‬ ‫ت‬ ‫أو‬ ‫المنطقية‬ Logical Operators ‫أمر‬ ‫جملة‬ ‫داخل‬ select ، ‫والمعلما‬ ‫ت‬ :‫الواحدة‬ ‫الجملة‬ ‫داخل‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫تطبيق‬ ‫من‬ ‫مكننا‬ ُ ‫ت‬ ‫المنطقية‬ - 1 and - 2 or - 3 not
  • 280. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 280 - ‫هو‬ ‫مؤلفها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ Kahlil Gibran ‫من‬ ‫اكبر‬ ‫صفحاته‬ ‫عدد‬ ‫و‬ 200 SELECT * FROM books WHERE auther = 'Kahlil Gibran' AN D pages_count > 200; - ‫هو‬ ‫مؤلفها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ Kahlil Gibran ‫من‬ ‫اكبر‬ ‫صفحاته‬ ‫عدد‬ ‫أو‬ 200 SELECT * FROM books WHERE auther = 'Kahlil Gibran' OR pages_count > 200; ‫العم‬ ‫أما‬ ‫لي‬ ‫ة‬ not ‫واال‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫لنق‬ ‫فتستخدم‬ ‫بنقيضه‬ ‫تيان‬ SELECT * FROM books WHERE auther NOT LIKE 'Kahlil%' A ND pages_count > 200; - ‫من‬ ‫واحد‬ ‫ضمن‬ ‫اسمها‬ ‫التي‬ ‫الكتب‬ ‫جلب‬ php ‫او‬ MySQL SELECT * FROM books WHERE name IN('MySQL ','php') ‫استخدام‬ ‫يمكننا‬ ‫كما‬ not ‫مع‬ In ‫لالستعالم‬ ‫األ‬ ‫بداخل‬ ‫ما‬ ‫نقيض‬ ‫عن‬ ‫قواس‬ SELECT * FROM books WHERE name NOT IN('MySQL ','php') ‫ال‬ ‫أما‬ ‫عملي‬ ‫ة‬ between ‫لتحديد‬ ‫فتستخدم‬ ‫مجال‬ ‫القيم‬ ‫من‬ ‫الصحيحة‬ SELECT * FROM books WHERE pages_count BETWEEN 100 AND 300; ‫استخدام‬ ‫أيضا‬ ‫تستطيع‬ ‫أنك‬ ‫كما‬ not ‫مع‬ between SELECT * FROM books WHERE pages_count NOT BETWEEN 100 AND 300;
  • 281. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 281 ‫جملة‬ order by ‫أردنا‬ ‫اذا‬ ‫ترتيب‬ ‫الصفحات‬ ‫عدد‬ ‫حسب‬ ‫الكتب‬ ‫ي‬ ‫تنازىل‬ ‫أو‬ ‫تصاعدي‬ ‫بشكل‬ ‫فيجب‬ ‫استخدام‬ ‫علينا‬ order by . SELECT * FROM books ORDER BY pages_count; ‫ال‬ ‫تيب‬ ‫ر‬ ‫ت‬ ً ‫اضيا‬ ‫ر‬ ‫افت‬ ‫أو‬ ‫نصية‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫تشمل‬ ‫الحقول‬ ‫تلك‬ ‫كانت‬‫سواء‬ ‫تصاعدي‬ ( Strings (‫أو‬ ‫صحيحة‬ ‫عددية‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أو‬ ) Integers ‫حالة‬ ‫ي‬ ‫فق‬ ، ) ‫ا‬ ‫ال‬ ‫رقام‬ ‫سيكون‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫الحروف‬ ‫حالة‬ ‫وف‬ ، ‫ر‬ ‫أكت‬ ‫إىل‬ ‫أقل‬ ‫من‬ ‫عىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫سيعتمد‬ ‫فع‬ ، ‫نفسها‬ ‫اللغة‬ ‫حروف‬ ‫داخل‬ ‫ي‬ ‫ر‬ ‫تيت‬ ‫ر‬ ‫الت‬ ‫موقعها‬ ‫اللغة‬ ‫حروف‬ ‫المثال‬ ‫سبيل‬ ‫ىل‬ ‫من‬ ‫ستبدأ‬ ‫ية‬ ‫ر‬ ‫النجلت‬ a ‫ثم‬ b ‫ثم‬ c ‫ب‬ ً‫انتهاء‬ ....... z . ‫ال‬ ‫عمل‬ ‫يمكن‬ ‫األ‬ ‫أي‬ ‫ي‬ ‫تنازىل‬ ‫تيب‬ ‫ر‬ ‫ت‬ ‫األ‬ ‫ثم‬ ‫ر‬ ‫كت‬ ‫قل‬ : ‫ي‬ ‫كالتاىل‬ SELECT * FROM books ORDER BY pages_count DESC ‫الخيار‬ ‫بوضع‬ ‫قم‬ ‫الجملة‬ ‫نهاية‬ ‫ي‬ ‫ف‬ ‫مالحظة‬ : ‫الوضع‬‫هو‬ ‫التصاعدي‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫لجملة‬ ‫بالنسبة‬ order by ‫بوضع‬ ‫وذلك‬ ‫الجملة‬ ‫داخل‬ ‫أيضا‬ ‫تستخدمه‬ ‫أن‬ ‫ويمكنك‬ ASC : ‫ي‬ ‫التاىل‬ ‫بالشكل‬ SELECT * FROM books ORDER BY pages_count ASC; ‫كيف‬ ‫يمكن‬ ‫عدد‬ ‫تحديد‬ ‫السجالت‬ ‫لجملة‬ ‫نتيجة‬ ‫تظهر‬ ‫ي‬ ‫ر‬ ‫الت‬ select , ‫الجملة‬ ‫جملة‬ ‫ي‬ ‫ه‬ ‫ذلك‬ ‫فعل‬ ‫من‬ ‫تمكننا‬ ‫ي‬ ‫ر‬ ‫الت‬ limit ‫تريد‬ ‫الذي‬ ‫الرقم‬ ‫ة‬ ‫ر‬ ‫مبارس‬ ‫ويتبعها‬ ‫النتائج‬ ‫عدد‬ ‫فيه‬ ‫تحديد‬ . SELECT * FROM books ORDER BY pages_count limit 8;
  • 282. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 282 ‫جملة‬ Update Update ‫عىل‬ ‫العامة‬ ‫الصيغة‬ : ‫ي‬ ‫كالتاىل‬ UPDATE table_name SET column_name1 = value1, column_n ame2 = value2, column_name3 = value3 ... [WHERE condi tions]; ‫حيث‬ column_name1 ‫و‬ column_name2 ‫و‬ column_name3 ‫أسماء‬ ‫ي‬ ‫ه‬ ‫األ‬ ‫البيانات‬ ‫تحديث‬ ‫اد‬‫ر‬‫الم‬ ‫عمدة‬ ‫فيها‬ ‫أما‬ ، value1 ‫و‬ value2 ‫و‬ value3 ‫ي‬ ‫ه‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الجديدة‬ ‫القيم‬ ‫تستبدل‬ ، ‫القديمة‬ ‫القيم‬ ً ‫ا‬ ‫ر‬ ‫وأخت‬ where ‫وط‬ ‫ر‬ ‫الش‬ ‫لوضع‬ ‫تمريرها‬ ‫اد‬‫ر‬‫الم‬ ‫بشكل‬ ‫الجدول‬ ‫بيانات‬ ‫نفسد‬ ‫ال‬ ‫ي‬ ‫ك‬‫بعناية‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫وضع‬ ‫يجب‬ ‫حيث‬, . ‫ي‬ ‫عشوان‬ ‫المعرف‬ ‫ذو‬ ‫الكتاب‬ ‫صفحات‬ ‫عدد‬ ‫بتعديل‬ ‫لنقوم‬ ً ‫مثال‬ 120 UPDATE books SET pages_count = 400 WHERE 120;
  • 283. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 283 ‫االجماليات‬ ‫دوال‬ Aggregate ‫توفر‬ MySQL ‫الجدول‬ ‫بيانات‬ ‫تلخيص‬ ‫من‬ ‫مكننا‬ ُ ‫ت‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫الدوال‬ ‫من‬ ‫مجموعة‬ ‫بدون‬ ‫االستعال‬ ‫م‬ ً ‫مثال‬ ‫تستطيع‬ ‫بمعت‬ ، ‫حده‬ ‫عىل‬ ‫حقل‬ ‫كل‬‫عن‬ ‫االستعال‬ ‫م‬ ‫ر‬ ‫أكت‬ ‫عن‬ ‫عمود‬ ‫داخل‬ ‫قيمة‬ ‫أقل‬ ‫و‬ ‫قيمة‬ . ‫عدد‬ ‫دوال‬ ‫االجماليات‬ : ‫ي‬ ‫ه‬ ✓ MIN ✓ MAX ✓ SUM ✓ AVG ✓ COUNT ‫ي‬ ‫تعط‬ )( ‫الدالة‬ min )( ‫والدالة‬ ، ‫ر‬ ‫معي‬ ‫عمود‬ ‫داخل‬ ‫قيمة‬ ‫أقل‬ max ‫ر‬ ‫أكت‬ ‫بإيجاد‬ ‫تقوم‬ )( ‫الدالة‬ ‫أما‬ ، ‫قيمة‬ sum ‫بجمع‬ ‫فتقوم‬ ‫ال‬ )( ‫والدالة‬ ‫قيم‬ avg ‫بإيجاد‬ ‫تقوم‬ ‫ال‬ ‫متوسط‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫و‬ )( ‫الدالة‬ count ‫تقوم‬ ‫ب‬ ‫عد‬ ‫ال‬ ‫قيم‬ ‫الكتب‬ ‫جدول‬ ‫ضمن‬ ‫صفحات‬ ‫عدد‬ ‫اقل‬‫هو‬ ‫ما‬ SELECT MIN(pages_count) FROM `books` ‫ه‬ ‫ما‬ ‫و‬ ‫الكتب‬ ‫جدول‬ ‫ضمن‬ ‫صفحات‬ ‫عدد‬ ‫ر‬ ‫أكت‬ SELECT MAX(pages_count) FROM `books` ‫الصفحات‬ ‫لعدد‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫المتوسط‬‫هو‬ ‫ما‬ SELECT AVG(pages_count) FROM `books`
  • 284. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 284 ‫ي‬ ‫الكىل‬ ‫الكتب‬ ‫عدد‬ ‫هو‬ ‫ما‬ SELECT COUNT(id) FROM `books` ‫من‬ ‫ر‬ ‫اكت‬ ‫صفحاتها‬ ‫عدد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الكتب‬ ‫عدد‬ ‫هو‬ ‫ما‬ 200 SELECT COUNT(id) FROM `books` WHERE pages_count > 200 :‫الحسابية‬ ‫العمليات‬ ‫استخدام‬ o . ‫القسمة‬ ‫عملية‬ ‫إىل‬ ‫ر‬ ‫تشت‬ / ‫العلمة‬ o . ‫ب‬‫الرص‬ ‫عملية‬ ‫إىل‬ ‫ر‬ ‫تشت‬ * ‫العلمة‬ o ‫العلمة‬ - . ‫الطرح‬ ‫عملية‬ ‫إىل‬ ‫ر‬ ‫تشت‬ o ‫العلمة‬ + ‫ر‬ ‫تشت‬ ‫عملية‬ ‫إىل‬ ‫الجمع‬ . SELECT COUNT(id)*2 FROM `books` ‫استخدام‬ ‫يمكن‬ as :‫للعمود‬ ‫بديل‬ ‫اسم‬ ‫العطاء‬ SELECT COUNT(id)*2 AS new_name FROM `books`
  • 285. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 285 ‫جملة‬ group by )( ‫الدالة‬ count ‫مع‬ ‫استخدمت‬ ‫حال‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫اكت‬ ‫معلومات‬ ‫و‬ ‫ات‬ ‫ر‬ ‫مت‬ ‫تعطينا‬ ‫سوف‬ group by ‫جملة‬ group by ‫بعمل‬ ‫تقوم‬ ‫تجميع‬ group ‫متشابهة‬ ‫لقيم‬ ‫ي‬ ‫ف‬ ، ‫الجدول‬ ‫المؤلف‬ ‫اسم‬ ‫حسب‬ ‫ذات‬ ‫الكتب‬ ‫تجميع‬ ‫مثال‬ select auther , COUNT(id) from books group by auther ; ‫جملة‬ ‫استخدام‬ group by ‫جملة‬ ‫مع‬ order by select auther , COUNT(id) AS pages from books GROUP B Y auther ORDER BY 'pages'; ‫جملة‬ ‫استخدام‬ group by ‫جملة‬ ‫مع‬ order by ‫جملة‬ ‫مع‬ having select auther , COUNT(id) AS pages from books GROUP BY auther HAVING pages > 20 ORDER BY 'pages' ;
  • 286. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 286 ‫الحسابية‬ ‫الدوال‬ Mathematical ‫توفر‬ MySQL ‫مرفوع‬ ‫رقم‬ ‫كحساب‬، ‫الحسابية‬ ‫الدوال‬ ‫من‬ ‫مجموعة‬ ‫لألس‬ ‫أو‬ ، ، ‫ات‬ً‫العملي‬ ‫تلك‬ ‫من‬ ‫إلخ‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬‫الجذر‬ ‫كحساب‬ mod(x,y) ‫ي‬ ‫تعط‬ . ‫القسمة‬ ‫ناتج‬ ‫ي‬ ‫ر‬ ‫باف‬ ABS(x) ‫ي‬ ‫تعط‬ ‫قيمة‬ ‫بتمرير‬ ‫قمت‬ ‫لو‬ ‫بمعت‬ ، ‫ما‬ ‫لعدد‬ ‫المطلقة‬ ‫القيمة‬ ‫ر‬ ‫للمتغت‬ x ‫لهذا‬ ‫المطلقة‬ ‫القيمة‬ ‫بحساب‬ ‫الدالة‬ ‫ستقوم‬ ‫سالبة‬ ‫قيمة‬ ‫وكانت‬ ‫القيمة‬ ‫كذلك‬، ‫موجبة‬ ‫قيمة‬ ‫إىل‬ ‫السالبة‬ ‫القيمة‬ ‫تلك‬ ‫تحول‬ ‫طريق‬ ‫عن‬ ‫ر‬ ‫المتغت‬ .‫موجبة‬ ‫قيمة‬ ‫ي‬ ‫ه‬ ‫كما‬‫تظل‬ ‫الموجبة‬ select abs(89); select abs( - 35 ); )( power ‫حساب‬ ‫تريد‬ ً‫مثل‬ ‫أي‬ ‫آخر‬ ‫رقم‬ ُ ‫لس‬ ‫مرفوع‬ ‫رقم‬ ‫بحساب‬ x ‫أس‬ y ، ‫ر‬ ‫المتغت‬ ‫ٍمن‬ ‫كل‬‫مكان‬ ‫وبالطبع‬ x ‫و‬ y : ‫مثال‬ : ‫التالية‬ ‫بالمثلة‬ ‫ذلك‬ ‫ونوضح‬ ، ‫أرقام‬ ‫حساب‬ ‫تريد‬ 2 ‫أس‬ 3 ‫ي‬ ‫ه‬ ‫العملية‬ ‫نتيجة‬ ‫أن‬ ‫المعلوم‬ ‫من‬ ‫ي‬ ‫ر‬ ‫والت‬ 8 : select power(5,4); )( SQRT ‫توجد‬ ‫ر‬ ‫للمتغت‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬‫الجذر‬ x ‫للرقم‬ ‫ي‬ ‫بيغ‬ ‫ر‬ ‫الت‬‫الجذر‬ ‫تريد‬ ً‫فمثل‬ ، 25 : select sqrt(25);
  • 287. ‫البيانات‬ ‫قواعد‬ ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 287 )( Round ‫ر‬ ‫المتغت‬ ‫بتقريب‬ x ‫رقم‬ ‫أقرب‬ ‫إىل‬ ‫ية‬ ‫ر‬ ‫عش‬‫كسور‬‫عىل‬ ‫يحتوى‬ ‫والذي‬ . ‫صحيح‬ )( Floor ‫أ‬ ‫تعيد‬ ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫تساوى‬ ‫أو‬ ‫من‬ ‫أقل‬ ‫تكون‬ ‫صحيحة‬ ‫قيمة‬ ‫ر‬ ‫أكت‬ x . select floor(99.6); 99 )( ceiling ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫تساوى‬ ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫تكون‬ ‫صحيحة‬ ‫قيمة‬ ‫أقل‬ ‫جاع‬ ‫ر‬ ‫باست‬ x . select ceiling(99.6); 100
  • 289. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 289 ‫مقدمة‬ ‫تصميم‬ ‫تم‬ PHP ‫ويب‬ ‫محتوى‬ ‫إلنشاء‬ ‫األصل‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫ديناميك‬ ‫وال‬ ، ‫ت‬ ‫ال‬‫ز‬ ‫تستخدم‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫المجال‬ . ‫تعمل‬ PHP ،‫الرئيسية‬ ‫التشغيل‬ ‫أنظمة‬ ‫جميع‬ ‫عىل‬ Linux ‫و‬ Windows ‫و‬ macOS . ‫خوادم‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ،‫المعروفة‬ ‫الويب‬ ‫خوادم‬ ‫جميع‬ ‫مع‬ ‫استخدامه‬ ‫يمكن‬ Apache ‫و‬ Nginx ‫المثال‬ ‫سبيل‬ ‫عىل‬ ، . ‫تقترص‬ ‫ال‬ PHP ‫اج‬‫ر‬‫إخ‬ ‫عىل‬ HTML ‫فقط‬ ‫أخرى‬ ‫نصية‬ ‫ملفات‬ ‫أو‬ - ‫أي‬ ‫إنشاء‬ ‫يمكن‬ ‫يحتوي‬ .‫مستند‬ ‫تنسيق‬ PHP ‫ملفات‬ ‫لتوليد‬ ‫دعم‬ ‫عىل‬ PDF ‫وصور‬ GIF ‫و‬ JPEG ‫و‬ PNG . ‫الو‬ ‫صفحات‬ ‫إنشاء‬ ‫ي‬ ‫الديناميك‬ ‫المحتوى‬ ‫ذات‬ ‫يب‬ ‫المحتو‬ ‫أي‬ ‫ى‬ ‫ي‬ ‫ف‬ ‫المخزن‬ ‫قاعدة‬ .‫للغاية‬ ً ‫بسيطا‬ ‫ا‬ً ‫أمر‬ ‫البيانات‬ ‫تدعم‬ ‫حيث‬ PHP ‫جميع‬ ‫البيانات‬ ‫قواعد‬ ‫الرئيسية‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫ذلك‬ MySQL ‫و‬ PostgreSQL ‫و‬ Oracle ‫و‬ MS-SQL ‫و‬ ‫ها‬ ‫ر‬ ‫غت‬
  • 290. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 290 ‫مع‬ ‫ابدأ‬ PHP PHP ‫ا‬ ‫عىل‬ ‫تعمل‬ ‫التشغيل‬ ‫أنظمة‬ ‫من‬ ‫لعديد‬ ‫لمعرفة‬ ‫التوثيق‬ ‫اىل‬ ‫الرجوع‬ ‫يمكن‬ ‫و‬ ‫جهازك‬ ‫عىل‬ ‫تنصيب‬ ‫كيفية‬ ‫التشغيل‬ ‫نظام‬ ‫عىل‬ ‫الدبلوم‬ ‫هذه‬ ‫خالل‬ ‫بالعمل‬ ‫سنقوم‬ Windows . ‫مع‬ ‫للعمل‬ ‫المستخدمة‬ ‫األدوات‬ ‫ر‬ ‫اكت‬ ‫من‬ PHP ‫هو‬ XAMPP ‫لك‬ ‫تتيح‬ ‫األنظمة‬ ‫مختلف‬ ‫عىل‬ ‫يعمل‬ ‫المصدر‬ ‫مفتوحة‬ ‫مجانية‬ ‫برمجية‬ ‫وهو‬ ‫ا‬ ‫من‬ ‫مجموعة‬ ‫مثل‬ ‫لخدمات‬ ‫فر‬ ‫ر‬ ‫ست‬ Apache ‫و‬ ‫البيانات‬ ‫قواعد‬ MySQL ‫ها‬ ‫ر‬ ‫وغت‬ https://www.apachefriends.org/download.html ‫في‬ ‫كود‬ ‫اول‬ PHP ‫صفحات‬ PHP ‫صفحات‬ ‫ي‬ ‫ه‬ HTML ‫أوامر‬ ‫عىل‬ ‫تحتوي‬ PHP ‫خادم‬ ‫يعالج‬ .‫فيها‬ ‫أوام‬ ‫الويب‬ ‫ر‬ PHP .‫المتصفح‬ ‫إىل‬ ‫مخرجاتها‬ ‫ويرسل‬
  • 291. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 291 hello_world.php <!DOCTYPE html> <html> <head> <title>Midmar</title> </head> <body> <?php echo "Hello, world!"; ?> </body> </html> ‫المسار‬ ‫ي‬ ‫ف‬ ‫السابق‬ ‫الملف‬ ‫بتخزين‬ ‫قم‬ C:xampphtdocstesthello_world.php ‫اىل‬ ‫الذهاب‬‫و‬ ‫المتصفح‬ ‫بفتح‬ ‫قم‬ localhost/test/hello_world.php ‫ي‬ ‫ف‬ ‫لك‬ ‫كود‬‫أول‬ ‫هذا‬ ‫وك‬ ‫ر‬ ‫مت‬ php ‫التكوين‬ ‫معلومات‬ ‫صفحة‬
  • 292. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 292 ‫ملف‬ ‫انشأ‬ php ‫فقط‬ ‫ي‬ ‫التاىل‬ ‫الكود‬ ‫فيه‬ ‫وضع‬ <?php phpinfo();?> ‫صفحة‬ ‫ر‬ ‫تنىس‬ HTML ‫حول‬ ‫بالمعلومات‬ ‫مليئة‬ ‫نسخة‬ PHP ‫وتهيئته‬ .‫الحالية‬ ‫اللغة‬ ‫أساسيات‬ ‫لحالة‬ ‫الحساسية‬ ‫األحرف‬ ‫والكلمات‬ ‫كيبات‬ ‫ر‬ ‫الت‬ ‫وكذلك‬ ،‫المستخدم‬ ‫قبل‬ ‫من‬ ‫المعرفة‬ ‫والدوال‬ ‫الفئات‬ ‫أسماء‬ :‫مثل‬ ‫المضمنة‬ ‫الرئيسية‬ class ،while ،echo .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ر‬ ‫غت‬ ،‫إلخ‬ ، ‫أن‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫فإن‬ ،‫أخرى‬ ‫ناحية‬ ‫من‬
  • 293. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 293 $user ‫و‬ $uSer ‫و‬ $USER .‫مختلفة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫ثالثة‬ ‫ي‬ ‫ه‬ ‫الجمل‬ Statements ‫كود‬‫من‬ ‫مجموعة‬ ‫عن‬ ‫عبارة‬ ‫الجملة‬ PHP ‫يقوم‬ ‫بأمر‬ ‫مثل‬ ‫بسيطة‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ .‫ما‬ ‫حلقة‬ :‫مثل‬ ‫معقدة‬ ‫أو‬ ‫ر‬ ‫متغت‬ ‫تخصيص‬ ‫ارية‬‫ر‬‫تك‬ . ‫تستخدم‬ PHP ‫الجمل‬ ‫تحتاج‬ ‫ال‬ .‫البسيطة‬ ‫الجمل‬ ‫ر‬ ‫بي‬ ‫للفصل‬ ‫المنقوطة‬ ‫الفاصلة‬ ‫ا‬ ‫األقواس‬ ‫تستخدم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫كبة‬ ‫المر‬ ‫مثل‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫كتلة‬ ‫ر‬ ‫لتميت‬ ‫لمعكوفة‬ ‫ط‬ ‫ر‬ ‫رس‬ .‫إغالق‬ ‫قوس‬ ‫بعد‬ ‫منقوطة‬ ‫فاصلة‬ ‫إىل‬ ،‫طية‬ ‫ر‬ ‫رس‬ ‫حلقة‬‫أو‬
  • 294. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 294 ‫األسطر‬ ‫وفواصل‬ ‫البيضاء‬ ‫المسافة‬ ‫ي‬ ‫ف‬ ‫البيضاء‬ ‫المسافات‬ ‫تهم‬ ‫ال‬ ،‫عام‬ ‫بشكل‬ ‫كود‬ PHP ‫عدد‬ ‫أي‬ ‫ر‬ ‫عت‬ ‫جمل‬ ‫ر‬ ‫نش‬ ‫يمكنك‬ . ‫م‬ ‫الجمل‬ ‫من‬ ‫مجموعة‬ ‫تجميع‬ ‫أو‬ ،‫األسطر‬ ‫من‬ ‫ع‬ .‫واحد‬ ‫سطر‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ‫التعليقات‬ ،‫بك‬ ‫الخاصة‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫أوا‬‫ر‬‫ق‬ ‫الذين‬ ‫لألشخاص‬ ‫معلومات‬ ‫التعليقات‬ ‫ي‬ ‫تعط‬ ‫بواسطة‬‫تجاهلها‬ ‫يتم‬ ‫ولكن‬ PHP ‫الشخص‬ ‫أنك‬ ‫تعتقد‬ ‫كنت‬‫إذا‬ ‫ر‬ ‫حت‬ .‫التنفيذ‬ ‫وقت‬ ‫ي‬ ‫ف‬ ‫عىل‬ ‫كودك‬‫أ‬‫ر‬‫سيق‬ ‫الذي‬ ‫الوحيد‬ ‫فمن‬ ،‫اإلطالق‬ ‫كودك‬ ‫ي‬ ‫ف‬ ‫التعليقات‬ ‫ر‬ ‫تضمي‬ ‫الجيد‬ , ‫يب‬ ‫أن‬ ‫يمكن‬ ‫لو‬ ‫كما‬‫بسهولة‬ ‫شهور‬ ‫منذ‬ ‫كتبته‬‫الذي‬ ‫الكود‬‫دو‬ .‫غريب‬ ‫شخص‬ ‫كتبه‬ ‫توفر‬ PHP ‫اللغات‬ ‫من‬ ‫مستعارة‬ ‫وكلها‬ ، ‫التعليقات‬ ‫ر‬ ‫لتضمي‬ ‫طرق‬ ‫عدة‬ .Unix shell ‫و‬ C++ ‫و‬ C ++ ‫تعليقات‬ C ‫تصادف‬ ‫عندما‬ PHP // ‫ر‬ ‫مائلتي‬ ‫ر‬ ‫يحتي‬ ‫ر‬ ‫رس‬ ‫من‬ ً ‫بدءا‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫فإن‬ ،‫كود‬ ‫ال‬ ‫داخل‬ ‫طتان‬ ‫ر‬ ‫الش‬ . ً ‫ا‬ ً ‫تعليق‬ ‫ر‬ ‫يعتت‬ ، ‫السطر‬ ‫نهاية‬ ‫إىل‬ ‫المائلة‬ //////////////////////// // this is C++ comment //////////////////////// $x = 10; if($x > 5) { }
  • 295. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 295 ‫تعليقات‬ C ++ ‫بنمط‬ ‫التعليقات‬ ‫أن‬ ‫ر‬ ‫حي‬ ‫ي‬ ‫ف‬ C ‫مالحظات‬ ‫لعمل‬ ‫مفيدة‬ , ‫تدعم‬ PHP ‫تعليقات‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫لغة‬ ‫من‬ ‫كيبها‬ ‫تر‬ ‫ي‬ ‫ر‬ ‫يأن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الكتلة‬ C ‫تصادف‬ ‫عندما‬ . PHP ‫متبوعة‬ ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ /* ‫النجمة‬ ‫بعالمة‬ ‫متبوعة‬ ‫النجمة‬ ‫عالمة‬ ‫يصادف‬ ‫ر‬ ‫حت‬ ،‫ذلك‬ ‫بعد‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫فإن‬ ، ‫النوع‬ ‫هذا‬ . ً ‫ا‬ ً ‫تعليق‬ ‫ر‬ ‫يعتت‬ ، */‫مائلة‬ ‫طة‬ ‫ر‬ ‫بش‬ ‫التعليقات‬ ‫من‬ ‫سطور‬ ‫إىل‬ ‫يمتد‬ ‫أن‬ ‫يمكن‬ .‫متعددة‬ :‫تريد‬ ‫كما‬‫للتعليقات‬ ‫بادئة‬ ‫مسافة‬ ‫وضع‬ ‫يمكنك‬ /* this is multi line comments this is C comment */ $x = 10; $y = 'hello'; ‫النمط‬ ‫عىل‬ ‫التعليقات‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ C .‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫أقسام‬ ‫لتعطيل‬ ‫مفيدة‬
  • 296. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 296 ‫ال‬ ‫معرفات‬ ‫ي‬ ‫ف‬ .‫اسم‬ ‫مجرد‬ ‫هو‬ ‫المعرف‬ PHP ‫والدوال‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫لتسمية‬ ‫المعرفات‬ ‫تخدم‬ ُ ‫س‬ ُ ‫ت‬ ، ‫حرف‬ ّ ‫ف‬ّ ‫للمعر‬ ‫األول‬ ‫الحرف‬ ‫يكون‬ ‫أن‬ ‫يجب‬ .‫والفئات‬ ‫والثوابت‬ ASCII ‫ة‬ ‫ر‬ ‫كبت‬‫أحرف‬ ،‫األول‬ ‫الحرف‬ ‫بعد‬ ‫السفلية‬ ‫طة‬ ‫ر‬ ‫الش‬ ‫حرف‬‫أو‬ ،‫ة‬ ‫ر‬ ‫صغت‬‫أو‬ ‫نستخدم‬ ‫ان‬ ‫يمكن‬ ‫األحرف‬ ‫من‬ ‫واألرقام‬ 2 ‫إىل‬ 9 . ‫المتغيرات‬ ‫أسماء‬ ً ‫ا‬ ً‫دائم‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫تبدأ‬ ‫فيما‬ .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫وتكون‬ $ ‫الدوالر‬ ‫بعالمة‬ :‫الصالحة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫بعض‬ ‫ي‬ ‫يىل‬ $user $user_name $A $a $_a ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ ‫الخاطئة‬ : $user name $8user ‫الدوال‬ ‫أسماء‬ ‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ليست‬ ‫الدوال‬ ‫أسماء‬
  • 297. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 297 ‫الفئات‬ ‫أسماء‬ CLASS ‫ات‬ ّ ‫ف‬ّ ‫لمعر‬ ‫القياسية‬ ‫القواعد‬ ‫الفئات‬ ‫أسماء‬ ‫تتبع‬ PHP ‫لحالة‬ ‫حساسة‬ ‫ليست‬ ‫أنها‬ ‫كما‬ .‫األحرف‬ Constants ‫الثوابت‬ ، ‫العددية‬ ‫القيم‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ ‫وسلسلة‬ ،‫ي‬ ‫ر‬ ‫وعش‬، ‫صحيح‬ ‫وعدد‬ ،‫منطقية‬ ، ‫ر‬ ‫التعيي‬ ‫بمجرد‬ .‫ثوابت‬ ‫والمصفوفات‬ ‫تعيينها‬ ‫ويتم‬ .‫الثابت‬ ‫قيمة‬ ‫ر‬ ‫تتغت‬ ‫أن‬ ‫يمكن‬ ‫ال‬ ‫دالة‬ ‫باستخدام‬ define() define('SITENAME', "MIDMAR"); echo SITENAME; ‫الرئيسية‬ ‫الكلمات‬ ‫الرئيسية‬ ‫الكلمة‬ keyword ‫المحجوزة‬ ‫الكلمة‬ ‫أو‬ reserved word ‫كلمة‬ ‫ي‬ ‫ه‬ ‫األساسية‬ ‫لدوالها‬ ‫اللغة‬ ‫تخصصها‬ - ‫اسم‬ ‫نفس‬ ‫ثابت‬ ‫أو‬ ‫فئة‬ ‫أو‬ ‫دالة‬ ‫إعطاء‬ ‫يمكنك‬ ‫ال‬ ‫الجدول‬ ‫يشد‬ .‫رئيسية‬ ‫كلمة‬ ‫ي‬ ‫التاىل‬ ‫ي‬ ‫ف‬ ‫الرئيسية‬ ‫الكلمات‬ PHP ‫بحالة‬ ‫تتأثر‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫والت‬ ، .‫األحرف‬
  • 299. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 299 ‫البيانات‬ ‫أنواع‬ ‫توفر‬ PHP ‫أنواع‬ ‫أربعة‬ .‫البيانات‬ ‫أنواع‬ ‫أو‬ ‫القيم‬ ‫من‬ ‫أنواع‬ ‫ثمانية‬ ‫بسيطة‬ ( ‫قيمة‬ ‫ذات‬ ‫واحدة‬ ) ‫من‬ ‫نوعان‬ ‫هناك‬ .‫والمنطقية‬ ،‫والسالسل‬ ،‫ية‬ ‫ر‬ ‫عش‬ ‫وأرقام‬ ،‫الصحيحة‬ ‫األعداد‬ : :‫خاصان‬ ‫نوعان‬ ‫هما‬ ‫المتبقيان‬ ‫النوعان‬ .‫والكائنات‬ ‫المصفوفات‬ :‫كبة‬ ‫المر‬ ‫أنواع‬ resource ‫و‬ NULL . ‫اال‬ ‫عد‬ ‫ا‬ ‫د‬ ‫ال‬ ‫صحيح‬ ‫ة‬ ‫مثل‬ ‫الصحيحة‬ ‫األعداد‬ 1 ‫و‬ 5 ‫و‬ 22 . ‫يمكن‬ ‫الدالة‬ ‫استخدم‬ is_int() ‫االسم‬‫أو‬ ‫المستعار‬ is_integer() ‫بها‬ ‫الخاص‬ ً ‫ا‬ ً ‫عدد‬ ‫القيمة‬ ‫إذاكانت‬ ‫ما‬ ‫الختبار‬ : ً ‫ا‬ ً ‫صحيح‬ if (is_int($x)) { // $x is an integer } ‫العشرية‬ ‫األرقام‬ "‫"الحقيقية‬ ‫باألرقام‬ ً ‫ا‬ً‫غالب‬ ‫إليها‬ ‫يشار‬ ‫العائمة‬ ‫الفاصلة‬ ‫أرقام‬ ‫تمثل‬ ‫مثل‬ 3.14 ‫و‬ 9.2 ‫يمكن‬ ‫الدالة‬ ‫استخدم‬ is_float() ‫المستعار‬ ‫االسم‬‫أو‬ is_real() ‫الختبار‬ ‫بها‬ ‫الخاص‬ :‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ ‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ if (is_float($x)) { // $x is a floating-point number }
  • 300. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 300 ‫ال‬ ‫سالسل‬ ‫النصية‬ ‫تتضمن‬ ،‫الويب‬ ‫تطبيقات‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ً ‫جد‬ ‫شائعة‬ ‫السالسل‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ PHP ‫عىل‬ ً ‫ا‬ ً‫دعم‬ ‫من‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ‫السلسلة‬ .‫ومعالجتها‬ ‫السالسل‬ ‫إلنشاء‬ ‫ي‬ ‫األساش‬ ‫المستوى‬ ‫اقتباس‬ ‫بعالمات‬ ‫للسلسلة‬ ‫الحرفية‬ ‫القيم‬ ‫تحديد‬ ‫يتم‬ . ‫ي‬ ‫عشوان‬ ‫طول‬ ‫ذات‬ ‫األحرف‬ :‫مزدوجة‬ ‫أو‬ ‫مفردة‬ 'big dog' "fat hog" ‫من‬ ‫الهروب‬ ‫عمليات‬ ‫من‬ ‫متنوعة‬ ‫مجموعة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المزدوجة‬ ‫االقتباس‬ ‫عالمات‬ ‫تدعم‬ . ‫الجدول‬ ‫ي‬ ‫ف‬ ‫موضح‬ ‫هو‬ ‫كما‬،‫السلسلة‬ Escape sequence Character represented " ‫مزدوجة‬ ‫تنصيص‬ ‫عالمة‬ n ‫جديد‬ ‫سطر‬ r Carriage return t ‫جدول‬ ‫مسافة‬ Backslash $ ‫الدوالر‬ ‫عالمة‬ { Left brace } Right brace [ Left bracket ] Right bracket
  • 301. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 301 ‫عىل‬ ‫مفردة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سلسلة‬ ‫تتعرف‬ ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫عىل‬ ‫للحصول‬ '‫و‬ ‫عكسية‬ :‫مفرد‬ ‫اقتباس‬ ‫عىل‬ ‫للحصول‬ == ‫المقارنة‬ ‫عامل‬ ‫استخدم‬ ، ‫ر‬ ‫متساويتي‬ ‫سلسلتان‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if ($a == $b) { echo "a and b are equal"; } ‫الدالة‬ ‫استخدم‬ is_string() ‫كانت‬‫إذا‬ ‫ما‬‫الختبار‬ :‫ال‬ ‫أم‬ ‫سلسلة‬ ‫القيمة‬ if (is_string($x)) { // $x is a string } ‫منطقية‬ ‫قيمة‬ ّ ‫ف‬ّ ‫تعر‬ PHP ‫أنها‬ ‫عىل‬ ‫القيم‬ ‫بعض‬ true ‫اآلخر‬ ‫والبعض‬ false ‫والخطأ‬ ‫الصدق‬ . :‫مثل‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫كود‬‫ال‬ ‫نتيجة‬ ‫يحددان‬ if ($alive) { ... } ‫ي‬ ‫ف‬ PHP ‫أنها‬ ‫عىل‬ ‫التالية‬ ‫القيم‬ ‫جميع‬ ‫تقييم‬ ‫يتم‬ ، false : • ‫الرئيسية‬ ‫الكلمة‬ false • ‫الصحيح‬ ‫العدد‬ 2 • ‫العائمة‬ ‫النقطة‬ ‫قيمة‬ 2 . 2 • ‫الفارغة‬ ‫السلسلة‬ "‫والسلسلة‬ ("") 2 " • ‫صفرية‬ ‫بعناص‬ ‫مصفوفة‬ • ‫القيمة‬ NULL
  • 302. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 302 ‫توفر‬ PHP ‫رئيسية‬ ‫كلمات‬ true ‫و‬ false :‫للتوضيح‬ $x = 5; // $x has a true value $x = true; // clearer way to write it $y = ""; // $y has a false value $y = false; // clearer way to write it ‫الدالة‬ ‫استخدم‬ is_bool() :‫منطقية‬ ‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if (is_bool($x)) { // $x is a Boolean } ‫المصفوفا‬ ‫ت‬ ‫رقم‬ ‫خالل‬ ‫من‬ ‫تحديدها‬ ‫يمكنك‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫القيم‬ ‫من‬ ‫مجموعة‬ ‫عىل‬ ‫المصفوفة‬ ‫تحتوي‬ ‫األول‬ ‫الموضع‬ ‫هو‬ ‫الصفر‬ ‫كون‬‫مع‬ ، ‫الموضع‬ ‫أو‬ ‫وضع‬ ‫يمكن‬ ، ‫تعريفية‬ ‫أسماء‬ ” ‫ي‬ ‫ابط‬ ‫ر‬ ‫الت‬ ‫الفهرس‬ ‫تسىم‬ associative index :“ $person[0] = "Anas"; $person[1] = "Ahmad"; $person[2] = "Sami"; $creator['js'] = "Anas"; $creator['php'] = "Ahmad"; $creator['mysql'] = "Sami"; ‫باستخدا‬ ‫مصفوفة‬ ‫بناء‬ ‫يمكن‬ ‫م‬ array() : $person = array("Anas", "Midmar", "Sami");
  • 303. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 303 . Objects ‫يدعم‬ PHP ‫الشيئية‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫ا‬ ً ‫أيض‬ OOP . ‫يعزز‬ OOP ‫النظيف‬ ‫المعياري‬ ‫التصميم‬ ‫اللبنات‬ ‫ي‬ ‫ه‬ ‫الفئات‬ .‫كود‬‫ال‬ ‫استخدام‬ ‫إعادة‬ ‫ي‬ ‫ف‬ ‫ويساعد‬ ‫والصيانة‬ ‫التصحيح‬ ‫يبسط‬ . ‫للكائنات‬ ‫الموجه‬ ‫للتصميم‬ ‫األساسية‬ class Person { public $name = ''; function name ($newname = NULL) { if (!is_null($newname)) { $this->name = $newname; } return $this->name; } } ‫الرئيسية‬ ‫الكلمة‬ ‫باستخدام‬‫منها‬ ‫الكائنات‬ ‫من‬‫عدد‬ ‫أي‬ ‫إنشاء‬ ‫يمكن‬ ،‫فئة‬ ‫تحديد‬ ‫بمجرد‬ new ‫باستخدام‬ ‫وطرقه‬ ‫الكائن‬ ‫خصائص‬ ‫إىل‬ ‫الوصول‬ ‫ويمكن‬ ، - :> $ed = new Person; $ed->name('Anas'); echo "Hello, {$ed- >name}
  • 304. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 304 ‫الدالة‬ ‫استخدم‬ is_object() : ً ‫ا‬ ً ‫كائن‬‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if (is_object($x)) { // $x is an object } ‫ال‬ ‫أو‬ ‫مصادر‬ ‫ال‬ ‫موارد‬ ‫سبيل‬ ‫عىل‬ . ‫ي‬ ‫ر‬ ‫الخارج‬ ‫العالم‬ ‫مع‬ ‫للتعامل‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫الوحدات‬ ‫من‬ ‫العديد‬‫توفر‬ ‫بقاعدة‬ ‫لالتصال‬ ‫دالة‬ ‫عىل‬ ‫األقل‬ ‫عىل‬ ‫بيانات‬ ‫قاعدة‬ ‫ملحق‬ ‫كل‬ ‫يحتوي‬ ،‫المثال‬ ‫بقاعدة‬ ‫االتصال‬ ‫إلغالق‬ ‫ووظيفة‬ ،‫البيانات‬ ‫قاعدة‬ ‫عن‬ ‫لالستعالم‬ ‫ووظيفة‬ ،‫البيانات‬ ‫اتصاال‬ ‫فتح‬ ‫إلمكانية‬ ً ‫ا‬ً ‫نظر‬ .‫البيانات‬ ‫تمنحك‬ ،‫واحد‬ ‫وقت‬ ‫ي‬ ‫ف‬ ‫متعددة‬ ‫بيانات‬ ‫قاعدة‬ ‫ت‬ ‫استدعاء‬ ‫عند‬ ‫الفريد‬ ‫االتصال‬ ‫هذا‬ ‫تحديد‬ ‫خالله‬ ‫من‬ ‫يمكن‬ ً ‫ا‬ ً ‫شيئ‬ ‫االتصال‬ ‫دالة‬ ‫مورد‬ :‫الدوال‬ ‫وإغالق‬ ‫االستعالم‬ resource ‫مقبض‬ ‫أو‬ handle . ‫بحث‬ ‫جدول‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫رقىم‬ ‫فهرس‬‫هو‬ ‫معرف‬ ‫كل‬.‫فريد‬ ‫معرف‬ ‫نشط‬ ‫مورد‬ ‫لكل‬ PHP ‫ي‬ ‫داخىل‬ ‫حو‬ ‫معلومات‬ ‫عىل‬ ‫يحتوي‬ ‫تحتفظ‬ .‫النشطة‬ ‫الموارد‬ ‫جميع‬ ‫ل‬ PHP ‫حول‬ ‫بمعلومات‬ ‫جميع‬ ‫ي‬ ‫ف‬ ‫المورد‬ ‫استخدامات‬ ‫أو‬ ‫اجع‬‫ر‬‫الم‬ ‫عدد‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ،‫الجدول‬ ‫هذا‬ ‫ي‬ ‫ف‬ ‫مورد‬ ‫كل‬ ‫الذي‬ ‫الملحق‬ ‫استدعاء‬ ‫يتم‬ ،‫مورد‬ ‫لقيمة‬ ‫ر‬ ‫األخت‬ ‫المرجع‬ ‫ي‬ ‫يختق‬ ‫عندما‬ .‫الكود‬ ‫أنحاء‬ ‫ل‬ ‫اتصال‬ ‫أي‬ ‫إغالق‬ ‫أو‬ ‫ذاكرة‬ ‫أي‬ ‫تحرير‬ ‫مثل‬ ‫مهام‬ ‫ألداء‬ ‫المورد‬ ‫أنشأ‬ :‫المورد‬ ‫هذا‬ ً ‫ا‬ً‫أسلوب‬ ‫ر‬ ‫تت‬ ُ‫ع‬ُ‫وي‬ ،‫إغالق‬ ‫دالة‬‫أو‬ ‫محدد‬ ‫تشغيل‬ ‫إيقاف‬ ‫اإلضافات‬ ‫معظم‬‫توفر‬ ،‫ذلك‬ ‫ومع‬ .‫الحاجة‬ ‫عند‬ ‫ح‬ ‫ي‬‫ص‬ ‫بشكل‬ ‫الدالة‬ ‫هذه‬ ‫الستدعاء‬ ً ‫ا‬ ً ‫جيد‬ ‫الدالة‬ ‫استخدم‬ is_resource() : ً ‫ا‬ ً ‫مورد‬ ‫القيمة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫الختبار‬ if (is_resource($x)) { // $x is a resource }
  • 305. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 305 ‫االسترجاع‬ Callbacks Callbacks :‫مثل‬ ،‫الدوال‬ ‫بعض‬ ‫بواسطة‬ ‫مستخدمة‬ ‫كائن‬‫طرق‬ ‫أو‬ ‫دوال‬ ‫ي‬ ‫ه‬ call_user_func() . $callback = function() { echo "callback achieved"; }; call_user_func($callback); NULL ‫البيانات‬ ‫لنوع‬ ‫فقط‬ ‫واحدة‬ ‫قيمة‬ ‫هناك‬ NULL ‫الكلمة‬ ‫خالل‬ ‫من‬ ‫القيمة‬ ‫هذه‬ ‫تتوفر‬ . ‫األساسية‬ NULL ‫القيمة‬ ‫تمثل‬ .‫األحرف‬ ‫لحالة‬ ‫حساسة‬ ‫ر‬ ‫غت‬ NULL ‫له‬ ‫ليس‬ ً ‫ا‬ً ‫ر‬ ‫متغت‬ ‫قيمة‬ $aleph = Null; // same $aleph = NULL; // same ‫الدالة‬ ‫استخدم‬ is_null() ‫فارغة‬ ‫القيمة‬ ‫كانت‬‫إذا‬‫ما‬‫الختبار‬ - ،‫المثال‬ ‫سبيل‬ ‫عىل‬ :‫ال‬ ‫أم‬ ‫قيمة‬ ‫ر‬ ‫للمتغت‬ ‫كان‬‫إذا‬ ‫ما‬ ‫لمعرفة‬ if (is_null($x)) { // $x is NULL }
  • 307. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 307 ‫ات‬ ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ PHP ‫مسبوقة‬ ‫معرفات‬ ‫ي‬ ‫ه‬ :‫فمثال‬ .$‫الدوالر‬ ‫بعالمة‬ $name $User $_items $MAXIMUM_IMPACT ‫نوع‬ ‫من‬ ‫بأخرى‬ ‫ر‬ ‫متغت‬ ‫قيمة‬ ‫استبدال‬ ‫يمكنك‬ .‫نوع‬ ‫أي‬ ‫من‬ ‫قيمة‬ ‫ر‬ ‫المتغت‬ ‫يحمل‬ ‫قد‬ :‫مختلف‬ $what = "Fred"; $what = 35; $what = array("Fred", 35, "Wilma"); ‫القيمة‬ ‫مثل‬ ‫يترصف‬ ‫قيمته‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ‫لم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ NULL : if ($uninitializedVariable === NULL) { echo "Yes!"; }
  • 308. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 308 Variable Variables ‫المتغيرة‬ ‫المتغيرات‬ ‫طريق‬ ‫عن‬ ‫آخر‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ف‬ ‫اسمه‬ ‫تخزين‬ ‫تم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫إىل‬ ‫اإلشارة‬ ‫يمكنك‬ :‫فمثال‬ .$ ‫إضافية‬ ‫دوالر‬ ‫بعالمة‬ ‫ر‬ ‫المتغت‬ ‫مرجع‬ ‫تقديم‬ $foo = "bar"; $$foo = "baz"; ‫ر‬ ‫المتغت‬ ،‫الثانية‬ ‫الجملة‬ ‫تنفيذ‬ ‫بعد‬ $bar "‫القيمة‬ ‫له‬ baz ." ‫المتغير‬ ‫نطاق‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫اء‬‫ز‬‫األج‬ ‫تلك‬ ‫يحدد‬ ، ‫ر‬ ‫المتغت‬ ‫إعالن‬ ‫موقع‬ ‫فيه‬ ‫يتحكم‬ ‫الذي‬ ، ‫ر‬ ‫المتغت‬ ‫نطاق‬ .‫إليه‬ ‫الوصول‬ ‫يمكنه‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغي‬ ‫نطاقات‬ ‫من‬ ‫أنواع‬ ‫أربعة‬ ‫هناك‬ PHP : • ‫ي‬ ‫المحىل‬ local • ‫ي‬ ‫والعالىم‬ global • ‫والثابت‬ static • ‫و‬ ‫وسطاء‬ ‫الدوال‬ function . ‫ي‬ ‫المحىل‬ ‫النطاق‬ ‫الدالة‬ ‫تلك‬ ‫ي‬ ‫ف‬ ‫للكود‬ ‫فقط‬ ‫ي‬ ‫مرن‬ ‫أنه‬ ‫أي‬ .‫الدالة‬ ‫لتلك‬ ‫ي‬ ‫محىل‬ ‫دالة‬ ‫ي‬ ‫ف‬ ‫المعلن‬ ‫ر‬ ‫المتغت‬ ‫الدوال‬ ‫تعريفات‬ ‫باستثناء‬ ‫ال‬ ‫المتداخلة‬ ‫إىل‬ ‫باإلضافة‬ .‫الدالة‬ ‫خارج‬ ‫إليه‬ ‫الوصول‬ ‫يمكن‬ ‫تسىم‬ ‫دالة‬ ‫خارج‬ ‫المحددة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الوصول‬ ‫يمكن‬ ‫ال‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ،‫ذلك‬ ‫الدالة‬ ‫داخل‬ ‫العامة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫تحديث‬ ‫عىل‬ ‫تعمل‬ ‫دالة‬ ‫إليك‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ . :‫عام‬ ‫ر‬ ‫متغت‬ ‫من‬ ً ‫بدال‬ ‫ي‬ ‫محىل‬ ‫ر‬ ‫متغت‬
  • 309. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 309 function updateCounter() { $counter++; } $counter = 10; updateCounter(); echo $counter; //10 $counter ‫عىل‬ ‫الدالة‬ ‫تعمل‬ .‫ذلك‬ ‫ر‬ ‫غت‬ ‫نقل‬ ‫لم‬ ‫ألننا‬ ‫الدالة‬ ‫لهذه‬ ‫ي‬ ‫محىل‬ ‫الدالة‬ ‫داخل‬ ‫ر‬ ‫متغت‬ ‫زيادة‬ $counter . ‫ي‬ ‫الفرع‬ ‫اء‬‫ر‬‫اإلج‬ ‫انتهاء‬ ‫عند‬ ‫إتالفه‬ ‫يتم‬ ‫والذي‬ ،‫بها‬ ‫الخاص‬ ‫ي‬ ‫ف‬ ،‫األخرى‬ ‫اللغات‬ ‫عكس‬ ‫عىل‬ . ‫ي‬ ‫المحىل‬ ‫النطاق‬ ‫توفر‬ ‫أن‬ ‫يمكن‬ ‫الدوال‬ ‫فقط‬ PHP ‫ال‬ ‫عن‬ ‫عبارة‬ ‫نطاقه‬ ‫يكون‬ ‫ر‬ ‫متغت‬ ‫إنشاء‬ ‫يمكنك‬ ‫من‬ ‫آخر‬ ‫نوع‬ ‫أي‬ ‫أو‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫رس‬ ‫ع‬ ‫فر‬ ‫أو‬ ‫حلقة‬ .‫الكتل‬ ‫ي‬ ‫العالىم‬ ‫النطاق‬ )‫(العام‬ ‫جزء‬ ‫أي‬ ‫من‬ ‫إليها‬ ‫الوصول‬ ‫يمكن‬ ‫أنه‬ ‫أي‬ .‫عالمية‬ ‫تكون‬ ‫دالة‬ ‫خارج‬ ‫المعلنة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫لدالة‬ ‫للسماح‬ .‫الدالة‬ ‫داخل‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ ‫متوفرة‬ ‫ر‬ ‫غت‬ ‫ي‬ ‫فه‬ ،‫ذلك‬ ‫ومع‬ .‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫األساسية‬ ‫الكلمة‬ ‫استخدام‬ ‫يمكنك‬ ،‫عام‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫بالوصول‬ ‫ما‬ global ‫داخل‬ ‫إ‬ .‫الدالة‬ ‫داخل‬ ‫ر‬ ‫المتغت‬ ‫لتعريف‬ ‫الدالة‬ ‫دالة‬ ‫كتابة‬ ‫إعادة‬ ‫كيفية‬ ‫ليك‬ updateCounter() ‫ر‬ ‫متغت‬ ‫إىل‬ ‫بالوصول‬ ‫لها‬ ‫للسماح‬ $counter :‫العام‬
  • 310. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 310 function updateCounter() { global $counter; $counter++; } $counter = 10; updateCounter(); echo $counter; //11 ‫الثابتة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ( static ) ‫ر‬ ‫المتغت‬ ‫الثابت‬ ( static ) ‫فقط‬ ‫ي‬ ‫مرن‬ ‫ولكنه‬ ‫الدالة‬ ‫استدعاءات‬ ‫ر‬ ‫بي‬ ‫بقيمته‬ ‫يحتفظ‬ ‫األساسية‬ ‫الكلمة‬ ‫باستخدام‬ ‫ثابت‬ ‫ر‬ ‫متغت‬ ‫بتعريف‬ ‫تقوم‬ .‫الدالة‬ ‫تلك‬ ‫داخل‬ static function updateCounter() { static $counter = 0; $counter++; echo "Static counter is now {$counter}<br/>"; } $counter = 10; updateCounter(); updateCounter(); echo "Global counter is {$counter}"; // Static counter is now 1 // Static counter is now 2 // Global counter is 10
  • 311. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 311 ‫وسطاء‬ ‫الدوال‬ : function greet($name) { echo "Hello, {$name}"; } greet("Janet"); // Hello, Janet ‫وسطاء‬ ‫ال‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫دوالها‬ ‫داخل‬ ‫فقط‬ ‫متاحة‬ ‫أنها‬ ‫ي‬ ‫يعت‬ ‫مما‬ ،‫محلية‬ ‫الدالة‬ ‫إىل‬ ‫الوصول‬ ‫يمكن‬ $name . ‫خارج‬ ‫من‬ greet()
  • 312. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 312 ‫الرياضية‬ ‫والعمليات‬ ‫ات‬ ‫ر‬ ‫التعبت‬ ” ‫ر‬ ‫التعبت‬ expression ‫كود‬‫من‬ ‫جزء‬ ‫هو‬ “ PHP .‫قيمة‬ ‫إلنتاج‬ ‫تقييمه‬ ‫يمكن‬ ” ‫العملية‬ ‫تأخذ‬ operator ‫القيم‬ ‫بعض‬ “ ( ‫المعامالت‬ ) ‫سبيل‬ ‫)عىل‬ ً ‫ا‬ ً ‫شيئ‬ ‫ويفعل‬ ( . ً ‫ا‬ ً‫مع‬ ‫يجمعهم‬ ،‫المثال‬ ‫و‬ + ،‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫كرموز‬ ً ‫ا‬ ً ‫أحيان‬ ‫العوامل‬ ‫كتابة‬‫تتم‬ - . ‫الجدول‬ ‫يلخص‬ ‫ي‬ ‫التاىل‬ ‫ي‬ ‫ف‬ ‫التشغيل‬ ‫عوامل‬ PHP ،‫األسبقية‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫العوامل‬ ‫رسد‬ ‫يتم‬ ، "‫المسىم‬ ‫العمود‬ ‫ي‬ ‫يعط‬ .‫األدن‬ ‫إىل‬ ‫األعىل‬ ‫من‬ A ” ‫المشغل‬ ‫ارتباط‬ " operator’s associativity ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫والذي‬ ،“ L ‫إىل‬ ‫اليسار‬ ‫من‬ ‫أو‬ ،( ‫ر‬ ‫اليمي‬ R ‫ر‬ ‫اليمي‬ ‫)من‬ ‫أو‬ ،(‫اليسار‬ ‫إىل‬ N ” ‫ارتباط‬ ‫ر‬ ‫)غت‬ nonassociative .“ P A ‫العامل‬ ‫أو‬ ‫المشغل‬ ‫العملية‬ 24 N clone, new ‫جديد‬ ‫كائن‬‫إنشاء‬ 23 L [ Array subscript
  • 313. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 313 P A ‫العامل‬ ‫أو‬ ‫المشغل‬ ‫العملية‬ 22 R ** ‫األس‬ 21 R ~ Bitwise Not R ++ ‫زيادة‬ R −− ‫نقصان‬ R (int), (bool), (float), (string ), (array), (object), (unset) Cast R @ Inhibit errors 20 N instanceof Type testing 19 R ! ‫ي‬ ‫نق‬ ( ‫ي‬ ‫ر‬ ‫المنطق‬ ) 18 L * ‫ب‬‫الرص‬ L / ‫القسمة‬ L % ‫القسمة‬ ‫ي‬ ‫ر‬ ‫باف‬ 17 L + ‫الجمع‬ 15 N <, <= ‫أو‬ ‫من‬ ‫أقل‬ ،‫من‬ ‫أقل‬ ‫يساوي‬
  • 314. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 314 N >, >= ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ ،‫من‬ ‫ر‬ ‫أكت‬ ‫يساوي‬ 14 N == ‫القيمة‬ ‫ي‬ ‫ف‬ ‫المساواة‬ N !=, <> ‫المساواة‬ ‫عدم‬ N === ‫النوع‬ ‫ي‬ ‫ف‬ ‫المساواة‬ ‫والقيمة‬ N !== ‫النوع‬ ‫اليساوي‬ ‫والقيمة‬ N <=> ً‫بناء‬ ً ‫صحيحا‬ ً ‫عددا‬ ‫جع‬ُ ‫تر‬ ‫عىل‬ : ‫ر‬ ‫معاملي‬ ‫مقارنة‬ 0 ‫ر‬ ‫واليمي‬ ‫اليسار‬ ‫يكون‬ ‫عندما‬ ‫و‬ ، ‫ر‬ ‫متساويي‬ - 1 ‫يكون‬ ‫عندما‬ ‫و‬ ، ‫ر‬ ‫اليمي‬ ‫من‬ ‫أقل‬ ‫اليسار‬ 1 ‫عندما‬ . ‫ر‬ ‫اليمي‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫اليسار‬ ‫يكون‬ 13 L & Bitwise AND 12 L ^ Bitwise XOR
  • 315. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 315 11 L | Bitwise OR 10 L && ‫و‬ ( ‫ي‬ ‫ر‬ ‫المنطق‬ ) 9 L || ‫أو‬ ( ‫ي‬ ‫ر‬ ‫المنطق‬ ) 8 R ?? Null Coalescing Operator 7 L ?: ‫ي‬ ‫ر‬ ‫الثالن‬ ‫العامل‬ ‫ال‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫ش‬ 6 R = Assignment R +=, −=, *=, /=, .=, %=, &=, |=, ^=, ~=, <<=, >>= Assignment with operation ‫المعامل‬ ‫أسبقية‬ ❖ .‫والطرح‬ ‫الجمع‬ ‫من‬ ‫أعىل‬ ‫أسبقية‬ ‫لهما‬ ‫والقسمة‬ ‫ب‬‫الرص‬ ❖ .‫آخر‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫ألي‬ ‫األقواس‬ ‫استخدم‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫األسبقية‬ ‫ترتيب‬ ‫نفس‬ ‫لها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العمليات‬ ‫تقييم‬ : 2 / 2 * 2 ‫الصحيحة‬ ‫النتيجة‬ ‫تكون‬ ،‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ . ‫ر‬ ‫اليمي‬ ‫إىل‬ ‫اليسار‬ ‫من‬ ‫العمليات‬ ‫تقييم‬ ‫يتم‬ ‫ي‬ ‫ه‬ 2 . 2 / (2 * 2) // 0.5 (2 / 2) * 2 // 2
  • 316. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 316 ‫القصر‬ ‫الضمني‬ Implicit Casting ‫معامالتهم‬ ‫بشأن‬ ‫توقعات‬ ‫لديها‬ ‫العمليات‬ ‫من‬ ‫العديد‬ - ‫سبيل‬ ‫عىل‬ ‫تتطلب‬ ،‫المثال‬ ً ‫عادة‬ ‫الثنائية‬ ‫الرياضيات‬ ‫عمليات‬ ‫يمكن‬ .‫النوع‬ ‫نفس‬ ‫من‬ ‫ر‬ ‫المعاملي‬ ‫كال‬ ‫يكون‬ ‫أن‬ ‫ات‬ ‫ر‬ ‫لمتغت‬ PHP ‫والسالسل‬ ‫العائمة‬ ‫الفاصلة‬ ‫وأرقام‬ ‫الصحيحة‬ ‫األعداد‬ ‫تخزين‬ ‫تحول‬ ،‫والمزيد‬ PHP .‫ورة‬‫الرص‬ ‫حسب‬‫آخر‬ ‫إىل‬ ‫نوع‬ ‫من‬ ‫القيم‬ ‫الحسابية‬ ‫العمليات‬ ‫عمليات‬ ‫ي‬ ‫ه‬ ‫الحسابية‬ ‫العمليات‬ ‫تعرفها‬ ‫ي‬ ‫ف‬ . ‫ي‬ ‫اليوم‬ ‫االستخدام‬ )+(:‫الجمع‬ . ‫ر‬ ‫المعاملي‬ ‫مجموع‬ ‫هو‬ ‫الجمع‬ ‫عامل‬ ‫نتيجة‬ ‫الطرح‬ ( - ) : ‫ر‬ ‫المعاملي‬ ‫ر‬ ‫بي‬ ‫الفرق‬‫هو‬ ‫الطرح‬ ‫عامل‬ ‫نتيجة‬ - ‫من‬ ‫مطروح‬ ‫ي‬ ‫الثان‬ ‫المعامل‬ ‫قيمة‬ ‫أي‬ ‫األول‬ - . )*(:‫ب‬‫الرص‬ :‫المثال‬ ‫سبيل‬ ‫عىل‬ . ‫ر‬ ‫المعاملي‬ ‫ب‬‫ص‬ ‫حاصل‬ ‫هو‬ ‫ب‬‫الرص‬ ‫عامل‬ ‫نتيجة‬ 4 * 3 ‫ي‬ ‫ه‬ 12 . )/(:‫القسمة‬ ‫قس‬ ‫حاصل‬ ‫ي‬ ‫ه‬ ‫القسمة‬ ‫عامل‬ ‫نتيجة‬ . ‫ر‬ ‫المعاملي‬ ‫مة‬ )%(:‫القسمة‬ ‫ي‬ ‫ر‬ ‫باف‬ ‫من‬ ‫ر‬ ‫تبق‬ ‫ما‬ ‫ويعيد‬ ‫صحيحة‬ ‫أعداد‬ ‫إىل‬ ‫ر‬ ‫المعاملي‬ ‫كال‬‫المقياس‬ ‫عامل‬ ‫يحول‬ . ‫ي‬ ‫الثان‬ ‫المعامل‬ ‫بواسطة‬ ‫األول‬ ‫المعامل‬ ‫قسمة‬ 10%3 ‫ي‬ ‫ر‬ ‫الباف‬ ‫ي‬ ‫تعط‬ 1 .
  • 317. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 317 ‫ي‬ ‫الحسائ‬ ‫السالب‬ ) – ( ‫ي‬ ‫ف‬ ً ‫ا‬ً‫وب‬‫مرص‬ ‫المعامل‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫السالب‬ ‫عامل‬ ‫يعيد‬ 1 - ‫ر‬ ‫تغيت‬ ‫إىل‬ ‫يؤدي‬ ‫مما‬ ، ‫اشارته‬ )+( ‫ي‬ ‫الحسائ‬ ‫الموجب‬ ‫ي‬ ‫ف‬ ً ‫ا‬ً‫وب‬‫مرص‬ ‫المعامل‬ ‫ي‬ ‫ر‬ ‫الحسان‬ ‫الموجب‬ ‫عامل‬ ‫يعرض‬ 1 ‫أي‬ ‫له‬ ‫ليس‬ ‫والذي‬ ،+ . ‫ر‬ ‫تأثت‬ ‫س‬ ُ ‫األ‬ ( ** ) ‫رفع‬ ‫نتيجة‬ ‫س‬ ُ ‫األ‬ ‫معامل‬ ‫جع‬ُ ‫ير‬ $var1 ‫األس‬ ‫إىل‬ var2 . <?php $var1 = 2; $var2 = 3; echo $var1 ** $var2; // outputs 8 ‫عامل‬ ‫دمج‬ ‫السلسلة‬ ‫عامل‬ ‫يلحق‬ ‫الدمج‬ ‫يتم‬ .‫الناتجة‬ ‫السلسلة‬ ‫ويعيد‬ ‫األيش‬ ‫بالمعامل‬ ‫األيمن‬ ‫المعامل‬ :‫فمثال‬ .‫األمر‬ ‫لزم‬ ‫إذا‬ ،‫سالسل‬ ‫إىل‬ ً ‫أوال‬ ‫المعامالت‬ ‫تحويل‬ $n = 80; $s = 'your mark is ' . $n . ' %.'; // your mark is 80 %.'
  • 318. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 318 ‫التلقائية‬ ‫الزيادة‬ ‫عوامل‬ (++) ‫التلقائي‬ ‫والتناقص‬ (--) ‫ر‬ ‫متغت‬ ‫قيمة‬ ‫تقليل‬ ‫أو‬ ‫زيادة‬ ‫ي‬ ‫ف‬ ً ‫شيوعا‬ ‫ر‬ ‫األكت‬ ‫العمليات‬ ‫إحدى‬ ‫تتمثل‬ ،‫مجة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ .‫واحد‬ ‫بمقدار‬ ‫إذا‬ .‫ات‬ ‫ر‬ ‫التعبت‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التلقان‬ ‫التناقص‬ ‫أو‬ ‫التلقائية‬ ‫الزيادة‬ ‫الستخدام‬ ‫طريقتان‬ ‫هناك‬ ‫للمعامل‬ ‫الجديدة‬ ‫القيمة‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫فإنه‬ ،‫المعامل‬ ‫قبل‬ ‫العامل‬ ‫وضعت‬ ) ‫تناقص‬‫أو‬ ‫زيادة‬ ( . ‫ا‬ ‫وضعت‬ ‫إذا‬ ‫للمعامل‬ ‫األصلية‬ ‫القيمة‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫فإنه‬ ،‫المعامل‬ ‫بعد‬ ‫لعامل‬ ) ‫أو‬ ‫الزيادة‬ ‫قبل‬ ‫اإلنقاص‬ ( . ‫المقارنة‬ ‫عوامل‬ ‫ت‬ ‫إما‬ ً ‫ا‬ ً‫دائم‬ ‫النتيجة‬ ‫تكون‬ .‫المعامالت‬ ‫المقارنة‬ ‫عوامل‬ ‫قارن‬ true ‫المقارنة‬ ‫كانت‬‫إذا‬ ، ‫و‬ ،‫صحيحة‬ false ‫عىل‬ .‫ذلك‬ ‫خالف‬ ‫مالحظ‬ ‫ة‬ ‫سلسلتان‬ ‫لديك‬ ‫كان‬ ‫إذا‬ .‫أرقام‬ ‫كانتا‬‫لو‬ ‫كما‬ ‫ر‬ ‫رقميتي‬ ‫ر‬ ‫سلسلتي‬ ‫مقارنة‬ ‫يتم‬ ‫الدالة‬ ‫فاستخدم‬ ، ً ‫ا‬ ً‫معجم‬ ‫مقارنتها‬ ‫إىل‬ ‫وتحتاج‬ ‫رقمية‬ ‫أحرف‬ ‫من‬ ً ‫ا‬ً‫كلي‬ ‫تتكونان‬ strcmp() . : ‫ي‬ ‫ه‬ ‫المقارنة‬ ‫عوامل‬ ‫المساواة‬ ( == ) : ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ، ‫ر‬ ‫متساويي‬ ‫ر‬ ‫المعاملي‬ ‫كال‬‫كان‬‫إذا‬ true ‫فإنه‬ ،‫وإال‬ ‫ترجع‬ ‫ا‬ false .
  • 319. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 319 )===(:‫التطابق‬ ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫النوع‬ ‫نفس‬ ‫من‬ ‫وكانا‬ ‫ر‬ ‫متساويي‬ ‫ر‬ ‫المعاملي‬ ‫كال‬ ‫كان‬‫إذا‬ true ‫ترجع‬ ‫فإنها‬ ،‫وإال‬ false .. ‫المساواة‬ ‫عدم‬ ( != ‫أو‬ <> ) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫متساوية‬ ‫ر‬ ‫غت‬ ‫المعامالت‬ ‫كانت‬‫إذا‬ true ‫ترجع‬ ‫فإنها‬ ،‫وإال‬ false . ‫متطابق‬ ‫ر‬ ‫غي‬ ) !== ( ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫النوع‬ ‫نفس‬ ‫من‬ ‫تكن‬ ‫لم‬ ‫أو‬ ،‫متساوية‬ ‫ر‬ ‫غت‬ ‫المعامالت‬ ‫كانت‬‫إذا‬ ‫القيمة‬ true ‫يرجع‬ ‫فإنه‬ ‫وإال‬ false . ‫من‬ ‫أكي‬ (>) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ true ،‫وإال‬ ‫يرجع‬ ‫فإنه‬ .false ‫يساوي‬ ‫أو‬ ‫من‬ ‫أكي‬ (>=) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫األيمن‬ ‫المعامل‬ ‫يساوي‬ ‫أو‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ true ‫يرجع‬ ‫فإنه‬، ‫وإال‬ false . ‫من‬ ‫أقل‬ (<) ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫أقل‬ true ،‫وإال‬ ‫يرجع‬ ‫فإنه‬ .false
  • 320. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 320 ‫يساوي‬ ‫أو‬ ‫من‬ ‫أصغر‬ (<=) ‫يرجع‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫له‬ ً ‫ا‬ً‫مساوي‬ ‫أو‬ ‫األيمن‬ ‫المعامل‬ ‫من‬ ‫أقل‬ ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ true ‫فإنه‬ ،‫وإال‬ .false ‫يرجع‬ Spaceship ( <=> ) ‫األيمن‬ ‫ر‬ ‫المعاملي‬ ‫يتساوى‬ ‫عندما‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫العامل‬ ‫هذا‬ ‫فإن‬ ،‫واأليش‬ 0 ‫عندما‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫فإنه‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫أقل‬ ‫األيش‬ ‫المعامل‬ ‫يكون‬ – 1 ‫يكون‬ ‫وعندما‬ ‫يعيد‬ ‫فإنه‬ ،‫األيمن‬ ‫المعامل‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫األيش‬ ‫المعامل‬ 1 . (??) Null coalescing operator ‫األيش‬ ‫المعامل‬ ‫كان‬‫إذا‬ ‫األيمن‬ ‫المعامل‬ ‫بتقييم‬ ‫العامل‬ ‫هذا‬ ‫يقوم‬ NULL ،‫ذلك‬ ‫خالف‬ .‫األيش‬ ‫المعامل‬ ‫إىل‬ ‫تقييمه‬ ‫يتم‬ $var1 = null; $var2 = 1992; echo $var1 ?? $var2 ; //outputs 1992
  • 321. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 321 ‫المنطقية‬ ‫العمليات‬ ‫العوامل‬ ‫تعامل‬ .‫معقدة‬ ‫منطقية‬ ‫ات‬ ‫ر‬ ‫تعبت‬ ‫لبناء‬ ً ‫ا‬ ً ‫طرق‬ ‫المنطقية‬ ‫العوامل‬ ‫توفر‬ .‫منطقية‬ ‫قيمة‬ ‫وتعيد‬ ‫منطقية‬ ‫كقيم‬‫معامالتها‬ ‫المنطقية‬ ‫ي‬ ‫ر‬ ‫المنطق‬ ‫العامل‬ AND (&&, and) ‫عملية‬ ‫نتيجة‬ ‫تكون‬ AND ‫المنطقية‬ true ‫ر‬ ‫المعاملي‬ ‫كال‬ ‫كان‬‫إذا‬ true ‫وإال‬ ‫فهو‬ false ‫األول‬ ‫المعامل‬ ‫قيمة‬ ‫كانت‬‫إذا‬ . false ‫ي‬ ‫ر‬ ‫المنطق‬ ‫العامل‬ ‫فإن‬ ، AND ‫تكون‬ ‫أن‬ ‫يجب‬ ‫الناتجة‬ ‫القيمة‬ ‫أن‬ ‫يعرف‬ false ‫تقييم‬ ‫يتم‬ ‫ال‬ ‫لذلك‬ ،‫ا‬ ً ‫ض‬ً‫أي‬ ‫العملية‬ ‫هذه‬ ‫تسىم‬ . ً ‫ا‬ ً ‫أبد‬ ‫األيمن‬ ‫المعامل‬ ‫بدارة‬ ‫القرص‬ ‫ي‬ ‫ر‬ ‫المنطق‬ ‫العامل‬ XOR (xor) ‫عملية‬ ‫نتيجة‬ ‫تكون‬ XOR ‫المنطقية‬ true ‫ر‬ ‫المعاملي‬ ‫من‬ ‫أي‬ ‫كان‬ ‫إذا‬ true ‫وليس‬ ‫فهو‬ ‫وإال‬ ‫كالهما‬ .false )!( ‫ي‬ ‫ر‬ ‫المنطق‬ ‫ي‬ ‫النق‬ ‫عامل‬ "‫المنطقية‬ ‫القيمة‬ ‫ي‬ ‫ر‬ ‫المنطق‬ ‫ي‬ ‫النق‬ ‫عامل‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ true "‫إىل‬ ‫المعامل‬ ‫تقييم‬ ‫تم‬ ‫إذا‬ " false ‫و‬ ،" false "‫إىل‬ ‫المعامل‬ ‫تقييم‬ ‫تم‬ ‫إذا‬ true ."
  • 322. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 322 Flow-Control Statements ‫التدفق‬ ‫في‬ ‫التحكم‬ ‫جمل‬ ‫يدعم‬ PHP .‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ ‫تدفق‬ ‫ي‬ ‫ف‬ ‫للتحكم‬ ‫التقليدية‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫كيبات‬ ‫تر‬ ‫من‬ ً ‫عددا‬ :‫مثل‬ ،‫طية‬ ‫ر‬ ‫الش‬ ‫الجمل‬ ‫تسمح‬ if/else ‫و‬ switch ‫مختلفة‬ ‫اء‬‫ز‬‫أج‬ ‫بتنفيذ‬ ‫نامج‬ ‫ر‬ ‫للت‬ ، ‫اعت‬ ،‫اإلطالق‬ ‫عىل‬ ‫منها‬ ‫أي‬ ‫تنفيذ‬ ‫عدم‬ ‫أو‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫بعض‬ ‫عىل‬ ً ‫ا‬ ً ‫ماد‬ :‫مثل‬، ‫الحلقات‬ .‫وط‬ ‫ر‬ ‫الش‬ while ‫و‬ for ‫من‬ ‫معينة‬ ‫اء‬‫ز‬‫ألج‬ ‫المتكرر‬ ‫التنفيذ‬ ‫تدعم‬ ، .‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ if ‫جملة‬ if ‫جملة‬ ‫تتحقق‬ if .‫الجملة‬ ‫تقييم‬ ‫يتم‬ ، ً ‫ا‬ ً ‫صحيح‬ ‫ر‬ ‫التعبت‬ ‫كان‬‫وإذا‬ ، ‫ر‬ ‫التعبت‬ ‫مصداقية‬ ‫من‬ ‫جملة‬‫تبدو‬ if :‫مثل‬ if (expression)statement ، ً ‫ا‬ ً ‫خاطئ‬ ‫ر‬ ‫التعبت‬ ‫يكون‬‫عندما‬ ‫لتنفيذه‬ ‫بديلة‬ ‫جملة‬‫لتحديد‬ ‫استخدم‬ else : if(expression) statement else statement
  • 323. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 323 ‫كمثال‬ if ($user_validated) echo "Welcome!"; else echo "Access Forbidden!"; ‫ل‬ ‫عبارة‬ ‫ي‬ ‫ف‬ ‫واحدة‬ ‫جملة‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫ر‬ ‫تضمي‬ if ‫استخدم‬ ، block - ‫الجمل‬ ‫من‬ ‫مجموعة‬ ‫م‬ ‫بأقواس‬ ‫محاطة‬ ‫عك‬ :‫وفة‬ if ($user_validated) { echo "Welcome!"; $greeted = 1; } else { echo "Access Forbidden!"; exit; } ‫توفر‬ PHP ‫كتلة‬‫إرفاق‬ ‫من‬ ً ‫بدال‬ .‫والحلقات‬ ‫ات‬‫ر‬‫االختبا‬ ‫ي‬ ‫ف‬ ‫للكتل‬ ‫أخرى‬ ‫صيغة‬ ‫سطر‬ ‫بإنهاء‬ ‫قم‬ ،‫معقوفة‬ ‫بأقواس‬ ‫الجمل‬ if ‫ر‬ ‫بنقطتي‬ ):( ‫الكتلة‬ ‫إلنهاء‬ ‫واستخدم‬ ( endif ) ، :‫فمثال‬. if ($user_validated): echo "Welcome!"; $greeted = 1; else: echo "Access Forbidden!"; exit; endif;
  • 324. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 324 ‫جملة‬ elseif . if ($good) { print("Dandy!"); } elseif ($error) { print("Oh, no!"); } else { print("I'm ambivalent..."); } ‫ي‬ ‫ر‬ ‫الثالن‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫العامل‬ ‫استخدام‬ ‫يمكن‬ ( ?: ) ‫الخطأ‬ / ‫الصواب‬ ‫ات‬‫ر‬‫اختبا‬ ‫ر‬ ‫لتقصت‬ ً ‫ا‬ ً ‫صحيح‬ ‫ر‬ ‫معي‬ ‫ر‬ ‫متغت‬ ‫كان‬‫إذا‬ ‫ما‬ ‫لمعرفة‬ ‫التحقق‬ ‫مثل‬ ، ً ‫شائعا‬ ً ‫ا‬ ً ‫موقف‬ ‫اتخذ‬ .‫البسيطة‬ ‫جملة‬ ‫مع‬ .‫كذلك‬‫كان‬‫إذا‬ ‫ما‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫وطباعة‬ if/else ‫ي‬ ‫يىل‬ ‫كما‬‫األمر‬‫يبدو‬ ،‫العادية‬ : if($active) { echo "yes"; } else { echo "no"; } : ‫ي‬ ‫يىل‬ ‫كما‬‫األمر‬‫يبدو‬ ، ‫ي‬ ‫ر‬ ‫الثالن‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫العامل‬ ‫مع‬ echo $active ? "yes" : "no"; (expression) ? true_expression : false_expression ‫أنه‬ ‫ي‬ ‫يعت‬ ‫هذا‬ .‫اإلطالق‬ ‫عىل‬ ‫جملة‬ ‫ليس‬ ‫ي‬ ‫ط‬ ‫ر‬ ‫الش‬ ‫العامل‬ ‫أن‬‫هو‬ ‫هنا‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ‫ي‬ ‫ف‬ . ‫ر‬ ‫تعبت‬ ‫ذاته‬ ‫حد‬ ‫ي‬ ‫ف‬ ‫هو‬ ‫الكامل‬ ‫ي‬ ‫ر‬ ‫الثالن‬ ‫ر‬ ‫التعبت‬ ‫ونتيجة‬ ،‫ات‬ ‫ر‬ ‫التعبت‬ ‫ي‬ ‫ف‬ ‫استخدامه‬ ‫يتم‬ ‫جملة‬ ‫تكون‬ ،‫السابق‬ ‫المثال‬ echo ‫ط‬ ‫ر‬ ‫رس‬ ‫داخل‬ if ‫العامل‬ ‫مع‬ ‫استخدامها‬ ‫عند‬ ‫بينما‬ ، ‫ر‬ ‫التعبت‬ ‫تسبق‬ ‫فإنها‬ ، ‫ي‬ ‫ر‬ ‫الثالن‬ .
  • 325. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 325 switch ‫المختلفة‬ ‫ات‬‫ر‬‫الخيا‬ ‫من‬ ‫عدد‬ ‫من‬ ً ‫ا‬ ً ‫واحد‬ ‫واحد‬ ‫ر‬ ‫متغت‬ ‫قيمة‬ ‫تحدد‬ ‫قد‬ ‫جملة‬ ‫ط‬ ُ‫تع‬ switch ‫ال‬ ‫ي‬ ‫ف‬ ‫الحاالت‬ ‫بجميع‬ ‫قيمته‬ ‫ويقارن‬ ً ‫ا‬ً ‫ر‬ ‫تعبت‬ switch ‫تنفيذ‬ ‫يتم‬ ‫رئيسية‬ ‫كلمة‬ ‫أول‬ ‫ر‬ ‫حت‬ ،‫المطابقة‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫الجمل‬ ‫جميع‬ break ‫لم‬ ‫إذا‬ .‫عليها‬ ‫ر‬ ‫تعت‬ ‫القيمة‬‫تحديد‬ ‫وتم‬ ،‫تطابق‬ ‫هناك‬ ‫يكن‬ default ‫ي‬ ‫ر‬ ‫الت‬ ‫الجمل‬ ‫جميع‬‫تنفيذ‬ ‫فسيتم‬ ، ‫األساسية‬ ‫الكلمة‬ ‫تتبع‬ default ‫أول‬ ‫ر‬ ‫حت‬ ، break . switch($name) { case 'anas': // do something break; case 'ahmad': // do something break; case 'sami': // do something break; case 'omer': // do something break; default : // do something break; }
  • 326. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 326 while ‫جملة‬‫هو‬ ‫الحلقة‬ ‫أشكال‬ ‫من‬ ‫شكل‬ ‫أبسط‬ while : ‫مقدار‬ ‫يكون‬ ‫عندما‬ ‫استخدمها‬ ‫مجهول‬ ‫ار‬‫ر‬‫التك‬ ” ‫ر‬ ‫التعبت‬ ‫تقييم‬ ‫تم‬ ‫إذا‬ expression ‫إىل‬ “ true ‫الجملة‬ ‫تنفيذ‬ ‫فسيتم‬ ، ” statement ‫جسم‬ ‫تنفيذ‬ ‫فسيتم‬ ، ً ‫ا‬ ً ‫صحيح‬ ‫ال‬‫ز‬‫ي‬ ‫ال‬ ‫كان‬‫إذا‬ ‫ر‬ ‫التعبت‬ ‫تقييم‬ ‫إعادة‬ ‫ثم‬ “ ‫الحلقة‬ ‫تخرج‬ .‫وهكذا‬ ،‫أخرى‬ ‫مرة‬ ‫الحلقة‬ ‫يتم‬ ‫أي‬ ً ‫ا‬ ً ‫صحيح‬ ‫ر‬ ‫التعبت‬ ‫يكون‬ ‫ال‬ ‫عندما‬ ‫عىل‬ ‫تقييمه‬ false . ‫األعداد‬ ‫تضيف‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫بعض‬ ‫إليك‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫من‬ ‫الصحيحة‬ 1 ‫إىل‬ 10 : $total = 0; $i = 1; while ($i <= 10) { $total += $i; $i++; } ‫ل‬ ‫البديلة‬ ‫الصيغة‬ while :‫البنية‬ ‫هذه‬ ‫لها‬ while (expr): statement; more statements ; endwhile;
  • 327. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 327 :‫كمثال‬ $total = 0; $i = 1; while ($i <= 10): $total += $i; $i++; endwhile; ‫األساسية‬ ‫الكلمة‬ ‫باستخدام‬ ‫األوان‬ ‫قبل‬ ‫حلقة‬ ‫من‬ ‫الخروج‬ ‫يمكنك‬ break . $total = 0; $i = 1; while ($i <= 10) { if ($i == 5) { break; // breaks out of the loop } $total += $i; $i++; } ‫جملة‬ ‫تتخط‬ continue .‫الحلقة‬ ‫لحالة‬ ‫ي‬ ‫التاىل‬‫االختبار‬ ‫إىل‬ ‫تدعم‬ PHP ‫حلقة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ do/while : ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫تأخذ‬ ‫ي‬ ‫ر‬ ‫والت‬ ، do statement while(expression)
  • 328. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 328 ‫حلقة‬ ‫استخدم‬ do/while ‫واحدة‬ ‫مرة‬ ‫الحلقة‬ ‫جسم‬ ‫تنفيذ‬ ‫لضمان‬ ‫األقل‬ ‫عىل‬ - :‫األوىل‬ ‫المرة‬ $total = 0; $i = 1; do { $total += $i++; } while ($i <= 10); ‫جمل‬ ‫استخدام‬ ‫يمكنك‬ break ‫و‬ continue ‫جمل‬ ‫ي‬ ‫ف‬ do / while ‫هو‬ ‫كما‬ ً ‫ا‬ ً‫تمام‬ ‫جملة‬ ‫ي‬ ‫ف‬ ‫الحال‬ while .‫العادية‬ for ‫الجملة‬ for ‫لجملة‬ ‫مشابهة‬ while ” ‫عدادات‬ ‫تضيف‬ ‫أنها‬ ‫إال‬ ، counter initialization ‫حلقة‬ ‫جمل‬ ‫من‬ ‫اءة‬‫ر‬‫الق‬ ‫ي‬ ‫ف‬ ‫وأسهل‬‫أقرص‬ ‫تكون‬ ‫ما‬ ً ‫ا‬ً‫وغالب‬ ، “ .while ‫حلقة‬ ‫إليك‬ while ‫من‬‫تعد‬ ‫ي‬ ‫ر‬ ‫الت‬ 2 ‫إىل‬ 9 :‫رقم‬ ‫كل‬‫وطباعة‬ ، $counter = 0; while ($counter < 10) { echo "Counter is {$counter} <br/>"; $counter++; }
  • 329. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 329 ‫حلقة‬ ‫إليك‬ for :‫المقابلة‬ for ($counter = 0; $counter < 10; $counter++) { echo "Counter is $counter <br/>"; } ‫الجملة‬ ‫بنية‬ for :‫هو‬ for (start; condition; increment) { statement(s); } ” ‫بداية‬ ‫تقييم‬ ‫يتم‬ start ” ‫ر‬ ‫التعبت‬ “ expression ‫جملة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ،‫واحدة‬ ‫مرة‬ “ for . ” ‫ط‬ ‫ر‬ ‫رس‬ ‫اختبار‬ ‫يتم‬، ‫الحلقة‬ ‫خالل‬ ‫مرة‬ ‫كل‬ ‫ي‬ ‫ف‬ condition ‫هذا‬ ‫كان‬ ‫إذا‬ . ‫ر‬ ‫التعبت‬ “ ‫تقييم‬ ‫يتم‬ .‫الحلقة‬ ‫ي‬ ‫تنته‬ ،‫خاطئة‬ ‫كانت‬ ‫إذا‬ ‫الحلقة‬ ‫جسم‬ ‫تنفيذ‬ ‫فسيتم‬ ، ً ‫ا‬ ً ‫صحيح‬ ” ‫زيادة‬ increment .‫الحلقة‬ ‫جسم‬ ‫تشغيل‬ ‫بعد‬ ‫ر‬ ‫التعبت‬ “ ‫لجملة‬ ‫البديلة‬ ‫الصيغة‬ for : ‫ي‬ ‫ه‬ for (expr1; expr2; expr3): statement; ... ; endfor; ‫من‬ ‫األرقام‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫هذا‬ ‫يضيف‬ 1 ‫إىل‬ 10 ‫حلقة‬ ‫باستخدام‬ for : $total = 0; for ($i= 1; $i <= 10; $i++) { $total += $i; }
  • 330. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 330 ‫ي‬ ‫ف‬ .‫المرحلة‬ ‫لهذه‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫أي‬ ‫فعل‬ ‫ي‬ ‫ينبغ‬ ‫ال‬ ‫أنه‬ ‫إىل‬ ‫ر‬ ‫يشت‬ ‫مما‬ ،‫غ‬ ‫فار‬ ‫ر‬ ‫تعبت‬ ‫ترك‬ ‫يمكنك‬ ‫جملة‬ ‫تصبح‬ ،‫ا‬‫ز‬‫إيجا‬ ‫ر‬ ‫األكت‬ ‫الشكل‬ for ‫هذا‬ ‫تشغيل‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫ال‬ ‫بما‬‫ر‬ .‫نهائية‬ ‫ال‬ ‫حلقة‬ :‫الطباعة‬ ‫عن‬ ‫يتوقف‬ ‫ال‬ ‫ألنه‬ ،‫المثال‬ for (;;) { echo "Can't stop me!<br />"; } ‫حلقات‬ ‫ي‬ ‫ف‬ for ‫كما‬، ‫حلقات‬ ‫ي‬ ‫ف‬ ‫الحال‬‫هو‬ while ‫الرئيسية‬ ‫الكلمات‬ ‫استخدام‬ ‫يمكنك‬ ، break ‫و‬ continue . ‫ي‬ ‫الحاىل‬‫ار‬‫ر‬‫التك‬ ‫أو‬ ‫الحلقة‬ ‫إلنهاء‬ foreach ‫جملة‬ ‫لك‬ ‫تسمح‬ foreach .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫العناص‬‫ار‬‫ر‬‫بتك‬ foreach ($array as $current) { // ... } : ‫ي‬ ‫ه‬ ‫البديلة‬ ‫الصيغة‬ foreach ($array as $current): // ... endforeach; :‫استخدم‬ ،‫والقيمة‬ ‫المفتاح‬ ‫من‬ ‫كل‬‫إىل‬ ‫للوصول‬ ‫مصفوفة‬ ‫عىل‬‫ار‬‫ر‬‫للتك‬ foreach ($array as $key => $value) { // ... }
  • 331. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 331 : ‫ي‬ ‫ه‬ ‫البديلة‬ ‫الصيغة‬ foreach ($array as $key => $value): // ... endforeach; exit and return ‫جملة‬ ‫ي‬ ‫تنه‬ ،‫إليها‬ ‫الوصول‬ ‫بمجرد‬ exit ‫جملة‬ ‫ترجع‬ . ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ return .‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫األعىل‬ ‫المستوى‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫من‬ ‫أو‬ ‫دالة‬ ‫من‬ ‫جملة‬ exit ‫من‬ ‫الخروج‬ ‫حالة‬ ‫يمثل‬ ‫فهو‬ ، ً ‫ا‬ ً‫رقم‬ ‫هذا‬ ‫كان‬ ‫إذا‬ .‫اختيارية‬ ‫قيمة‬ ‫تأخذ‬ ‫تتم‬ ،‫سلسلة‬ ‫كانت‬‫إذا‬ .‫العملية‬ ‫الدالة‬ .‫العملية‬ ‫إنهاء‬ ‫قبل‬ ‫القيمة‬ ‫طباعة‬ die() ‫ي‬ ‫ه‬ ‫لجملة‬‫مستعار‬ ‫اسم‬ exit : $db = mysql_connect("localhost", $USERNAME, $PA SSWORD); if (!$db) { die("Could not connect to database"); }
  • 332. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 332 ‫كود‬ ‫ر‬ ‫تضمي‬ ‫توفر‬ PHP ‫و‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫لتحميل‬ ‫ر‬ ‫بنائي‬ HTML :‫أخرى‬ ‫نمطية‬ ‫وحدة‬ ‫من‬ require ‫و‬ include ‫برنامج‬ ‫تشغيل‬ ‫أثناء‬ ‫ملف‬ ‫بتحميل‬ ‫يقوم‬ ‫كالهما‬ . PHP ‫ال‬ ‫أن‬ ‫هو‬ ‫ي‬ ‫الرئيىس‬ ‫االختالف‬ ، ‫والحلقات‬ ‫طية‬ ‫ر‬ ‫الش‬ ‫ي‬ ‫ف‬ ‫ويعمالن‬ ، ‫ي‬ ‫نص‬ require ‫يظهر‬ ‫موجود‬ ‫ر‬ ‫غت‬ ‫ملف‬ ‫طلبت‬ ‫إذا‬ fatal error ‫ر‬ ‫تضمي‬ ‫محاولة‬ ‫بينما‬ ، ” include ‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ ‫توقف‬ ‫ال‬ ‫ولكنها‬ ً ‫ا‬ً ‫تحذير‬ ‫تنتج‬ ‫الملف‬ ‫هذا‬ ‫مثل‬ “ . ‫ي‬ ‫النص‬ ‫مثل‬ ‫وضع‬ ‫يتم‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫والتذييالت‬ ‫الرؤوس‬ HTML ‫كل‬‫تبدو‬ ‫ذلك‬ ‫وبعد‬ ،‫منفصلة‬ : ‫ي‬ ‫يىل‬ ‫كما‬‫صفحة‬ <?php include "header.html"; ?> content <?php include "footer.html"; ?> ‫نستخدم‬ ” ‫ر‬ ‫التضمي‬ include ‫ل‬ ‫يسمح‬ ‫ألنه‬ “ PHP ‫الصفحة‬ ‫معالجة‬ ‫بمواصلة‬ ‫ملف‬ ‫ي‬ ‫ف‬ ‫خطأ‬ ‫هناك‬ ‫كان‬‫إذا‬ ‫ر‬ ‫حت‬ ( ‫ملفات‬ ) ‫ال‬. ‫الموقع‬ ‫تصميم‬ require ‫أقل‬ ‫يمكن‬ ‫ال‬ ‫حيث‬ ،‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫مكتبات‬ ‫لتحميل‬ ‫مالءمة‬ ‫ر‬ ‫أكت‬ ‫وتكون‬ ً ‫تسامحا‬ :‫فمثال‬ .‫المكتبات‬ ‫تحميل‬ ‫يتم‬ ‫لم‬ ‫إذا‬ ‫الصفحة‬ ‫عرض‬ require "codelib.php";
  • 333. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 333 ‫تستطع‬ ‫لم‬ ‫إذا‬ PHP ‫ر‬ ‫التضمي‬ ‫بواسطة‬ ‫المضاف‬ ‫الملف‬ ‫من‬ ‫جزء‬ ‫تحليل‬ ” include ” ‫الطلب‬ ‫أو‬ “ require .‫التنفيذ‬ ‫ويستمر‬ ‫تحذير‬ ‫طباعة‬ ‫تتم‬ ،“ ‫عالمة‬ ‫بكتابة‬ ‫التحذير‬ ‫إخفاء‬ ‫يمكنك‬ ( @ ) ‫اإلستدعاء‬ ‫قبل‬ @include . ‫ب‬ ‫المضمنة‬ ‫الملفات‬ ‫تسمية‬ ‫يمكن‬ include ‫و‬ require . ‫ي‬ ‫تعسق‬ ‫بشكل‬ : ‫ي‬ ‫ه‬ ‫الشائعة‬ ‫االمتدادات‬ .php, .php5, and .html. ‫ا‬ ‫ستخدم‬ include ‫أو‬ require ‫ي‬ ‫ف‬ ‫الخطأ‬ ‫طريق‬ ‫عن‬ ‫الملف‬ ‫نفس‬ ‫ر‬ ‫لتضمي‬ ‫ال‬ ‫وتشغيل‬ ‫الملف‬ ‫تحميل‬ ‫يتم‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ ،‫حلقة‬ ‫ك‬ ‫طباعة‬‫أو‬ ،‫ود‬ HTML ‫إرسا‬ ‫أو‬ ،‫الوظائف‬ ‫تعريف‬ ‫إعادة‬ ‫حول‬ ‫أخطاء‬ ‫إىل‬ ‫هذا‬ ‫يؤدي‬ ‫أن‬ ‫يمكن‬. ‫ر‬ ‫مرتي‬ ‫نسخ‬ ‫ل‬ ‫أو‬ ‫الرؤوس‬ ‫من‬ ‫متعددة‬ HTML . ‫استخدم‬ ،‫األخطاء‬ ‫هذه‬ ‫حدوث‬ ‫لمنع‬ include_once ‫و‬ require_once ‫سلوك‬ ‫بنفس‬ ‫تترصف‬ . include ‫و‬ require ‫المرة‬ ‫الالحقة‬ ‫المحاوالت‬ ‫بهدوء‬ ‫تتجاهل‬ ‫لكنها‬ ،‫الملف‬ ‫تحميل‬ ‫فيها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األوىل‬ ‫كل‬،‫الصفحة‬ ‫عناص‬ ‫من‬ ‫العديد‬ ‫تحتاج‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫الملف‬ ‫نفس‬ ‫لتحميل‬ ‫يجب‬ . ‫ي‬ ‫الحاىل‬ ‫المستخدم‬ ‫تفضيالت‬ ‫معرفة‬ ‫إىل‬ ،‫منفصلة‬ ‫ملفات‬ ‫ي‬ ‫ف‬ ‫مخزنة‬ ‫واحدة‬ ‫تفضيال‬ ‫مكتبة‬ ‫بتحميل‬ ‫العناص‬ ‫مكتبات‬ ‫تقوم‬ ‫أن‬ ‫مع‬ ‫المستخدم‬ ‫ت‬ require_once ‫صفحة‬ ‫عنرص‬ ‫ر‬ ‫تضمي‬ ‫ذلك‬ ‫بعد‬ ‫الصفحة‬ ‫لمصمم‬ ‫يمكن‬ . .‫بالفعل‬ ‫المستخدم‬ ‫تفضيل‬ ‫كود‬‫تحميل‬ ‫تم‬ ‫قد‬ ‫كان‬‫إذا‬ ‫ما‬ ‫بشأن‬ ‫القلق‬ ‫دون‬
  • 334. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 334 ‫دالة‬ ‫استخدم‬ get_included_files() ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الملفات‬ ‫لمعرفة‬ ‫عىل‬ ‫تحتوي‬ ‫مصفوفة‬ ‫بإرجاع‬ ‫تقوم‬ . ‫ي‬ ‫ر‬ ‫مح‬ ‫ر‬ ‫الت‬ ‫النص‬ ‫ي‬ ‫ف‬‫طلبها‬‫أو‬‫تضمينها‬ ‫ملفات‬ ‫أسماء‬ .‫مطلوب‬ ‫أو‬ ‫مضمن‬ ‫ملف‬ ‫لكل‬ ‫الكاملة‬ ‫النظام‬‫مسار‬ ‫تضمين‬ PHP ‫الويب‬ ‫صفحات‬ ‫في‬ ‫امج‬‫ر‬‫ب‬ ‫وتشغيل‬ ‫كتابة‬‫الممكن‬ ‫من‬ ‫أنه‬ ‫من‬ ‫الرغم‬ ‫عىل‬ PHP ‫أكواد‬ ‫معظم‬ ‫فإن‬ ،‫مستقلة‬ PHP ‫ي‬ ‫ف‬ ‫مضمنة‬ ‫اكواد‬ HTML . ‫المقام‬ ‫ي‬ ‫ف‬ ‫إنشائها‬ ‫سبب‬ ‫هو‬ ،‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫بعد‬ ،‫هذا‬ .‫األول‬ ‫كود‬‫إلضافة‬ ‫اشكال‬ ‫عدة‬ ‫يوجد‬ php ‫ر‬ ‫األكت‬‫هو‬ ‫ي‬ ‫التاىل‬ ‫الشكل‬ ‫الويب‬ ‫صفحة‬ ‫ي‬ ‫ف‬ . ً ‫استخداما‬ <?php echo "Hello, world"; ?> HTML : ‫ي‬ ‫يىل‬ ‫كما‬‫هذا‬ ‫يبدو‬ ،‫كامل‬ <!doctype html> <html> <head> <title>This is my first PHP program!</title> </head> <body> <p> Look, ma! It's my first PHP program:<br /> <?php echo "Hello, world"; ?><br /> How cool is tha t? </p> </body> </html> ‫مصدر‬ ‫كود‬‫ل‬ ‫أثر‬ ‫أي‬ ‫يوجد‬ ‫ال‬ ‫أنه‬ ‫الحظ‬ PHP ‫الملف‬ ‫من‬ ‫الخرج‬ ‫المستخدم‬ ‫يرى‬ . .‫ناتجه‬ ‫فقط‬
  • 335. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 335 ‫الدوال‬ :‫الدالة‬ ‫وربما‬ ،‫محددة‬ ‫مهمة‬ ‫تؤدي‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫من‬ ‫مسماة‬ ‫كتلة‬ ‫عن‬ ‫عبارة‬ ‫باسم‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫تعرف‬، ‫لها‬ ‫المعطاة‬ ‫القيم‬ ‫من‬ ‫مجموعة‬ ‫عىل‬ ‫تعمل‬ ‫الوسطاء‬ ” parameters ‫تعمل‬ .‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫من‬ ‫مجموعة‬‫أو‬ ‫واحدة‬ ‫قيمة‬ ‫تعيد‬ ‫وربما‬ ،“ ‫الدوال‬ ‫أ‬ ‫أي‬ ‫بإصالح‬ ‫لك‬ ‫السماح‬ ‫خالل‬ ‫من‬ ‫الموثوقية‬ ‫ر‬ ‫تحسي‬ ‫عىل‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫خطاء‬ ‫واحد‬ ‫بدال‬ ‫اءة‬‫ر‬‫الق‬ ‫إمكانية‬ ‫ر‬ ‫تحسي‬ ‫عىل‬ ‫تعمل‬ ‫كما‬ ،‫ما‬ ‫بمهمة‬ ‫فيه‬ ‫تقوم‬ ‫مكان‬ ‫أي‬ ‫من‬ .‫محددة‬ ‫مهام‬ ‫تؤدي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫عزل‬ ‫طريق‬ ‫عن‬ ‫الدالة‬ ‫استدعاء‬ ‫برنامج‬ ‫ي‬ ‫ف‬ ‫الدوال‬ ‫دمج‬ ‫يمكن‬ PHP ‫قبل‬ ‫من‬ ‫معرفة‬ ‫أو‬ ،‫ملحق‬ ‫ي‬ ‫ف‬ ‫كونها‬‫خالل‬ ‫من‬ ‫أو‬ ‫م‬ ‫عن‬ ‫النظر‬ ‫بغض‬ .‫المستخدم‬ :‫الطريقة‬ ‫بنفس‬ ‫الدوال‬ ‫جميع‬ ‫تقييم‬ ‫يتم‬ ،‫صدرها‬ $someValue = function_name( [ parameter, ... ] ); ‫الوسطاء‬ ‫عدد‬ ‫يختلف‬ parameters ‫أخرى‬ ‫إىل‬ ‫دالة‬ ‫من‬ ‫الدالة‬ ‫تتطلبها‬ ‫ي‬ ‫ر‬ ‫الت‬ . ‫قد‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫تكون‬ ‫أن‬ ‫ويجب‬ ‫صالح‬ ‫ر‬ ‫تعبت‬ ‫أي‬ ‫للدالة‬ ‫ها‬ ‫ر‬ ‫توفت‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسطاء‬ ‫تكون‬ ‫الدالة‬ ‫تشتغل‬ ‫فقد‬ ،‫تيب‬ ‫ر‬ ‫الت‬ ‫خارج‬ ‫الوسطاء‬ ‫إعطاء‬ ‫تم‬ ‫إذا‬ .‫الدالة‬ ‫تتوقعه‬ ‫الذي‬‫المحدد‬ ً ‫عشوائيا‬ . :‫الدوال‬ ‫عىل‬ ‫األمثلة‬ ‫بعض‬ ‫ي‬ ‫يىل‬ ‫فيما‬ // strlen() ‫ترجع‬ ‫مضمنة‬ ‫دالة‬ ‫هي‬ ‫السلسلة‬ ‫طول‬ $length = strlen("PHP"); // $length ‫االن‬ 3
  • 336. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 336 // sin() ‫و‬ asin() ‫رياضية‬ ‫دوال‬ ‫هي‬ $result = sin(asin(1)); // $result is the sine of arcsin(1), or 1.0 // unlink() ‫ملف‬ ‫تحذف‬ $result = unlink("functions.txt"); // $result = true or false depending on success or failure " ‫المدخل‬ ‫ي‬ ‫نعط‬ ،‫األول‬ ‫المثال‬ ‫ي‬ ‫ف‬ PHP ‫للدالة‬ " strlen() ‫عدد‬ ‫تعطينا‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫بإرجاع‬ ‫تقوم‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫المتوفرة‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫األحرف‬ 3 ‫تخصيصها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫ر‬ ‫للمتغت‬ $length ً‫شيوع‬ ‫ر‬ ‫واألكت‬ ‫األبسط‬ ‫الطريقة‬ ‫ي‬ ‫ه‬ ‫هذه‬ . .‫دالة‬ ‫الستخدام‬ ً ‫ا‬ ‫نتيجة‬ ‫يمرر‬ ‫ي‬ ‫الثان‬ ‫المثال‬ asin(1) ‫دالة‬ ‫إىل‬ sin() ‫الجيب‬ ‫ي‬ ‫ر‬ ‫دالت‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ . .‫القيمة‬ ‫نفس‬ ً ‫ا‬ ً‫دائم‬ ‫سيعيد‬ ‫قيمة‬ ‫ألي‬ ‫القوس‬ ‫جيب‬ ‫أخذ‬ ‫فإن‬ ،‫انعكاسات‬ ‫ي‬ ‫ه‬ ‫والقوس‬ ‫المرجعة‬ ‫القيمة‬ ‫إرسال‬ ‫يتم‬ .‫أخرى‬ ‫دالة‬ ‫داخل‬ ‫دالة‬ ‫استدعاء‬ ‫يمكن‬ ‫أنه‬ ‫هنا‬ ‫نرى‬ ‫إىل‬ ‫ي‬ ‫الداخىل‬ ‫لإلستدعاء‬ ‫ي‬ ‫ف‬ ‫وتخزينها‬ ‫اإلجمالية‬ ‫النتيجة‬ ‫إرجاع‬ ‫قبل‬ ‫الخارجية‬ ‫الدالة‬ ‫ر‬ ‫متغت‬ $result ‫ملف‬ ‫اسم‬ ‫ي‬ ‫نعط‬ ، ‫ر‬ ‫األخت‬ ‫المثال‬ ‫ي‬ ‫ف‬ ‫ل‬ ‫لدالة‬ unlink() .‫الملف‬ ‫حذف‬ ‫تحاول‬ ‫ي‬ ‫ر‬ ‫الت‬ ، ‫ترجع‬ ‫فإنها‬ ،‫الدوال‬ ‫من‬ ‫العديد‬ ‫مثل‬ false ‫استخدام‬ ‫ذلك‬ ‫لك‬ ‫يتيح‬ .‫تفشل‬ ‫عندما‬ ‫أخرى‬ ‫مضمنة‬ ‫دالة‬ .
  • 337. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 337 ‫تحتوي‬ PHP ‫ي‬ ‫ف‬ ‫لتستخدمها‬ ‫بالفعل‬ ‫المحددة‬ ‫الدوال‬ ‫من‬ ‫ة‬ ‫ر‬ ‫كبت‬ ‫مجموعة‬ ‫عىل‬ ‫وإنشاء‬ ‫البيانات‬ ‫قواعد‬ ‫إىل‬ ‫الوصول‬ ‫مثل‬ ‫مهام‬ ‫الملحقات‬ ‫هذه‬ ‫تؤدي‬ .‫امجك‬‫ر‬‫ب‬ ‫ملفات‬ ‫اءة‬‫ر‬‫وق‬ ‫الرسومات‬ XML ‫البعيدة‬ ‫األنظمة‬ ‫من‬ ‫الملفات‬ ‫عىل‬ ‫والحصول‬‫وكتابتها‬ .‫ذلك‬ ‫ر‬ ‫وغت‬ ‫الدالة‬ ‫تعريف‬ ‫التا‬ ‫الصيغة‬ ‫استخدم‬ ،‫دالة‬ ‫لتعريف‬ :‫لية‬ function [&] function_name([parameter[, ...]]) { ‫قائمة‬ ‫من‬ ‫الجمل‬ } ‫الجمل‬ ‫قائمة‬ ‫تتضمن‬ ‫أن‬ ‫يمكن‬ HTML ‫دالة‬ ‫تعريف‬ ‫يمكنك‬ . PHP ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫كود‬‫أي‬ PHP . ‫أو‬ ‫بصفر‬ ‫متبوعة‬ ‫سفلية‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫أو‬ ‫بحرف‬ ‫تبدأ‬ ‫سلسلة‬ ‫أي‬ ‫الدالة‬ ‫اسم‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫لحالة‬ ‫حساسة‬ ‫ر‬ ‫غت‬ ‫الدالة‬ ‫أسماء‬ .‫واألرقام‬ ‫السفلية‬ ‫طات‬ ‫ر‬ ‫والش‬ ‫األحرف‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫دالة‬ ‫استدعاء‬ ‫يمكنك‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ ‫األحرف‬ strlen() ‫ك‬ StrLen(), STRlen() ‫الد‬ ‫نفس‬ ‫إىل‬ ‫ر‬ ‫تشت‬ ‫األسماء‬ ‫هذه‬ ‫كل‬‫ألن‬ ،‫وهكذا‬ ‫استدعاء‬ ‫يتم‬ ،‫االصطالح‬ ‫حسب‬ .‫الة‬ ‫دوال‬ PHP .‫ة‬ ‫ر‬ ‫صغت‬ ‫بأحرف‬ ‫المدمجة‬ ‫جملة‬ ‫استخدم‬ ،‫دالة‬ ‫من‬ ‫قيمة‬ ‫إلرجاع‬ .‫القيم‬ ‫بعض‬ ‫الدوال‬ ‫ترجع‬ ‫ما‬ ً ‫عادة‬ return ‫ضع‬ return expr ‫جملة‬ ‫مصادفة‬ ‫عند‬ .‫دالتك‬ ‫داخل‬ return ‫يعود‬ ،‫التنفيذ‬ ‫أثناء‬
  • 338. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 338 ‫ل‬ ‫المقيمة‬ ‫النتائج‬ ‫إرجاع‬ ‫وسيتم‬ ،‫االستدعاء‬ ‫جملة‬ ‫إىل‬ ‫التحكم‬ ‫عنرص‬ expr ‫كقيمة‬ .‫للدالة‬ .‫بسيطة‬ ‫دالة‬ ‫ر‬ ‫وسيطي‬ ‫لديها‬ ، ‫ر‬ ‫سلسلتي‬ ‫بدمجهما‬ ‫تقوم‬ ‫النتيجة‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫ثم‬ ، . function strcat($left, $right) { $combinedString = $left . $right; return $combinedString; } ، ‫ر‬ ‫مدخلي‬ ‫الدالة‬ ‫تأخذ‬ $left ‫و‬ $right ‫عامل‬ ‫باستخدام‬ . ‫الدمج‬ ‫سلسلة‬ ‫الدالة‬ ‫ر‬ ‫ىس‬ ُ ‫ن‬ ُ ‫ت‬ ، ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ ‫مجمعة‬ $combinedString ‫القيمة‬ ‫نعيد‬ ، ً ‫ا‬ً ‫ر‬ ‫أخت‬ . .$combinedString ‫تبسيط‬ ‫يمكننا‬ ‫الكود‬ :‫هنا‬ ‫موضح‬ ‫هو‬ ‫كما‬ function strcat($left, $right) { return $left . $right; }
  • 339. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 339 Variable Scope ‫متغير‬ ‫نطاق‬ ‫مكان‬ ‫أي‬ ‫ي‬ ‫ف‬ ‫بإنشائه‬ ‫تقوم‬ ‫ر‬ ‫متغت‬ ‫أي‬ ‫استخدام‬ ‫فيمكن‬ ،‫الدوال‬ ‫تستخدم‬ ‫ال‬ ‫كنت‬‫إذا‬ ‫بمجموعات‬ ‫الدوال‬ ‫تحتفظ‬ . ً ‫ا‬ ً‫دائم‬ ً ‫ا‬ ً ‫صحيح‬ ‫ليس‬ ‫هذا‬ ،‫الدوال‬ ‫مع‬ .‫بالصفحة‬ ‫الدوال‬ ‫وعن‬ ‫بالصفحة‬ ‫الخاصة‬ ‫تلك‬ ‫عن‬ ‫تختلف‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫بها‬ ‫الخاصة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ .‫األخرى‬ ‫يمك‬ ‫ال‬ ‫ذلك‬ ‫ي‬ ‫ف‬‫بما‬ ،‫دالة‬ ‫ي‬ ‫ف‬ ‫المحددة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الوصول‬ ‫ن‬ ‫وسطائها‬ ،‫الدالة‬ ‫خارج‬ ، ‫يوضح‬ .‫الدالة‬ ‫داخل‬ ‫الدالة‬ ‫خارج‬ ‫المحددة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الوصول‬ ‫يمكن‬ ‫ال‬ ، ً ‫ا‬ً‫اضي‬ ‫ر‬ ‫وافت‬ :‫هذا‬ ‫ي‬ ‫التاىل‬ ‫المثال‬ $a = 3; function foo() { $a += 2; } foo(); echo $a; ‫ر‬ ‫المتغت‬ $a ‫الدالة‬ ‫داخل‬ foo() ‫ر‬ ‫المتغت‬ ‫عن‬ ‫مختلف‬ ‫ر‬ ‫متغت‬ ‫هو‬ $a ‫قيمة‬ ‫الدالة‬ ‫خارج‬ $a ‫ر‬ ‫تبق‬ ‫الخارجية‬ 3 ‫قيمة‬، ‫الدالة‬ ‫داخل‬ .‫الصفحة‬‫عمر‬ ‫طوال‬ $a ‫ي‬ ‫ه‬ 2 . ‫نامج‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫فيه‬ ‫ى‬ ُ ‫ر‬ُ‫ي‬ ‫أن‬ ‫يمكن‬ ‫الذي‬ ‫المدى‬ ‫فإن‬ ، ‫ي‬ ‫الثان‬ ‫الفصل‬ ‫ي‬ ‫ف‬ ‫ناقشنا‬ ‫كما‬ . ‫ر‬ ‫المتغت‬ ‫نطاق‬ ‫يسىم‬ ‫إنشاؤها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫الدالة‬ ‫نطاق‬ ‫داخل‬ ‫موجودة‬ ‫دالة‬ ‫داخل‬ ( ‫عىل‬ ‫نطاق‬ ‫لها‬ ‫أي‬ ‫الدالة‬ ‫مستوى‬ ) . ‫ي‬ ‫عالىم‬ ‫نطاق‬ ‫لها‬ ‫والكائنات‬ ‫الدوال‬ ‫خارج‬ ‫إنشاؤها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ Global ‫وتوجد‬ ‫توفرها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫بعض‬ .‫والكائنات‬ ‫الدوال‬ ‫تلك‬ ‫خارج‬ ‫مكان‬ ‫أي‬ ‫ي‬ ‫ف‬ PHP ‫نطاق‬‫لها‬
  • 340. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 340 ‫ي‬ ‫عالىم‬ ‫ونطاق‬ ‫دالة‬ ( ً ‫ا‬ً‫غالب‬ ‫إليها‬ ‫يشار‬ ‫الفائقة‬ ‫العالمية‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫باسم‬ super- global variables ) . ‫المتغيرات‬ ‫او‬ ‫العامة‬ ‫العالمية‬ ‫استخدام‬ ‫يمكنك‬ ،‫دالة‬ ‫داخل‬ ‫من‬ ‫العام‬ ‫النطاق‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫الوصول‬ ‫تريد‬ ‫كنت‬‫إذا‬ ‫األساسية‬ ‫الكلمة‬ global :‫هو‬ ‫كيبها‬ ‫تر‬ . global var1, var2, ... ; ‫الكلمة‬ ‫ر‬ ‫لتضمي‬ ‫السابق‬ ‫المثال‬ ‫ر‬ ‫بتغيت‬ ‫الرئيسية‬ global :‫عىل‬ ‫نحصل‬ ، $a = 3; function foo() { global $a; $a += 2; } foo(); echo $a; ‫يسىم‬ ‫جديد‬ ‫ر‬ ‫متغت‬ ‫إنشاء‬ ‫من‬ ً ‫بدال‬ $a ،‫الدالة‬ ‫مستوى‬ ‫عىل‬ ‫بنطاق‬ PHP ‫تستخدم‬ global $a ‫الدالة‬ ‫داخل‬ ‫قيمة‬ ‫عرض‬ ‫يتم‬ ‫عندما‬ ،‫اآلن‬ $a ‫ستكون‬ ، 5 . ‫األساسية‬ ‫الكلمة‬ ‫ر‬ ‫تضمي‬ ‫عليك‬ ‫يجب‬ global ‫ر‬ ‫للمتغت‬ ‫استخدامات‬ ‫أي‬ ‫قبل‬ ‫دالة‬ ‫ي‬ ‫ف‬ ‫ا‬ ‫تريد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أو‬ ‫العام‬ ‫جسم‬ ‫قبل‬ ‫عنها‬ ‫اإلعالن‬ ‫يتم‬ ‫ألنه‬ ً ‫ا‬ً ‫نظر‬ .‫إليها‬ ‫لوصول‬ ‫تكون‬ ‫أن‬ ً ‫ا‬ ً ‫أبد‬ ‫يمكن‬ ‫ال‬ ،‫الدالة‬ ‫وسطاء‬ .‫عامة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫الدالة‬
  • 341. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 341 ‫الثابتة‬ ‫المتغيرات‬ static ‫تدعم‬ PHP ” ‫ثابتة‬ ‫بأنها‬ ‫الدالة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫تعريف‬ static ‫الثابت‬ ‫ر‬ ‫المتغت‬ ‫يحتفظ‬ .“ ‫ي‬ ‫ف‬ ‫فقط‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫تنفيذ‬ ‫أثناء‬ ‫تهيئته‬ ‫ويتم‬ ‫الدالة‬ ‫استدعاءات‬ ‫جميع‬ ‫ر‬ ‫بي‬ ‫بقيمته‬ .‫الدالة‬ ‫استدعاء‬ ‫فيها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األوىل‬ ‫المرة‬ ‫األساسية‬ ‫الكلمة‬ ‫استخدم‬ static ‫أنها‬ ‫عن‬ ‫لإلعالن‬ ‫دالة‬ ‫ر‬ ‫لمتغت‬ ‫استخدام‬ ‫أول‬ ‫عند‬ ‫لم‬ ‫استخدام‬ ‫أول‬ ‫يخصص‬ ‫ما‬ ً ‫عادة‬ .‫ثابتة‬ :‫أولية‬ ‫قيمة‬ ‫ثابت‬ ‫ر‬ ‫تغت‬ static var [= value][, ... ]; ‫ر‬ ‫المتغت‬ ‫زيادة‬ ‫يتم‬ ‫المثال‬ ‫ي‬ ‫ف‬ $count .‫الدالة‬ ‫استدعاء‬ ‫يتم‬ ‫مرة‬ ‫كل‬ ‫ي‬ ‫ف‬ ‫واحد‬ ‫بمقدار‬ function counter() { static $count = 0; return $count++; } for ($i = 1; $i <= 5; $i++) { print counter(); } ‫قيمة‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ ،‫مرة‬ ‫ألول‬ ‫الدالة‬ ‫استدعاء‬ ‫يتم‬ ‫عندما‬ 0 ‫الثابت‬ ‫ر‬ ‫للمتغت‬ $count . ‫وزيادة‬ ‫القيمة‬ ‫إرجاع‬ ‫يتم‬ $count ‫إتالف‬ ‫يتم‬ ‫ال‬ ،‫الدالة‬ ‫ي‬ ‫تنته‬‫عندما‬ . $count ‫ر‬ ‫كمتغت‬ ‫استدعاء‬ ‫يتم‬ ‫ر‬ ‫حت‬ ‫ي‬ ‫ه‬ ‫كما‬‫قيمتها‬ ‫وتظل‬ ،‫ثابت‬ ‫ر‬ ‫غت‬ counter() ‫تعرض‬ .‫التالية‬ ‫المرة‬ ‫حلقة‬ for ‫األ‬ ‫من‬ ‫رقام‬ 0 ‫إىل‬ 4 .
  • 342. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 342 ‫الدالة‬ ‫وسطاء‬ ‫بواسطة‬ ‫تحديدها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ،‫المدخالت‬ ‫من‬ ً ‫ا‬ً‫تعسفي‬ ً ‫ا‬ ً ‫عدد‬ ‫الدوال‬ ‫تتوقع‬ ‫أن‬ ‫يمكن‬ ‫ر‬ ‫واألكت‬ ‫األول‬ .‫دالة‬ ‫إىل‬ ‫الوسطاء‬ ‫لتمرير‬ ‫مختلفتان‬ ‫طريقتان‬ ‫هناك‬ .‫الدالة‬ ‫تعريف‬ ” ‫القيمة‬‫هو‬ ً ‫شيوعا‬ value ‫ي‬ ‫والثان‬ .“ ‫بالمرجع‬ reference ‫تمرير‬ ‫بالقيمة‬ ‫الوسطاء‬ ‫المدخل‬. ‫القيمة‬ ‫حسب‬ ‫الوسطاء‬ ‫بتمرير‬ ‫تقوم‬ ،‫الحاالت‬ ‫معظم‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫تعبت‬ ‫أي‬ ‫هو‬ ‫ي‬ ‫ف‬ ‫المناسب‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫الناتجة‬ ‫القيمة‬ ‫ر‬ ‫تعيي‬ ‫ويتم‬ ، ‫ر‬ ‫التعبت‬ ‫هذا‬ ‫تقييم‬ ‫يتم‬ .‫صالح‬ .‫بالقيمة‬ ‫المدخالت‬ ‫مررنا‬ ،‫اآلن‬ ‫ر‬ ‫حت‬ ‫األمثلة‬ ‫جميع‬ ‫ي‬ ‫ف‬ .‫الدالة‬ ‫المرجع‬ ‫حسب‬ ‫الوسطاء‬ ‫تمرير‬ ‫وإعطاء‬ ‫العادية‬ ‫النطاق‬ ‫تحديد‬ ‫قواعد‬ ‫بتجاوز‬ ‫المرجع‬ ‫حسب‬ ‫التمرير‬ ‫لك‬ ‫يسمح‬ ً ‫وصوال‬ ‫الدالة‬ . ‫ر‬ ‫المتغت‬ ‫إىل‬ ً ‫ا‬ً ‫ر‬ ‫مبارس‬ ‫أن‬ ‫إىل‬ ‫ر‬ ‫تشت‬ ‫أنت‬ ً ‫ا‬ً ‫ر‬ ‫متغت‬ ‫المدخل‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ،‫المرجع‬ ‫طريق‬ ‫عن‬ ‫تمريرها‬ ‫ليتم‬ ‫قائمة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫طريق‬ ‫عن‬ ‫المرجع‬ ‫طريق‬ ‫عن‬ ‫تمريره‬ ‫سيتم‬ ‫للدالة‬ ‫ر‬ ‫معي‬ ‫مدخل‬ ‫العطف‬ ‫بعالمة‬ ‫الوسطاء‬ ( & ) . ‫مثا‬ ‫ل‬ function doubler(&$value) { $value = $value << 1; } $a = 3; doubler($a); echo $a;
  • 343. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 343 ‫وسيط‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ $value ‫الفعلية‬ ‫القيمة‬ ‫فإن‬ ،‫المرجع‬ ‫خالل‬ ‫من‬ ‫تمريرها‬ ‫يتم‬ ‫للدالة‬ ‫ل‬ $a ‫كان‬،‫السابق‬ ‫ي‬ ‫ف‬ .‫الدالة‬ ‫بواسطة‬ ‫تعديلها‬ ‫يتم‬ ،‫القيمة‬ ‫تلك‬ ‫من‬ ‫نسخة‬ ‫من‬ ً ‫بدال‬ ، ‫ر‬ ‫نغت‬ ‫اآلن‬ ‫لكننا‬ ،‫المضاعفة‬ ‫القيمة‬ ‫إعادة‬ ‫علينا‬ ‫ال‬ ‫القيمة‬ ‫ليكون‬ ‫المتصل‬ ‫ر‬ ‫متغت‬ .‫المضاعفة‬ ‫ر‬ ‫المتغت‬ ‫مررنا‬ ‫أننا‬ ‫بما‬ :‫جانبية‬ ‫آثار‬ ‫للدالة‬ ‫يكون‬ ‫حيث‬ ‫آخر‬ ‫مكان‬ ‫هذا‬ $a ‫إىل‬ doubler() ‫فإن‬ ،‫المرجع‬ ‫حسب‬ ‫قيمة‬ $a ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫الدالة‬ ‫رحمة‬ ‫تحت‬ ‫تكون‬ ‫يقوم‬ doubler() .‫له‬ ‫جديدة‬ ‫قيمة‬ ‫ر‬ ‫بتعيي‬ ‫تمرير‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫قد‬ ،‫المحددة‬ ‫القيمة‬ ‫عىل‬ ‫دالتك‬ ‫فيها‬ ‫تؤثر‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الحاالت‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫حت‬ ‫الوسيط‬ . ‫المرجع‬ ‫طريق‬ ‫عن‬ ‫عند‬ ‫ال‬ ‫تمرير‬ ‫ب‬ ‫تنسخ‬ ‫أن‬ ‫يجب‬ ،‫القيمة‬ PHP ‫مكل‬ ‫عملية‬ ‫هذه‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ .‫القيمة‬ ‫فة‬ ‫يزيل‬ ‫المرجع‬ ‫حسب‬ ‫التمرير‬ .‫ة‬ ‫ر‬ ‫كبت‬ ‫ال‬ ‫والكائنات‬ ‫النصية‬ ‫للسالسل‬ ‫بالنسبة‬ ‫خاصة‬ .‫القيمة‬ ‫نسخ‬ ‫إىل‬ ‫الحاجة‬ ‫االفتراضية‬ ‫الوسطاء‬ ‫عند‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ . ‫ر‬ ‫معي‬ ‫وسيط‬ ‫قبول‬ ‫إىل‬ ‫الدالة‬ ‫تحتاج‬ ‫قد‬ ‫األحيان‬ ‫بعض‬ ‫ي‬ ‫ف‬ ‫وسيط‬ ‫الدالة‬ ‫تأخذ‬ ‫قد‬ ،‫ما‬ ‫لموقع‬ ‫التفضيالت‬ ‫عىل‬ ‫للحصول‬ ‫دالة‬ ‫استدعاء‬ ‫باسم‬ ‫الخاصة‬ ‫األساسية‬ ‫الكلمات‬ ‫بعض‬ ‫استخدام‬ ‫من‬ ً ‫بدال‬ .‫داده‬ ‫ر‬ ‫است‬ ‫تريد‬ ‫الذي‬ ‫التفضيل‬ .‫مدخل‬ ‫أي‬ ‫تقديم‬ ‫ببساطة‬ ‫يمكنك‬ ‫ال‬ ،‫التفضيالت‬ ‫جميع‬ ‫داد‬ ‫ر‬ ‫است‬ ‫تريد‬ ‫أنك‬ ‫ر‬ ‫لتعيي‬ .‫اضية‬ ‫ر‬ ‫االفت‬ ‫المدخالت‬ ‫باستخدام‬ ‫السلوك‬ ‫هذا‬ ‫يعمل‬
  • 344. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 344 ‫الدال‬ ‫إعالن‬ ‫ي‬ ‫ف‬ ‫الوسيط‬ ‫قيمة‬ ‫ر‬ ‫بتعيي‬ ‫قم‬ ،‫اضية‬ ‫ر‬ ‫افت‬ ‫وسيط‬ ‫لتحديد‬ ‫أن‬ ‫يمكن‬ ‫ال‬ .‫ة‬ :‫قيمة‬ ‫فقط‬ ، ً ‫ا‬ ً ‫معقد‬ ً ‫ا‬ً ‫ر‬ ‫تعبت‬ ‫اضية‬ ‫ر‬ ‫افت‬ ‫كقيمة‬‫للمعامل‬ ‫المعينة‬ ‫القيمة‬ ‫تكون‬ function getPreferences($whichPreference = 'all ') { // if $whichPreference is "all", return all pr efs; // otherwise, get the specific preference reque sted... } ‫استدعاء‬ ‫عند‬ getPreferences() ،‫بذلك‬ ‫قمت‬ ‫إذا‬ .‫مدخل‬ ‫تقديم‬ ‫اختيار‬ ‫يمكنك‬ ، ‫يقوم‬ ‫فإنه‬ ،‫كذلك‬‫يكن‬ ‫لم‬ ‫إذا‬ ‫لها‬ ‫تقدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫للسلسلة‬ ‫المطابق‬ ‫التفضيل‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ‫فإنها‬ .‫التفضيالت‬ ‫جميع‬ ‫بإرجاع‬ :‫مالحظة‬ ‫يجب‬ ،‫ذلك‬ ‫ومع‬ .‫اضية‬ ‫ر‬ ‫االفت‬ ‫القيم‬ ‫ذات‬ ‫الوسطاء‬ ‫من‬ ‫عدد‬ ‫أي‬ ‫عىل‬ ‫الدالة‬ ‫تحتوي‬ ‫قد‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫الوسطاء‬ ‫هذه‬ ‫اج‬‫ر‬‫إد‬ .‫اضية‬ ‫ر‬ ‫افت‬ ‫قيم‬ ‫عىل‬ ‫تحتوي‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسطاء‬ ‫كافة‬‫بعد‬ ‫ية‬
  • 345. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 345 ‫المتغير‬ ‫وسطاء‬ ‫مثال‬ ‫جع‬ُ ‫ر‬ُ‫ي‬ ‫قد‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫المدخالت‬ ‫من‬ ً ‫ا‬ً ‫ر‬ ‫متغت‬ ً ‫ا‬ ً ‫عدد‬ ‫الدالة‬ ‫تتطلب‬ ‫قد‬ getPreferences() ‫من‬ ً ‫بدال‬ ،‫األسماء‬ ‫من‬ ‫عدد‬ ‫ألي‬ ‫التفضيالت‬ ‫السابق‬ ‫القسم‬ ‫ي‬ ‫ف‬ ‫بعدد‬ ‫دالة‬ ‫عن‬ ‫لإلعالن‬ .‫فقط‬ ‫واحد‬ ‫اسم‬ ‫كتلة‬‫اترك‬ ،‫المدخالت‬ ‫من‬ ‫ر‬ ‫متغت‬ ‫الوسطاء‬ :‫بالكامل‬ function getPreferences() { // some code } ‫توفر‬ PHP ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الوسطاء‬ ‫داد‬ ‫ر‬ ‫الست‬ ‫الدالة‬ ‫ي‬ ‫ف‬ ‫استخدامها‬ ‫يمكنك‬ ‫دوال‬ ‫ثالث‬ ‫يرجع‬. ‫إليها‬ ‫تمريرها‬ )( func_get_args ‫مصفوفة‬ ‫من‬ ‫جميع‬ ‫الوسطاء‬ ‫المتوفرة‬ ‫للدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ‫الدالة‬ func_get_args() ‫الوسطاء‬ ‫عدد‬ ‫يرجع‬ ‫و‬ ‫للدالة‬ ‫المتوفرة‬ func_get_arg () :‫فمثال‬ .‫الوسطاء‬ ‫من‬ ‫ر‬ ‫معي‬ ‫مدخل‬ $array = func_get_args(); $count = func_num_args(); $value = func_get_arg(argument_number);
  • 346. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 346 ‫الدالة‬ ‫تأخذ‬ count_list() ‫تلك‬ ‫فوق‬ ‫حلقات‬ ‫بعمل‬ ‫يقوم‬ .‫المدخالت‬ ‫من‬ ‫عدد‬ ‫أي‬ ‫ترجع‬ ‫فإنها‬ ،‫وسطاء‬ ‫أي‬ ‫إعطاء‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫القيم‬ ‫جميع‬ ‫ي‬ ‫إجماىل‬ ‫وإرجاع‬ ‫المدخالت‬ false . function countList() { if (func_num_args() == 0) { return false; }else { $count = 0; for ($i = 0; $i < func_num_args(); $i++) { $count += func_get_arg($i); } return $count; } } echo countList(1, 5, 9); // outputs "15"
  • 347. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 347 ‫تلميح‬ ‫كتابة‬ ‫تلميح‬ ‫إضافة‬ ‫يمكنك‬ ،‫دالة‬ ‫تعريف‬ ‫عند‬ ‫عن‬ ‫النوع‬ - ‫تكون‬ ‫أن‬ ‫تطلب‬ ‫أن‬ ‫يمكنك‬ ‫أي‬ ‫الوسيط‬ ‫من‬ ‫إلضافة‬ .‫لالستدعاء‬ ‫قابلة‬ ‫أو‬ ‫مجموعة‬ ،‫مثيالت‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫معينة‬ ‫فئة‬ ‫أو‬ ‫الفئة‬ ‫اسم‬ ‫ر‬ ‫بتضمي‬ ‫قم‬ ،‫وسيط‬ ‫إىل‬ ‫نوع‬ ‫تلميح‬ array ‫أو‬ callable ‫قبل‬ ‫اسم‬ :‫فمثال‬ .‫الدالة‬ ‫وسطاء‬ ‫قائمة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ function getTest(array $arr) { echo $arr[0]; } getTest([666,232]); ‫القيم‬ ‫إرجاع‬ ‫لدوال‬ ‫يمكن‬ PHP ‫الرئيسية‬ ‫الكلمة‬ ‫باستخدام‬ ‫فقط‬ ‫واحدة‬ ‫قيمة‬ ‫ترجع‬ ‫أن‬ return : function returnOne() { return 42; } :‫مصفوفة‬ ‫بإرجاع‬ ‫قم‬ ،‫متعددة‬ ‫قيم‬ ‫إلرجاع‬ function returnTwo() { return array("anas", 28); } ‫بإرجاع‬ ‫الدالة‬ ‫تقوم‬ ،‫دالة‬ ‫بواسطة‬ ‫إرجاع‬ ‫قيمة‬ ‫ر‬ ‫توفت‬ ‫يتم‬ ‫لم‬ ‫إذا‬ NULL ‫ر‬ ‫تعيي‬ ‫يمكنك‬ . ‫ال‬ ‫جع‬ ‫ر‬ ‫ست‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫الدالة‬ ‫تعريف‬ ‫ي‬ ‫ف‬ ‫عنه‬ ‫ح‬ ‫ي‬‫رص‬‫بالت‬ ‫اإلرجاع‬ ‫بيانات‬ ‫نوع‬ :‫تنفيذه‬ ‫عند‬ ً ‫ا‬ ً ‫صحيح‬ ً ‫ا‬ ً ‫عدد‬ ‫ي‬ ‫التاىل‬ ‫كود‬ function someMath($var1, $var2): int {
  • 348. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 348 return $var1 * $var2; } echo someMath(10, 5); ‫مجهولة‬ ‫دوال‬ ‫دوال‬ ‫بعض‬ ‫تقوم‬ PHP ‫سبيل‬ ‫عىل‬ .‫لهم‬ ‫توفرها‬ ‫دالة‬ ‫باستخدام‬ ‫عملها‬ ‫من‬ ‫بجزء‬ ‫الدالة‬ ‫تستخدم‬ ،‫المثال‬ usort() ‫كمعامل‬ ‫إليها‬ ‫وتمريرها‬ ‫بإنشائها‬ ‫تقوم‬ ‫دالة‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫العناص‬‫فرز‬ ‫ترتيب‬ ‫لتحديد‬ ،‫اض‬‫ر‬‫األغ‬ ‫لهذه‬ ‫دالة‬‫تحديد‬ ‫يمكنك‬ ‫أنه‬ ‫من‬ ‫الرغم‬ ‫عىل‬ ‫االحيان‬ ‫اغلب‬ ‫لكن‬ ‫الدوال‬ ‫هذه‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫رف‬ ُ‫ع‬ ُ ‫ت‬ ‫مجهولة‬ ‫دالة‬ ‫تكون‬ ‫باسم‬ . closure ‫الدالة‬ ‫تعريف‬ ‫صيغة‬ ‫باستخدام‬ ‫مجهولة‬ ‫دالة‬ ‫إنشاء‬ ‫يمكنك‬ ‫يمكنك‬ ‫ولكن‬ ،‫العادية‬ .‫ة‬ ‫ر‬ ‫مبارس‬ ‫تمريرها‬ ‫أو‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫تعيينها‬ $array = array("really long string", "this", "m iddling length", "larger"); usort($array, function($a, $b) { return strlen($a) – strlen($b); }); print_r($array); ‫حسب‬ ‫المصفوفة‬‫فرز‬ ‫يتم‬ usort() ‫طول‬ ‫تيب‬ ‫ر‬ ‫بت‬ ،‫المجهولة‬ ‫الدالة‬ ‫باستخدام‬ .‫السلسلة‬
  • 349. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 349 ‫النصية‬ ‫السالسل‬ .‫األحرف‬ ‫من‬ ‫سالسل‬ ‫عن‬ ‫عبارة‬ ‫مجة‬ ‫ر‬ ‫الت‬ ‫أثناء‬ ‫تصادفها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫معظم‬ ‫ستكون‬ ‫الصور‬ ‫وروابط‬ ‫المرور‬ ‫وكلمات‬ ‫األشخاص‬ ‫أسماء‬ ‫عىل‬ ‫السالسل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ .‫ذلك‬ ‫ر‬ ‫وغت‬ ‫كود‬ ‫ي‬ ‫ف‬ ‫حرفية‬ ‫سلسلة‬ ‫لكتابة‬ ‫طرق‬ ‫ع‬‫أرب‬ ‫هناك‬ PHP :‫بك‬ ‫الخاص‬ • ‫الفردية‬ ‫االقتباس‬ ‫عالمات‬ • ‫المزدوجة‬ ‫االقتباس‬ ‫عالمات‬ • ‫مستند‬ ‫تنسيق‬ ( heredoc ) • ‫مستند‬ ‫تنسيق‬ ( nowdoc ) ‫تتيح‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الخاصة‬ ‫الهروب‬ ‫سالسل‬ ‫عىل‬ ‫تتعرف‬ ‫كانت‬‫إذا‬ ‫فيما‬ ‫الطرق‬ ‫هذه‬ ‫تختلف‬ ‫ا‬ ‫ر‬ ‫المتغت‬ ‫استيفاء‬‫أو‬ ‫أخرى‬ ‫أحرف‬ ‫ر‬ ‫ترمت‬ ‫لك‬ .‫ت‬ Variable Interpolation ‫توسيع‬ )‫(تفسير‬ ‫المتغير‬ ‫أو‬ ‫مزدوجة‬ ‫اقتباس‬ ‫عالمات‬ ‫باستخدام‬ ‫حرفية‬ ‫سلسلة‬ ‫بتعريف‬ ‫تقوم‬ ‫عندما‬ heredoc ‫السلسلة‬ ‫فإن‬ ، ‫ب‬ ‫تقوم‬ ‫ر‬ ‫المتغت‬ ‫توسيع‬ ‫ات‬ ‫التوسيع‬ . ) ‫ر‬ ‫(التفست‬ ‫عملية‬ ‫ي‬ ‫ه‬ ‫لتوسيع‬ ‫طريقتان‬ ‫هناك‬ .‫المضمنة‬ ‫بقيمها‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫استبدال‬ ‫ال‬ .‫سالسل‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫اقتباس‬ ‫عالمة‬ ‫ذات‬ ‫نصية‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫وضع‬ ‫ي‬ ‫ه‬ ‫ر‬ ‫الطريقتي‬ ‫أبسط‬ ‫أو‬ ‫مزدوجة‬ heredoc : $who = 'Anas'; $where = 'here'; echo "$who was $where"; //Anas was here
  • 350. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 350 ‫بأقواس‬ ‫توسيعه‬ ‫يتم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ ‫إحاطة‬ ‫ي‬ ‫ه‬ ‫األخرى‬ ‫الطريقة‬ ‫معكوفة‬ ‫يضمن‬ . ‫لألقواس‬ ‫ي‬ ‫الكالسيك‬ ‫االستخدام‬ .‫الصحيح‬ ‫ر‬ ‫المتغت‬ ‫توسيع‬ ‫هذا‬ ‫الجملة‬ ‫بناء‬ ‫استخدام‬ :‫محيط‬ ‫نص‬ ‫أي‬ ‫من‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫عن‬ ‫الغموض‬ ‫الة‬‫ز‬‫إ‬‫هو‬ ‫المعكوفة‬ $n = 12; echo "You are the {$n}th person";// You are the 1 2th person ‫واحدة‬ ‫اقتباس‬ ‫عالمة‬ ‫ذات‬ ‫سالسل‬ ‫و‬ ‫المفردة‬ ‫االقتباس‬ ‫عالمات‬ ‫ذات‬ ‫السالسل‬ nowdocs .‫ات‬ ‫ر‬ ‫المتغت‬ ‫توسع‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الحرفية‬ ‫السلسلة‬ ‫ألن‬ ‫التالية‬ ‫السلسلة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫المتغت‬ ‫اسم‬ ‫توسيع‬ ‫يتم‬ ‫ال‬ ، ‫ي‬ ‫وبالتاىل‬ :‫مفردة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫فيها‬ ‫تحدث‬ $name = 'Fred'; $str = 'Hello, $name'; echo $str; //Hello, $name ‫محرف‬ ‫الوحيدة‬ ‫الهروب‬ ‫الذي‬ ‫ي‬ ‫اقت‬ ‫عالمات‬ ‫ذات‬ ‫سالسل‬ ‫ي‬ ‫ف‬ ‫عمل‬ ' ‫ي‬ ‫ه‬ ‫مفردة‬ ‫باس‬ ، ‫و‬ ،‫واحدة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫واحدة‬ ‫اقتباس‬ ‫عالمة‬ ‫تضع‬ ‫ي‬ ‫ر‬ ‫والت‬ ‫ي‬ ‫ر‬ ‫الت‬ ، .‫مفردة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫للخلف‬ ‫مائلة‬ ‫طة‬ ‫ر‬ ‫رس‬ ‫تضع‬
  • 351. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 351 ‫سالسل‬ ‫بعالمة‬ ‫االقتباس‬ ‫ال‬ ‫مزدوجة‬ ‫عالمات‬ ‫ذات‬ ‫سالسل‬ ‫اال‬ ‫قتباس‬ ‫ال‬ ‫من‬ ‫العديد‬ ‫وتوسع‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫توسع‬ ‫مزدوجة‬ ‫محارف‬ ‫ال‬ ‫هر‬ ‫الجدول‬ ‫يشد‬ .‫وب‬ ‫ي‬ ‫التاىل‬ )‫سالسل(محارف‬ ‫الهروب‬ ‫ي‬ ‫ف‬ ‫المتوفرة‬ PHP .‫مزدوجة‬ ‫اقتباس‬ ‫عالمات‬ ‫ذات‬ ‫سالسل‬ ‫ي‬ ‫ف‬ ‫الهروب‬ ‫سالسل‬ ‫الحرف‬ ‫يمثل‬ " ‫مزدوجة‬ ‫تنصيص‬ ‫عالمة‬ n ‫جديد‬‫سطر‬ r Carriage return t ‫جدول‬ ‫مسافة‬ Backslash $ ‫الدوالر‬ ‫عالمة‬ { Left curly brace } Right curly brace [ Left square bracket ] Right square bracket 0 through 777 ‫حروف‬ ‫تمثيل‬ ‫يتم‬ ASCII ‫ثمانية‬ ‫بقيمة‬ x0 through xFF ‫حرف‬ ‫تمثيل‬ ‫يتم‬ ASCII ‫ية‬ ‫ر‬ ‫عش‬ ‫سداسية‬ ‫بقيمة‬
  • 352. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 352 ‫السالسل‬ ‫طباعة‬ ‫جمل‬ ‫لك‬ ‫تتيح‬ .‫المتصفح‬ ‫إىل‬ ‫اج‬‫ر‬‫اإلخ‬ ‫إلرسال‬ ‫طرق‬ ‫ع‬‫أرب‬ ‫هناك‬ echo ‫من‬ ‫العديد‬ ‫طباعة‬ ‫تطبع‬ ‫بينما‬، ‫واحدة‬ ‫دفعة‬ ‫القيم‬ print() ‫الدالة‬ ‫تقوم‬ .‫فقط‬ ‫واحدة‬ ‫قيمة‬ printf() .‫منسقة‬ ‫سلسلة‬ ‫ببناء‬ ‫دالة‬ print_r() ‫التصحيح‬ ‫ي‬ ‫ف‬ ‫مفيدة‬ ( debugging ) ‫محتويات‬ ‫بطباعة‬ ‫يقوم‬ ‫أخ‬ ‫وأشياء‬ ‫والكائنات‬ ‫المصفوفات‬ .‫ما‬ ‫حد‬ ‫إىل‬ ‫مقروء‬ ‫شكل‬ ‫ي‬ ‫ف‬ ‫رى‬ echo ‫اج‬‫ر‬‫إلخ‬ ‫ي‬ ‫ف‬ ‫سلسلة‬ HTML ‫الويب‬ ‫صفحة‬ ‫تبدو‬ ‫بينما‬ . echo ‫ك‬ ‫فإن‬ ،‫دالة‬ echo ‫بناء‬ ‫هو‬ ‫ضمن‬ ‫ات‬ ‫ر‬ ‫التعبت‬ ‫فإن‬ ‫ي‬ ‫وبالتاىل‬ ،‫األقواس‬ ‫حذف‬ ‫يمكنك‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫هذا‬ .‫لغة‬ :‫متساوية‬ ‫التالية‬ echo "Printy"; echo("Printy"); :‫بفاصالت‬ ‫فصلها‬ ‫طريق‬ ‫عن‬ ‫للطباعة‬ ‫عناص‬ ‫عدة‬ ‫تحديد‬ ‫يمكنك‬ echo "First", "second", "third"; Firstsecondthird ‫من‬ ‫ر‬ ‫أكت‬ ‫وضع‬ ‫عند‬ ‫األقواس‬ ‫استخدام‬ ‫يعد‬ ً ‫خطأ‬ ‫قيمة‬ : // this is a parse error echo("Hello", "world");
  • 353. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 353 ‫ألن‬ ً ‫ا‬ً ‫نظر‬ echo : ‫ر‬ ‫أكت‬ ‫ر‬ ‫تعبت‬ ‫من‬ ‫كجزء‬‫استخدامه‬ ‫يمكنك‬ ‫فال‬ ،‫حقيقية‬ ‫دالة‬ ‫ليست‬ // parse error if (echo("test")) { echo("It worked!"); } print() ‫الدالة‬ ‫ترسل‬ print() ‫واحدة‬ ‫قيمة‬ ( ‫مدخلها‬ ) :‫المتصفح‬ ‫إىل‬ if (print("testn")) { ("It worked!"); } //test //It worked! printf() ‫الدالة‬ ‫تقوم‬ printf() ‫قالب‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫استبدال‬ ‫طريق‬ ‫عن‬ ‫مبنية‬ ‫سلسلة‬ ‫اج‬‫ر‬‫بإخ‬ ( ‫التنسيق‬ ‫سلسلة‬ format string ) ‫ل‬ ‫األول‬ ‫المدخل‬ . printf() ‫سلسلة‬ ‫ي‬ ‫ه‬ ‫الحرف‬ ‫ر‬ ‫يشت‬ .‫استبدالها‬ ‫المطلوب‬ ‫القيم‬ ‫ي‬ ‫ه‬ ‫المتبقية‬ ‫المدخالت‬. ‫التنسيق‬ A ‫ي‬ ‫ف‬ % ‫إىل‬ ‫التنسيق‬ ‫سلسلة‬ .“substitution” ‫االستبدال‬
  • 354. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 354 ‫معد‬ ‫ال‬ ‫التنسيق‬ ‫ت‬ FORMAT MODIFIERS ‫من‬ ‫القالب‬ ‫ي‬ ‫ف‬ ‫استبدال‬ ‫عالمة‬ ‫كل‬ ‫تتكون‬ ‫اشارة‬ (‫المئوية‬ ‫النسبة‬ % ‫يتبعها‬ ‫وربما‬ ، ) ‫تيب‬ ‫ر‬ ‫بالت‬ ‫المعدالت‬‫تظهر‬ ‫أن‬ ‫يجب‬ .‫نوع‬ ‫بمحدد‬ ‫ي‬ ‫وتنته‬ ،‫التالية‬ ‫القائمة‬ ‫من‬ ‫الت‬ ّ ‫د‬ ّ‫مع‬ :‫هنا‬ ‫به‬ ‫رسدها‬ ‫تم‬ ‫الذي‬ 1 . ‫السلسلة‬ ‫لحجم‬ ‫النتائج‬ ‫ر‬ ‫لتضمي‬ ‫استخدامه‬ ‫اد‬‫ر‬‫الم‬ ‫الحرف‬ ‫إىل‬ ‫ر‬ ‫يشت‬‫الحشو‬ ‫محدد‬ ‫حدد‬ .‫المناسب‬ 0 ‫ا‬ .‫واحدة‬ ‫اقتباس‬ ‫بعالمة‬ ‫مسبوق‬ ‫حرف‬ ‫أي‬‫أو‬ ،‫مسافة‬‫أو‬ ، ‫لحشو‬ . ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫هو‬ ‫بمسافات‬ 2 . ‫إىل‬ ‫بالنسبة‬ .‫األرقام‬ ‫عىل‬ ‫ر‬ ‫تأثت‬ ‫من‬ ‫السالسل‬ ‫عىل‬ ‫مختلف‬ ‫ر‬ ‫تأثت‬ ‫له‬ ‫هذا‬ .‫عالمة‬ ‫الطرح‬ ‫ر‬ ‫يجت‬ ،‫السالسل‬ ) - ( ‫لليسار‬ ‫مضبوطة‬ ‫السلسلة‬ ‫تكون‬ ‫أن‬ ‫عىل‬ ‫هنا‬ ) ‫ر‬ ‫لليمي‬ ‫ضبط‬‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ( ‫الجمع‬ ‫عالمة‬ ‫تفرض‬ ،‫لألرقام‬ ‫بالنسبة‬ ) + ( ‫الموجبة‬ ‫األرقام‬ ‫طباعة‬ ‫هنا‬ ‫بعالمة‬ ‫البادئة‬ ‫الجمع‬ 3 . ‫كانت‬ ‫إذا‬ .‫العنرص‬ ‫هذا‬ ‫عليها‬ ‫يحتوي‬ ‫أن‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األحرف‬ ‫لعدد‬ ‫األدن‬ ‫الحد‬ ‫ي‬ ‫ف‬ ‫يتحكم‬ ‫والحشو‬ ‫اإلشارة‬ ‫محدد‬ ‫فإن‬ ،‫األحرف‬ ‫من‬ ‫العدد‬ ‫هذا‬ ‫من‬ ‫أقل‬ ‫النتيجة‬ .‫الطول‬ ‫هذا‬ ‫تغطية‬ ‫كيفية‬
  • 355. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 355 4 . ‫عدد‬ ‫يحدد‬ ‫هذا‬ ‫ورقم‬ ‫نقطة‬ ‫من‬ ‫يتكون‬ ‫دقيق‬ ‫محدد‬ ،‫ية‬ ‫ر‬ ‫العش‬ ‫لألرقام‬ ‫بالنسبة‬ ‫تجاهل‬ ‫يتم‬ ،‫المضاعفة‬ ‫ر‬ ‫غت‬ ‫لألنواع‬ ‫بالنسبة‬ .‫عرضها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ية‬ ‫ر‬ ‫العش‬ ‫األرقام‬ .‫المحدد‬ ‫هذا‬ ‫النوع‬ ‫محددات‬ ‫النوع‬ ‫محدد‬ ‫ر‬ ‫يخت‬ printf() ‫ر‬ ‫تفست‬ ‫يحدد‬ ‫هذا‬ .‫استبدالها‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫نوع‬ ‫عن‬ ‫ال‬ ‫المعدالت‬ . ً ‫ا‬ ً ‫سابق‬ ‫مدرجة‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫مدرج‬ ‫هو‬ ‫كما‬،‫أنواع‬ ‫ثمانية‬ ‫هناك‬ : ‫المحدد‬ ‫المعن‬ % .‫المئوية‬ ‫النسبة‬ ‫عالمة‬ ‫يعرض‬ b . ‫ي‬ ‫ثنان‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ c ‫بهذه‬ ‫كحرف‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ .‫القيمة‬ d .‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ e ‫مضاعف‬ ‫المدخل‬ “double” ‫ي‬ ‫علىم‬ ‫تدوين‬ ‫ي‬ ‫ف‬ ‫عرضه‬ ‫ويتم‬ ” scientific notation .“ E ‫األحرف‬ ‫باستخدام‬ ‫ي‬ ‫علىم‬ ‫شكل‬ ‫ي‬ ‫ف‬ ‫عرضه‬ ‫ويتم‬ ‫مضاعف‬ ‫المدخل‬ .‫ة‬ ‫ر‬ ‫كبت‬‫ال‬ F ‫بالتنسيق‬ ‫النحو‬ ‫هذا‬ ‫عىل‬ ‫عرضه‬ ‫ويتم‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ ‫عن‬ ‫عبارة‬ ‫المدخل‬ . ‫ي‬ ‫الحاىل‬ ‫ي‬ ‫المحىل‬ F ‫النحو‬ ‫هذا‬ ‫عىل‬ ‫عرضه‬ ‫ويتم‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ ‫هو‬ ‫المدخل‬ ” such “
  • 356. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 356 ‫المحدد‬ ‫المعن‬ g ‫هو‬ ‫)كما‬ ‫ي‬ ‫العلىم‬ ‫بالتدوين‬ ‫إما‬ ‫عرضه‬ ‫ويتم‬ ‫مزدوج‬ ‫عن‬ ‫عبارة‬ ‫المدخل‬ ‫النوع‬ ‫محدد‬ ‫مع‬ ‫الحال‬ %e ‫مع‬ ‫الحال‬‫هو‬ ‫)كما‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫أو‬ ( ‫النوع‬ ‫محدد‬ %f .‫أقرص‬ ‫أيهما‬ ،( G ‫مع‬ ‫الحال‬ ‫هو‬ ‫)كما‬ ‫ي‬ ‫العلىم‬ ‫بالتدوين‬ ‫إما‬ ‫عرضه‬ ‫ويتم‬ ‫مضاعف‬ ‫المدخل‬ ‫النوع‬ ‫محدد‬ %E ‫محدد‬ ‫مع‬ ‫الحال‬ ‫هو‬ ‫)كما‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫أو‬ ( ‫النوع‬ %f .‫أقرص‬ ‫أيهما‬ ،( o ‫)األساس‬ ‫ي‬ ‫ثمان‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫هو‬ ‫المدخل‬ 8 .( s .‫النحو‬ ‫هذا‬ ‫عىل‬ ‫عرضه‬ ‫ويتم‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ‫المدخل‬ u ‫المدخل‬ .‫ي‬ ‫ر‬ ‫عش‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫إشارة‬ ‫بدون‬ ‫صحيح‬ ‫عدد‬ x ‫)األساس‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫سداش‬ ‫كرقم‬‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫المدخل‬ - 41 .‫ة‬ ‫ر‬ ‫الصغت‬ ‫األحرف‬ ‫استخدام‬ ‫يتم‬ ( ‫ي‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫سداش‬ ‫كرقم‬ ‫عرضه‬ ‫ويتم‬ ‫صحيح‬ ‫عدد‬ ‫المدخل‬ ( ‫األساس‬ - 16 ) ‫يتم‬ ‫استخدام‬ X .‫ة‬ ‫ر‬ ‫كبت‬‫ال‬ ‫األحرف‬
  • 357. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 357 :‫األمثلة‬ ‫بعض‬ ‫وهنا‬ ✓ : ‫ر‬ ‫يتي‬ ‫ر‬ ‫عش‬ ‫ر‬ ‫لتي‬‫مت‬ ‫ألقرب‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫رقم‬ printf('%.2f', 27.452); 27.45 ✓ :‫ي‬ ‫ر‬ ‫عش‬ ‫ي‬ ‫وسداش‬ ‫ي‬ ‫ر‬ ‫عش‬ ‫اج‬‫ر‬‫إخ‬ printf('The hex value of %d is %x', 214, 214); The hex value of 214 is d6 ✓ :‫ية‬ ‫ر‬ ‫عش‬ ‫منازل‬ ‫لثالث‬ ‫صحيح‬ ‫عدد‬ ‫ترك‬ printf('Bond. James Bond. %03d.', 7); Bond. James Bond. 007. ✓ :‫خ‬ ‫التاري‬ ‫تنسيق‬ printf('%02d/%02d/%04d', $month, $day, $year); 02/15/2005 ✓ ‫المئوية‬ ‫النسب‬ : printf('%.2f%% Complete', 2.1); 2.10% Complete
  • 358. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 358 ✓ :‫ية‬ ‫ر‬ ‫عش‬ ‫فاصلة‬ ‫رقم‬ ‫حشو‬ printf('You've spent $%5.2f so far', 4.1); You've spent $ 4.10 so far ‫الدالة‬ ‫تأخذ‬ sprintf() ‫مثل‬ ‫المدخالت‬ ‫نفس‬ printf() ‫السلسلة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ‫كنها‬ ‫ول‬ . ‫طباعتها‬ ‫من‬ ً ‫بدال‬ ‫المضمنة‬ : ً ‫ا‬ ً ‫الحق‬ ‫الستخدامها‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ف‬ ‫السلسلة‬ ‫حفظ‬ ‫هذا‬ ‫لك‬ ‫يتيح‬ $date = sprintf("%02d/%02d/%04d", $month, $day, $year); var_dump() ‫و‬ print_r() ( ‫الدالة‬ ‫تعرض‬ print_r( ‫بذكاء‬ ‫إىل‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ ‫تحويل‬ ‫من‬ ً ‫بدال‬ ،‫إليها‬ ‫تمريره‬ ‫يتم‬ ‫ما‬ ‫يفعل‬ ‫كما‬،‫سلسلة‬ echo ‫و‬ print() ‫تظهر‬ .‫واألرقام‬ ‫السالسل‬ ‫طباعة‬ ‫ببساطة‬ ‫يتم‬ . :‫بالمصفوفة‬ ‫مسبوقة‬ ،‫والقيم‬ ‫المفاتيح‬ ‫من‬ ‫ر‬ ‫قوسي‬ ‫ر‬ ‫بي‬ ‫كقوائم‬‫المصفوفات‬ ‫تقوم‬ ‫عندما‬ print_r() ‫الكلمة‬ ‫ترى‬ ، ً ‫ا‬ ً ‫كائن‬ Object ‫الكائن‬ ‫بخصائص‬ ‫متبوعة‬ ، ‫ي‬ ‫ر‬ ‫الت‬ :‫كمصفوفة‬‫معروضة‬ ‫تهيئتها‬ ‫تمت‬ ‫و‬ ‫المنطقية‬ ‫القيم‬ ‫عرض‬ ‫يتم‬ ‫ال‬ NULL ‫مفيد‬ ‫بشكل‬ ‫بواسطة‬ print_r() : print_r(true); // prints "1"; print_r(false); // prints ""; print_r(null); // prints "";
  • 359. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 359 ‫ضل‬ ُ ‫ف‬ُ‫ي‬ ،‫السبب‬ ‫لهذا‬ var_dump() ‫عىل‬ print_r() ‫تعرض‬ .‫التصحيح‬ ‫أجل‬ ‫من‬ ‫الدالة‬ var_dump() ‫قيمة‬ ‫أي‬ PHP :‫اءته‬‫ر‬‫ق‬ ‫ر‬ ‫للبش‬ ‫يمكن‬ ‫بتنسيق‬ var_dump(true); var_dump(false); var_dump(null); var_dump(array('name' => "Fred", 'age' => 53)); class P { var $name = 'Nat'; } $p = new P; var_dump($p); bool(true) bool(false) bool(null) array(2) { ["name"]=> string(4) "Fred" ["age"]=> int(35) } object(p)(1) { ["name"]=> string(3) "Nat" } ‫الدالة‬ ‫ترجع‬ strlen() :‫سلسلة‬ ‫ي‬ ‫ف‬ ‫األحرف‬ ‫عدد‬ $string = 'Hello, world'; $length = strlen($string); // $length is 12
  • 360. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 360 ‫التنظيف‬ ‫سالسل‬ ‫أو‬ ‫الملفات‬ ‫من‬ ‫عليها‬ ‫نحصل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫السالسل‬ ‫تنظيف‬ ‫يجب‬ ،‫األحيان‬ ‫من‬ ‫ر‬ ‫كثت‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫ي‬ ‫ف‬ ‫شائعتان‬ ‫مشكلتان‬ ‫هناك‬ .‫استخدامها‬ ‫من‬ ‫نتمكن‬ ‫أن‬ ‫قبل‬ ‫ر‬ ‫المستخدمي‬ ‫صحيحة‬ ‫ر‬ ‫غت‬ ‫ة‬ ‫ر‬ ‫كبت‬‫وحروف‬ ‫ورية‬‫ص‬ ‫ر‬ ‫غت‬ ‫بيضاء‬ ‫مسافة‬ ‫وجود‬ ‫وهما‬ ‫األولية‬ . ‫البيضاء‬ ‫المسافة‬ ‫إزالة‬ :‫التالية‬ ‫الدوال‬ ‫باستخدام‬ ‫الالحقة‬‫أو‬ ‫البادئة‬ ‫البيضاء‬ ‫المسافة‬ ‫الة‬‫ز‬‫إ‬ ‫يمكنك‬ trim() ‫و‬ ltrim() ‫و‬ rtrim() : $trimmed = trim(string [, charlist ]); $trimmed = ltrim(string [, charlist ]); $trimmed = rtrim(string [, charlist ]); ‫ترجع‬ trim() ” ‫السلسلة‬ ‫من‬ ‫نسخة‬ string ‫البداية‬ ‫من‬ ‫بيضاء‬ ‫مسافة‬ ‫الة‬‫ز‬‫إ‬ ‫مع‬ “ ‫والنهاية‬ . ltrim() ‫السلسلة‬ ‫بداية‬ ‫من‬ ‫فقط‬ ‫البيضاء‬ ‫المسافة‬ ‫يزيل‬ ‫لكنه‬ ،‫نفسه‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫الىس‬ ‫يفعل‬ rtrim() ‫مدخل‬. ‫السلسلة‬ ‫نهاية‬ ‫من‬ ‫فقط‬ ‫البيضاء‬ ‫المسافة‬ ‫يزيل‬ charlist ‫ا‬ ‫جميع‬ ‫تحدد‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ‫االختياري‬ ‫األحرف‬ ‫إعطاء‬ ‫يتم‬ .‫التها‬‫ز‬‫إ‬ ‫اد‬‫ر‬‫الم‬ ‫ألحرف‬ ‫الجدول‬ ‫ي‬ ‫ف‬ ‫الة‬‫ز‬‫لإل‬ ‫اضية‬ ‫ر‬ ‫االفت‬ : ‫ي‬ ‫التاىل‬
  • 361. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 361 ‫الحرف‬ ASCII ‫قيمة‬ ‫المعن‬ " " 0x20 ‫مسافة‬ "t" 0x09 ‫جدول‬ ‫مسافة‬ "n" 0x0A ‫جديد‬‫سطر‬ "r" 0x0D Carriage return "0" 0x00 NUL-byte "x0B" 0x0B Vertical tab :‫كمثال‬ $title = "Programming PHP n"; $str1 = ltrim($title); // $str1 is "Programming PHP n" $str2 = rtrim($title); // $str2 is " Programmin g PHP" $str3 = trim($title); // $str3 is "Programming PHP" ‫مدخل‬ ‫استخدم‬ ،‫جدول‬ ‫بمسافة‬ ‫المفصولة‬ ‫البيانات‬ ‫من‬ ‫سطر‬ ‫إىل‬ ‫بالنظر‬ charlist :‫الجدول‬ ‫مسافات‬ ‫حذف‬ ‫دون‬ ‫الالحقة‬‫أو‬ ‫البادئة‬ ‫البيضاء‬ ‫المسافة‬ ‫الة‬‫ز‬‫إل‬ $record = " FredtFlintstonet35tWilmat n"; $record = trim($record, " rn0x0B"); // $record is "FredtFlintstonet35tWilma"
  • 362. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 362 ‫الحالة‬ ‫تغيير‬ : ‫نصية‬ ‫سلسلة‬ ‫في‬ ‫االحرف‬ ‫تحتوي‬ PHP ‫يعمل‬ :‫السالسل‬ ‫حالة‬ ‫ر‬ ‫لتغيت‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫عىل‬ strtolower() ‫و‬ strtoupper() ‫عىل‬ ‫كامل‬ ‫ال‬ ‫ويعمل‬ ، ‫سالسل‬ ucfirst() ‫األول‬ ‫الحرف‬ ‫عىل‬ ‫فقط‬ ‫ويعمل‬ ،‫السلسلة‬ ‫من‬ ucwords() ‫تأخذ‬ .‫سلسلة‬ ‫ي‬ ‫ف‬ ‫كلمة‬‫كل‬‫من‬ ‫األول‬ ‫الحرف‬ ‫عىل‬ ‫تم‬ ،‫السلسلة‬ ‫تلك‬ ‫من‬ ‫نسخة‬ ‫بإرجاع‬ ‫وتقوم‬ ‫كمدخل‬‫عليها‬ ‫لتعمل‬ ‫سلسلة‬ ‫دالة‬ ‫كل‬ :‫فمثال‬ .‫مناسب‬ ‫بشكل‬ ‫ها‬ ‫ر‬ ‫تغيت‬ $string1 = "ANAS alpure"; $string2 = "midmar org"; print(strtolower($string1)); print(strtoupper($string1)); print(ucfirst($string2)); print(ucwords($string2)); /* anas alpure ANAS ALPURE Midmar org Midmar Org */ ‫حيث‬ ،"‫العنوان‬ ‫أحرف‬ ‫"حالة‬ ‫إىل‬ ‫تحويلها‬ ‫تريد‬ ‫مختلطة‬ ‫أحرف‬ ‫سلسلة‬ ‫لديك‬ ‫كان‬‫إذا‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫بحروف‬ ‫األحرف‬ ‫وبقية‬ ‫ة‬ ‫ر‬ ‫كبت‬‫بأحرف‬ ‫كلمة‬‫كل‬‫من‬ ‫األول‬ ‫الحرف‬ ‫يكون‬ ) ‫ولست‬ ‫البداية‬ ‫ي‬ ‫ف‬ ‫السلسلة‬ ‫حالة‬ ‫من‬ ً ‫ا‬ ً ‫متأكد‬ ( ‫من‬ ً ‫ا‬ ً ‫مزيج‬ ‫استخدم‬ ، strtolower() ‫و‬ ucwords() : print(ucwords(strtolower($string1))); Anas Alpure 070
  • 363. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 363 ‫والهروب‬ ‫الترميز‬ Encoding and Escaping ‫امج‬‫ر‬‫ب‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ PHP ‫صفحات‬ ‫مع‬ ً ‫ا‬ً‫غالب‬ ‫تتفاعل‬ HTML ‫الويب‬ ‫وعناوين‬ ( URLs ) .‫البيانات‬ ‫من‬ ‫األنواع‬ ‫هذه‬ ‫مع‬ ‫العمل‬ ‫ي‬ ‫ف‬ ‫لمساعدتك‬ ‫دوال‬ ‫فهناك‬، ‫البيانات‬ ‫وقواعد‬ HTML ‫كل‬ ‫البيانات‬ ‫قاعدة‬ ‫وأوامر‬ ‫الويب‬ ‫وعناوين‬ ‫يتطلب‬ ‫منها‬ ‫كل‬ ‫لكن‬ ،‫سالسل‬ ‫ها‬ ‫ها‬‫هروب‬ ‫ليتم‬ ‫مختلفة‬ ً ‫أحرفا‬ )‫(تجاوزها‬ ‫كتابة‬‫يجب‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫مختلفة‬ ‫بطرق‬ ‫الويب‬ ‫عنوان‬ ‫ي‬ ‫ف‬ ‫مسافة‬ ( URLs ) ‫بصيغة‬ 02 ‫من‬ ‫أصغر‬ ‫عالمة‬ ‫بينما‬ ،% ( < ) ‫ي‬ ‫ف‬ ‫ال‬ ‫مستندات‬ HTML : ‫ي‬ ‫كالتاىل‬ ‫تكتب‬ ‫أن‬ ‫يجب‬ &lt; ‫تحتوي‬ . PHP ‫من‬ ‫عدد‬ ‫عىل‬ ‫للت‬ ‫المضمنة‬ ‫الدوال‬ .‫ات‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬ ‫هذه‬ ‫وإىل‬ ‫من‬ ‫حويل‬ HTML ‫ي‬ ‫ف‬ ‫الخاصة‬ ‫األحرف‬ HTML ” ‫كيانات‬ ‫بواسطة‬ ‫تمثيلها‬ ‫يتم‬ entities )<( :‫مثل‬ “ &amp; (&) and &lt; . ‫دوال‬ ‫من‬ ‫نوعان‬ ‫هناك‬ PHP :‫كياناتها‬ ‫إىل‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫الخاصة‬ ‫األحرف‬ ‫تحول‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫أوسمة‬ ‫الة‬‫ز‬‫إل‬ ‫واحدة‬ HTML ” ‫الوصفية‬ ‫األوسمة‬ ‫اج‬‫ر‬‫الستخ‬ ‫واألخرى‬ meta tags “ .‫فقط‬ ‫الخاصة‬ ‫األحرف‬ ‫جميع‬ ‫اقتباس‬ ‫كيان‬ ‫الدالة‬ ‫تعمل‬ htmlentities() ‫معادالت‬ ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األحرف‬ ‫جميع‬ ‫ر‬ ‫تغيت‬ ‫عىل‬ ‫كيان‬ HTML ‫المكافئات‬ ‫تلك‬ ‫إىل‬ ( ‫المسافة‬ ‫حرف‬ ‫باستثناء‬ ) ‫عالمة‬ ‫ذلك‬ ‫يتضمن‬ . ‫األصغر‬ ‫من‬ ( < ) ‫من‬ ‫ر‬ ‫أكت‬ ‫وعالمة‬ ، ( > ) . )&(‫العطف‬ ‫وعالمة‬ ، ‫الدالة‬ ‫تأخذ‬ htmlentities() :‫مدخالت‬ ‫ثالث‬ ‫إىل‬ ‫يصل‬ ‫ما‬ $output = htmlentities(input, flags, encoding);
  • 364. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 364 ” ‫ر‬ ‫مت‬ ‫ر‬ ‫الت‬ ‫وسيط‬ ‫تحدد‬ encoding ‫اإلعداد‬ .‫تقديمها‬ ‫تم‬ ‫إذا‬ ،‫األحرف‬ ‫مجموعة‬ “ "‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ 8 - UTF ” ‫ات‬‫ر‬‫اإلشا‬ ‫وسيط‬ ‫تتحكم‬ ." flags ‫سيتم‬ ‫كان‬ ‫إذا‬ ‫ما‬ ‫ي‬ ‫ف‬ “ ‫يحول‬ .‫لها‬ ‫كيان‬ ‫نماذج‬ ‫إىل‬ ‫والمزدوجة‬ ‫المفردة‬ ‫االقتباس‬ ‫عالمات‬ ‫تحويل‬ ENT_COMPAT ) ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ( ‫يحول‬ ‫بينما‬ ،‫فقط‬ ‫المزدوجة‬ ‫االقتباس‬ ‫عالمات‬ ENT_QUOTES ‫بينما‬ ،‫االقتباس‬ ‫ي‬ ‫نوع‬ ‫كال‬ ‫ال‬ ‫يحول‬ ENT_NOQUOTES ً ‫ا‬ً‫أي‬ ‫االقتباس‬ ‫عالمات‬ ‫لتحويل‬ ‫خيار‬ ‫يوجد‬ ‫ال‬ .‫منهما‬ :‫فمثال‬ .‫فقط‬ ‫المفردة‬ $input =""Stop pulling my hair!" Jane's eyes flash ed.<p>"; //echo $input; $double = htmlentities($input); // &quot;Stop pulling my hair!&quot; Jane's eyes flas hed.&lt;p&gt; echo $double; echo '<br>'; $both = htmlentities($input, ENT_QUOTES); // &quot;Stop pulling my hair!&quot; Jane&#039;s eyes flashed.&lt;p&gt; echo $both; echo '<br>'; $neither = htmlentities($input, ENT_NOQUOTES); // "Stop pulling my hair!" Jane's eyes flashed.&lt;p& gt; echo $neither; echo '<br>';
  • 365. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 365 ‫كيانات‬ ‫اقتباس‬ ‫محددة‬ ‫بلغة‬ HTML ‫الدالة‬ ‫تقوم‬ htmlspecialchars() ‫الكيانات‬ ‫من‬ ‫ممكنة‬ ‫مجموعة‬‫أصغر‬ ‫بتحويل‬ ‫إلنشاء‬ HTML :‫التالية‬ ‫الكيانات‬ ‫تحويل‬ ‫يتم‬ .‫صالح‬ ❖ ‫العطف‬ (&) “Ampersands” ‫ل‬ ‫ر‬ ‫تغت‬ &amp; ❖ ” ‫مزدوجة‬ ‫تنصيص‬ ‫عالمات‬ Double quotes “ ) “ ( ‫ل‬ ‫ر‬ ‫تغت‬ &quot; ❖ ‫مفردة‬ ‫تنصيص‬ ‫عالمات‬ ) ‘ ( ; ‫ل‬ ‫ر‬ ‫تغت‬ 039 &# ❖ ‫من‬ ‫أقل‬ ‫عالمات‬ ) < ( ‫ل‬ ‫ر‬ ‫تغت‬ &lt; ❖ ‫من‬ ‫ر‬ ‫أكت‬ ‫عالمات‬ ) > ( ‫ل‬ ‫ر‬ ‫تغت‬ &gt; ‫فأنت‬ ،‫نموذج‬ ‫ي‬ ‫ف‬ ‫المستخدم‬ ‫أدخلها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫يعرض‬ ‫تطبيق‬ ‫لديك‬ ‫كان‬‫إذا‬ ‫إىل‬ ‫بحاجة‬ ‫تطبيق‬ ‫خالل‬ ‫من‬ ‫البيانات‬ ‫تلك‬ htmlspecialchars() ‫أو‬ ‫عرضها‬ ‫قبل‬ ‫مثل‬ ‫سلسلة‬ ‫المستخدم‬ ‫وأدخل‬ ،‫بذلك‬ ‫تقم‬ ‫لم‬ ‫إذا‬ .‫حفظها‬ "angle < 30" "‫أو‬ sturm & drang ‫ي‬ ‫ه‬ ‫الخاصة‬ ‫األحرف‬ ‫أن‬ ‫المتصفح‬ ‫فسيعتقد‬ ،" HTML ‫مما‬ ، .‫مشوهة‬ ‫صفحة‬ ‫إىل‬ ‫يؤدي‬ ‫مثل‬ htmlentities() ‫يستغرق‬ ‫أن‬ ‫يمكن‬ ، htmlspecialchars() ‫يصل‬ ‫ما‬ :‫مدخالت‬ ‫ثالث‬ ‫إىل‬ $output = htmlspecialchars(input, [flags,[encoding]]); ‫األعالم‬ ‫المدخالت‬ “flasgs” ” ‫ر‬ ‫مت‬ ‫ر‬ ‫والت‬ encoding ‫الذي‬ ‫المعت‬ ‫نفس‬ ‫لها‬ “ ‫مع‬ ‫تستخدمه‬ htmlentities() .
  • 366. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 366 ‫إزالة‬ ‫أوسمة‬ HTML ‫الدالة‬ ‫تزيل‬ strip_tags() ‫أوسمة‬ HTML :‫السلسلة‬ ‫من‬ $input = '<p>Howdy, &quot;Cowboy&quot;</p>'; $output = strip_tags($input); echo $output; // $output is 'Howdy, &quot;Cowboy&quot;' ‫ا‬ ً ‫ض‬ً‫أي‬ ‫يتم‬ .‫السلسلة‬ ‫ي‬ ‫ف‬ ‫كها‬ ‫ر‬ ‫لت‬ ‫األوسمة‬ ‫من‬ ‫سلسلة‬ ‫يحدد‬ ‫ي‬ ‫ثان‬ ‫مدخل‬ ‫الدالة‬ ‫تأخذ‬ ‫قد‬ :‫الثانية‬ ‫الوسيط‬ ‫ي‬ ‫ف‬ ‫المدرجة‬ ‫األوسمة‬ ‫إغالق‬ ‫بأشكال‬ ‫االحتفاظ‬ $input = 'The <b>bold</b> tags will <i>stay</i> <p>'; $output = strip_tags($input, '<b>'); echo $output; // $output is 'The <b>bold</b> tags will stay' ‫بواسطة‬ ‫المحفوظة‬ ‫األوسمة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫الخاصيات‬ ‫ر‬ ‫تغيت‬ ‫يتم‬ ‫ال‬ strip_tags() . $input = 'The <b style="color:red">bold</b> tag s will <i style="color:green">stay</i><p>'; $output = strip_tags($input, '<b>'); echo $output; // $output is 'The <b>bold</b> tags will stay'
  • 367. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 367 ‫الوصفية‬ ‫األوسمة‬ ‫استخراج‬ meta ‫الدالة‬ ‫ترجع‬ get_meta_tags() ‫لصفحة‬ ‫الوصفية‬ ‫األوسمة‬ ‫من‬ ‫مصفوفة‬ HTML ‫عنوان‬ ‫أو‬ ‫ي‬ ‫محىل‬ ‫ملف‬ ‫كاسم‬ ‫محددة‬ ، URL ‫وسم‬ ‫اسم‬ ‫يصبح‬ . meta ‫)الكلمات‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫المفتاح‬ ‫هو‬ (‫ذلك‬ ‫إىل‬ ‫وما‬ ،‫والوصف‬ ،‫والمؤلف‬ ،‫الرئيسية‬ ‫وسم‬ ‫محتوى‬ ‫ويصبح‬ meta :‫المقابلة‬ ‫القيمة‬ ‫ي‬ ‫ه‬ $metaTags = get_meta_tags('https://github.com/a nasalpure'); echo($metaTags['description']); :‫هو‬ ‫للدالة‬ ‫العام‬ ‫الشكل‬ $array = get_meta_tags(filename [, use_include_path]); ‫قيمة‬ ‫مرر‬ true ‫ل‬ use_include_path ‫ل‬ ‫للسماح‬ PHP ‫الملف‬ ‫فتح‬ ‫بمحاولة‬ . ‫ي‬ ‫القياش‬ ‫ر‬ ‫التضمي‬‫مسار‬ ‫باستخدام‬
  • 368. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 368 ‫عناوين‬ URL ‫يوفر‬ PHP ‫ر‬ ‫ترمت‬ ‫وإىل‬ ‫من‬ ‫للتحويل‬ ‫دوال‬ URL ‫عناوين‬ ‫بإنشاء‬ ‫لك‬ ‫يسمح‬ ‫مما‬ ، URL ‫ر‬ ‫ترمت‬ ‫من‬ ‫نوعان‬ ‫الواقع‬ ‫ي‬ ‫ف‬ ‫يوجد‬ .‫ها‬ ‫ر‬ ‫تشفت‬ ‫وفك‬ URL ‫مع‬ ‫تعاملهما‬ ‫كيفية‬ ‫ي‬ ‫ف‬ ‫يختلفان‬ .‫المسافات‬ - ‫األول‬ ( ‫بواسطة‬ ‫المحدد‬ RFC 3986 ) ‫ر‬ ‫غت‬ ‫حرف‬ ‫مجرد‬ ‫أنها‬ ‫عىل‬ ‫المسافة‬ ‫يعامل‬ ‫عنوان‬ ‫ي‬ ‫ف‬ ‫آخر‬ ‫ي‬ ‫قانون‬ URL ‫ك‬ ‫ها‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫بت‬ ‫ويقوم‬ 02 .% - ‫الثانية‬ ) application/x-www-form-urlencoded ( ‫ترم‬ + ‫ك‬ ‫مسافة‬ ‫ر‬ ‫ت‬ .‫االستعالم‬ ‫سالسل‬ ‫بناء‬ ‫ي‬ ‫ف‬ ‫وتستخدم‬ ‫الحظ‬ ‫تريد‬ ‫ال‬ ‫أنك‬ ‫عنوان‬ ‫عىل‬ ‫الدوال‬ ‫هذه‬ ‫استخدام‬ URL ‫مثل‬ ،‫كامل‬ http://www.example.com/hello ‫ط‬ ‫ر‬ ‫والش‬ ‫ر‬ ‫النقطتي‬ ‫ستتخط‬ ‫إنها‬ ‫حيث‬ ، :‫إلنتاج‬ http%3A%2F%2Fwww.example.com%2Fhello ‫ر‬ ‫بتشفت‬ ‫قم‬ ‫عناوين‬ URL ‫فقط‬ ‫الجزئية‬ ( ‫بعد‬ ‫الجزء‬ http://www.example.com/ ) . ً ‫ا‬ ً ‫الحق‬ ‫المجال‬ ‫واسم‬ ‫وتوكول‬ ‫ر‬ ‫الت‬ ‫وإضافة‬
  • 369. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 369 ‫ترميز‬ RFC 3986 ‫ترميزه‬ ‫وفك‬ ‫ر‬ ‫للتشفت‬ ‫استخدم‬ rawurlencode() : $output = rawurlencode(input); ‫بأحرف‬ ‫نسخة‬ ‫بإرجاع‬ ‫وتقوم‬ ‫سلسلة‬ ‫الدالة‬ ‫هذه‬ ‫تأخذ‬ URL ‫ي‬ ‫ف‬ ‫مشفرة‬ ‫قانونية‬ ‫ر‬ ‫غت‬ ‫اصطالح‬ %dd . ‫ديناميكيا‬ ‫ي‬ ‫ر‬ ‫تشعت‬ ‫نص‬ ‫اجع‬‫ر‬‫م‬ ‫بإنشاء‬ ‫تقوم‬ ‫كنت‬‫إذا‬ ‫للروابط‬ ‫فستحتاج‬ ،‫ما‬ ‫صفحة‬ ‫ي‬ ‫ف‬ ‫باستخدام‬ ‫تحويلها‬ ‫إىل‬ :rawurlencode() $name = "Programming PHP"; $output = rawurlencode($name); echo "http://localhost/{$output}"; //http://localhost/Programming%20PHP ‫الدالة‬ ‫تقوم‬ rawurldecode() ‫بعنوان‬ ‫المشفرة‬ ‫السالسل‬ ‫ر‬ ‫تشفت‬ ‫بفك‬ URL : $encoded = 'Programming%20PHP'; echo rawurldecode($encoded); //Programming PHP ‫ترميز‬ application/x-www-form-urlencoded ‫دوال‬ ‫تختلف‬ urlencode() ‫و‬ urldecode() ‫حيث‬ ‫من‬ ‫فقط‬ ‫األولية‬ ‫اتها‬ ‫ر‬ ‫نظت‬ ‫عن‬ ‫جمع‬ ‫كعالمات‬ ‫المسافات‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫بت‬ ‫تقوم‬ ‫أنها‬ ( + ) ‫التسلسل‬ ‫من‬ ً ‫بدال‬ 02 ‫هو‬ ‫هذا‬ .%
  • 370. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 370 ‫بناء‬ ‫تنسيق‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫وقيم‬ ‫االستعالم‬ ‫سالسل‬ cookies . HTML . ‫تقوم‬ PHP ً‫تلقائي‬ ،‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫وقيم‬ ‫االستعالم‬ ‫سالسل‬ ‫ر‬ ‫تشفت‬ ‫بفك‬ ً ‫ا‬ .‫القيم‬ ‫هذه‬ ‫لمعالجة‬ ‫الدوال‬ ‫هذه‬ ‫استخدام‬ ‫إىل‬ ‫تحتاج‬ ‫ال‬ ‫لذلك‬ $baseUrl = 'http://www.google.com/q='; $query = 'PHP tutorial'; $url = $baseUrl . urlencode($query); echo $url; //http://www.google.com/q=PHP+tutorial SQL ‫استعالمات‬ ‫ي‬ ‫ف‬ ‫الحرفية‬ ‫القيم‬ ‫تجاوز‬ ‫يتم‬ ‫أن‬ ‫البيانات‬ ‫قواعد‬ ‫أنظمة‬ ‫معظم‬ ‫تتطلب‬ SQL ‫ر‬ ‫ترمت‬ ‫نظام‬ . SQL ً ‫ا‬ ً ‫جد‬ ‫بسيط‬ - ‫المفردة‬ ‫االقتباس‬ ‫عالمات‬ َ ‫ق‬َ‫ب‬ ُ ‫تس‬ ‫أن‬ ‫يجب‬ ‫و‬ ‫المزدوجة‬ ‫االقتباس‬ ‫وعالمات‬ NUL ‫مائلة‬ ‫طة‬ ‫ر‬ ‫بش‬ ‫للخلف‬ ‫المائلة‬ ‫طات‬ ‫ر‬ ‫والش‬ ‫دالة‬ ‫تضيف‬ .‫للخلف‬ addslashes() ‫الدالة‬ ‫وتقوم‬، ‫المائلة‬ ‫الخطوط‬ ‫هذه‬ stripslashes() :‫التها‬‫ز‬‫بإ‬ $str="Hello PHP!"; echo "Your String is: ".$str; echo "<br>"; echo "By using addslashes() Function: ".addslas hes($str); echo "<br>"; echo "By using stripcslashes() Function: ".stripcsl ashes($str);
  • 371. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 371 ‫السالسل‬ ‫مقارنة‬ ‫دقيقة‬ ‫مقارنات‬ ‫ي‬ ‫ف‬ ‫العوامل‬ ‫هذه‬ ‫تختلف‬ .=== ‫و‬ == ‫عوامل‬ ‫مع‬ ‫للمساواة‬ ‫ر‬ ‫سلسلتي‬ ‫مقارنة‬ ‫يمكنك‬ ‫ر‬ ‫غت‬ ‫المعامالت‬ ‫مع‬ ‫تعاملها‬ ‫كيفية‬ )‫النصية(سالسل‬ ‫معامالت‬ == ‫عامل‬ ‫يحول‬. ‫تساوي‬ ‫عن‬ ‫يبلغ‬ ‫لذلك‬ ،‫أرقام‬ ‫إىل‬ ‫السلسلة‬ 7 "‫و‬ 7 ." ‫تساوي‬ ‫عن‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫لغ‬ُ‫ب‬ُ‫ي‬ ‫فإنه‬ ،‫أرقام‬ ‫إىل‬ ‫السالسل‬ ‫تحويل‬ ‫لقواعد‬ ً ‫ا‬ً ‫نظر‬ 7 ‫و‬ "7b" ‫عامل‬ . ‫ويعيد‬ ،‫يحول‬ ‫ال‬ === False :‫المدخالت‬ ‫بيانات‬ ‫أنواع‬ ‫اختلفت‬ ‫إذا‬ $o1 = 7; $o2 = "7"; if($o1 == $o2) { echo("== returns true<br>"); } if ($o1 === $o2) { echo("=== returns true<br>"); } ‫المقارنة‬ ‫عوامل‬ ( <, <=, >, >= ) :‫النصية‬ ‫السالسل‬ ‫عىل‬ ‫أيضا‬ ‫تعمل‬ ‫تكون‬ ‫عندما‬ ‫إىل‬ ‫األخر‬ ‫المدخل‬ ‫تحويل‬ ‫يتم‬ ،‫رقم‬ ‫عن‬ ‫عبارة‬ ‫المقارنة‬ ‫عامل‬ ‫مدخالت‬ ‫إحدى‬ .‫رقم‬ ‫لزم‬ ‫إذا‬ ‫سالسل‬ ‫إىل‬ ‫األرقام‬ ‫تحويل‬ ‫مع‬ ،‫كسالسل‬ ‫ح‬ ‫ي‬‫ص‬ ‫بشكل‬ ‫ر‬ ‫سلسلتي‬ ‫لمقارنة‬ ‫الدالة‬ ‫استخدم‬ ،‫األمر‬ :strcmp() $relationship = strcmp(string_1, string_2);
  • 372. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 372 ‫االحرف‬ ‫لحالة‬ ‫حساسة‬ ‫الدالة‬ ‫هذه‬ ‫من‬ ‫أقل‬ ً ‫ا‬ ً ‫عدد‬ ‫الدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ 0 ‫كانت‬‫إذا‬ string_1 ‫اقل‬ ‫من‬ string_2 ‫من‬ ‫ر‬ ‫أكت‬ ‫أو‬ ، 0 ‫كانت‬‫إذا‬ string_2 ‫ر‬ ‫اكت‬ ‫من‬ string_1 ‫أو‬ ، 0 :‫نفسها‬ ‫ي‬ ‫ه‬ ‫كانت‬‫إذا‬ 1 ‫ي‬ ‫ف‬ ‫االختالف‬ strcmp() ‫هو‬ strcasecmp() ‫إىل‬ ‫السالسل‬ ‫يحول‬ ‫والذي‬ ، ‫أحرف‬ . ‫مقارنتها‬ ‫قبل‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫ب‬ ‫الخاصة‬ ‫نفسها‬ ‫ي‬ ‫ه‬ ‫به‬ ‫الخاصة‬ ‫اإلرجاع‬ ‫وقيم‬ ‫المدخالت‬ strcmp() : strcasecmp("ANAS", "aNas"); // 0 ‫من‬ ‫فقط‬ ‫األوىل‬ ‫القليلة‬ ‫األحرف‬ ‫مقارنة‬ ‫وهو‬ ‫السلسلة‬ ‫مقارنة‬ ‫ي‬ ‫ف‬ ‫آخر‬ ‫اختالف‬ ‫هناك‬ ‫الدالتان‬ ‫تأخذ‬ .‫السلسلة‬ strncmp() ‫و‬ strncasecmp() ‫العدد‬ ، ‫ي‬ ‫إضاف‬ ‫مدخل‬ :‫للمقارنات‬ ‫استخدامها‬ ‫اد‬‫ر‬‫الم‬ ‫لألحرف‬ ‫ي‬ ‫األوىل‬ $relationship = strncmp(string_1, string_2, len); $relationship = strncasecmp(string_1, string_2, len); ‫التقريبية‬ ‫المساواة‬ ‫توفر‬ PHP ‫كانت‬‫إذا‬ ‫ما‬ ‫اختبار‬ ‫لك‬ ‫تتيح‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ً ‫ا‬ً‫تقريب‬ ‫متساويتان‬ ‫سلسلتان‬ ‫هناك‬ — ‫الدالة‬ ‫ترجع‬ similar_text() ‫المدخل‬. ‫السلسلة‬ ‫مدخل‬ ‫ر‬ ‫بي‬ ‫كة‬ ‫ر‬ ‫المشت‬ ‫األحرف‬ ‫عدد‬ ‫تخ‬ ‫فيه‬ ‫يتم‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ه‬ ،‫وجدت‬ ‫إن‬ ،‫الثالثة‬ :‫مئوية‬ ‫كنسبة‬‫ك‬ ‫ر‬ ‫المشت‬ ‫القاسم‬ ‫زين‬
  • 373. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 373 $string1 = "Rasmus Lerdorf"; $string2 = "Razmus Lehrdorf"; $common = similar_text($string1, $string2, $per cent); printf("They have %d chars in common (%.2f%%)." , $common, $percent); //They have 13 chars in common (89.66%). ‫السالسل‬ ‫في‬ ‫والبحث‬ ‫التالعب‬ PHP ‫الدوال‬. ‫السالسل‬ ‫مع‬ ‫للعمل‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫لديها‬ ‫للبحث‬ ً ‫ا‬ ً‫استخدام‬ ‫ر‬ ‫األكت‬ ‫السلسلة‬ ‫لوصف‬ ‫النمطية‬ ‫ات‬ ‫ر‬ ‫التعبت‬ ‫تستخدم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫تلك‬ ‫ي‬ ‫ه‬ ‫وتعديلها‬ ‫السالسل‬ ‫عن‬ .‫المعنية‬ Substrings ‫السالسل‬ ‫الجزئية‬ ‫ي‬ ‫ف‬ ‫بها‬ ‫تهتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫مكان‬ ‫تعرف‬ ‫كنت‬ ‫إذا‬ ‫ال‬ ‫فيمكنك‬ ، ‫سلسلة‬ ‫اقتطاعها‬ ‫الدالة‬ ‫باستخدام‬ substr() : $piece = substr(string, start [, length ]); ” ‫البداية‬ ‫مدخل‬ start ‫الموضع‬‫هو‬ “ ( index ) ” ‫السلسلة‬ ‫ي‬ ‫ف‬ string ‫عنده‬‫يبدأ‬ ‫الذي‬ “ ‫الرقم‬ ‫ر‬ ‫يشت‬ ‫حيث‬ ،‫النسخ‬ 0 ” ‫الطول‬ ‫مدخل‬. ‫السلسلة‬ ‫بداية‬ ‫إىل‬ length ‫عدد‬ ‫هو‬ “ ‫نسخها‬ ‫اد‬‫ر‬‫الم‬ ‫األحرف‬ ) ‫السلسلة‬ ‫نهاية‬ ‫ر‬ ‫حت‬ ‫النسخ‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ( :‫فمثال‬ .
  • 374. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 374 $str = "welcome at midmar"; $str1 = substr($str, 11); $str2 = substr($str, 11, 6); echo $str1;// midmar echo $str2;// midmar ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬‫ر‬‫الم‬ ‫عدد‬ ‫لمعرفة‬ ‫تتواجد‬ ‫استخدم‬ ، ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫داخل‬ ‫أصغر‬ ‫سلسلة‬ ‫فيها‬ substr_count() : $number = substr_count(big_string, small_string); $str = "we are learning,we ara great"; echo substr_count($str,'we');//2 ‫الدالة‬ ‫تسمح‬ substr_replace() ‫عديدة‬ ‫بأنواع‬ :‫السلسلة‬ ‫تعديالت‬ ‫من‬ $string = substr_replace(original, new, start [, length ]); ‫الجزء‬ ‫الدالة‬ ‫تستبدل‬ original ‫ب‬ ‫إليه‬ ‫المشار‬ start ‫وقيم‬ length ‫بالسلسلة‬ new ‫فإن‬ ،‫ابع‬‫ر‬ ‫مدخل‬ ‫إعطاء‬ ‫يتم‬ ‫لم‬‫إذا‬ . substr_replace() ‫من‬ ‫النص‬ ‫يزيل‬ start :‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫السلسلة‬ ‫نهاية‬ ‫إىل‬ $greeting = "good morning citizen"; $farewell = substr_replace($greeting, "bye", 5, 7); echo $farewell;// good bye citizen
  • 375. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 375 ‫ر‬ ‫يشت‬ length ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫السلسلة‬ ‫نهاية‬ ‫من‬ ‫األحرف‬ ‫عدد‬ ‫إىل‬ ‫السالب‬ :‫لحذف‬ ‫إيقاف‬ ‫عندها‬ $greeting = "good morning citizen"; $greeting = substr_replace($greeting, "", -8); echo $greeting;// good morning ‫السالسل‬ ‫دوال‬ ‫اخرى‬ ‫الدالة‬ ‫تأخذ‬ strrev() :‫منها‬ ‫معكوسة‬ ‫نسخة‬ ‫وتعيد‬ ‫سلسلة‬ $string = strrev(string); $greeting = "good morning citizen"; $greeting = strrev($greeting); echo $greeting;// nezitic gninrom doog ‫الدالة‬ ‫تأخذ‬ str_repeat() ” ‫سلسلة‬ string “ ” ً ‫ا‬ ً ‫وعدد‬ count ‫سلسلة‬ ‫وتعيد‬ “ ” ‫عدد‬ ‫من‬ ‫تتكون‬ ‫جديدة‬ count ” ‫سلسلة‬ ‫ار‬‫ر‬‫تك‬ ‫ات‬‫ر‬‫“م‬ string :‫المدخل‬ “ $repeated = str_repeat(string, count); :‫مموجة‬ ‫أفقية‬ ‫قاعدة‬ ‫لبناء‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ echo str_repeat('Hi ', 5); //Hi Hi Hi Hi Hi ‫دالة‬ ‫تقوم‬ str_pad() ‫السلسلة‬ ‫تحديد‬ ‫يمكنك‬ ، ً ‫ا‬ً‫اختياري‬ .‫أخرى‬ ‫مع‬ ‫سلسلة‬ ‫بربط‬ :‫كليهما‬‫أو‬ ‫ر‬ ‫اليمي‬‫أو‬ ‫اليسار‬ ‫عىل‬ ‫ستضعها‬ ‫كنت‬‫إذا‬ ‫وما‬ ،‫بطها‬ ‫ر‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬
  • 376. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 376 function str_pad( $input, $pad_length, $pad_string = " ", $pad_type = STR_PAD_RIGHT ) { } :‫بمسافات‬ ‫ر‬ ‫اليمي‬ ‫عىل‬ ‫ربط‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ $string = str_pad('hello', 20,'.'); echo "{$string}:world"; //hello...............: world
  • 377. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 377 Decomposing a String ‫سلسلة‬ ‫تحليل‬ ‫توفر‬ PHP ‫تيب‬ ‫ر‬ ‫بت‬ .‫أصغر‬ ‫مكونات‬ ‫إىل‬ ‫سلسلة‬ ‫بتقسيم‬ ‫لك‬ ‫للسماح‬ ‫الدوال‬ ‫من‬‫العديد‬ ، ‫التعقيد‬ ‫من‬ ‫ايد‬ ‫ر‬ ‫مت‬ .sscanf() ‫و‬ strtok() ‫و‬ explode() : ‫ي‬ ‫ه‬ EXPLODING AND IMPLODING ‫عىل‬ .‫القيم‬ ‫من‬ ‫مجموعة‬ ‫إىل‬ ‫تقسيمها‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫كسالسل‬‫البيانات‬ ‫تصل‬ ‫ما‬ ً ‫ا‬ً‫غالب‬ ‫مثل‬ ‫سلسلة‬ ‫من‬ ‫بفواصل‬ ‫المفصولة‬ ‫الحقول‬ ‫تقسيم‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫قد‬ ،‫المثال‬ ‫سبيل‬ "anas,28,alpure" ‫دالة‬ ‫استخدم‬ ،‫الحاالت‬ ‫هذه‬ ‫ي‬ ‫ف‬ explode() : $array = explode(separator, string [, limit]); ” ‫الفاصل‬ ،‫األول‬ ‫المدخل‬ separator ‫عىل‬ ‫تحتوي‬ ‫سلسلة‬ ‫عن‬ ‫عبارة‬ ،“ ‫ال‬ ‫فاصل‬ ‫ة‬ ” ‫نصية‬ ‫سلسلة‬ ، ‫ي‬ ‫الثان‬ ‫المدخل‬. string ‫تقسيمها‬ ‫اد‬‫ر‬‫الم‬ ‫السلسلة‬ ‫ي‬ ‫ه‬ ،“ ” ‫الحد‬ ،‫االختياري‬ ‫الثالث‬ ‫المدخل‬. limit ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫القيم‬ ‫لعدد‬ ‫األقص‬ ‫الحد‬ ‫ي‬ ‫ه‬ ،“ ‫الع‬ ‫فإن‬ ،‫الحد‬ ‫إىل‬ ‫الوصول‬ ‫تم‬ ‫إذا‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫إرجاعها‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫األخت‬ ‫نرص‬ :‫السلسلة‬ ‫ي‬ ‫ر‬ ‫باف‬ ‫عىل‬ ‫يحتوي‬ $input = 'Anas,28,Alpure'; $fields = explode(',', $input); print_r($fields); //Array ( [0] => Anas [1] => 28 [2] => Alpure ) $fields = explode(',', $input, 2); print_r($fields); //Array ( [0] => Anas [1] => 28,Alpure )
  • 378. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 378 ‫دالة‬ ‫تعمل‬ implode() ‫من‬ ً ‫ا‬ ً‫تمام‬ ‫العكس‬ ‫عىل‬ explode() - ‫سلسلة‬ ‫ر‬ ‫تنىس‬ ‫ي‬ ‫فه‬ :‫األصغر‬ ‫السالسل‬ ‫من‬ ‫مجموعة‬ ‫من‬ ‫ة‬ ‫ر‬ ‫كبت‬ $string = implode(separator, array); ” ‫الفاصل‬ ،‫األول‬ ‫المدخل‬ separator ‫عناص‬ ‫ر‬ ‫بي‬ ‫وضعها‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫السلسلة‬‫هو‬ ،“ ‫المدخل‬ ” ‫المصفوفة‬ ، ‫ي‬ ‫الثان‬ array ‫المفصولة‬ ‫البسيطة‬ ‫القيمة‬ ‫سلسلة‬ ‫بناء‬ ‫إلعادة‬ .“ :‫ببساطة‬ ‫قل‬ ،‫بفاصلة‬ $fields = array('Anas', '28', 'Alpure'); $string = implode(',', $fields); echo $string;//Anas,28,Alpure ‫دالة‬ join() ‫ل‬ ‫مستعار‬ ‫اسم‬ ‫ي‬ ‫ه‬ implode() . ‫في‬ ‫البحث‬ ‫دوال‬ ‫السالسل‬ ‫هناك‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫عىل‬ ‫تبحث‬ ‫ي‬ ‫ر‬ ‫الت‬ . ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫داخل‬ ‫حرف‬‫أو‬ ‫سلسلة‬ ‫ترجع‬ ‫السالسل‬ ‫عن‬ ‫البحث‬ ‫دوال‬ ‫جميع‬ false ‫السلسلة‬ ‫عىل‬‫العثور‬ ‫من‬ ‫تتمكن‬ ‫لم‬ ‫إذا‬ ‫حددتها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الفرعية‬ ‫ترجع‬ ‫الداالت‬ ‫فإن‬ ،‫السلسلة‬ ‫بداية‬ ‫ي‬ ‫ف‬ ‫تحدث‬ ‫الفرعية‬ ‫السلسلة‬ ‫كانت‬‫إذا‬ 0 ‫ألن‬ ً ‫ا‬ً ‫نظر‬ . false ‫بالرقم‬ ‫ي‬ ‫ر‬ ‫يلق‬ 0 ‫عند‬ === ‫ب‬ ‫اإلرجاع‬ ‫قيمة‬ ‫بمقارنة‬ ً ‫ا‬ ً‫دائم‬ ‫فقم‬ ، ‫اال‬ :‫ختبار‬ if ($pos === false) { // wasn't found } else { // was found, $pos is offset into string }
  • 379. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 379 ‫األماكن‬ ‫بإرجاع‬ ‫البحث‬ ‫عمليات‬ ‫الدالة‬ ‫تبحث‬ strpos() : ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫نصية‬ ‫لسلسلة‬ ‫األول‬ ‫التواجد‬ ‫عن‬ $position = strpos(large_string, small_string); ‫فإن‬ ،‫ة‬ ‫ر‬ ‫الصغت‬ ‫السلسلة‬ ‫عىل‬‫العثور‬ ‫يتم‬ ‫لم‬ ‫إذا‬ strpos() ‫ترجع‬ false . ‫الدالة‬ ‫تبحث‬ strrpos() ‫المدخالت‬ ‫نفس‬ ‫يأخذ‬ .‫سلسلة‬ ‫ي‬ ‫ف‬ ‫لحرف‬ ‫تواجد‬ ‫آخر‬ ‫عن‬ ‫القيمة‬ ‫نوع‬ ‫نفس‬ ‫ويرجع‬ .strpos() ‫مثل‬ $str = "Hi,World,Hi,everyone"; $pos = strpos($str, "Hi"); $posr = strrpos($str, "Hi"); echo $pos;//0 echo $posr;//9 ‫السلسلة‬ ‫بقية‬ ‫ترجع‬ ‫التي‬ ‫البحث‬ ‫عمليات‬ ‫الدالة‬ ‫تبحث‬ strstr() ‫من‬ ‫وترجع‬ ‫ر‬ ‫أكت‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ‫ة‬ ‫ر‬ ‫صغت‬ ‫لسلسلة‬ ‫ظهور‬ ‫أول‬ ‫عن‬ . ‫ة‬ ‫ر‬ ‫الصغت‬ ‫السلسلة‬ ‫تلك‬ :‫المثال‬ ‫سبيل‬ ‫عىل‬ $str = "Hi,World,Hi,everyone"; $rest = strstr($str, ","); echo $rest;//,World,Hi,everyone
  • 380. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 380 ‫ي‬ ‫ف‬ ‫االختالفات‬ strstr() : ‫ي‬ ‫ه‬ stristr() ‫األحرف‬ ‫لحالة‬ ‫حساس‬ ‫ر‬ ‫غت‬ strchr() ‫ل‬ ‫مستعار‬ ‫اسم‬ ‫هو‬ strstr() ‫مع‬ ‫الحال‬ ‫هو‬ ‫كما‬ strrpos() ‫يبحث‬ ، strrchr() ‫عن‬ ‫ولكن‬ ،‫السلسلة‬ ‫ي‬ ‫ف‬ ‫للخلف‬ .‫كاملة‬‫سلسلة‬ ‫عن‬ ‫وليس‬ ،‫فقط‬ ‫واحد‬ ‫حرف‬ ‫المواقع‬ ‫عناوين‬ ‫فك‬ DECOMPOSING URLS ‫الدالة‬ ‫ترجع‬ parse_url() ‫عنوان‬ ‫مكونات‬ ‫من‬ ‫مجموعة‬ URL : $array = parse_url(url); $parts = parse_url("http://me:secret@example.co m/cgibin/board?user=fred"); print_r($parts); /* Array ( [scheme] => http [host] => example.com [user] => me [pass] => secret [path] => /cgibin/board [query] => user=fred ) */ ‫و‬ ‫ي‬ ‫ه‬ ‫للتجزئة‬ ‫المحتملة‬ ‫المفاتيح‬ host ‫و‬ port ‫و‬ user ‫و‬ pass ‫و‬ path ‫و‬ query ‫و‬ fragment .
  • 381. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 381 ‫المصوفات‬ array ‫المفتاح‬ ‫أزواج‬ ‫من‬ ‫مرتبة‬ ‫كمجموعة‬ ‫المنظمة‬ ‫البيانات‬ ‫قيم‬ ‫من‬ ‫مجموعة‬ ‫ي‬ ‫ه‬ ” ‫والقيمة‬ key-value ‫تقترص‬ ‫ال‬.“ ‫المصفوفات‬ ‫قيم‬ .‫البيانات‬ ‫من‬ ‫واحد‬ ‫نوع‬ ‫عىل‬ ‫باإلضافة‬ .‫ذلك‬ ‫إىل‬ ‫وما‬ ‫منطقية‬ ‫وقيم‬ ‫صحيحة‬ ‫وأعداد‬ ‫سالسل‬ ‫عىل‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ .‫أخرى‬ ‫مصفوفات‬ ‫عىل‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المصفوفات‬ ‫تحتوي‬ ‫أن‬ ‫يمكن‬ ،‫ذلك‬ ‫إىل‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المضمنة‬ ‫الدوال‬ ‫من‬ ‫العديد‬ ‫فهناك‬ ،‫ومفيدة‬ ً ‫ا‬ ً ‫جد‬ ‫شائعة‬ ‫المصفوفات‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ ‫ي‬ ‫ف‬ ‫معها‬ ‫تعمل‬ PHP . ‫الم‬ ‫المفهرسة‬ ‫صفوفات‬ ‫و‬ ‫ال‬ ‫المصفوفة‬ ‫م‬ ‫ترابطة‬ ‫ي‬ ‫ف‬ ‫المصفوفات‬ ‫من‬ ‫نوعان‬ ‫يوجد‬ PHP ” ‫مفهرسة‬ : indexed ‫ابطية‬‫ر‬‫وت‬ “ ” associative ‫بالرقم‬ ‫تبدأ‬ ‫صحيحة‬ ‫أعداد‬ ‫ي‬ ‫ه‬ ‫المفهرسة‬ ‫المصفوفة‬ ‫مفاتيح‬ .“ 0 . ‫تحتوي‬ .‫موقعها‬ ‫حسب‬ ‫األشياء‬ ‫تحدد‬ ‫عندما‬ ‫المفهرسة‬ ‫المصفوفات‬ ‫تستخدم‬ ‫عىل‬ ‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفات‬ ‫من‬ ‫المكونة‬ ‫الجداول‬ ‫مثل‬ ‫وتترصف‬ ‫كمفاتيح‬ ‫سالسل‬ .‫عمودين‬ .‫القيمة‬ ‫إىل‬ ‫للوصول‬ ‫يستخدم‬ ‫والذي‬ ،‫المفتاح‬ ‫هو‬ ‫األول‬ ‫العمود‬ ‫تقوم‬ PHP ‫ابطية‬‫ر‬‫ت‬ ‫كمصفوفات‬ ً ‫ا‬ً‫داخلي‬ ‫المصفوفات‬ ‫جميع‬ ‫بتخزين‬ . ‫الوحيد‬ ‫الفرق‬ ‫هو‬ ‫والمفهرسة‬ ‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفات‬ ‫ر‬ ‫بي‬ ‫نوع‬ ‫تكون‬ ، ‫ر‬ ‫الحالتي‬ ‫كلتا‬ ‫ي‬ ‫ف‬ .‫المفاتيح‬ ‫ا‬ ‫بغض‬ ،‫المفتاح‬ ‫بنفس‬ ‫ان‬‫رص‬‫عن‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫ال‬ ،‫آخر‬ ‫بمعت‬ .‫فريدة‬ ‫لمفاتيح‬ . ً ‫ا‬ ً ‫صحيح‬ ً ‫ا‬ ً ‫عدد‬‫أو‬ ‫سلسلة‬ ‫المفتاح‬ ‫كان‬‫إذا‬ ‫عما‬‫النظر‬
  • 382. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 382 ‫مصفوفات‬ ‫تحتوي‬ PHP ‫المفاتيح‬ ‫عن‬ ً ‫مستقال‬ ‫يكون‬ ‫لعناصها‬ ‫ي‬ ‫داخىل‬ ‫ترتيب‬ ‫عىل‬ ‫استخدامها‬ ‫يمكنك‬ ‫دوال‬ ‫وهناك‬ ،‫والقيم‬ ‫عىل‬ ‫للمرور‬ ‫ع‬ ‫بناء‬ ‫المصفوفات‬ ‫هذا‬ ‫ىل‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫اج‬‫ر‬‫إد‬ ‫فيه‬ ‫تم‬ ‫الذي‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫هو‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ . ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫أو‬ ‫المفاتيح‬ ‫عىل‬ ‫بناء‬ ‫ترتيب‬ ‫إىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫ر‬ ‫تغيت‬ ‫لك‬ ‫تتيح‬ ‫الفرز‬ ‫دوال‬ ‫لكن‬ ،‫المصفوفة‬ .‫تختاره‬ ‫آخر‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫أي‬ ‫أو‬ ‫القيم‬ ‫تحديد‬ ‫المصفوفة‬ ‫عناصر‬ .‫موجودة‬ ‫مصفوفة‬ ‫هيكل‬ ‫عىل‬ ‫نظرة‬ ‫ي‬ ‫ر‬ ‫نلق‬ ‫دعنا‬ ،‫مصفوفة‬ ‫إنشاء‬ ‫ي‬ ‫ف‬ ‫ننظر‬ ‫أن‬ ‫قبل‬ ‫ر‬ ‫متغت‬ ‫اسم‬ ‫باستخدام‬ ‫موجودة‬ ‫مصفوفة‬ ‫من‬ ‫محددة‬ ‫قيم‬ ‫إىل‬ ‫الوصول‬ ‫يمكنك‬ :‫مربعة‬ ‫أقواس‬ ‫داخل‬ ،‫الفهرس‬ ‫أو‬ ،‫العنرص‬ ‫بمفتاح‬ ً ‫ا‬ ً‫متبوع‬ ،‫المصفوفة‬ $users['anas'] $products[5] ‫سلسلة‬ ‫إما‬ ‫المفتاح‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ . ً ‫ا‬ ً ‫صحيح‬ ً ‫ا‬ ً ‫عدد‬ ‫أو‬ ‫المصفوفات‬ ‫في‬ ‫البيانات‬ ‫تخزين‬ ،‫بالفعل‬ ‫موجودة‬ ‫تكن‬ ‫لم‬ ‫إذا‬ ‫المصفوفة‬ ‫إنشاء‬ ‫إىل‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫قيمة‬ ‫تخزين‬ ‫سيؤدي‬ .‫المصفوفة‬ ‫ر‬ ‫تنىس‬ ‫لن‬ ‫تعريفها‬ ‫يتم‬ ‫لم‬ ‫مصفوفة‬ ‫من‬ ‫قيمة‬ ‫داد‬ ‫ر‬ ‫است‬ ‫محاولة‬ ‫ولكن‬ ‫مثل‬ ‫كود‬‫إىل‬ ‫برنامجك‬ ‫ي‬ ‫ف‬ ‫مصفوفة‬ ‫لتهيئة‬ ‫بسيطة‬ ‫مهمة‬ ‫استخدام‬ ‫يؤدي‬ ‫أن‬ ‫يمكن‬ :‫هذا‬ $addresses[0] = "spam@cyberpromo.net"; $addresses[1] = "abuse@example.com"; $addresses[2] = "root@example.com";
  • 383. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 383 ‫عند‬ ‫بها‬ ‫الصحيحة‬ ‫األعداد‬ ‫ات‬ ‫ر‬ ‫مؤرس‬ ‫تبدأ‬ ،‫مفهرسة‬ ‫مصفوفة‬ ‫هذه‬ 0 . :‫ابطية‬‫ر‬‫ت‬ ‫مصفوفة‬ $price['gasket'] = 15.29; $price['wheel'] = 75.25; $price['tire'] = 50.00; ‫بنية‬ ‫استخدام‬ array() ‫إنشاء‬ ‫إىل‬ ‫هذا‬ ‫يؤدي‬ .‫مدخالتها‬ ‫من‬ ‫مصفوفة‬ ‫لتهيئة‬ ‫الف‬ ‫قيم‬ ‫إنشاء‬ ‫ويتم‬ ،‫مفهرسة‬ ‫مصفوفة‬ ‫هرس‬ ( ‫من‬ ً ‫بدءا‬ ( 0 : ً ‫ا‬ً‫تلقائي‬ $addresses = array("spam@cyberpromo.net", "abuse@example.com", "root@example.com"); ‫باستخدام‬ ‫ابطية‬‫ر‬‫ت‬ ‫مصفوفة‬ ‫إلنشاء‬ array() ‫الرمز‬ ‫استخدم‬ ، => ‫لفصل‬ ‫المفاتيح‬ :‫القيم‬ ‫عن‬ $price = array( 'gasket' => 15.29, 'wheel' => 75.25, 'tire' => 50.00 ); ‫ا‬ ً ‫ض‬ً‫أي‬ ‫يمكنك‬ ‫تهيئة‬ ‫ال‬ :‫أقرص‬ ‫بديلة‬ ‫صيغة‬ ‫باستخدام‬ ‫مصفوفة‬ $price = [ 'gasket' => 15.29, 'wheel' => 75.25, 'tire' => 50. ]; ‫إىل‬ ‫مدخالت‬ ‫أي‬ ‫تمرر‬ ‫ال‬ ،‫فارغة‬ ‫مصفوفة‬ ‫إلنشاء‬ array() : $addresses = array();
  • 384. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 384 ‫القيم‬ ‫إلحاق‬ ‫بمصفوفة‬ ][ ‫استخدم‬ ،‫موجودة‬ ‫مفهرسة‬ ‫مصفوفة‬ ‫نهاية‬ ‫إىل‬ ‫القيم‬ ‫من‬ ‫المزيد‬ ‫إلضافة‬ $students = array("ِ ahmad", "anwar"); $students[] = "sami"; ‫استخدام‬ ‫يمكن‬ ‫كما‬ array_push() ‫قيم‬ ‫إلضافة‬ ‫و‬ array_pop() ‫لحذف‬ ‫المصفوفة‬ ‫نهاية‬ ‫من‬ ‫قيمة‬ ‫عن‬ ‫تهيئة‬ ‫القيم‬ ‫من‬ ‫نطاق‬ ‫تن‬ ‫الدالة‬ ‫ر‬ ‫ىس‬ range() ‫ر‬ ‫بي‬ ‫األحرف‬ ‫قيم‬ ‫أو‬ ‫المتتالية‬ ‫الصحيحة‬ ‫األعداد‬ ‫من‬ ‫مصفوفة‬ :‫فمثال‬ .‫ات‬ ‫ر‬ ‫كمتغت‬‫وتضمينهما‬ ‫إليها‬ ‫تمررهما‬ ‫ر‬ ‫اللتي‬ ‫ر‬ ‫القيمتي‬ $numbers = range(3, 7); //array(3, 4, 5, 6, 7); $reversedNumbers = range(7, 3); //array(7, 6, 5, 4, 3, 2); ‫المصفوفة‬ ‫حجم‬ ‫على‬ ‫الحصول‬ ‫دالتا‬ count() ‫و‬ sizeof() ‫العناص‬ ‫عدد‬ ‫تعيدان‬. ‫ر‬ ‫والتأثت‬ ‫االستخدام‬ ‫ي‬ ‫ف‬ ‫متطابقتان‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ $extentions = array("org", "com", "net"); $size = count($extentions); //3
  • 385. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 385 Padding an Array ‫مصفوفة‬ ‫حشو‬ ‫استخدم‬ ،‫المحتوى‬ ‫لنفس‬ ‫مهيأة‬ ‫بقيم‬ ‫مصفوفة‬ ‫إلنشاء‬ array_pad() . ‫ل‬ ‫األول‬ ‫المدخل‬ array_pad() ‫األدن‬ ‫الحد‬ ‫هو‬ ‫ي‬ ‫الثان‬ ‫والمدخل‬ ،‫المصفوفة‬ ‫هو‬ ‫القيمة‬ ‫هو‬ ‫الثالث‬ ‫والمدخل‬ ،‫المصفوفة‬ ‫عليها‬ ‫تحتوي‬ ‫أن‬ ‫تريد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫لعدد‬ ‫للع‬ ‫ناص‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫ت‬ ‫سيتم‬ ‫الدالة‬ ‫ترجع‬ .‫إنشاؤها‬ array_pad() ‫م‬ .‫جديدة‬ ‫صفوفة‬ $scores = array(2, 6); $padded = array_pad($scores, 5, 0); //array(2, 6, 0, 0, 0) $padded = array_pad($scores, -5, 0); //array( 0, 0, 0, 2, 6) ‫ي‬ ‫الثان‬ ‫المدخل‬ ‫فاستخدم‬ ،‫المصفوفة‬ ‫بداية‬ ‫إىل‬ ‫الجديدة‬ ‫القيم‬ ‫إضافة‬ ‫تريد‬ ‫كنت‬‫إذا‬ :‫سالب‬ ‫األبعاد‬ ‫متعددة‬ ‫المصفوفات‬ ‫مصفوفات‬ ‫إنشاء‬ ‫ذلك‬ ‫لك‬ ‫يتيح‬ .‫مصفوفات‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫تكون‬ ‫أن‬ ‫يمكن‬ :‫بسهولة‬ ‫األبعاد‬ ‫متعددة‬ $row0 = array(1, 2, 3); $row1 = array(4, 5, 6); $row2 = array(7, 8, 9); $multi = array($row0, $row1, $row2); ‫األقواس‬ ‫من‬ ‫المزيد‬ ‫بإلحاق‬ ‫األبعاد‬ ‫متعددة‬ ‫المصفوفات‬ ‫عناص‬ ‫إىل‬ ‫الرجوع‬ ‫يمكنك‬ ،‫المربعة‬ [] : $value = $multi[2][0]; // row 2, column 0. $value = 7
  • 386. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 386 ‫متعددة‬ ‫قيم‬ ‫استخراج‬ ‫استخدم‬ ،‫ات‬ ‫ر‬ ‫متغت‬ ‫إىل‬ ‫المصفوفة‬ ‫قيم‬ ‫جميع‬ ‫لنسخ‬ ‫ال‬ ‫بناء‬ list() : list ($variable, ...) = $array; .‫للمصفوفة‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫المدرجة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫المصفوفة‬ ‫قيم‬ ‫نسخ‬ ‫يتم‬ $product = array("product1", 1266, "s-3"); list($name, $price, $category) = $product; // $name is "product1", $price is 1266, $catego ry is "s-3" ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫تلك‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫قيم‬ ‫لديك‬ ‫كانت‬‫إذا‬ list() ‫فسيتم‬ ، :‫اإلضافية‬ ‫القيم‬ ‫تجاهل‬ ‫ي‬ ‫ف‬ ‫قيم‬ ‫لديك‬ ‫كانت‬‫ذا‬ list() ‫ر‬ ‫تعيي‬ ‫فسيتم‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫تلك‬ ‫من‬ ‫ر‬ ‫أكت‬ ‫عىل‬ ‫اإلضافية‬ ‫القيم‬ :NULL $product = array("product1", 1266, "s-3"); list($name, $price, $category ,$description) = $product; // $name is "product1", $price is 1266, // $category is "s-3" , $description is NULL
  • 387. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 387 ‫المصفوفة‬ ‫تشريح‬ Slicing an Array ‫الدالة‬ ‫استخدم‬ ، ‫المصفوفة‬ ‫من‬ ‫فقط‬ ‫فرعية‬ ‫مجموعة‬ ‫اج‬‫ر‬‫الستخ‬ array_slice() : $subset = array_slice(array, offset, length); ‫الدالة‬ ‫ترجع‬ array_slice() ‫القيم‬ ‫من‬ ‫متتالية‬ ‫سلسلة‬ ‫من‬ ‫تتكون‬ ‫جديدة‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫احة‬‫ز‬‫اإل‬ ‫وسيط‬ ‫تحدد‬. ‫األصلية‬ ‫المصفوفة‬ ” offset ‫ا‬‫ر‬‫الم‬ ‫ي‬ ‫األوىل‬‫العنرص‬ “ ‫نسخه‬ ‫د‬ ‫الطول‬ ‫وسيط‬‫وتحدد‬ length ‫الجديدة‬ ‫المصفوفة‬ ‫تحتوي‬ .‫نسخها‬‫اد‬‫ر‬‫الم‬ ‫القيم‬‫عدد‬ ‫من‬ ‫تبدأ‬ ‫متتالية‬ ‫رقمية‬ ‫مفاتيح‬ ‫عىل‬ 0 $people = array("anas", "mariam", "ahmad", "sal i"); $middle = array_slice($people, 2, 2); //("ahmad", "sali") ‫اجمع‬ array_slice() ‫مع‬ list() :‫ات‬ ‫ر‬ ‫المتغت‬ ‫إىل‬ ‫فقط‬ ‫القيم‬ ‫بعض‬ ‫اج‬‫ر‬‫الستخ‬ ‫أجزاء‬ ‫إلى‬ ‫المصفوفة‬ ‫تقسيم‬ ‫الدالة‬ ‫استخدم‬ ، ً ‫ا‬ ً‫حجم‬ ‫أصغر‬ ‫مصفوفات‬ ‫إىل‬ ‫مصفوفة‬ ‫لتقسيم‬ array_chunk() : array_chunk(array $input, $size [, $preserve_keys]) ،‫الثالث‬ ‫المدخل‬ .‫األصغر‬ ‫المصفوفات‬ ‫من‬ ‫مصفوفة‬ ‫بإرجاع‬ ‫الدالة‬ ‫تقوم‬ preserve_keys ‫المصفوفات‬ ‫عناص‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫تحدد‬ ‫منطقية‬ ‫قيمة‬ ‫ي‬ ‫ه‬ ، ‫األصل‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المفاتيح‬ ‫نفس‬ ‫لها‬ ‫الجديدة‬ ) ‫ابطية‬ ‫ر‬ ‫الت‬ ‫للمصفوفات‬ ‫مفيدة‬ ( . ‫جديدة‬ ‫مفاتيح‬ ‫ر‬ ‫تعيي‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫اإلعداد‬ .
  • 388. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 388 $nums = range(1, 7); $rows = array_chunk($nums, 3); print_r($rows); /* Array ( [0] => Array ( [0] => 1 [1] => 2 [2] = > 3 ) [1] => Array ( [0] => 4 [1] => 5 [2] = > 6 ) [2] => Array ( [0] => 7 ) ) */ ‫والقيم‬ ‫المفاتيح‬ ‫الدالة‬ ‫ترجع‬ array_keys() ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المفاتيح‬ ‫من‬ ‫فقط‬ ‫تتكون‬ ‫مصفوفة‬ : ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫المصفوفة‬ $arrayOfKeys = array_keys(array); $person = array( 'name' => "Anas", 'age' => 29, 'gender' => "male" ); $keys = array_keys($person); // array("name", "age", "gender") ‫توفر‬ PHP ‫القيم‬ ‫من‬ ‫مصفوفة‬ ‫داد‬ ‫ر‬ ‫الست‬ ‫دالة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ، ‫المصفوفة‬ ‫ي‬ ‫ف‬ array_values() : $arrayOfValues = array_values(array);
  • 389. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 389 ‫مع‬ ‫الحال‬ ‫هو‬ ‫كما‬ array_keys() :‫للمصفوفة‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫بالت‬ ‫القيم‬ ‫إرجاع‬ ‫يتم‬ ، $values = array_values($person); // array("Anas", 29, "male") ‫عنصر‬ ‫وجود‬ ‫من‬ ‫التحقق‬ ‫الدالة‬ ‫استخدم‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ً ‫موجود‬ ‫العنرص‬ ‫كان‬‫إذا‬ ‫ما‬ ‫لمعرفة‬ array_key_exists() : if (array_key_exists(key, array)) { ... } ‫مفتاح‬ ‫هو‬ ‫األول‬ ‫المدخل‬ ‫كان‬‫إذا‬ ‫ما‬ ‫إىل‬ ‫ر‬ ‫تشت‬ ‫منطقية‬ ‫قيمة‬ ‫الدالة‬ ‫ترجع‬ ‫موجود‬ ‫ي‬ ‫ف‬ . ‫ي‬ ‫ثان‬ ‫كمدخل‬‫المعطاة‬ ‫المصفوفة‬ ‫مصفوفة‬ ‫في‬ ‫العناصر‬ ‫وإدراج‬ ‫إزالة‬ ‫للدالة‬ ‫يمكن‬ array_splice() ‫مصفوفة‬ ‫وإنشاء‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬‫اجها‬‫ر‬‫إد‬‫أو‬‫العناص‬ ‫الة‬‫ز‬‫إ‬ ‫العناص‬ ‫من‬ ‫أخرى‬ ‫المذالة‬ : $removed = array_splice( array, start [, length [, replacement ] ] ); $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); $removed = array_splice($subjects, 2, 3); print_r($subjects);
  • 390. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 390 //Array ( [0] => JS [1] => CSS [2] => HTML ) print_r($removed); //Array ( [0] => PHP [1] => ASP [2] => JAVA ) ‫فإن‬ ،‫الطول‬ ‫حذفت‬ ‫إذا‬ array_splice() :‫المصفوفة‬ ‫نهاية‬ ‫إىل‬ ‫يزيل‬ ‫باالحتفاظ‬ ‫تهتم‬ ‫وال‬ ‫المصدر‬ ‫المصفوفة‬ ‫من‬ ‫العناص‬ ‫حذف‬ ‫تريد‬ ‫كنت‬‫إذا‬ ،‫بقيمها‬ ‫تخزين‬ ‫إىل‬ ‫تحتاج‬ ‫فلن‬ .array_splice() ‫نتائج‬ :‫ابع‬‫ر‬‫ال‬ ‫المدخل‬ ‫استخدم‬ ،‫األخرى‬ ‫العناص‬ ‫الة‬‫ز‬‫إ‬ ‫تمت‬ ‫حيث‬ ‫العناص‬ ‫اج‬‫ر‬‫إلد‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); array_splice($subjects, 2, 3,["PYTHON","C++"]); print_r($subjects); //Array ([0] => JS [1] => CSS [2] => PYTHON [3] => C++ [4] => HTML)
  • 391. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 391 ‫والمتغيرات‬ ‫المصفوفات‬ ‫بين‬ ‫التحويل‬ ‫توفر‬ PHP ، ‫ر‬ ‫دالتي‬ extract() ‫و‬ compact() ‫المصفوفات‬ ‫ر‬ ‫بي‬ ‫تحول‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫وتصبح‬ ،‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫المفاتيح‬ ‫مع‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫تتوافق‬ .‫ات‬ ‫ر‬ ‫والمتغت‬ :‫المصفوفة‬ ‫هذه‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫ي‬ ‫ه‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫قيم‬ $person = array('name' => "Fred", 'age' => 35, 'wife' => "Betty"); :‫ات‬ ‫ر‬ ‫المتغت‬ ‫هذه‬ ‫من‬ ‫بناؤها‬ ‫أو‬ ‫تحويلها‬ ‫يمكن‬ $name = "Fred"; $age = 35; $wife = "Betty"; ‫مصفوفة‬ ‫من‬ ‫متغيرات‬ ‫تكوين‬ ‫دالة‬ ‫تقوم‬ extract() ‫ات‬ ‫ر‬ ‫مؤرس‬ ‫تصبح‬ .‫مصفوفة‬ ‫من‬ ‫محلية‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫بإنشاء‬ ً ‫تلقائيا‬ :‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫المصفوفة‬ ‫عناص‬ extract($person); // $name, $age, and $wife are now set $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); extract($person); echo $name.'<br>'; echo $age.'<br>'; echo $gender.'<br>'; /* Anas 29 male */
  • 392. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 392 ‫بواسطة‬ ‫إنشاؤه‬ ‫تم‬ ‫الذي‬ ‫ر‬ ‫المتغت‬ ‫كان‬ ‫إذا‬ extract ،‫موجود‬ ‫ر‬ ‫متغت‬ ‫اسم‬ ‫نفس‬ ‫له‬ .‫المصفوفة‬ ‫من‬ ‫ر‬ ‫بمتغت‬ ‫ي‬ ‫الحاىل‬ ‫ر‬ ‫المتغت‬ ‫قيمة‬ ‫استبدال‬ ‫فسيتم‬ ‫سلوك‬ ‫تعديل‬ ‫يمكنك‬ extract() ‫القيم‬ ‫الملحق‬ ‫يصف‬ . ‫ي‬ ‫ثان‬ ‫مدخل‬‫تمرير‬ ‫طريق‬ ‫عن‬ ‫ي‬ ‫ه‬ ‫فائدة‬ ‫ر‬ ‫األكت‬ ‫القيمة‬ . ‫ي‬ ‫الثان‬ ‫المدخل‬ ‫لهذا‬ ‫المحتملة‬ EXTR_PREFIX_ALL ‫مما‬ ، ‫ل‬ ‫الثالث‬ ‫المدخل‬ ‫أن‬ ‫إىل‬ ‫ر‬ ‫يشت‬ extract() ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫ألسماء‬ ‫بادئة‬ ‫ي‬ ‫ه‬ ‫استخدام‬ ‫عند‬ ‫فريدة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أسماء‬ ‫إنشاء‬ ‫ضمان‬ ‫ي‬ ‫ف‬ ‫ذلك‬ ‫يساعد‬ .‫إنشاؤها‬ extract() . $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); extract($person,EXTR_PREFIX_ALL,"new"); echo $new_name.'<br>'; echo $new_age.'<br>'; echo $new_gender.'<br>'; /* Anas 29 male */ ‫ات‬ ‫ر‬ ‫المتغي‬ ‫من‬ ‫مصفوفة‬ ‫تكوين‬ ‫الدالة‬ compact() ‫عكس‬ ‫ي‬ ‫ه‬ extract() ‫لضغطها‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫تمرير‬ ‫يمكنك‬ ‫الدالة‬ ‫ر‬ ‫ىس‬ ُ ‫ن‬ ُ ‫ت‬ .‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫أو‬ ‫منفصلة‬ ‫كوسطاء‬‫إما‬ compact() ‫ابطية‬‫ر‬‫ت‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫أسماء‬ ‫أي‬ ‫ي‬ ‫تخط‬ ‫يتم‬ . ‫ر‬ ‫المتغت‬ ‫قيم‬ ‫ي‬ ‫ه‬ ‫وقيمها‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫مفاتيحها‬ ‫تكون‬ ‫الفعلية‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫مع‬ ‫تتوافق‬ ‫ال‬ ‫المصفوفة‬
  • 393. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 393 $name = "Anas"; $age = 29; $gender = "male"; $person = compact("name","age","gender"); print_r($person); //Array([name] => Anas [age] => 29 [gender] => male) ‫المصفوفات‬ ‫عبور‬ ‫عنرص‬ ‫كل‬‫مع‬ ‫ما‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫بىس‬ ‫القيام‬ ‫ي‬ ‫ف‬ ‫المصفوفات‬ ‫ي‬ ‫ف‬ ً ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫المهمة‬ ‫تتمثل‬ ‫بناء‬ ‫جملة‬ foreach ً ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫الطريقة‬ )‫ان‬‫ر‬‫(الدو‬‫لعبور‬ ‫بنية‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ ‫عناص‬ foreach : $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); foreach ($person as $value) { echo $value . ", "; } //Anas, 29, male, ‫شكل‬ ‫لك‬ ‫يتيح‬ ‫شبيه‬ ‫من‬ foreach : ‫ي‬ ‫الحاىل‬ ‫المفتاح‬ ‫إىل‬ ‫الوصول‬ $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); foreach ($person as $key => $value) { echo $key . " is equal to " . $value . "<br>" ; } /* name is equal to Anas age is equal to 29 gender is equal to male */
  • 394. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 394 ‫ي‬ ‫ف‬‫عنرص‬ ‫كل‬‫مفتاح‬ ‫وضع‬ ‫يتم‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ $key ‫ي‬ ‫ف‬ ‫المقابلة‬ ‫القيمة‬ ‫وضع‬ ‫ويتم‬ $value . ‫بنية‬ ‫تعمل‬ ‫ال‬ foreach .‫منها‬ ‫نسخة‬ ‫عىل‬ ‫تعمل‬ ‫بل‬ ،‫نفسها‬ ‫المصفوفة‬ ‫عىل‬ ‫التكرار‬ ‫دوال‬ ”‫بالمكرر‬ ‫ي‬ ‫الحاىل‬‫العنرص‬ ‫إىل‬ ‫ر‬ ‫المؤرس‬ ‫رف‬ ُ‫ع‬ُ‫ي‬ PHP .“iterator ‫هذا‬ ‫ر‬ ‫لتعيي‬ ‫دوال‬ ‫لديها‬ : ‫ي‬ ‫ه‬ ‫المكرر‬ ‫دوال‬. ‫تعيينه‬ ‫وإعادة‬ ‫ونقله‬ ‫المكرر‬ current() .‫المكرر‬ ‫بواسطة‬ ً ‫ا‬ً‫حالي‬ ‫إليه‬ ‫المشار‬ ‫العنرص‬ ‫إرجاع‬ reset() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫األول‬ ‫العنرص‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ next() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التاىل‬ ‫العنرص‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ prev() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫السابق‬ ‫العنرص‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ end() .‫ويعيده‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬‫عنرص‬ ‫آخر‬ ‫إىل‬‫المكرر‬ ‫ينقل‬ each() ‫العنرص‬ ‫إىل‬ ‫المكرر‬ ‫وتحريك‬ ‫كمصفوفة‬ ‫ي‬ ‫الحاىل‬ ‫للعنرص‬ ‫والقيمة‬ ‫المفتاح‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ .‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫ي‬ ‫التاىل‬ key() . ‫ي‬ ‫الحاىل‬ ‫العنرص‬ ‫مفتاح‬ ‫إرجاع‬
  • 395. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 395 ‫دالة‬ ‫تخدم‬ ُ ‫س‬ ُ ‫ت‬ each() ‫تيبها‬ ‫ر‬ ‫لت‬ ً ‫ا‬ ً ‫وفق‬ ‫العناص‬ ‫يعالج‬ .‫المصفوفة‬ ‫عناص‬‫ار‬‫ر‬‫لتك‬ : ‫ي‬ ‫الداخىل‬ $person = array('name' => "Anas", 'age' => 29, 'gender' => "male"); reset($person); while (list($key, $value) = each($person)) { echo "{$key} is equal to {$value} <br>"; } ‫حلقة‬ ‫باستخدام‬ for ‫أعداد‬ ‫عن‬ ‫عبارة‬ ‫المفاتيح‬ ‫حيث‬ ،‫مفهرسة‬ ‫مصفوفة‬ ‫مع‬ ‫تتعامل‬ ‫أنك‬ ‫تعلم‬ ‫كنت‬‫إذا‬ ‫من‬‫تبدأ‬ ‫متتالية‬ ‫صحيحة‬ 0 ‫حلقة‬ ‫استخدام‬ ‫فيمكنك‬ ، for .‫ات‬ ‫ر‬ ‫المؤرس‬ ‫خالل‬ ‫من‬ ‫للعد‬ ‫الحلقة‬ ‫تعمل‬ for ‫وتعالج‬ ،‫المصفوفة‬ ‫من‬ ‫نسخة‬ ‫عىل‬ ‫وليس‬ ،‫نفسها‬ ‫المصفوفة‬ ‫عىل‬ ‫المفاتيح‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫العناص‬ . ‫ي‬ ‫الداخىل‬ ‫ترتيبها‬ ‫عن‬‫النظر‬ ‫بغض‬ ‫باستخدام‬ ‫مصفوفة‬ ‫طباعة‬ ‫كيفية‬‫إليك‬ for : $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); for ($i=0; $i < count($subjects); $i++) { echo $subjects[$i] . '<br>'; } ‫المصفوفة‬ ‫اختزال‬ Reducing an Array :‫واحدة‬ ‫قيمة‬ ‫لبناء‬ ،‫بدوره‬ ‫المصفوفة‬ ‫من‬ ‫عنرص‬ ‫كل‬‫عىل‬ ‫دالة‬ ‫يطبق‬ $result = array_reduce(array, callable [, default ]);
  • 396. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 396 ‫الدالة‬ ‫تأخذ‬ callable ” ‫الجاري‬ ‫ي‬ ‫اإلجماىل‬ : ‫ر‬ ‫مدخلي‬ running total “ ‫والقيمة‬ ، ‫الحالية‬ ” current value “ ‫ي‬ ‫إجماىل‬ ‫يعيد‬ ‫أن‬ ‫يجب‬ .‫المعالجة‬ ‫قيد‬ ‫الجد‬ ‫التشغيل‬ .‫يد‬ ‫المصفوفة‬ ‫قيم‬ ‫مربعات‬ ‫إلضافة‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ :‫استخدم‬ ، $addItUp = function ($runningTotal, $currentValue) { $runningTotal += $currentValue * $currentValue; return $runningTotal; }; $numbers = array(2, 5, 8, 14); $total = array_reduce($numbers, $addItUp); echo $total; //289 ‫ر‬ ‫بتغيت‬ ‫قمنا‬ ‫إذا‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫أولية‬ ‫قيمة‬ ‫هو‬ ،‫ه‬ ‫ر‬ ‫توفت‬ ‫تم‬ ‫إذا‬ ، ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫المدخل‬ ‫إىل‬ ‫االستدعاء‬ array_reduce() :‫إىل‬ ‫السابق‬ ‫المثال‬ ‫ي‬ ‫ف‬ $total = array_reduce($numbers, $addItUp, 6); echo $total; //295 ‫الدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ ،‫فارغة‬ ‫المصفوفة‬ ‫كانت‬ ‫إذا‬ array_reduce() ‫اضية‬ ‫ر‬ ‫االفت‬ ‫القيمة‬ ” default ‫فإن‬ ،‫فارغة‬ ‫المصفوفة‬ ‫وكانت‬ ‫اضية‬ ‫ر‬ ‫افت‬ ‫قيمة‬ ‫إعطاء‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .“ array_reduce() ‫ترجع‬ NULL . ‫القيم‬ ‫عن‬ ‫البحث‬ ‫الدالة‬ ‫ترجع‬ in_array() ” true ”‫أو‬ “ false ‫المد‬ ‫كان‬‫إذا‬‫ما‬ ‫عىل‬ ً ‫ا‬ ً ‫اعتماد‬ ،“ ‫األول‬ ‫خل‬ : ‫ي‬ ‫الثان‬ ‫المدخل‬ ‫باعتبارها‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ً ‫ا‬‫رص‬‫عن‬
  • 397. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 397 if (in_array(to_find, array [, strict])) { ... } ” ‫صحيح‬ ‫االختياري‬ ‫الثالث‬ ‫المدخل‬ ‫كان‬ ‫إذا‬ true ‫أنواع‬ ‫تتطابق‬ ‫أن‬ ‫فيجب‬ ،“ to_find . ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫والقيمة‬ .‫البيانات‬ ‫أنواع‬ ‫من‬ ‫التحقق‬ ‫عدم‬‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ :‫بسيط‬ ‫مثال‬ ‫إليك‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); if(in_array("PHP",$subjects)){ echo "PHP in array "; } ‫دالة‬ array_search() . ‫ي‬ ‫ف‬ ‫المعادة‬ ‫القيمة‬ in_array() ‫منطقية‬ ‫قيمة‬ ‫ي‬ ‫ه‬ ( true ) ‫تقوم‬ ،‫القيمة‬ ‫عىل‬ ‫العثور‬ ‫تم‬ ‫إذا‬ array_search() :‫وجد‬ ‫إذا‬ ،‫العنرص‬ ‫مفتاح‬ ‫بإرجاع‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); echo array_search("PHP",$subjects);//2 ‫الدالة‬ ‫تأخذ‬ array_search() ” ‫الصارم‬ ‫المدخل‬ ‫ا‬ ً ‫ض‬ً‫أي‬ strict ،‫االختياري‬ ‫الثالث‬ “ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫والقيمة‬ ‫عنها‬ ‫البحث‬ ‫يتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫القيمة‬ ‫أنواع‬ ‫تطابق‬ ‫تتطلب‬ ‫ي‬ ‫ر‬ ‫والت‬ .‫المصفوفة‬
  • 398. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 398 ‫ال‬ ‫فرز‬ Sorting ً ‫ا‬ً‫اختياري‬ ‫المفاتيح‬ ‫كتابة‬ ‫ويعيد‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫للعناص‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫الفرز‬ ‫ر‬ ‫يغت‬ . ‫الجديد‬ ‫تيب‬ ‫ر‬ ‫الت‬ ‫هذا‬ ‫لتعكس‬ ‫توفر‬ PHP ‫عدة‬ ‫المصفوفات‬‫لفرز‬ ‫طرق‬ ‫مثل‬ ‫أو‬ ‫تصاعدي‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫القيم‬ ‫حسب‬‫الفرز‬ ‫ي‬ ‫تنازىل‬ . ‫دوال‬ sort() ‫و‬ rsort() ‫تصاعدي‬ ‫أبجدي‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫األسماء‬‫لفرز‬ $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); sort($subjects); print_r($subjects); //Array ( [0] => ASP [1] => CSS [2] => HTML [3] => JAVA [4] => JS [5] => PHP ) ‫استدعاء‬ ‫سوى‬ ‫عليك‬ ‫ما‬ ، ‫ي‬ ‫عكىس‬ ‫أبجدي‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫عليها‬ ‫للحصول‬ rsort() ً ‫بدالبدال‬ ‫من‬ sort() . $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); rsort($subjects); print_r($subjects); //Array ( [0] => PHP [1] => JS [2] => JAVA [3] => HTML [4] => CSS [5] => ASP ) ‫المصفوفات‬ ‫عكس‬ ‫الدالة‬ ‫تعكس‬ array_reverse() :‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫للعناص‬ ‫ي‬ ‫الداخىل‬ ‫تيب‬ ‫ر‬ ‫الت‬ $reversed = array_reverse(array);
  • 399. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 399 ‫من‬ ً ‫بدءا‬ ‫الرقمية‬ ‫المفاتيح‬ ‫ترقيم‬ ‫إعادة‬ ‫يتم‬ 0 .‫السلسلة‬ ‫فهارس‬ ‫تتأثر‬ ‫ال‬ ‫بينما‬ ، $subjects = array("JS","CSS","PHP","ASP","JAVA" ,"HTML"); $r_subjects = array_reverse($subjects); print_r($r_subjects); //Array ( [0] => HTML [1] => JAVA [2] => ASP [3] => PHP [4] => CSS [5] => JS ) ‫الدالة‬ ‫جع‬ُ ‫ر‬ ُ ‫ت‬ array_flip() ‫القيمة‬ ‫ترتيب‬ ‫تعكس‬ ‫مصفوفة‬ : ‫ي‬ ‫أصىل‬ ‫عنرص‬ ‫لكل‬ ‫والمفتاح‬ $flipped = array_flip(array); ‫ي‬ ‫ف‬ ‫بمفردها‬ ‫ك‬ ُ‫ر‬ ‫ت‬ ُ ‫ت‬ ‫صحيحة‬ ‫أعداد‬ ‫أو‬ ‫سالسل‬ ‫األصلية‬ ‫قيمها‬ ‫تكون‬ ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫العناص‬ ‫المصف‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫المفتاح‬ ‫اكتشاف‬ ‫الجديدة‬ ‫المصفوفة‬ ‫لك‬ ‫تتيح‬ .‫الناتجة‬ ‫وفة‬ ‫يكون‬ ‫عندما‬ ‫فقط‬ ‫بفعالية‬ ‫تعمل‬ ‫التقنية‬ ‫هذه‬ ‫كن‬ ‫ول‬ ،‫لقيمتها‬ ً ‫ا‬ً ‫نظر‬ ‫األصلية‬ .‫فريدة‬ ‫قيم‬ ‫األصلية‬ ‫للمصفوفة‬ $person = array('name' => "Anas", 'age' = > 29, 'gender' => "male"); $flipped = array_flip($person); print_r($flipped); //Array ( [Anas] => name [29] => age [male] => gender )
  • 400. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 400 ‫العشوائية‬ ‫ترتيب‬ ‫الدالة‬ ‫استخدم‬ ، ‫ي‬ ‫عشوان‬ ‫تيب‬ ‫ر‬ ‫بت‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫العناص‬ ‫الجتياز‬ shuffle() ‫تستبدل‬ . ‫الموجودة‬ ‫المفاتيح‬ ‫جميع‬ - ‫رقمية‬ ‫أو‬ ‫سلسلة‬ - ‫من‬ ‫تبدأ‬ ‫متتالية‬ ‫صحيحة‬ ‫بأعداد‬ 0 . shuffle($subjects); ‫المصفوفة‬ ‫مجموع‬ ‫حساب‬ ‫الدالة‬ ‫تجمع‬ array_sum() :‫ابطية‬‫ر‬‫ت‬ ‫أو‬ ‫مفهرسة‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫القيم‬ $sum = array_sum(array); ‫ر‬ ‫مصفوفتي‬ ‫دمج‬ ‫الدالة‬ ‫تدمج‬ array_merge() : ‫ر‬ ‫أكت‬ ‫أو‬ ‫ر‬ ‫مصفوفتي‬ ‫بذكاء‬ $merged = array_merge(array1, array2 [, array ... ]) ‫مصفوفة‬ ‫من‬ ‫العنارص‬ ‫تصفية‬ ‫بناء‬ ‫مصفوفة‬ ‫من‬ ‫فرعية‬ ‫مجموعة‬ ‫لتحديد‬ ً ً ‫الدالة‬ ‫استخدم‬ ،‫قيمها‬ ‫عىل‬ array_filter() : $filtered = array_filter(array, callback); ‫كل‬‫تمرير‬ ‫يتم‬ ” array “ ”‫الدالة‬ ‫إىل‬ callback ‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المصفوفة‬ ‫تحتوي‬ .“ .‫صحيحة‬ ‫قيمة‬ ‫الدالة‬ ‫لها‬ ‫ترجع‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األصلية‬ ‫المصفوفة‬ ‫عناص‬ ‫عىل‬ ‫فقط‬
  • 401. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 401 function isOdd ($element) { return $element % 2; } $numbers = array(6, 88, 35, 12 , 23); $odds = array_filter($numbers, "isOdd"); print_r($odds); // Array ( [2] => 35 [4] => 23 ) ‫الدالة‬ ‫عن‬ ‫ابحث‬ array_unique ‫بها‬ ‫العمل‬ ‫تستطيع‬ ‫ماذا‬ ‫عرف‬‫و‬ .
  • 402. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 402 ‫أساسيات‬ HTTP ‫بروتوكول‬ ‫عىل‬ ‫الويب‬ ‫يعمل‬ HTTP ‫ي‬ ‫ر‬ ‫التشعت‬ ‫النص‬ ‫نقل‬ ‫بروتوكول‬ ‫أو‬ Hypertext Transfer ”“ Protocol ‫الويب‬ ‫متصفحات‬ ‫طلب‬ ‫كيفية‬ ‫ي‬ ‫ف‬ ‫وتوكول‬ ‫ر‬ ‫الت‬ ‫هذا‬ ‫يتحكم‬ . .‫الملفات‬ ‫إرسال‬ ‫بإعادة‬ ‫الخوادم‬ ‫قيام‬ ‫وكيفية‬ ‫الويب‬ ‫خوادم‬ ‫من‬ ‫للملفات‬ ‫طلب‬ ‫رسالة‬ ‫يرسل‬ ‫فإنه‬ ،‫ويب‬ ‫صفحة‬ ‫الويب‬ ‫مستعرض‬ ‫يطلب‬ ‫عندما‬ HTTP ‫إىل‬ ‫بعض‬ ً ‫ا‬ ً‫دائم‬ ‫الطلب‬ ‫رسالة‬ ‫تتضمن‬ .‫ويب‬ ‫خادم‬ ‫ال‬ ‫معلوما‬ ‫ويسة‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫ت‬ ” header information ‫ا‬ ً ‫ض‬ً‫أي‬ ‫تتضمن‬ ‫األحيان‬ ‫بعض‬ ‫ي‬ ‫وف‬ ،“ ‫جسم‬ ” body ‫خادم‬ ‫يستجيب‬ .“ ‫معلومات‬ ً ‫ا‬ ً‫دائم‬ ‫تتضمن‬ ‫ي‬ ‫ر‬ ‫والت‬ ،‫رد‬ ‫برسالة‬ ‫الويب‬ header ‫وتحت‬ ‫عىل‬ ً ‫عادة‬ ‫وي‬ body . ‫طلب‬ ‫من‬ ‫األول‬‫السطر‬‫يبدو‬ HTTP : ‫ي‬ ‫يىل‬ ‫كما‬ GET /index.html HTTP/1.1 ‫أمر‬ ‫السطر‬ ‫هذا‬ ‫يحدد‬ HTTP ” ‫طريقة‬ ‫يسىم‬ ، method ‫المستند‬ ‫بعنوان‬ ً ‫ا‬ ً‫متبوع‬ ،“ ‫بروتوكول‬‫وإصدار‬ HTTP ‫طريقة‬ ‫الطلب‬ ‫يستخدم‬ ،‫الحالة‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫المستخدم‬ GET ‫مستند‬ ‫لطلب‬ index.html ‫باستخدام‬ HTTP 1.1 ‫يمكن‬ ، ‫ي‬ ‫األوىل‬ ‫السطر‬ ‫هذا‬ ‫بعد‬ . ‫معلومات‬ ‫عىل‬ ‫الطلب‬ ‫يحتوي‬ ‫أن‬ ‫فيال‬ header ‫بيانات‬ ‫الخادم‬ ‫تمنح‬ ‫اختيارية‬ .‫الطلب‬ ‫حول‬ ‫إضافية‬ ‫من‬ ‫األول‬ ‫السطر‬ ‫يبدو‬ .‫استجابة‬ ‫وإرسال‬ ‫ومعالجته‬ ‫الطلب‬ ‫الويب‬ ‫خادم‬ ‫ر‬ ‫يتلق‬ ‫استجابة‬ HTTP : ‫ي‬ ‫يىل‬ ‫كما‬ HTTP/1.1 200 OK
  • 403. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 403 ‫إصدا‬ ‫السطر‬ ‫هذا‬ ‫يحدد‬ ‫هذه‬ ‫ي‬ ‫ف‬ .‫الكود‬ ‫لذلك‬ ً ‫ا‬ ً ‫ووصف‬ ‫الحالة‬ ‫وكود‬ ‫وتوكول‬ ‫ر‬ ‫الت‬ ‫ر‬ ‫هو‬ ‫الحالة‬ ‫كود‬‫يكون‬ ،‫الحالة‬ 200 ً ‫ا‬ ً ‫ناجح‬ ‫كان‬‫الطلب‬ ‫أن‬ ‫ي‬ ‫يعت‬ ‫مما‬ ، ( ‫الوصف‬ ‫ثم‬ ‫ومن‬ OK ) ‫بمعلومات‬ ‫العميل‬ ‫تزود‬ ‫رؤوس‬ ‫عىل‬ ‫االستجابة‬ ‫تحتوي‬ ،‫الحالة‬ ‫سطر‬ ‫بعد‬ . :‫مثل‬ .‫االستجابة‬ ‫حول‬ ‫إضافية‬ Date: Sat, 29 June 2019 14:07:50 GMT Server: Apache/2.2.14 (Ubuntu) Content-Type: text/html Content-Length: 1845 ‫أس‬‫ر‬ ‫يوفر‬ Server ‫أس‬‫ر‬ ‫يحدد‬ ‫بينما‬ ،‫الويب‬ ‫خادم‬ ‫حول‬ ‫معلومات‬ Content- Type ‫نوع‬ MIME ‫تحتوي‬ ،‫الرؤوس‬ ‫بعد‬ .‫االستجابة‬ ‫ي‬ ‫ف‬ ‫المضمنة‬ ‫للبيانات‬ ‫عىل‬ ‫االستجابة‬ .‫الطلب‬ ‫نجاح‬ ‫حالة‬ ‫ي‬ ‫ف‬ ‫المطلوبة‬ ‫بالبيانات‬ ً ‫ا‬ ً‫متبوع‬ ،‫غ‬ ‫فار‬ ‫سطر‬ ‫ر‬ ‫طريقتي‬ ‫ر‬ ‫أكت‬ HTTP ‫هما‬ ً ‫ا‬ ً‫شيوع‬ GET ‫و‬ POST ‫طريقة‬ ‫تصميم‬ ‫تم‬ . GET ‫داد‬ ‫ر‬ ‫الست‬ ‫طريقة‬ .‫الخادم‬ ‫من‬ ‫بيانات‬ ‫قاعدة‬ ‫استعالم‬ ‫نتائج‬‫أو‬ ‫صورة‬‫أو‬ ‫مستند‬ ‫مثل‬ ،‫المعلومات‬ POST ‫مخصصة‬ ‫لتصدير‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫تخزينها‬ ‫سيتم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المعلومات‬ ‫مثل‬ ،‫المعلومات‬ ‫طريقة‬ .‫الخادم‬ ‫عىل‬ ،‫بيانات‬ GET ‫يكتب‬ ‫عندما‬ ‫الويب‬ ‫متصفح‬ ‫يستخدمه‬ ‫ما‬ ‫ي‬ ‫ه‬ ‫عنوان‬ ‫المستخدم‬ URL ‫ا‬‫ر‬ ‫عىل‬ ‫ينقر‬ ‫أو‬ ‫يمكن‬ ،‫نموذج‬ ‫المستخدم‬ ‫يرسل‬ ‫عندما‬ .‫بط‬ ‫طريقة‬ ‫استخدام‬ GET ‫أو‬ POST ‫خاصية‬ ‫بواسطة‬ ‫محدد‬ ‫هو‬ ‫كما‬ ، method ‫لوسم‬ form .
  • 404. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 404 ‫المتغيرات‬ ‫الطلب‬ ‫ومعلومات‬ ‫الخادم‬ ‫تكوين‬ - ‫تعريف‬ ‫وملفات‬ ‫النموذج‬ ‫وسطاء‬ ‫ذلك‬ ‫ي‬ ‫ف‬ ‫بما‬ ‫االرتباط‬ - ‫مختلفة‬ ‫طرق‬ ‫بثالث‬ ‫إليها‬ ‫الوصول‬ ‫يمكن‬ ‫ي‬ ‫ف‬ PHP ،‫عام‬ ‫بشكل‬ . ‫باسم‬ ‫المعلومات‬ ‫هذه‬ ‫إىل‬ ‫يشار‬ EGPCS ( ” ‫البيئة‬ ‫ل‬ ‫اختصار‬ POST ،GET ،“environment ” ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ، cookies ‫والخادم‬ ،“ .( “server” ‫ر‬ ‫تنىس‬ PHP ‫مصفوفات‬ ‫ستة‬ ‫عامة‬ ‫معلومات‬ ‫عىل‬ ‫تحتوي‬ EGPCS : $_ENV ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ ‫مفاتيح‬ ‫تكون‬ ‫حيث‬ ،‫بيئة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أي‬ ‫قيم‬ ‫عىل‬ ‫يحتوي‬ .‫البيئة‬ ‫ات‬ ‫ر‬ ‫متغت‬ $_GET ‫طلب‬ ‫من‬ ً ‫جزءا‬ ‫تشكل‬ ‫وسطاء‬ ‫أي‬ ‫عىل‬ ‫يحتوي‬ GET ‫المصفوفة‬ ‫مفاتيح‬ ‫تكون‬ ‫حيث‬ ، .‫النموذج‬ ‫وسطاء‬ ‫أسماء‬ ‫ي‬ ‫ه‬ $_POST
  • 405. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 405 ‫طلب‬ ‫من‬ ً ‫جزءا‬ ‫تشكل‬ ‫وسطاء‬ ‫أي‬ ‫عىل‬ ‫يحتوي‬ POST ‫مفاتيح‬ ‫تكون‬ ‫حيث‬ ، .‫النموذج‬ ‫وسطاء‬ ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ $_COOKIE ‫تكون‬ ‫حيث‬ ،‫الطلب‬ ‫من‬ ‫كجزء‬‫تمريرها‬ ‫تم‬ ‫ارتباط‬ ‫تعريف‬ ‫ملفات‬ ‫قيم‬ ‫أي‬ ‫عىل‬ ‫يحتوي‬ ‫أسما‬ ‫ي‬ ‫ه‬ ‫المصفوفة‬ ‫مفاتيح‬ .‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫ء‬ $_SERVER .،‫الويب‬ ‫خادم‬ ‫حول‬ ‫مفيدة‬ ‫معلومات‬ ‫عىل‬ ‫يحتوي‬ $_FILES .‫تحميلها‬ ‫تم‬ ‫ملفات‬ ‫أي‬ ‫حول‬ ‫معلومات‬ ‫عىل‬ ‫يحتوي‬ ‫ليست‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫هذه‬ ‫عامة‬ .‫الدوال‬ ‫تعريفات‬ ‫داخل‬ ‫من‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫مرئية‬ ‫كنها‬‫ول‬ ،‫فقط‬ ‫المصفوفة‬ ‫إنشاء‬ ‫يتم‬ $_REQUEST ‫بواسطة‬ PHP ‫عناص‬ ‫عىل‬ ‫وتحتوي‬ ً ‫ا‬ً‫تلقائي‬ ‫المصفوفات‬ $_GET ‫و‬ $_POST ‫و‬ $_COOKIE .‫واحد‬ ‫مصفوفة‬ ‫ي‬ ‫ف‬ ‫كلها‬ ‫الخادم‬ ‫معلومات‬ ‫مصفوفة‬ ‫تحتوي‬ $_SERVER ‫خادم‬ ‫من‬ ‫المفيدة‬ ‫المعلومات‬ ‫من‬ ‫ر‬ ‫كثت‬‫ال‬ ‫عىل‬ ،‫الويب‬ PHP_SELF
  • 406. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 406 :‫المثال‬ ‫سبيل‬ ‫)عىل‬ ‫المستند‬ ‫جذر‬ ‫إىل‬ ‫بالنسبة‬ ، ‫ي‬ ‫الحاىل‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫اسم‬ /store/cart.php ‫نماذج‬ ‫بعض‬ ‫ي‬ ‫ف‬ ً ‫مستخدما‬ ‫بالفعل‬ ‫هذا‬ ‫أيت‬‫ر‬ ‫لقد‬ .( ‫إنشاء‬ ‫عند‬ ‫مفيد‬ ‫ر‬ ‫المتغت‬ ‫هذا‬ .‫السابقة‬ ‫الفصول‬ ‫ي‬ ‫ف‬ ‫مجية‬ ‫ر‬ ‫الت‬ ‫التعليمات‬ ‫نصو‬ . ً ‫ا‬ ً ‫الحق‬ ‫ى‬‫ست‬ ‫كما‬،‫ذاتية‬ ‫مرجعية‬ ‫برمجية‬ ‫ص‬ SERVER_SOFTWARE Apache/1.3.33 (Unix) mod_perl/1.26 " : ‫الخادم‬ ‫تحدد‬ ‫سلسلة‬ ( ‫عىل‬ ‫المثال‬ ‫سبيل‬ .)"PHP/5.0.4 SERVER_NAME ‫اسم‬ ‫أو‬ ‫المضيف‬ ‫اسم‬ DNS ‫عنوان‬ ‫أو‬ ‫المستعار‬ IP ‫لعناوين‬ URL ‫الذاتية‬ ‫المرجعية‬ ( :‫المثال‬ ‫سبيل‬ ‫عىل‬ .)www.example.com GATEWAY_INTERFACE ‫معيار‬‫إصدار‬ ‫معرفة‬ CGI :‫المثال‬ ‫سبيل‬ ‫)عىل‬ CGI/1.1 .( SERVER_PROTOCOL ‫الطلب‬ ‫بروتوكول‬ ‫وإصدار‬ ‫اسم‬ ( :‫المثال‬ ‫سبيل‬ ‫عىل‬ HTTP/1.1 ) . 370 SERVER_PORT ‫إليه‬ ‫الطلب‬ ‫إرسال‬ ‫تم‬ ‫الذي‬ ‫الخادم‬ ‫منفذ‬ ‫رقم‬ ( ‫سبيل‬ ‫عىل‬ :‫المثال‬ 80 ) .
  • 407. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 407 REQUEST_METHOD ‫المستند‬ ‫لجلب‬ ‫العميل‬ ‫استخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطريقة‬ ) ‫عىل‬ :‫المثال‬ ‫سبيل‬ GET ( . PATH_INFO ‫العميل‬‫قدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫اإلضافية‬ ‫ات‬‫ر‬‫المسا‬‫عناص‬ ) :‫المثال‬ ‫سبيل‬ ‫عىل‬ /admin/users ( . PATH_TRANSLATED ‫قيمة‬ PATH_INFO ‫ملف‬ ‫اسم‬ ‫إىل‬ ‫الخادم‬ ‫قبل‬ ‫من‬ ‫جمة‬ ‫ر‬ ‫مت‬ ، ) :‫المثال‬ ‫سبيل‬ ‫عىل‬ .)/home/httpd/htdocs/admin/users QUERY_STRING ‫عنوان‬ ‫ي‬ ‫ف‬ ‫بعد؟‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫كل‬ URL ) :‫المثال‬ ‫سبيل‬ ‫عىل‬ q =35 ( . REMOTE_ADDR ‫عنوان‬ ‫عىل‬ ‫تحتوي‬ ‫سلسلة‬ IP ‫الصفحة‬ ‫هذه‬ ‫طلب‬ ‫الذي‬ ‫للجهاز‬ ) :‫مثال‬ .("490.418.2.012" AUTH_TYPE ‫الصفحة‬ ‫لحماية‬ ‫المستخدمة‬ ‫المصادقة‬ ‫طريقة‬ ) :‫المثال‬ .(basic REMOTE_USER ” ‫صادق‬ ‫الذي‬ ‫المستخدم‬ ‫اسم‬ authenticated ‫العميل‬ ‫عليه‬ “ .
  • 408. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 408 ‫النماذج‬ ‫معالجة‬ “Methods” ‫الطرق‬ ‫طريقتان‬ ‫هناك‬ HTTP :‫الخادم‬ ‫إىل‬ ‫النموذج‬ ‫بيانات‬‫لتمرير‬ ‫استخدامها‬ ‫للعميل‬ ‫يمكن‬ GET ‫و‬ POST ‫بخاصية‬ ‫ر‬ ‫معي‬ ‫نموذج‬ ‫يستخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطريقة‬ ‫تحديد‬ ‫يتم‬ . method ‫لوسم‬ form . ‫طلب‬ ‫يقوم‬ GET ‫عنوان‬ ‫ي‬ ‫ف‬ ‫النموذج‬ ‫وسطاء‬ ‫ر‬ ‫مت‬ ‫ر‬ ‫بت‬ URL ‫استعالم‬ ‫سلسلة‬ ‫ي‬ ‫ف‬ ” query string :‫؟‬ ‫ي‬ ‫يىل‬ ‫الذي‬ ‫بالنص‬ ‫إليها‬‫يشار‬ ‫ي‬ ‫ر‬ ‫والت‬ ،“ /path/to/chunkify.php?word=despicable&lengt h=3 ‫طلب‬ ‫يقوم‬ POST ‫ي‬ ‫ف‬ ‫النموذج‬ ‫وسطاء‬ ‫بتمرير‬ body ‫ال‬ ‫طلب‬ HTTP ‫ترك‬ ‫مع‬ ، ‫عنوان‬ URL . ‫ر‬ ‫تغيت‬ ‫دون‬ ‫ر‬ ‫بي‬ ً ‫ا‬ ً ‫وضوح‬ ‫ر‬ ‫األكت‬ ‫الفرق‬ GET ‫و‬ POST ‫عنوان‬ ‫سطر‬ ‫هو‬ URL ‫جميع‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ . ‫عنوان‬ ‫ي‬ ‫ف‬ ‫ها‬ ‫ر‬ ‫ترمت‬ ‫يتم‬ ‫النموذج‬ ‫وسطاء‬ URL ‫بطلب‬ GET ‫يم‬ ، ‫وضع‬ ‫ر‬ ‫للمستخدمي‬ ‫كن‬ ‫استعالمات‬ ‫عىل‬ ‫مرجعية‬ ‫إشارة‬ GET . ‫طلبات‬ ‫مع‬ ‫بذلك‬ ‫القيام‬ ‫يمكنهم‬ ‫ال‬ ،‫ذلك‬ ‫ومع‬ POST . ‫طلبات‬ ‫استخدام‬ ‫ي‬ ‫ينبغ‬ ‫ال‬ ‫نه‬ ً ‫أ‬ ‫هو‬ ‫تذكره‬ ‫إىل‬ ‫تحتاج‬ ‫ما‬ GET ‫تسبب‬ ‫اءات‬‫ر‬‫إج‬ ‫ألي‬ .‫بيانات‬ ‫قاعدة‬ ‫تحديث‬ ‫أو‬ ‫طلب‬ ‫تقديم‬ ‫مثل‬ ،‫الخادم‬ ‫ي‬ ‫ف‬ ً ‫ا‬ً ‫ر‬ ‫تغيت‬
  • 409. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 409 ‫يتوفر‬ ‫نوع‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الطريقة‬ ‫صفحة‬ ‫لطلب‬ ‫استخدامها‬ ‫تم‬ PHP ‫خالل‬ ‫من‬ if ($_SERVER['REQUEST_METHOD'] == 'GET') { // handle a GET request } else { die("You may only GET this page."); } “Parameters” ‫الوسطاء‬ ‫المصفوفات‬ ‫استخدم‬ $_POST ‫و‬ $_GET ‫و‬ $_FILES ‫وسطاء‬ ‫إىل‬ ‫للوصول‬ ‫كود‬ ‫من‬ ‫النموذج‬ PHP ‫الوسطاء‬ ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المفاتيح‬ .‫بك‬ ‫الخاص‬ ( ‫حقول‬ ‫أسماء‬ HTML ) .‫الوسطاء‬ ‫تلك‬ ‫قيم‬ ‫ي‬ ‫ه‬ ‫والقيم‬ ، ‫يوضح‬ ‫الن‬ ‫موذ‬ ‫ي‬ ‫التاىل‬ ‫ج‬ : ‫ر‬ ‫حقلي‬ ‫عىل‬ ‫النموذج‬ ‫يحتوي‬ .‫المستخدم‬ ‫يوفرها‬ ‫سلسلة‬ ‫للسلسلة‬ ‫أحدهما‬ ( :‫الوسيط‬ ‫اسم‬ word ) ” ‫القطع‬ ‫لحجم‬ ‫واآلخر‬ chunks “ ‫إنتاجها‬ ‫المطلوب‬ ( :‫الوسيط‬ ‫اسم‬ number ) . <html> <head><title>Hi there</title></head> <body> <form action="say_hi.php" method="POST"> <input type="text" name="f_name" ><br><br> <input type="submit" value="SEND"> </form>
  • 410. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 410 </body> </html> ‫مثال‬ 8 - 0 ‫للقطع‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ . (chunkify.php) <?php $name = $_POST['f_name']; echo "Hello $name"; .‫الناتجة‬ ‫المخرجات‬ “Self-Processing Pages” ‫الذاتية‬ ‫المعالجة‬ ‫صفحات‬ ‫صفحة‬ ‫استخدام‬ ‫يمكن‬ PHP ‫كانت‬ ‫إذا‬ . ً ‫ا‬ ً ‫الحق‬ ‫ومعالجته‬ ‫نموذج‬ ‫إلنشاء‬ ‫واحدة‬ ‫طريقة‬ ‫باستخدام‬ ‫مطلوبة‬ ‫الموضحة‬ ‫الصفحة‬ GET ‫درجة‬ ‫يقبل‬ ً ‫ا‬ ً ‫نموذج‬ ‫تطبع‬‫فإنها‬ ، ‫طريقة‬ ‫باستخدام‬ ‫استدعاؤها‬ ‫تم‬ ‫إذا‬ ،‫ذلك‬ ‫ومع‬ .‫فهرنهايت‬ ‫ارة‬‫ر‬‫ح‬ POST ‫تحسب‬ ، .‫المقابلة‬ ‫المئوية‬ ‫ارة‬‫ر‬‫الح‬ ‫درجة‬ ‫وتعرض‬ ‫الصفحة‬
  • 411. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 411 <!DOCTYPE html> <html> <head><title>Temperature Conversion</title></he ad> <body> <?php if ($_SERVER['REQUEST_METHOD'] == 'GET') { ?> <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST"> Fahrenheit temperature: <input type="text" name="fahrenheit" /><br /> <input type="submit" value="Convert to Cels ius!" /> </form> <?php } else if ($_SERVER['REQUEST_METHOD'] == 'POST') { $fahrenheit = $_POST['fahrenheit']; $celsius = ($fahrenheit - 32) * 5 / 9; printf("%.2fF is %.2fC", $fahrenheit, $celsiu s); } else { ("This script only works with GET and POST re quests."); } ?> </body> </html>
  • 412. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 412 ‫ي‬ ‫وه‬ ،‫عملية‬‫أو‬ ً ‫ا‬ ً ‫نموذج‬ ‫سيعرض‬ ‫كان‬‫إذا‬ ‫ما‬‫ليقرر‬ ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫للت‬ ‫أخرى‬ ‫طريقة‬ ‫هناك‬ ‫صفحة‬ ‫كتابة‬ ‫ذلك‬ ‫لك‬ ‫يتيح‬ .‫ال‬ ‫أم‬ ‫الوسطاء‬ ‫إحدى‬ ‫ر‬ ‫توفت‬ ‫تم‬ ‫قد‬ ‫كان‬ ‫إذا‬ ‫ما‬ ‫معرفة‬ ‫طريقة‬ ‫تستخدم‬ ‫ذاتية‬ ‫معالجة‬ GET ‫القيم‬ ‫إلرسال‬ <!DOCTYPE html> <html> <head><title>Temperature Conversion</title></he ad> <body> <?php if (isset ( $_GET ['fahrenheit'] )) { $fahrenheit = $_GET ['fahrenheit']; } else { $fahrenheit = null; } if (is_null ( $fahrenheit )) { ?> <form action="<?php echo $_SERVER['PHP_SELF'] ; ?>" method="GET"> Fahrenheit temperature: <input type="text" name="fahrenheit" /><br /> <input type="submit" value="Convert to Cels ius!" /> </form> <?php } else { $celsius = ($fahrenheit - 32) * 5 / 9; printf ( "%.2fF is %.2fC", $fahrenheit, $cels ius ); } ?> </body> </html>
  • 413. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 413 “File Uploads” ‫الملف‬ ‫تحميالت‬ ‫الملفات‬ ‫تحميالت‬ ‫مع‬ ‫للتعامل‬ ‫ن‬ ‫ستخدم‬ ‫ال‬ ‫مصفوفة‬ $_FILES . ‫من‬ ‫ي‬ ‫ف‬ ‫التحكم‬ ‫يمكنك‬ ،‫الملفات‬ ‫وتحميل‬ ‫المختلفة‬ ‫المصادقة‬ ‫وظائف‬ ‫باستخدام‬ .‫نظامك‬ ‫عىل‬ ‫تكون‬ ‫أن‬ ‫بمجرد‬ ‫الملفات‬ ‫بهذه‬ ‫تفعل‬ ‫وماذا‬ ‫الملفات‬ ‫بتحميل‬ ‫له‬ ‫مح‬ ُ ‫س‬ُ‫ي‬ ‫نفس‬ ‫إىل‬ ‫الملفات‬ ‫بتحميل‬ ‫يسمح‬ ً ‫ا‬ ً ‫نموذج‬ ‫ي‬ ‫التاىل‬ ‫كود‬ ‫ال‬ ‫يعرض‬ :‫الصفحة‬ <form enctype="multipart/form- data" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> <input name="to_process" type="file" /> <input type="submit" value="Upload" /> </form> ‫خيار‬ ‫يوفر‬ upload_max_filesize ‫ي‬ ‫ف‬ php.ini ‫الملفات‬ ‫لحجم‬ ‫أقص‬ ً ‫ا‬ ً ‫حد‬ ‫المرفوعة‬ ) ‫يتم‬ ‫عىل‬ ً ‫ا‬ً‫اضي‬ ‫ر‬ ‫افت‬ ‫تعيينه‬ ( 2 ‫ميغابايت‬ ) . ‫وسم‬ ‫أن‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫الحظ‬ form ‫خاصية‬ ‫يأخذ‬ enctype "‫بالقيمة‬ multipart/form- data ." ‫ي‬ ‫ف‬ ‫عنرص‬ ‫كل‬ $_FILES ‫الذي‬ ‫الملف‬ ‫عن‬ ‫معلومات‬ ‫ي‬ ‫تعط‬ ‫مصفوفة‬ ‫ذاته‬ ‫حد‬ ‫ي‬ ‫ف‬ ‫هو‬ : ‫ي‬ ‫ه‬ ‫المفاتيح‬ .‫تحميله‬ ‫تم‬ “name” ‫ب‬ ‫ه‬ ‫ر‬ ‫توفت‬ ‫تم‬ ‫كما‬‫تحميله‬ ‫تم‬ ‫الذي‬ ‫الملف‬ ‫اسم‬ ‫المتصفح‬ ‫واسطة‬ . “type” ‫نوع‬ MIME .‫العميل‬ ‫توقعه‬ ‫كما‬‫تحميله‬ ‫تم‬ ‫الذي‬ ‫للملف‬
  • 414. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 414 “size” ‫تحميله‬ ‫تم‬ ‫الذي‬ ‫الملف‬ ‫حجم‬ ( ‫بالبايت‬ ) . “tmp_name” ” ‫المؤقت‬ ‫الملف‬ ‫اسم‬ temporary file ‫الذي‬ ‫بالملف‬ ‫يحتفظ‬ ‫الذي‬ ‫الخادم‬ ‫عىل‬ “ ‫ر‬ ‫كبت‬‫ملف‬ ‫تحميل‬ ‫المستخدم‬ ‫حاول‬ ‫إذا‬ .‫تحميله‬ ‫تم‬ ‫ك‬ ‫االسم‬ ‫إعطاء‬ ‫فسيتم‬ ، ً ‫ا‬ ً ‫جد‬ " none ." ‫الدالة‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫بنجاح‬ ‫ملف‬ ‫تحميل‬ ‫تم‬ ‫إذا‬ ‫ما‬ ‫الختبار‬ ‫الصحيحة‬ ‫الطريقة‬ is_uploaded_file() : ‫ي‬ ‫التاىل‬ ‫النحو‬ ‫عىل‬ ، if (is_uploaded_file($_FILES['to_process']['tm p_name'])) { // successfully uploaded } ‫ملف‬ ‫ي‬ ‫ف‬ ‫المحدد‬ ،‫للخادم‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫المؤقتة‬ ‫الملفات‬ ‫دليل‬ ‫ي‬ ‫ف‬ ‫الملفات‬ ‫تخزين‬ ‫يتم‬ php.ini ‫الخيار‬ ‫باستخدام‬ upload_tmp_dir ‫دالة‬ ‫استخدم‬ ،‫ملف‬ ‫لنقل‬ . move_uploaded_file() : move_uploaded_file($_FILES['to_process']['t mp_name'], "path/to/put/file/{$file}");
  • 415. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 415 ‫استدعاء‬ ‫يقوم‬ move_uploaded_file() ‫كان‬‫إذا‬ ‫مما‬ ً ‫ا‬ً‫تلقائي‬ ‫بالتحقق‬ ‫الملف‬ ‫تم‬ ‫الدليل‬ ‫إىل‬ ‫تحميلها‬ ‫تم‬ ‫ملفات‬ ‫أي‬ ‫حذف‬ ‫يتم‬ ، ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫انتهاء‬ ‫عند‬ .‫تحميله‬ .‫المؤقت‬
  • 416. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 416 ” ‫النموذج‬ ‫صحة‬ ‫من‬ ‫التحقق‬ Form Validation “ ‫بإد‬ ‫ر‬ ‫للمستخدمي‬ ‫تسمح‬ ‫عندما‬ ‫من‬ ‫التحقق‬ ‫إىل‬ ً ‫عادة‬ ‫تحتاج‬ ‫فإنك‬ ،‫البيانات‬ ‫خال‬ ‫من‬ ‫العديد‬ ‫هناك‬ . ً ‫ا‬ ً ‫الحق‬ ‫الستخدامها‬ ‫تخزينها‬‫أو‬ ‫استخدامها‬ ‫قبل‬ ‫البيانات‬ ‫تلك‬ ‫صحة‬ ‫هو‬ ‫األول‬. ‫البيانات‬ ‫صحة‬ ‫من‬ ‫للتحقق‬ ‫المتاحة‬ ‫اتيجيات‬ ‫ر‬ ‫االست‬ JavaScript ‫من‬ ‫تشغي‬ ‫إيقاف‬ ‫اختيار‬ ‫يمكنه‬ ‫المستخدم‬ ‫ألن‬ ً ‫ا‬ً ‫نظر‬ ،‫ذلك‬ ‫ومع‬ .‫العميل‬ ‫جانب‬ ‫ل‬ JavaScript ‫هو‬ ‫هذا‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫فال‬ ،‫يدعمه‬ ‫ال‬ ً ‫ا‬ ً ‫متصفح‬ ‫يستخدم‬ ‫ربما‬ ‫أو‬ ، ‫الذي‬ ‫الوحيد‬ ‫التحقق‬ ‫عليه‬ ‫تعتمد‬ . ‫استخدام‬‫هو‬ ً ‫ا‬ ً ‫أمان‬ ‫ر‬ ‫األكت‬‫الخيار‬ PHP ‫المثال‬ ‫يوضح‬ .‫الصحة‬ ‫من‬ ‫التحقق‬ ‫اء‬‫ر‬‫إلج‬ ‫ي‬ ‫التاىل‬ ‫وسائط‬‫عنرص‬ ‫بإدخال‬ ‫للمستخدم‬ ‫الصفحة‬ ‫تسمح‬ .‫نموذج‬ ‫مع‬ ‫ذاتية‬ ‫معالجة‬ ‫صفحة‬ ” media item ‫النموذج‬ ‫عناص‬ ‫من‬ ‫ثالثة‬ “ - ‫الملف‬ ‫واسم‬ ‫الوسائط‬ ‫ونوع‬ ‫االسم‬ - ‫اجبارية‬ ‫من‬ ‫الصفحة‬ ‫تقديم‬ ‫فسيتم‬ ،‫منها‬ ‫ألي‬ ‫قيمة‬ ‫إعطاء‬ ‫المستخدم‬ ‫أهمل‬ ‫إذا‬ . ‫يتم‬ .‫بالتحديد‬ ‫الخطأ‬ ‫توضح‬ ‫برسالة‬ ‫جديد‬ ‫تحديد‬ ‫أي‬ ‫من‬ ‫حقول‬ ‫ال‬ ‫قام‬ ‫نموذج‬ ،‫للمستخدم‬ ‫ي‬ ‫إضاف‬ ‫كدليل‬ ، ً ‫ا‬ً ‫ر‬ ‫أخت‬ .‫بالفعل‬ ‫بملئها‬ ‫المستخدم‬ ‫اإلرسال‬ ‫زر‬ ‫نص‬ ‫ر‬ ‫يتغت‬ "‫من‬ Create "‫إىل‬ " Continue .‫النموذج‬ ‫بتصحيح‬ ‫المستخدم‬ ‫يقوم‬ ‫عندما‬ " <!DOCTYPE html> <html> <head><title>Temperature Conversion</title></head> <body> <?php $name = $_POST['name'] ?? ''; $mediaType = $_POST['media_type'] ?? ''; $filename = $_POST['filename'] ?? ''; $caption = $_POST['caption'] ?? ''; $status = $_POST['status'] ?? '';
  • 417. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 417 $tried = (isset($_POST['tried']) && $_POST['tried'] == 'yes'); if ($tried) { $validated = (!empty($name) && !empty($mediaType) && !empty($filename)); if (!$validated) { ?> <p>The name, media type, and filename are requi red fields. Please fill them out to continue.</p> <?php } } if ($tried && $validated) { "<p>The item has been created.</p>"; } // was this type of media selected? print "selected " if so function mediaSelected($type) { global $mediaType; if ($mediaType == $type) { echo "selected"; } } ?> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> Name: <input type="text" name="name" value="<?php echo $name; ?>"/> <br> Status: <input type="checkbox" name="status" value="ac tive" <?php if ($status == "active") { echo "checked"; } ?> /> Active <br /> Media: <select name="media_type">
  • 418. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 418 <option value="">Choose one</option> <option value="picture" <?php mediaSelected(" picture"); ?> />Picture</option> <option value="audio" <?php mediaSelected("audio" ); ?> />Audio</option> <option value="movie" <?php mediaSelected("movie" ); ?> />Movie</option> </select> <br /> File: <input type="text" name="filename" value="<?php e cho $filename; ?>" /><br /> Caption: <textarea name="caption"><?php echo $cap tion; ?></textarea> <br /> <input type="hidden" name="tried" value="yes" /> <input type="submit" value="<?php echo $tried ? " Continue" : "Create"; ?>" /> </form> </body> </html> ” ‫العمر‬ ‫حقل‬ ‫صحة‬ ‫من‬ ‫للتحقق‬ age ‫ر‬ ‫غت‬ ‫صحيح‬ ‫عدد‬ ‫عىل‬ ‫احتوائه‬ ‫من‬ ‫للتأكد‬ “ :‫كود‬‫ال‬ ‫هذا‬ ‫استخدم‬، ‫سالب‬ $age = intval($age); $validated = $age > 0;
  • 419. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 419 ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫يد‬ ‫ر‬ ‫الت‬ ‫عناوين‬ ‫صحة‬ ‫من‬ ‫التحقق‬ ‫من‬ ‫اإلمالئية‬ ‫األخطاء‬ ‫اكتشاف‬ ‫يمكنك‬ ‫ر‬ ‫مرتي‬ ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫يد‬ ‫ر‬ ‫الت‬ ‫عنوان‬ ‫بإدخال‬ ‫المستخدم‬ ‫مطالبة‬ ‫خالل‬ ( ‫ر‬ ‫حقلي‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫مختلفي‬ ) ‫ي‬ ‫ون‬ ‫ر‬ ‫اإللكت‬ ‫يد‬ ‫ر‬ ‫الت‬ ‫عناوين‬ ‫إدخال‬ ‫من‬ ‫األشخاص‬ ‫منع‬ ‫ا‬ ً ‫أيض‬ ‫يمكنك‬ . ‫ال‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫تحتوي‬ .‫ما‬ ‫مكان‬ ‫ي‬ ‫ف‬ ‫ونقطة‬ )@( ‫عالمة‬ $email1 = strtolower($_POST['email1']); $email2 = strtolower($_POST['email2']); if ($email1 !== $email2) { die("The email addresses didn't match"); } if (!preg_match('/@.+..+$/', $email1)) { die("The email address is malformed"); }
  • 420. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 420 ‫االستجابة‬ ‫رؤوس‬ ‫تعيين‬ ‫ضبط‬ Response Headers ‫استجابة‬ ‫تحتوي‬ HTTP ‫نوع‬ ‫تحدد‬ ‫رؤوس‬ ‫عىل‬ ‫العميل‬ ‫إىل‬ ‫الخادم‬ ‫يرسلها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ ‫جسم‬ “body” ‫وعدد‬ ،‫االستجابة‬ ‫أرسل‬ ‫الذي‬ ‫والخادم‬ ،‫االستجابة‬ ‫البايت‬ ‫ات‬ ‫ي‬ ‫ف‬ ‫الموجودة‬ ‫االستجاية‬ ‫جسم‬ “body” ، ،‫ذلك‬ ‫ومع‬ .‫بنفسك‬ ‫الرؤوس‬ ‫ر‬ ‫تعيي‬ ‫إىل‬ ‫الويب‬ ‫تطبيقات‬ ‫معظم‬ ‫تحتاج‬ ‫ال‬ ‫كنت‬‫إذا‬ ‫ر‬ ‫غت‬ ‫ء‬ ‫ي‬ ‫ر‬ ‫ش‬ ‫إرسال‬ ‫ي‬ ‫ف‬ ‫ترغب‬ HTML ‫إعادة‬‫أو‬ ،‫لصفحة‬ ‫الصالحية‬ ‫انتهاء‬ ‫وقت‬ ‫ر‬ ‫تعيي‬‫أو‬ ، ‫خطأ‬ ‫إنشاء‬ ‫أو‬ ،‫العميل‬ ‫متصفح‬ ‫توجيه‬ HTTP ‫دالة‬ ‫استخدام‬ ‫إىل‬ ‫فستحتاج‬ ،‫محدد‬ header() . ‫الجسم‬ ‫من‬ ‫جزء‬ ‫أي‬ ‫إنشاء‬ ‫قبل‬ ‫بذلك‬ ‫القيام‬ ‫عليك‬ ‫يجب‬ ‫ترويس‬ ‫إلنشاء‬ “body” . ‫إىل‬ ‫االستدعاءات‬ ‫جميع‬ ‫أن‬ ‫ي‬ ‫يعت‬ ‫هذا‬ header() ( ‫أو‬ setcookie() ‫إذا‬ ، ‫اإلرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫بإعداد‬ ‫تقوم‬ ‫كنت‬ ) ‫قبل‬ ‫ر‬ ‫حت‬ ،‫الملف‬ ‫أعىل‬ ‫ي‬ ‫ف‬ ‫تكون‬ ‫أن‬ ‫يجب‬ ‫عالمة‬ < html > :‫فمثال‬ . <?php header("Content-Type: text/plain"); ?> Date: today From: fred To: barney Subject: hands off! My lunchbox is mine and mine alone. Get your own, you filthy scrounger! :‫التحذير‬ ‫هذا‬ ‫ظهور‬ ‫إىل‬ ‫المستند‬ ‫بدء‬ ‫بعد‬ ‫الرؤوس‬ ‫ر‬ ‫تعيي‬ ‫محاولة‬ ‫تؤدي‬
  • 421. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 421 Warning: Cannot add header information - headers already sent . ‫المختلفة‬ ‫المحتويات‬ ‫أنواع‬ Content Types ‫أس‬‫ر‬ ‫يحدد‬ Content-Type "‫هذا‬ ‫يكون‬ ‫ما‬ ً ‫عادة‬ .‫إرجاعه‬ ‫يتم‬ ‫الذي‬ ‫المستند‬ ‫نوع‬ text/html ‫مستند‬ ‫إىل‬ ‫ر‬ ‫يشت‬ ،" HTML .‫مفيدة‬ ‫أخرى‬ ‫مستندات‬ ‫أنواع‬ ‫هناك‬ ‫كن‬‫ول‬ ، " ،‫مثل‬ text/plain " ‫ر‬ ‫يجت‬ ‫مع‬ ‫التعامل‬ ‫عىل‬ ‫المتصفح‬ ‫هذا‬ .‫عادي‬ ‫كنص‬ ‫الصفحة‬ " ‫المصدر‬ ‫عرض‬ ‫يشبه‬ ‫النوع‬ view source ‫تصحيح‬ ‫عند‬ ً ‫ا‬ ً ‫مفيد‬ ‫ويكون‬، ‫ي‬ ‫التلقان‬ " .‫األخطاء‬ ‫التوجيه‬ ‫إعادة‬ ‫عمليات‬ Redirections ‫عنوان‬ ‫إىل‬ ‫المتصفح‬ ‫إلرسال‬ URL ‫التوجيه‬ ‫إعادة‬ ‫باسم‬ ‫رف‬ ُ‫ع‬ُ‫ي‬ ، ‫جديد‬ ” redirection :‫أس‬‫ر‬ ‫باستخدام‬ ‫الموقع‬ ‫عنوان‬ ‫ر‬ ‫تعيي‬ ‫يمكنك‬ ،“ Location ‫بشكل‬ . ‫ال‬ ‫من‬ ‫ر‬ ‫تبق‬ ‫ما‬ ‫اج‬‫ر‬‫إخ‬ ‫أو‬ ‫إنشاء‬ ‫عناء‬ ‫يكلفنا‬ ‫ال‬ ‫وذلك‬ ،‫ذلك‬ ‫بعد‬ ‫ة‬ ‫ر‬ ‫مبارس‬ ‫ستخرج‬ ،‫عام‬ :‫كود‬ header("Location: http://www.google.com/"); exit();
  • 422. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 422 ‫الصالحية‬ ‫انتهاء‬ Expiration ” ‫للعميل‬ ‫مؤقتة‬ ‫ذاكرة‬ ‫وأي‬ ،‫ح‬ ‫ي‬‫ص‬ ‫بشكل‬ ‫المستعرض‬ ‫إبالغ‬ ‫للخادم‬ ‫يمكن‬ proxy “ ‫ق‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫صالحية‬ ‫النتهاء‬ ‫محددين‬ ‫ووقت‬ ‫خ‬ ‫بتاري‬ ،‫والمستعرض‬ ‫الخادم‬ ‫ر‬ ‫بي‬ ‫تكون‬ ‫د‬ .‫المستند‬ :‫أس‬‫ر‬ ‫استخدم‬ ،‫مستند‬ ‫صالحية‬ ‫انتهاء‬ ‫وقت‬ ‫ر‬ ‫لتعيي‬ Expires : header("Expires: Tue, 01 Jul 2021 01:00:00 GMT"); ‫استخد‬ ‫ا‬ ‫م‬ time() ‫و‬ gmstrftime() :‫الصالحية‬ ‫انتهاء‬ ‫خ‬ ‫تاري‬ ‫سلسلة‬ ‫إلنشاء‬ Format a GMT/UTC time/date according to — ftime str gm locale settings ‫استخدم‬ ،" ً ‫ا‬ ً ‫أبد‬ ‫صالحيته‬ ‫ي‬ ‫تنته‬ ‫"ال‬ ‫المستند‬ ‫أن‬ ‫إىل‬ ‫لإلشارة‬ :‫اآلن‬ ‫من‬ ‫عام‬ ‫بعد‬ ‫الوقت‬ $now = time(); $then = gmstrftime("%a, %d %b %Y %H:%M:%S GMT", $now + 365.24 * 60 * 60 *24); header("Expires: {$then}");
  • 423. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 423 Authentication ‫المصادقة‬ ‫مصادقة‬ ‫تعمل‬ HTTP ‫يمكن‬ .‫االستجابة‬ ‫وحاالت‬ ‫الطلبات‬ ‫رؤوس‬ ‫خالل‬ ‫من‬ ‫مرور‬ ‫وكلمة‬ ‫مستخدم‬ ‫اسم‬ ‫إرسال‬ ‫للمتصفح‬ ( ” ‫التحقق‬ ‫بيانات‬ credentials “ ) ‫ي‬ ‫ف‬ ‫تكن‬ ‫لم‬‫أو‬ ‫االعتماد‬ ‫بيانات‬ ‫إرسال‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫الطلبات‬ ‫رؤوس‬ ‫صحيحة‬ ‫الخادم‬ ‫يرسل‬ ، "‫استجابة‬ 401 ” "‫به‬ ‫مرصح‬ ‫ر‬ ‫غت‬ 401 Unauthorized “ ‫ي‬ ‫ف‬ ‫المصادقة‬ ‫مع‬ ‫للتعامل‬ PHP ‫المرور‬ ‫وكلمة‬ ‫المستخدم‬ ‫اسم‬ ‫من‬ ‫تحقق‬ ، ( ‫عناص‬ PHP_AUTH_USER ‫و‬ PHP_AUTH_PW ‫من‬ $_SERVER ) ‫واستدعاء‬ header() "‫استجابة‬ ‫وإرسال‬ ‫المجال‬ ‫ر‬ ‫لتعيي‬ 401 :"Unauthorized header('WWW- Authenticate: Basic realm="Top Secret Files"'); header("HTTP/1.0 401 Unauthorized");
  • 424. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 424 ‫المرور‬ ‫كلمة‬‫أن‬ ‫من‬ ‫للتأكد‬ ‫و‬ ‫المستخدم‬ ‫اسم‬ :ً ‫مثال‬ $authOK = false; $user = $_SERVER['PHP_AUTH_USER']; $password = $_SERVER['PHP_AUTH_PW']; if (isset($user) && isset($password) && $user = =="anas" && $password="12345") { $authOK = true; } if (!$authOK) { header('WWW- Authenticate: Basic realm="Top Secret Files"'); header('HTTP/1.0 401 Unauthorized'); exit; } echo "this is password-protected data"; ‫المرور‬ ‫وكلمة‬ ‫المستخدم‬ ‫اسم‬ ‫تجميع‬ ‫العادة‬ ‫ي‬ ‫ف‬ ‫نموذج‬ ‫خالل‬ ‫من‬ HTML . ‫الحالة‬ ‫على‬ ‫الحفاظ‬ HTTP ” ‫الحالة‬ ‫عديم‬ ‫بروتوكول‬‫هو‬ stateless ‫خادم‬ ‫يكمل‬ ‫أن‬ ‫بمجرد‬ ‫أنه‬ ‫ي‬ ‫يعت‬‫مما‬ ،“ ‫ال‬ ،‫أخرى‬ ‫بعبارة‬ . ‫ر‬ ‫االثني‬ ‫ر‬ ‫بي‬ ‫االتصال‬ ‫ي‬ ‫ينته‬ ،‫ويب‬ ‫لصفحة‬ ‫العميل‬ ‫طلب‬ ‫الويب‬ .‫العميل‬ ‫نفس‬ ‫من‬ ‫تنشأ‬ ‫كلها‬‫الطلبات‬ ‫سلسلة‬ ‫أن‬ ‫عىل‬ ‫للتعرف‬ ‫للخادم‬ ‫طريقة‬ ‫توجد‬ ‫الطلبات‬ ‫ر‬ ‫بي‬ ‫الحالة‬ ‫معلومات‬ ‫تتبع‬ ( ” ‫الجلسة‬ ‫تتبع‬ ‫باسم‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫المعروف‬ session tracking “ ) . # ‫األول‬ ‫األسلوب‬ ‫النموذج‬ ‫حقول‬ ‫استخدام‬ ‫ي‬ ‫ف‬ ‫األساليب‬ ‫هذه‬ ‫إحدى‬ ‫تتمثل‬ # ‫تتعامل‬ .‫المعلومات‬ ‫لتمرير‬ ‫المخفية‬ PHP ‫مثل‬ ً ‫ا‬ ً‫تمام‬ ‫المخفية‬ ‫النموذج‬ ‫حقول‬ ‫مع‬
  • 425. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 425 ‫ي‬ ‫ر‬ ‫مصفوفت‬ ‫ي‬ ‫ف‬ ‫القيم‬ ‫تتوفر‬ ‫لذا‬ ،‫العادية‬ ‫النموذج‬ ‫حقول‬ $_GET ‫و‬ $_POST . ،‫المخفية‬ ‫النموذج‬ ‫حقول‬ ‫باستخدام‬ # ‫ي‬ ‫الثائ‬ ‫األسلوب‬# ‫عنوان‬ ‫كتابة‬ ‫إعادة‬ ‫هو‬ ‫آخر‬ ‫أسلوب‬ URL ‫تحديد‬ ‫يتم‬ ‫ما‬ ً ‫ا‬ً‫غالب‬ . ‫عنوان‬ ‫ي‬ ‫ف‬ ‫كمعامل‬ ‫اإلضافية‬ ‫المعلومات‬ ‫هذه‬ URL ‫عىل‬ . ‫قمت‬ ‫إذا‬ ،‫المثال‬ ‫سبيل‬ ‫عناوين‬ ‫جميع‬ ‫ي‬ ‫ف‬ ‫المعرف‬ ‫هذا‬ ‫ر‬ ‫تضمي‬ ‫فيمكنك‬ ،‫مستخدم‬ ‫لكل‬ ‫فريد‬ ‫معرف‬ ‫ر‬ ‫بتعيي‬ URL : ‫ي‬ ‫التاىل‬ ‫النحو‬ ‫عىل‬ ، http://www.example.com/catalog.php?userid=1 23 :‫الثالث‬ ‫األسلوب‬ ‫تعريف‬ ‫ملفات‬ ‫استخدام‬ ‫هو‬ ‫الحالة‬ ‫عىل‬ ‫للحفاظ‬ ً ‫ا‬ً ‫انتشار‬ ‫ر‬ ‫واألكت‬ ‫االرتباط‬ " cookies " . ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ " cookie " ‫تقديمها‬ ‫للخادم‬ ‫يمكن‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المعلومات‬ ‫من‬ ‫جزء‬‫هو‬ ‫ي‬ ‫وبالتاىل‬ ،‫الخادم‬ ‫إىل‬ ‫المعلومات‬ ‫هذه‬ ‫العميل‬ ‫سيعيد‬ ،‫الحق‬ ‫طلب‬ ‫كل‬ ‫ي‬ ‫ف‬ .‫للعميل‬ ‫ا‬ ‫تعريف‬ ‫ملفات‬ ‫تعد‬ .‫نفسه‬ ّ ‫ف‬ّ ‫يعر‬ ‫خالل‬ ‫من‬ ‫بالمعلومات‬ ‫لالحتفاظ‬ ‫مفيدة‬ ‫الرتباط‬ ‫ي‬ ‫ه‬ ‫الرئيسية‬ ‫المشكلة‬ .‫المشكالت‬ ‫من‬ ‫تخلو‬ ‫ال‬ ‫ولكنها‬ ،‫للمتصفح‬ ‫المتكررة‬ ‫ات‬‫ر‬‫الزيا‬ . ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫بتعطيل‬ ‫ر‬ ‫للمستخدمي‬ ‫تسمح‬ ‫المتصفحات‬ ‫معظم‬ ‫أن‬
  • 426. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 426 ‫مع‬ ‫الحالة‬ ‫عىل‬ ‫للحفاظ‬ ‫طريقة‬ ‫أفضل‬ PHP ‫الجلسة‬ ‫تتبع‬ ‫نظام‬ ‫استخدام‬ ‫ي‬ ‫ه‬ ‫المض‬ ‫من‬ - built-in session tracking ‫ثابتة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫إنشاء‬ ‫النظام‬ ‫هذا‬ ‫لك‬ ‫يتيح‬ . ‫مختلفة‬ ‫صفحات‬ ‫من‬ ‫إليها‬ ‫الوصول‬ ‫يمكن‬ ‫ي‬ ‫ف‬ ‫ات‬‫ر‬‫زيا‬ ‫خالل‬ ‫من‬ ‫وكذلك‬ ،‫تطبيقك‬ ‫تتبع‬ ‫آلية‬ ‫تستخدم‬ ،‫الكواليس‬ ‫اء‬‫ر‬‫و‬ .‫المستخدم‬ ‫نفس‬ ‫بواسطة‬ ‫للموقع‬ ‫مختلفة‬ ‫ي‬ ‫ف‬ ‫الجلسة‬ PHP ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ( ‫عناوين‬ ‫أو‬ URL ) ، ‫بجميع‬ ‫االهتمام‬ ‫مع‬ .‫عنك‬ ً ‫نيابة‬ ‫التفاصيل‬ ” ‫اإلرتباط‬ ‫تعريف‬ ‫ملفات‬ Cookies “ ‫للخادم‬ ‫يمكن‬ .‫حقول‬ ‫عدة‬ ‫عىل‬ ‫تحتوي‬ ‫سلسلة‬ ‫األساس‬ ‫ي‬ ‫ف‬‫هو‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫ر‬ ‫تشت‬ .‫االستجابة‬ ‫رؤوس‬ ‫ي‬ ‫ف‬ ‫متصفح‬ ‫إىل‬ ‫ر‬ ‫أكت‬ ‫أو‬ ‫واحد‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫إرسال‬ ‫ال‬ ‫الصفحات‬ ‫إىل‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫حقول‬ ‫بعض‬ ‫إرسال‬ ‫المتصفح‬ ‫عىل‬ ‫يجب‬ ‫ي‬ ‫ر‬ ‫ت‬ ” ‫القيمة‬ ‫حقل‬ .‫الطلب‬ ‫من‬ ‫كجزء‬‫إليها‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ value ‫تعريف‬ ‫ملف‬ “ ” ‫الحمولة‬ ‫هو‬ ‫االرتباط‬ payload “ - ‫هناك‬ ‫تريدها‬ ‫بيانات‬ ‫أي‬ ‫تخزين‬ ‫للخوادم‬ ‫يمكن‬ ( ‫الحدود‬ ‫ضمن‬ ) .‫شابه‬ ‫وما‬ ‫والتفضيالت‬ ‫المستخدم‬ ‫يحدد‬ ‫فريد‬ ‫كود‬‫مثل‬ ، ‫دالة‬ ‫استخدم‬ setcookie() :‫المتصفح‬ ‫إىل‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫إلرسال‬ setcookie(name [, value [, expires [, path [, d omain [, secure [, httponly ]]]]]]); ‫المحددة‬ ‫المدخالت‬ ‫من‬ ‫االرتباط‬ ‫تعريف‬ ‫لملف‬ ‫نصية‬ ‫سلسلة‬ ‫الدالة‬ ‫هذه‬ ‫ر‬ ‫ىس‬ ُ ‫ن‬ ُ ‫ت‬ ‫أس‬‫ر‬ ‫ر‬ ‫وتنىس‬ Cookie ‫تعريف‬ ‫ملفات‬ ‫إلرسال‬ ً ‫ا‬ً ‫نظر‬ .‫لها‬ ‫كقيمة‬ ‫السلسلة‬ ‫هذه‬ ‫مع‬ ‫استدعاء‬ ‫يجب‬ ،‫االستجابة‬ ‫ي‬ ‫ف‬ ‫كرؤوس‬ ‫االرتباط‬ setcookie() ‫من‬ ‫أي‬ ‫إرسال‬ ‫قبل‬ ‫محتوى‬ “body” ‫وسطاء‬ .‫المستند‬ setcookie() : ‫ي‬ ‫ه‬
  • 427. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 427 ‫اال‬ ” ‫سم‬ name “ ‫ارتباط‬ ‫تعريف‬ ‫ملفات‬ ‫لديك‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ . ‫ر‬ ‫معي‬ ‫ارتباط‬ ‫تعريف‬ ‫لملف‬ ‫فريد‬ ‫اسم‬ ‫أو‬ ‫بيضاء‬ ‫مسافة‬ ‫عىل‬ ‫االسم‬ ‫يحتوي‬ ‫أال‬ ‫يجب‬ .‫مختلفة‬ ‫وخاصيات‬ ‫بأسماء‬ ‫متعددة‬ .‫منقوطة‬ ‫فاصلة‬ ” ‫القيمة‬ value “ .‫االرتباط‬ ‫تعريف‬ ‫بملف‬ ‫المرفقة‬ ‫النصية‬ ‫السلسلة‬ ‫قيمة‬ ” ‫الصالحية‬ ‫انتهاء‬ expires “ ،‫الصالحية‬ ‫انتهاء‬ ‫خ‬ ‫تاري‬ ‫تحديد‬ ‫يتم‬ ‫لم‬ ‫إذا‬ .‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫صالحية‬ ‫انتهاء‬ ” ‫الذاكرة‬ ‫ي‬ ‫ف‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫يحفظ‬ ‫المتصفح‬ ‫فإن‬ memory ‫عىل‬ ‫وليس‬ “ ” ‫القرص‬ disk ‫ي‬ ‫يختق‬ ،‫المتصفح‬ ‫من‬ ‫الخروج‬ ‫عند‬ .“ ‫مث‬ ً ‫ال‬ ‫مرر‬ : time() + 60 * 60 * 2 ‫االرتب‬ ‫تعريف‬ ‫ملف‬ ‫صالحية‬ ‫إلنهاء‬ ‫ي‬ ‫ف‬ ‫اط‬ . ‫ر‬ ‫ساعتي‬ ‫غضون‬ ” ‫المسار‬ path “ ‫لعناوين‬ ‫فقط‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫بإرجاع‬ ‫المتصفح‬ ‫سيقوم‬ URL ‫فيه‬ ‫توجد‬ ‫الذي‬ ‫المجلد‬ ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ ‫المسار‬. ‫المسار‬ ‫هذا‬ ‫تحت‬ ‫الموجودة‬ ‫المثال‬ ‫سبيل‬ ‫عىل‬ .‫الحالية‬ ‫الصفحة‬ domain ‫نطاق‬ ‫لعناوين‬ ‫فقط‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫المتصفح‬ ‫سيعيد‬ URL ‫الموجو‬ ‫هذا‬ ‫داخل‬ ‫دة‬ .‫الخادم‬ ‫مضيف‬ ‫اسم‬‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ .‫المجال‬
  • 428. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 428 Secure ‫اآلمان‬ ‫اتصاالت‬ ‫ر‬ ‫عت‬ ‫فقط‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫بنقل‬ ‫المتصفح‬ ‫سيقوم‬ https ‫اإلعداد‬ . ‫هو‬ ‫ي‬ ‫اض‬ ‫ر‬ ‫االفت‬ " false ‫ر‬ ‫غت‬ ‫اتصاالت‬ ‫ر‬ ‫عت‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫إرسال‬ ‫من‬ ‫بأس‬ ‫ال‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫مما‬ ،" .‫آمنة‬ httponly ‫فقط‬ http ‫عىل‬ ‫الوسيط‬ ‫هذه‬ ‫ر‬ ‫تعيي‬ ‫تم‬‫إذا‬ TRUE ً ‫ا‬ ً ‫متاح‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫فسيكون‬ ، ‫بروتوكول‬ ‫ر‬ ‫عت‬ ‫فقط‬ HTTP ‫أخرى‬ ‫وسائل‬ ‫ر‬ ‫عت‬ ‫إليه‬ ‫الوصول‬ ‫يمكن‬ ‫ال‬ ‫ي‬ ‫وبالتاىل‬ ، :‫مثل‬ JavaScript . ‫دالة‬ setcookie() :‫بديلة‬ ‫صيغة‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫لها‬ setcookie ($name [, $value = "" [, $options = [] ]] ) ‫حيث‬ $options ‫تتبع‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األخرى‬ ‫الوسطاء‬ ‫عىل‬ ‫تحتوي‬ ‫مصفوفة‬ ‫عن‬ ‫عبارة‬ ‫محتوى‬ $value ‫لدالة‬ ‫كود‬ ‫ال‬ ‫سطر‬ ‫طول‬ ‫من‬ ‫القليل‬ ‫هذا‬ ‫يوفر‬ . setcookie() ، ‫ملف‬ ‫إىل‬ ‫الوصول‬ ‫يمكنك‬ ،‫الخادم‬ ‫إىل‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫المتصفح‬ ‫يرسل‬ ‫عندما‬ ‫مصفوفة‬ ‫خالل‬ ‫من‬ ‫هذا‬ ‫االرتباط‬ ‫تعريف‬ $_COOKIE ‫ملف‬ ‫اسم‬ ‫هو‬ ‫المفتاح‬ . ‫حقل‬ ‫ي‬ ‫ه‬ ‫والقيمة‬ ،‫االرتباط‬ ‫تعريف‬ value .‫االرتباط‬ ‫تعريف‬ ‫لملف‬
  • 429. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 429 ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬‫ر‬‫الم‬ ‫عدد‬ ‫يتتبع‬ ‫الصفحة‬ ‫أعىل‬ ‫ي‬ ‫التاىل‬ ‫كود‬ ‫ال‬ :‫المثال‬ ‫سبيل‬ ‫عىل‬ ‫فيها‬ ‫تم‬ :‫العميل‬ ‫هذا‬ ‫بواسطة‬ ‫الصفحة‬ ‫إىل‬ ‫الوصول‬ $pageAccesses = $_COOKIE['accesses'] ?? 0 ; setcookie('accesses', ++$pageAccesses); echo "<h1>$pageAccesses</h1>"; ‫جميع‬ ‫يدعم‬ ‫ال‬ .‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫استخدام‬ ‫حول‬ ‫المحاذير‬ ‫من‬ ‫ر‬ ‫كثت‬‫ال‬ ‫هناك‬ ‫العمالء‬ ) ‫المتصفحات‬ ( ‫أو‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫ي‬ ‫إيقاف‬ ‫للمستخدم‬ ‫فيمكن‬ ،‫قبلها‬ ‫يمكن‬ ‫ال‬ ‫أنه‬ ‫عىل‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫مواصفات‬ ‫تنص‬ ،‫ذلك‬ ‫عىل‬ ‫عالوة‬ .‫تشغيلها‬ ‫االرتباط‬ ‫تعريف‬ ‫ملف‬ ‫حجم‬ ‫يتجاوز‬ ‫أن‬ 4 KB ، ‫ب‬ ‫إال‬ ‫مح‬ ُ ‫س‬ُ‫ي‬ ‫وال‬ 20 ‫تعريف‬ ‫ملف‬ ‫مفيدة‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫تعد‬ ،‫القيود‬ ‫هذه‬ ‫من‬ ‫الرغم‬ ‫عىل‬ ،‫مجال‬ ‫لكل‬ ‫ارتباط‬ .‫للمتصفح‬ ‫المتكررة‬ ‫ات‬‫ر‬‫الزيا‬ ‫خالل‬ ‫من‬ ‫بالمعلومات‬ ‫لالحتفاظ‬ ً ‫ا‬ ً ‫جد‬
  • 430. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 430 “Sessions” ‫الجلسات‬ ‫بسهولة‬ ‫الصفحات‬ ‫متعددة‬ ‫نماذج‬ ‫إنشاء‬ ‫الجلسات‬ ‫لك‬ ‫تتيح‬ ) ‫التسوق‬ ‫عربات‬ ‫مثل‬ ( ، ‫تفضيالت‬ ‫وتخزين‬ ،‫أخرى‬ ‫إىل‬ ‫صفحة‬ ‫من‬ ‫المستخدم‬ ‫مصادقة‬ ‫معلومات‬ ‫وحفظ‬ .‫المواقع‬ ‫أحد‬ ‫عىل‬ ‫الدائمة‬ ‫المستخدم‬ ” ‫جلسة‬ ّ ‫ف‬ّ ‫معر‬ ‫إصدار‬ ‫يتم‬ session ID ، ‫ي‬ ‫اض‬ ‫ر‬ ‫افت‬ ‫بشكل‬ .‫مرة‬ ‫ألول‬ ‫ائر‬‫ز‬ ‫لكل‬ ‫فريد‬ “ ‫معرف‬ ‫تخزين‬ ‫يتم‬ ” ‫الجلسة‬ session ID ‫يسىم‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫ي‬ ‫ف‬ “ PHPSESSID ‫تم‬‫أو‬ ‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫يدعم‬ ‫ال‬ ‫المستخدم‬ ‫متصفح‬ ‫كان‬‫إذا‬ . ‫عناوين‬ ‫ي‬ ‫ف‬ ‫الجلسة‬ ‫معرف‬ ‫ر‬ ‫نش‬ ‫يتم‬ ،‫االرتباط‬ ‫تعريف‬ ‫ملفات‬ ‫تشغيل‬ ‫يقاف‬ ‫إ‬ URL .‫الويب‬ ‫موقع‬ ‫داخل‬ ” ‫تسجيل‬ ‫يمكنك‬ .‫بها‬ ‫مرتبط‬ ‫بيانات‬ ‫مخزن‬ ‫لها‬ ‫جلسة‬ ‫كل‬ register ‫ليتم‬ ‫ات‬ ‫ر‬ ‫المتغت‬ “ ‫البيانات‬ ‫مخزن‬ ‫من‬ ‫تحميلها‬ ‫مخزن‬ ‫ي‬ ‫ف‬ ‫أخرى‬ ‫مرة‬ ‫وحفظها‬ ‫صفحة‬ ‫كل‬ ‫بدء‬ ‫عند‬ ”‫المسجلة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫تستمر‬ .‫الصفحة‬ ‫انتهاء‬ ‫عند‬ ‫البيانات‬ Registered ‫ر‬ ‫بي‬ “ ‫إحدى‬ ‫ي‬ ‫ف‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫عىل‬ ‫اؤها‬‫ر‬‫إج‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫ات‬ ‫ر‬ ‫التغيت‬ ‫رؤية‬ ‫ويمكن‬ ،‫الصفحات‬ .‫األخرى‬ ‫الصفحات‬ ‫من‬ ‫الصفحات‬ “SESSION BASICS” ‫أساسيات‬ ‫الجلسة‬ ‫جديد‬ ‫جلسة‬ ‫معرف‬ ‫إنشاء‬ ‫يتم‬ . ‫ي‬ ‫النص‬ ‫نامج‬ ‫ر‬ ‫الت‬ ‫تشغيل‬ ‫بدء‬‫عند‬ ً ‫ا‬ً‫تلقائي‬ ‫الجلسات‬‫تبدأ‬ ،‫المتصفح‬ ‫إىل‬ ‫إلرساله‬ ‫ارتباط‬ ‫تعريف‬ ‫ملف‬ ‫إنشاء‬ ‫المحتمل‬ ‫ومن‬ ،‫األمر‬ ‫لزم‬ ‫إذا‬ .‫المتجر‬ ‫من‬ ‫ثابتة‬ ‫ات‬ ‫ر‬ ‫متغت‬ ‫أي‬ ‫وتحميل‬
  • 431. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 431 ‫المتغ‬ ‫اسم‬ ‫بتمرير‬ ‫الجلسة‬ ‫ي‬ ‫ف‬ ‫ر‬ ‫متغت‬ ‫تسجيل‬ ‫يمكنك‬ ‫المصفوفة‬ ‫إىل‬ ‫ر‬ ‫ت‬ $_SESSION[] . : ‫ي‬ ‫أساش‬ ‫دخول‬ ‫عداد‬ ‫إليك‬ ،‫المثال‬ ‫سبيل‬ ‫عىل‬ session_start(); $_SESSION['hits'] = $_SESSION['hits'] + 1; echo "This page has been viewed {$_SESSION['hits']} times."; ‫الدالة‬ ‫تقوم‬ session_start() ‫ابطية‬ ‫ر‬ ‫الت‬ ‫المصفوفة‬ ‫ي‬ ‫ف‬ ‫المسجلة‬ ‫ات‬ ‫ر‬ ‫المتغت‬ ‫بتحميل‬ $_SESSION ‫الدالة‬ .‫ات‬ ‫ر‬ ‫المتغت‬ ‫أسماء‬ ‫ي‬ ‫ه‬ ‫المفاتيح‬ . session_id() ‫معرف‬ ‫تعرض‬ .‫الحالية‬ ‫الجلسة‬ ‫ي‬ ‫استدع‬ ،‫الجلسة‬ ‫إلنهاء‬ session_destroy() ‫البيانات‬ ‫مخزن‬ ‫الة‬‫ز‬‫إ‬ ‫إىل‬ ‫هذا‬ ‫يؤدي‬ . ‫كنه‬ ‫ل‬ ،‫الحالية‬ ‫للجلسة‬ ‫االرتبا‬ ‫تعريف‬ ‫ملف‬ ‫يزيل‬ ‫ال‬ ‫المؤقت‬ ‫التخزين‬ ‫ذاكرة‬ ‫من‬ ‫ط‬ ‫الالحقة‬ ‫ات‬‫ر‬‫الزيا‬ ‫ي‬ ‫ف‬ ‫أنه‬ ‫ي‬ ‫يعت‬ ‫وهذا‬ .‫للمتصفح‬ ‫الجلسات‬ ‫ر‬ ‫تمكي‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫للصفحات‬ ‫استدعاء‬ ‫قبل‬ ‫كان‬ ‫كما‬ ‫نفسه‬ ‫الجلسة‬ ّ ‫ف‬ّ ‫معر‬ ‫عىل‬ ‫المستخدم‬ ‫سيحصل‬ ،‫فيها‬ session_destroy() . ‫بيانات‬ ‫أي‬ ‫بدون‬ ‫ولكن‬ ،
  • 432. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 432 ‫المثا‬‫هر‬ ُ ‫ظ‬ُ‫ي‬ ‫ل‬ ‫لتخزين‬ ‫الجلسة‬ ‫استخدام‬ ‫ي‬ ‫التاىل‬ ‫المستخدم‬ ‫تفضيالت‬ index.php <?php session_start(); ?> <html> <head><title>Preferences Set</title></head> <body> <?php $colors = array( 'black' => "#000000", 'white' => "#ffffff", 'red' => "#ff0000", 'blue' => "#0000ff" ); $bg = $colors[$_POST['background'] ?? 'black']; $fg = $colors[$_POST['foreground'] ?? 'white']; $_SESSION['bg'] = $bg; $_SESSION['fg'] = $fg; ?> <p>Thank you. Your preferences have been changed to:<br /> Background: <?php echo $bg; ?><br /> Foreground: <?php echo $fg; ?></p> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POS T"> <select name="background"> <option value="black">black</option> <option value="white">white</option> <option value="red">red</option> <option value="blue">blue</option> </select> <select name="foreground"> <option value="black">black</option> <option value="white"> white</option> <option value="red">red</option> <option value="blue">blue</option> </select> <button type="submit">SUBMET</button> </form> <p> Click
  • 433. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 433 <a href="prefs_session_demo.php">here</a> to see the preferences in action. </p> </body> </html> prefs_session_demo.php <?php session_start() ; $backgroundName = $_SESSION['bg'] ; $foregroundName = $_SESSION['fg'] ; ?> <html> <head><title>Front Door</title></head> <body style = "background- color: <?php echo $backgroundName; ?>; color: <?php echo $foregroundName; ?>"> <h1>Hello everybody</h1> </body> </html>
  • 434. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 434 SSL ” ‫اآلمنة‬ ‫التوصيل‬ ‫مآخذ‬ ‫طبقة‬ ‫توفر‬ (SSL) “Secure Sockets Layer ‫آمنة‬ ‫قناة‬ ‫طلبات‬ ‫ها‬ ‫ر‬ ‫عت‬ ‫تتدفق‬ ‫أن‬ ‫يمكن‬ ‫ردود‬ ‫و‬ HTTP ‫عنوان‬ ‫ر‬ ‫يشت‬ . ‫العادية‬ https:// URL ‫عنوان‬ ‫بخالف‬ ،‫المستند‬ ‫لذلك‬ ‫آمن‬ ‫اتصال‬ ‫إىل‬ URL ‫ل‬ http:// . ‫إدخال‬ ‫ر‬ ‫تعيي‬ ‫يتم‬ HTTPS ‫مصفوفة‬ ‫ي‬ ‫ف‬ $_SERVER "‫عىل‬ on ‫صفحة‬ ‫إنشاء‬ ‫تم‬ ‫إذا‬ " ‫الرد‬ ‫اتصال‬ ‫ر‬ ‫عت‬ ‫لطلب‬ SSL ‫عليك‬ ‫ما‬ ،‫مشفر‬ ‫ر‬ ‫غت‬ ‫اتصال‬ ‫ر‬ ‫عت‬ ‫صفحة‬ ‫إنشاء‬ ‫لمنع‬ . :‫استخدام‬ ‫سوى‬ if ($_SERVER['HTTPS'] !== 'on') { die("Must be a secure connection."); }
  • 435. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 435 ‫البيانات‬ ‫قواعد‬ ‫تدعم‬ PHP ‫ر‬ ‫الكثت‬ ‫ق‬ ‫من‬ ‫وا‬ ‫عد‬ ‫ال‬ .‫بيانات‬ ‫و‬ ‫البيانات‬ ‫قواعد‬ ‫أنظمة‬ ‫تعد‬ MySQL PostgreSQL ‫و‬ Oracle ‫الفقري‬ ‫العمود‬ .‫الحديثة‬ ‫الديناميكية‬ ‫الويب‬ ‫مواقع‬ ‫لمعظم‬ ‫من‬ ‫البيانات‬ ‫قواعد‬ ‫إىل‬ ‫للوصول‬ ‫طريقتان‬ ‫هناك‬ PHP ‫ملحق‬ ‫استخدام‬ ‫هو‬ ‫األول‬ . ‫مكتبة‬ ‫استخدام‬ ‫هو‬ ‫واآلخر‬ ‫البيانات‬ ‫بقاعدة‬ ‫خاص‬ PDO ‫قاعدة‬ ‫عن‬ ‫المستقلة‬ .‫البيانات‬ ً ‫ا‬ ً ‫وثيق‬ ‫ا‬ ً ‫ط‬ ً ‫ارتبا‬ ‫مرتبط‬ ‫كودك‬ ‫فإن‬ ،‫البيانات‬ ‫بقاعدة‬ ‫ا‬ ً ‫ص‬ ً ‫خا‬ ً ‫ا‬ ً ‫امتداد‬ ‫تستخدم‬ ‫كنت‬‫إذا‬ ‫ي‬ ‫تخق‬ ،‫أخرى‬ ‫ناحية‬ ‫من‬ .‫تستخدمها‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫بقاعدة‬ PDO ‫الخاصة‬ ‫الدوال‬ ‫بقا‬ ‫أنظمة‬ ‫ر‬ ‫بي‬ ‫التنقل‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫لذلك‬ ،‫تجريدية‬ ‫بطبقة‬ ‫عنك‬ ‫البيانات‬ ‫عدة‬ ‫برنامجك‬ ‫من‬ ‫واحد‬ ‫سطر‬ ‫ر‬ ‫تغيت‬ ‫مثل‬ ً ‫بسيطا‬ ‫البيانات‬ ‫قاعدة‬ ‫مكتبة‬ ‫مثل‬ ‫التجريد‬ ‫طبقة‬ ‫نقل‬ ‫قابلية‬ ‫ي‬ ‫ر‬ ‫تأن‬ PDO ‫الذي‬ ‫الكود‬ ‫أن‬ ‫حيث‬ ،‫بثمن‬ ً‫أصلي‬ ً ‫ا‬ ً ‫امتداد‬ ‫يستخدم‬ ‫الذي‬ ‫كود‬ ‫ال‬ ‫من‬ ً ‫قليال‬ ‫أبطأ‬ ً ‫عادة‬ ‫يكون‬ ‫يستخدمها‬ ‫ا‬ ً ‫ص‬ ً ‫خا‬ ً ‫ا‬ .‫البيانات‬ ‫بقاعدة‬ .
  • 436. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 436 ‫و‬ ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ SQL ” ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ ‫إدارة‬ ‫نظام‬ (RDBMS) “Relational Database Management System ،‫جداول‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫تنظيم‬ ‫يتم‬ .‫البيانات‬‫يدير‬ ‫خادم‬‫هو‬ ‫سبيل‬ ‫عىل‬ .‫ونوع‬ ‫اسم‬ ‫منها‬ ‫ولكل‬ ،‫األعمدة‬ ‫من‬ ‫عدد‬ ‫عىل‬ ‫جدول‬ ‫كل‬ ‫يحتوي‬ ‫حيث‬ ‫العنوان‬ ‫"يسجل‬ ‫"كتب‬ ‫جدول‬ ‫لدينا‬ ‫يكون‬ ‫قد‬ ،‫المثال‬ ( ‫نصية‬ ‫سلسلة‬ ) ‫اإلصدار‬ ‫وسنة‬ ( ‫رقم‬ ) ‫والمؤلف‬ ( ‫نصية‬ ‫سلسلة‬ ) . ‫تتواصل‬ PHP ‫العالئق‬ ‫البيانات‬ ‫قواعد‬ ‫مع‬ ‫مثل‬ ‫ية‬ MariaDB ‫و‬ Oracle ‫باستخدام‬ ” ‫الهيكلية‬ ‫االستعالم‬ ‫لغة‬ SQL “Structured Query Language ‫يمكنك‬ . ‫استخدام‬ SQL .‫عنها‬ ‫واالستعالم‬ ‫وتعديلها‬ ‫العالئقية‬ ‫البيانات‬ ‫قواعد‬ ‫إلنشاء‬ ‫جملة‬ ‫بناء‬ ‫ينقسم‬ SQL ‫إىل‬ ‫البيانات‬ ‫معالجة‬ ‫لغة‬ Data Manipulation Language - DML ‫داد‬ ‫ر‬ ‫الست‬ ، ‫ا‬ ‫و‬ ، ‫موجودة‬ ‫بيانات‬ ‫قاعدة‬ ‫ي‬ ‫ف‬ ‫وتعديلها‬ ‫لبيانات‬ ‫ت‬ ‫أفعال‬ ‫أو‬ ‫اءات‬‫ر‬‫إج‬ ‫أربعة‬ ‫من‬ ‫تألف‬ :‫فقط‬ SELECT ‫و‬ INSERT ‫و‬ UPDATE ‫و‬ .DELETE ‫البيانات‬ ‫تعريف‬ ‫لغة‬ Data Definition Language - DDL ‫أوامر‬ ‫مجموعة‬ ‫رف‬ ُ‫ع‬ ُ ‫ت‬ SQL ‫وتع‬ ‫البيانات‬ ‫عىل‬ ‫تحتوي‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫البيانات‬ ‫قواعد‬ ‫هياكل‬ ‫إلنشاء‬ ‫المستخدمة‬ .‫ديلها‬ ‫جملة‬ ‫بناء‬ DDL ‫مثل‬ ً ‫ا‬ ً ‫موحد‬ ‫ليس‬ DML ‫يسىم‬ ً ً ‫جدوال‬ ‫لديك‬ ‫أن‬ ‫اض‬ ‫ر‬ ‫بافت‬ books ‫جملة‬ ‫فإن‬ ، SQL : ً ‫ا‬ ً ‫جديد‬ ً ‫ا‬ ً ‫صف‬ ‫ستدرج‬ ‫هذه‬ INSERT INTO books VALUES (null, 4, 'I, Robot', '0-553- 29438-5', 1950, 1);
  • 437. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 437 ‫جملة‬ ‫رج‬ ُ ‫د‬ ُ ‫ت‬ SQL :‫قيم‬ ‫لها‬ ‫توجد‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫األعمدة‬ ‫تحدد‬ ‫ولكنها‬ ً ‫ا‬ ً ‫جديد‬ ً ‫ا‬ ً ‫صف‬ ‫هذه‬ INSERT INTO books (authorid, title, ISBN, pub_year, available) VALUES (4, 'I, Robot', '0-553-29438-5', 1950, 1); ‫عام‬ ‫ها‬ ‫ر‬ ‫نش‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫الكتب‬ ‫جميع‬ ‫لحذف‬ 1979 ‫جملة‬ ‫استخدام‬ ‫يمكننا‬ ، SQL :‫هذه‬ DELETE FROM books WHERE pub_year = 1979; ‫سنة‬ ‫ر‬ ‫لتغيت‬ Roots ‫إىل‬ 1983 ‫جملة‬ ‫استخدم‬ ، SQL :‫هذه‬ UPDATE books SET pub_year=1983 WHERE title='Roots'; :‫استخدم‬ ،‫فقط‬ ‫الثمانينيات‬ ‫ي‬ ‫ف‬ ‫المنشورة‬ ‫كتب‬‫ال‬ ‫لجلب‬ SELECT * FROM books WHERE pub_year > 1979 AND pub_year < 1990; ‫الحقول‬ ‫تحديد‬ ‫ا‬ ً ‫ض‬ً‫أي‬ ‫يمكنك‬ :‫فمثال‬ .‫إرجاعها‬ ‫تريد‬ ‫ي‬ ‫ر‬ ‫الت‬ SELECT title, pub_year FROM books WHERE pub_year > 1979 AND pub_year < 1990;
  • 438. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 438 ‫سبيل‬ ‫عىل‬ .‫متعددة‬ ‫جداول‬ ‫من‬ ‫المعلومات‬ ‫تجمع‬ ‫استعالمات‬ ‫إصدار‬ ‫يمكنك‬ ‫للسما‬ ‫ر‬ ‫والمؤلفي‬ ‫الكتاب‬ ‫ي‬ ‫جدوىل‬ ‫ر‬ ‫بي‬ ‫االستعالم‬ ‫هذا‬ ‫يجمع‬ ،‫المثال‬ ‫من‬ ‫بمعرفة‬ ‫لنا‬ ‫ح‬ :‫كتاب‬‫كل‬‫كاتب‬ SELECT authors.name, books.title FROM books, authors WHERE authors.authorid = books.authorid; ‫شكل‬ ‫إنشاء‬ ‫ر‬ ‫حت‬ ‫يمكنك‬ ‫مخترص‬ ( ‫مستعار‬ ‫اسم‬ ‫و‬ ) : ‫ي‬ ‫يىل‬ ‫كما‬‫الجداول‬ ‫ألسماء‬ SELECT a.name, b.title FROM books b, authors a WHERE a.authorid = b.authorid;
  • 439. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 439 ‫كائن‬ ‫واجهة‬ MySQLi ‫مع‬ ‫المستخدمة‬ ً ‫ا‬ ً‫شيوع‬ ‫ر‬ ‫األكت‬ ‫البيانات‬ ‫قواعد‬ ‫منصة‬ PHP ‫بيانات‬ ‫قاعدة‬ ‫ي‬ ‫ه‬ MySQL ‫تحتوي‬ . PHP ‫البيانات‬ ‫قاعدة‬ ‫ألداة‬ ‫المختلفة‬ ‫الواجهات‬ ‫من‬ ‫عدد‬ ‫عىل‬ ‫باسم‬ ‫المعروفة‬ ‫للكائنات‬ ‫الموجهة‬ ‫الواجهة‬ ‫ي‬ ‫ف‬ ‫سننظر‬ ‫لذلك‬ ،‫هذه‬ MySQLi ، ‫ل‬ ‫المحسن‬ ‫االمتداد‬ MySQL . ‫للكائنات‬ ‫الموجهة‬ ‫الواجهة‬ ‫هذه‬ ‫ألن‬ ً ‫ا‬‫ر‬‫نظ‬ OOP ‫ي‬ ‫ف‬ ‫مدمجة‬ PHP ‫تثبيت‬ ‫تكوين‬ ‫مع‬ $db = new mysqli(host, user, password, databaseName); ‫باسم‬ ‫بيانات‬ ‫قاعدة‬ ‫لدينا‬ ،‫المثال‬ ‫هذا‬ ‫ي‬ ‫ف‬ Library ، ‫ل‬ ‫ي‬ ‫الوهىم‬ ‫المستخدم‬ ‫اسم‬ ‫وسنستخدم‬ anas_admin ‫المرور‬ ‫وكلمة‬ p123ass123word :‫هو‬ ‫استخدامه‬ ‫سيتم‬ ‫الذي‬ ‫ي‬ ‫الفعىل‬ ‫كود‬‫ال‬ . $db = new mysqli("localhost", "anas_admin", "p123ass123word", "library"); ‫كود‬ ‫داخل‬ ‫نفسه‬ ‫البيانات‬ ‫قاعدة‬ ‫محرك‬ ‫إىل‬ ‫الوصول‬ ‫لنا‬ ‫يتيح‬ ‫هذا‬ PHP ‫سنصل‬ ‫ي‬ ‫ف‬ ‫الفئة‬ ‫هذه‬ ‫إنشاء‬ ‫بمجرد‬ . ً ‫ا‬ ً ‫الحق‬ ‫األخرى‬ ‫والبيانات‬ ‫الجداول‬ ‫إىل‬ ‫التحديد‬ ‫وجه‬ ‫عىل‬ ‫ر‬ ‫المتغت‬ $db ‫الخاصة‬ ‫البيانات‬ ‫قاعدة‬ ‫بعمل‬ ‫للقيام‬ ‫الكائن‬ ‫هذا‬ ‫طرق‬ ‫استخدام‬‫يمكننا‬ ، ‫بنا‬
  • 440. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 440 ‫ل‬ ‫بإنشا‬ ‫قوم‬ ‫فئة‬ ‫ء‬ MySQLi ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ $db ‫أوامر‬ ‫سلسلة‬ ‫ي‬ ‫نبت‬ ،‫ذلك‬ ‫بعد‬ . SQL ‫يسىم‬ ‫ر‬ ‫متغت‬ ‫ي‬ ‫ف‬ ‫ونحفظها‬ ‫بنا‬ ‫الخاصة‬ $sql ‫ثم‬ . ‫ي‬ ‫نستدع‬ ‫ال‬ ‫طريقة‬ query ‫نفس‬ ‫ي‬ ‫وف‬ ‫ناجحة‬ ‫كانت‬‫إذا‬ ‫ما‬ ‫لتحديد‬ ‫بها‬ ‫الخاصة‬ ‫اإلرجاع‬ ‫قيمة‬ ‫ر‬ ‫نختت‬ ‫الوقت‬ ( TRUE ) ‫ثم‬ ، ، ‫لذلك‬ ً ‫ا‬ ً ‫وفق‬ ‫الشاشة‬ ‫عىل‬ ‫نعلق‬ close() ‫و‬ ‫االتصال‬ ‫بإغالق‬ ‫تقوم‬ ‫من‬ ‫إتالفه‬ .‫الذاكرة‬ $db = new mysqli("localhost", "anas_admin", "p123ass123word" , "library"); $sql = "INSERT INTO books (authorid, title, ISBN, pub_year, av ailable) VALUES (4, 'I, Robot', '0-553-29438-5', 1950, 1)"; if ($db->query($sql)) { echo "Book data saved successfully."; } else { echo "INSERT attempt failed, please try again later, or call tech support" ; } $db->close(); ‫للعرض‬ ‫البيانات‬ ‫استرجاع‬ ‫ي‬ ‫ف‬ .‫بكتبك‬ ‫قائمة‬ ‫استخالص‬ ‫ي‬ ‫ف‬ ‫ترغب‬ ‫قد‬ ،‫بك‬ ‫الخاص‬ ‫الويب‬ ‫موقع‬ ‫من‬ ‫أخرى‬ ‫منطقة‬ ‫استخدام‬ ‫خالل‬ ‫من‬ ‫ذلك‬ ‫تحقيق‬ ‫يمكننا‬ MySQLi ‫ي‬ ‫ر‬ ‫الت‬ ‫النتائج‬ ‫مجموعة‬ ‫مع‬ ‫والعمل‬ ‫أمر‬ ‫من‬ ‫إنشاؤها‬ ‫تم‬ SELECT SQL ‫ي‬ ‫ف‬ ‫المعلومات‬ ‫لعرض‬ ‫الطرق‬ ‫من‬ ‫العديد‬ ‫هناك‬ . ‫م‬ ‫كائن‬ ‫ي‬ ‫ه‬‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫النتيجة‬ ‫أن‬ ‫الحظ‬ ،‫المتصفح‬ ‫عن‬ ‫ختلف‬ db $ ‫تقوم‬ . PHP ‫لكائن‬ ‫مثيل‬ ‫بإنشاء‬ resualt ‫وتعبئته‬ ‫يال‬ ‫بيانات‬ ‫ي‬ ‫ر‬ ‫الت‬ .‫إرجاعها‬ ‫تم‬
  • 441. ‫لغة‬ php ‫أن‬ .‫م‬ ‫س‬ ‫البيور‬ 441 $db = new mysqli("localhost", "anas_admin", "p123ass123word" , "library"); $sql = "SELECT a.name, b.title FROM books b, authors a WHERE a.authorid=b.authorid"; $result = $db->query($sql); while ($row = $result->fetch_assoc()) { echo "{$row['name']} is the author of: {$row['title ']}<br />"; } $result->close(); $db->close(); ‫طريقة‬ ‫استدعاء‬ ‫نستخدم‬ ،‫هنا‬ query() ‫ي‬ ‫ف‬ ‫إرجاعها‬ ‫تم‬ ‫ي‬ ‫ر‬ ‫الت‬ ‫المعلومات‬ ‫ونخزن‬ :‫المسىم‬ ‫ر‬ ‫المتغت‬ $result ‫نستخدم‬ ‫ثم‬ . ‫ال‬ ‫طريقة‬ fetch_assoc() ‫ر‬ ‫المتغت‬ ‫ي‬ ‫ف‬ ‫الصف‬ ‫هذا‬ ‫بتخزين‬ ‫ونقوم‬ ،‫مرة‬ ‫كل‬ ‫ي‬ ‫ف‬ ‫البيانات‬ ‫من‬ ‫واحد‬ ‫صف‬ ‫ر‬ ‫لتوفت‬ :‫المسىم‬ $row ‫حلقة‬ ‫ضمن‬ .‫للمعالجة‬ ‫صفوف‬ ‫هناك‬ ‫دامت‬‫ما‬‫هذا‬‫يستمر‬ . while ‫ن‬ ‫ي‬ ‫ف‬ ‫المحتوى‬ ‫بإلقاء‬ ‫نقوم‬ ، ‫من‬ ً ‫كال‬ ‫نغلق‬ ، ً ‫ا‬ً ‫ر‬ ‫أخت‬ .‫المتصفح‬ ‫افذة‬ resualt ‫وكائنات‬ .‫البيانات‬ ‫قاعدة‬ multi_query() ‫ي‬ ‫ف‬ ‫المفيدة‬ ‫الطرق‬ ‫ر‬ ‫أكت‬ ‫من‬ ‫واحدة‬ MySQLi ‫تتيح‬ ‫ي‬ ‫ر‬ ‫والت‬ ، ‫أوامر‬ ‫تشغيل‬ ‫لك‬ SQL ‫اء‬‫ر‬‫إج‬ ‫تريد‬ ‫كنت‬‫إذا‬ .‫الجملة‬ ‫نفس‬ ‫ي‬ ‫ف‬ ‫متعددة‬ INSERT ‫ثم‬ ‫جملة‬ UPDATE ،‫مماثلة‬ ‫بيانات‬ ‫إىل‬ ً ‫ا‬ ً ‫استناد‬