Return to Video

The Resumes HTML - JavaScript Basics

  • 0:05 - 0:08
    .>> فلنبدأ بـindex.html
  • 0:08 - 0:11
    .لا تقلقوا فـHTML بسيط جدًا
  • 0:11 - 0:14
    .إنه يصف محتوى العناصر وتخطيطها في أي صفحة ويب
  • 0:15 - 0:19
    .سنقارن ما نراه هنا بموقع الويب
  • 0:19 - 0:23
    .في هذا القسم العلوي، نرى علامة رأس الصفحة معرَّفة
  • 0:23 - 0:27
    .وكثيرًا ما سنجد CSS في روابط JavaScript، كهذه هنا
  • 0:28 - 0:32
    ،وبداخل الجزء الرئيسي من النص، يمكننا أن نرى بأن لدينا محتوى يقول
  • 0:32 - 0:33
    .Hello world
  • 0:34 - 0:38
    .وعندما نقلب وننتقل إلى Chrome، فها هو
  • 0:39 - 0:41
    ،إذا أردتم معرفة المزيد عن HTML
  • 0:41 - 0:44
    .راجعوا الرابط في ملاحظات المدرب
  • 0:44 - 0:50
    .وبالنظر في HTML الخاص بسيرتنا الذاتية، فإن هناك بضعة عناصر جدير بنا أن نذكرها
  • 0:50 - 0:53
    .مثل هذا العنصر، div id equals main
  • 0:53 - 0:57
    .يمكنني أن أرى بأنها تعبر عن، Hello world here، لكنها ظهرت على موقع الويب
  • 0:58 - 1:00
    ،Div يمثل عناصر مختلفة في الصفحة
  • 1:00 - 1:04
    .يمكنكم التفكير فيها عند البدء على أنها كل مربعات الأغراض الفارغة
  • 1:04 - 1:08
    ،وفي هذه الحالة، أعطينا div معرِّفًا فريدًا وهو main
  • 1:08 - 1:10
    .الذي ستشير إليه JavaScript لاحقًا
  • 1:11 - 1:13
    هل ترى أي شيء آخر جيمس؟
  • 1:13 - 1:16
    ،>> لا تبدو كسيرة ذاتية على الإطلاق حتى الآن
  • 1:16 - 1:18
    .لكني أرى بالفعل بنية لواحدة
  • 1:18 - 1:23
    .يبدو وكأن هناك أقسام للتعليم، والعمل، والمشروعات
  • 1:23 - 1:26
    ما رأيكم في ملء هذه الأقسام ببيانات سيرتنا الذاتية؟
  • 1:26 - 1:27
    .>> أجل
  • 1:27 - 1:31
    .أتعلمون، يمتلك مطورو الويب خيارات لبناء صفحات ويب رائعة
  • 1:31 - 1:34
    .وأعتقد بأن هناك استراتيجيتين واضحتين
  • 1:34 - 1:37
    يمكنهم ترميز المعلومات بشكلٍ ثابت من خلال كتابة HTML التي
  • 1:37 - 1:41
    .تعرِّف المحتوى الذي يجب أن يراه المستخدمون بشكلٍ صريح
  • 1:41 - 1:43
    أو يمكنهم استخدام قالب HTML وملؤه
  • 1:43 - 1:46
    .بالبيانات برمجيًا عندما يطلب المستخدم صفحة
  • 1:46 - 1:49
    .وفي هذه الحالة، يمكننا رؤية قسمي الخبرة العملية
  • 1:49 - 1:52
    .وفي النسخة ذات الترميز الثابت، يمكننا أن نرى كل
  • 1:52 - 1:55
    .بيانات فيليب جيه فراي مدرجة هنا
  • 1:55 - 1:58
    .بينما على جانب القالب، نرى قسم الخبرة العملية
  • 1:58 - 1:59
    .لكنه حتى الآن فارغ
  • 2:00 - 2:04
    >> من الجيد أن نبدأ بالمسار ذو الترميز الثابت، لكنه لا يُعد حلاً
  • 2:04 - 2:05
    .على المدى الطويل
  • 2:05 - 2:07
    ،وفي أي وقت نود فيه إدخال تغيير على الصفحة
  • 2:07 - 2:12
    .سنضطر إلى فتح HTML، وعمل إجراء التغيير يدويًا، وهو ما قد يمثل معاناة كبيرة
  • 2:12 - 2:16
    .بالنسبة لمشروع السيرة الذاتية، سنستخدم استراتيجية القالب
  • 2:16 - 2:17
    ما رأيكم؟
  • 2:17 - 2:19
    .>> أجل، أرى ذلك مناسبًا
  • 2:19 - 2:21
    .وعلاوةً على ذلك، لو أننا لم نستخدم تلك الاستراتيجية لكانت هذه الحصة عن HTML
  • 2:21 - 2:24
    .وهو ما ليس صحيحًا
  • 2:24 - 2:28
    .>> أجل، هناك مقدمات أخرى رائعة عن HTML على الإنترنت
  • 2:28 - 2:30
    .راجع ملاحظات المدرب للعثور على بعض الروابط
  • 2:30 - 2:35
    .في قمة HTML يوجد رابط إلى jQuery.js، مكتبة jQuery
  • 2:35 - 2:38
    ،وهناك أيضًا helper.js
  • 2:38 - 2:43
    .الذي يحتوي على بعض JavaScript المساعدة التي أعددناها لمشروعك
  • 2:43 - 2:45
    .سنعود مرةً أخرى إليها بعد دقائق معدودة
  • 2:45 - 2:49
    .>> لدينا علامتي برنامج نصي إضافيتين في أسفل HTML
  • 2:49 - 2:53
    هذه العلامة الخاصة بـresumeBuilder.js تطلب من المستعرض تنزيل بعض
  • 2:53 - 2:55
    .JavaScript وتنفيذه
  • 2:55 - 3:00
    .سنستخدم هذا البرنامج النصي لإضافة محتوى HTML للقسم الرئيسي من HTML
  • 3:00 - 3:03
    .>> سيعرض المستعرض هذه الصفحة التي يظهر فيها Hello world
  • 3:05 - 3:08
    ،لنمنحكم نظرة عامة أفضل عما يجري هنا
  • 3:08 - 3:11
    .فقد صغَّرنا الصفحة حتى يمكنكم رؤية كل شيء مرة واحدة
  • 3:11 - 3:17
    .لدينا Hello world هنا، وبعض أقسام السيرة الذاتية الفارغة، ثم بعض JavaScript
  • 3:17 - 3:18
    ،وفي أعلى هذا الجانب
  • 3:18 - 3:22
    .يمكننا أن نرى تمثيلاً صغيرًا لما سيبدو عليه في أي مستعرض
  • 3:22 - 3:24
    سنطبع Hello world ثم
  • 3:24 - 3:28
    .بعد Hello world، لدينا كل أقسام السيرة الذاتية
  • 3:28 - 3:32
    ،وعندما ننقر فوق قسم JavaScript الذي يحتوي على resume builder هنا
  • 3:32 - 3:34
    .سيشغِّل المستعرض البرنامج النصي
  • 3:34 - 3:38
    الذي سيغيِّر HTML في أقسام الخبرات هذه
  • 3:38 - 3:41
    .وستُظهر الصفحة الآن سيرتنا الذاتية
  • 3:41 - 3:42
    .>> لكن انتظروا
  • 3:42 - 3:45
    .ربما تسألون أنفسكم، ماذا عن كل أقسام الخبرات هذه
  • 3:45 - 3:47
    إنها تبدو مثلما هي في السيرة الذاتية، لكنها
  • 3:47 - 3:48
    .لا تظهر على الصفحة الآن
  • 3:48 - 3:51
    .والسبب في ذلك هو تلك البرامج النصية في أسفل سيرتنا الذاتية
  • 3:51 - 3:54
    وباستخدام JavaScript، سنتحقق لنرى ما إذا كان أيٌّ
  • 3:54 - 3:56
    .من هذه الأقسام يحتوي على أي محتوى
  • 3:56 - 3:58
    .وإذا لم تكن تحتوي على محتوى، فسنخفيها
  • 3:58 - 4:01
    ستكون لدينا فرصة تقسيم أقسام JavaScript هذه لاحقًا
Tytuł:
The Resumes HTML - JavaScript Basics
Opis:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud804 - Javascript Basics
Duration:
04:01
Udacity Robot edited arabski subtitles for 01-04 The_Resumes_HTML

Arabic subtitles

Revisions