YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Arabic subtitles

The Resumes HTML - JavaScript Basics

Get Embed Code
7 Languages

Showing Revision 1 created 06/09/2016 by Udacity Robot.

  1. .>> فلنبدأ بـindex.html

  2. .لا تقلقوا فـHTML بسيط جدًا
  3. .إنه يصف محتوى العناصر وتخطيطها في أي صفحة ويب
  4. .سنقارن ما نراه هنا بموقع الويب
  5. .في هذا القسم العلوي، نرى علامة رأس الصفحة معرَّفة
  6. .وكثيرًا ما سنجد CSS في روابط JavaScript، كهذه هنا
  7. ،وبداخل الجزء الرئيسي من النص، يمكننا أن نرى بأن لدينا محتوى يقول
  8. .Hello world
  9. .وعندما نقلب وننتقل إلى Chrome، فها هو
  10. ،إذا أردتم معرفة المزيد عن HTML
  11. .راجعوا الرابط في ملاحظات المدرب
  12. .وبالنظر في HTML الخاص بسيرتنا الذاتية، فإن هناك بضعة عناصر جدير بنا أن نذكرها
  13. .مثل هذا العنصر، div id equals main
  14. .يمكنني أن أرى بأنها تعبر عن، Hello world here، لكنها ظهرت على موقع الويب
  15. ،Div يمثل عناصر مختلفة في الصفحة
  16. .يمكنكم التفكير فيها عند البدء على أنها كل مربعات الأغراض الفارغة
  17. ،وفي هذه الحالة، أعطينا div معرِّفًا فريدًا وهو main
  18. .الذي ستشير إليه JavaScript لاحقًا
  19. هل ترى أي شيء آخر جيمس؟
  20. ،>> لا تبدو كسيرة ذاتية على الإطلاق حتى الآن
  21. .لكني أرى بالفعل بنية لواحدة
  22. .يبدو وكأن هناك أقسام للتعليم، والعمل، والمشروعات
  23. ما رأيكم في ملء هذه الأقسام ببيانات سيرتنا الذاتية؟
  24. .>> أجل
  25. .أتعلمون، يمتلك مطورو الويب خيارات لبناء صفحات ويب رائعة
  26. .وأعتقد بأن هناك استراتيجيتين واضحتين
  27. يمكنهم ترميز المعلومات بشكلٍ ثابت من خلال كتابة HTML التي
  28. .تعرِّف المحتوى الذي يجب أن يراه المستخدمون بشكلٍ صريح
  29. أو يمكنهم استخدام قالب HTML وملؤه
  30. .بالبيانات برمجيًا عندما يطلب المستخدم صفحة
  31. .وفي هذه الحالة، يمكننا رؤية قسمي الخبرة العملية
  32. .وفي النسخة ذات الترميز الثابت، يمكننا أن نرى كل
  33. .بيانات فيليب جيه فراي مدرجة هنا
  34. .بينما على جانب القالب، نرى قسم الخبرة العملية
  35. .لكنه حتى الآن فارغ
  36. >> من الجيد أن نبدأ بالمسار ذو الترميز الثابت، لكنه لا يُعد حلاً
  37. .على المدى الطويل
  38. ،وفي أي وقت نود فيه إدخال تغيير على الصفحة
  39. .سنضطر إلى فتح HTML، وعمل إجراء التغيير يدويًا، وهو ما قد يمثل معاناة كبيرة
  40. .بالنسبة لمشروع السيرة الذاتية، سنستخدم استراتيجية القالب
  41. ما رأيكم؟
  42. .>> أجل، أرى ذلك مناسبًا
  43. .وعلاوةً على ذلك، لو أننا لم نستخدم تلك الاستراتيجية لكانت هذه الحصة عن HTML
  44. .وهو ما ليس صحيحًا
  45. .>> أجل، هناك مقدمات أخرى رائعة عن HTML على الإنترنت
  46. .راجع ملاحظات المدرب للعثور على بعض الروابط
  47. .في قمة HTML يوجد رابط إلى jQuery.js، مكتبة jQuery
  48. ،وهناك أيضًا helper.js
  49. .الذي يحتوي على بعض JavaScript المساعدة التي أعددناها لمشروعك
  50. .سنعود مرةً أخرى إليها بعد دقائق معدودة
  51. .>> لدينا علامتي برنامج نصي إضافيتين في أسفل HTML
  52. هذه العلامة الخاصة بـresumeBuilder.js تطلب من المستعرض تنزيل بعض
  53. .JavaScript وتنفيذه
  54. .سنستخدم هذا البرنامج النصي لإضافة محتوى HTML للقسم الرئيسي من HTML
  55. .>> سيعرض المستعرض هذه الصفحة التي يظهر فيها Hello world
  56. ،لنمنحكم نظرة عامة أفضل عما يجري هنا
  57. .فقد صغَّرنا الصفحة حتى يمكنكم رؤية كل شيء مرة واحدة
  58. .لدينا Hello world هنا، وبعض أقسام السيرة الذاتية الفارغة، ثم بعض JavaScript
  59. ،وفي أعلى هذا الجانب
  60. .يمكننا أن نرى تمثيلاً صغيرًا لما سيبدو عليه في أي مستعرض
  61. سنطبع Hello world ثم
  62. .بعد Hello world، لدينا كل أقسام السيرة الذاتية
  63. ،وعندما ننقر فوق قسم JavaScript الذي يحتوي على resume builder هنا
  64. .سيشغِّل المستعرض البرنامج النصي
  65. الذي سيغيِّر HTML في أقسام الخبرات هذه
  66. .وستُظهر الصفحة الآن سيرتنا الذاتية
  67. .>> لكن انتظروا
  68. .ربما تسألون أنفسكم، ماذا عن كل أقسام الخبرات هذه
  69. إنها تبدو مثلما هي في السيرة الذاتية، لكنها
  70. .لا تظهر على الصفحة الآن
  71. .والسبب في ذلك هو تلك البرامج النصية في أسفل سيرتنا الذاتية
  72. وباستخدام JavaScript، سنتحقق لنرى ما إذا كان أيٌّ
  73. .من هذه الأقسام يحتوي على أي محتوى
  74. .وإذا لم تكن تحتوي على محتوى، فسنخفيها
  75. ستكون لدينا فرصة تقسيم أقسام JavaScript هذه لاحقًا