IT361
it361://midterm
1 / 1

IT361 · Web Technologiesالجامعة السعودية الإلكترونية

مراجعة MTA
الأسابيع 1 إلى 5

ملخص للسلايدات بالعربي، والمصطلحات بالإنجليزي كما تأتي في الاختبار. فيه أمثلة حية تجربينها، وحيل للحفظ، وأسئلة تختبرين بها نفسك. التركيز الأكبر على الأسبوع 3 و4 و5.

للتنقل: اسحبي الشاشة لليسار، أو استخدمي زر «التالي» في الأسفل، أو أسهم الكيبورد. زر «الفهرس» في الأعلى ينقلك لأي موضوع، والصفحة تتذكر آخر سلايد وصلتِ له.

قبل البداية

خطة المذاكرة اليوم

اختاري الخطة حسب الوقت المتبقي على الاختبار. خذي استراحة 5 دقائق كل 25 إلى 30 دقيقة، فالتركيز يقل بعدها.

إذا عندك 3 ساعات تقريبًا

  1. 15 دقيقة: الأسبوع 1 و2 بسرعة، ثم أسئلتهم.
  2. 45 دقيقة: الأسبوع 3. ركّزي على الجداول والنماذج وأنواع input الجديدة، وجرّبي الأمثلة الحية بيدك.
  3. 45 دقيقة: الأسبوع 4 (CSS). الـ selectors والـ specificity والـ box model، مع الأمثلة الحية.
  4. 35 دقيقة: الأسبوع 5 (JavaScript). تتبّعي كل كود بالقلم واكتبي الناتج قبل أن تفتحي الإجابة.
  5. 20 دقيقة: Blurting لكل أسبوع (الطريقة في السلايد التالي).
  6. 20 دقيقة: «فخاخ الاختبار»، ثم الأسئلة التي أخطأتِ فيها.

إذا الوقت أقل من ساعة ونصف

  1. سلايد «فخاخ الاختبار».
  2. أسئلة الأسبوع 3، ثم 4، ثم 5. كل سؤال تخطئين فيه، ارجعي لسلايده فقط.
  3. «ورقة آخر نظرة» قبل الاختبار بنصف ساعة.
آخر 20 دقيقة

لا تبدئي موضوعًا جديدًا. راجعي «ورقة آخر نظرة» فقط، واشربي ماء.

قبل البداية

كيف تحفظين أسرع

إعادة القراءة تعطي إحساسًا بالفهم، لكن الذي يثبّت المعلومة هو أن تسترجعيها من ذاكرتك. هذه الطرق مرتبة من الأهم.

اختبري نفسك أولًا

في سلايدات الأسئلة، جاوبي بصوت أو على ورقة، ثم افتحي الإجابة. الخطأ هنا مفيد لأنه يعلق في الذاكرة.

Blurting بعد كل أسبوع

اقلبي الجوال، واكتبي في دقيقتين كل ما تتذكرينه. بعدها قارني بالسلايدات وأكملي الناقص بقلم بلون مختلف. الناقص هو ما تراجعينه.

اكتبي الكود بيدك

جدول كامل بـ thead وtbody، قاعدة CSS، حلقة for. الصيغة تثبت عندما تكتبينها، لا عندما تنظرين إليها.

ركّزي على الفروق

الاختبار يحب «ما الفرق بين…»: GET وPOST، radio وcheckbox، padding وmargin، absolute وrelative، while وdo…while، break وcontinue.

ارسمي

البرواز للـ box model، الشجرة للـ selectors، والطبقات الثلاث للـ three-tier. الرسمة أسهل في التذكر من الفقرة.

الصناديق الملونة

في كل سلايد صندوق حيلة للحفظ وصندوق انتبهي. إذا ضاق الوقت، اقرئي هذه الصناديق فقط.

قبل البداية

خريطة المادة

أرقام الصفحات من ملف IT361 Slides.pdf، لو أردتِ الرجوع للسلايد الأصلي.

الأسبوعالموضوعأهم ما فيهصفحات الملفالأولوية
1Internet & Web basicsURL وDNS وHTTP، GET وPOST، three-tier1–54عادية
2Introduction to HTML5هيكل الصفحة، العناوين، الروابط والمسارات55–81عادية
3Images, lists, tables, formsالجداول، النماذج، الروابط الداخلية82–130★ عالية
3HTML5 input types & page structureأنواع input، datalist، العناصر الدلالية131–187★ عالية
4CSS3selectors، specificity، box model، positioning، media queries188–243★ عالية
5Introduction to JavaScriptالمتغيرات، العمليات، if، switch، الحلقات244–295★ عالية
ملاحظتان

غلاف أول محاضرة في الملف مكتوب عليه Week 2، لكنه محتوى الأسبوع الأول. والنجمة * في عناوين بعض سلايدات الدكتور تعني غالبًا أنها مهمة، لذلك وضعت عليها هنا علامة مهم ★.

الأسبوع 1ص 7–14، 40–44

الإنترنت والويب: من ARPANET إلى W3C

الإنترنت (Internet)

  • شبكة عالمية من أجهزة الكمبيوتر. بدأت بـ ARPANET التي نفذتها ARPA أواخر الستينات لربط حوالي 12 جامعة ومركز بحث.
  • أهم فائدة مبكرة لها: البريد الإلكتروني (e-mail).
  • Packet switching: البيانات تُرسل في حزم صغيرة (packets) فيها العنوان، والتحقق من الأخطاء، والترتيب.
  • TCP: يضمن وصول الرسالة كاملة وسليمة من المرسل إلى المستقبل.
  • IP: يربط الشبكات المختلفة ببعضها («شبكة الشبكات»). لكل جهاز IP address فريد. معًا اسمهما TCP/IP.
  • IPv4 مستخدم منذ 1984 وعناوينه قاربت على النفاد. IPv6 عناوين أكثر بكثير وأمان أفضل.

الويب (World Wide Web)

  • خدمة تعمل عبر الإنترنت لتشغيل تطبيقات الويب وعرض المستندات.
  • Tim Berners-Lee في CERN سنة 1989: اخترع HTML وكتب بروتوكول HTTP.
  • URL هو عنوان الصفحة، ولكل صفحة URL خاص بها.
  • HTTPS = HTTP مع تشفير SSL وTLS، للمواقع التي فيها بيانات خاصة مثل البطاقات البنكية.
  • W3C أسسها Berners-Lee في أكتوبر 1994 لتطوير تقنيات الويب. معاييرها اسمها Recommendations. مهم ★ هدفها الأساسي ويب متاح للجميع مهما كانت الإعاقة أو اللغة أو الثقافة.

Web 1.0 و Web 2.0

  • Web 1.0: شركات قليلة تنشر والمستخدم يقرأ فقط («brochure web»). مثل محاضرة.
  • Web 2.0: المستخدمون يصنعون المحتوى وينظمونه ويشاركونه. اسمه architecture of participation. مثل محادثة.
  • Tagging: وضع وسوم على المحتوى ليسهل إيجاده.
  • Semantic Web: المستقبل، حيث يفهم الكمبيوتر معنى البيانات.
حيلة للحفظ

الإنترنت هو الطرق والكابلات، والويب خدمة تسير عليها مثل السيارات. البريد الإلكتروني خدمة أخرى على نفس الطرق. TCP يتأكد أن الطرد وصل كاملًا، وIP يعرف عنوان البيت.

الأسبوع 1ص 17–27

رحلة طلب الصفحة: URL ثم DNS ثم HTTP

http://البروتوكول HTTP www.deitel.comhostname: اسم الخادم (host) /books/المجلد (غالبًا virtual) downloads.htmlاسم المورد

الخطوات بالترتيب

  1. تكتبين URL أو تضغطين hyperlink.
  2. DNS server يترجم الـ hostname إلى IP address (رقم مثل 192.178.5.2).
  3. المتصفح يرسل HTTP request:
    GET /books/downloads.html HTTP/1.1 ومعه Host: www.deitel.com
  4. الخادم يرد بسطر الحالة: HTTP/1.1 200 OK نجاح، أو HTTP/1.1 404 Not found المورد غير موجود.
  5. بعده HTTP headers مثل Content-type: text/html، ثم سطر فارغ يعني «انتهت الـ headers».
  6. المتصفح يعرض المحتوى حسب نوعه.

MIME type مهم ★

يحدد نوع البيانات المرسلة حتى يعرف المتصفح كيف يتعامل معها.

  • text/html صفحة HTML
  • text/plain نص يُعرض مباشرة
  • image/jpeg صورة JPEG، فيحاول المتصفح عرضها

مصطلحات

  • URI يعرّف موردًا على الإنترنت. الذي يبدأ بـ http:// اسمه URL.
  • مهم ★ المسار غالبًا virtual directory لأسباب أمنية، والخادم يترجمه لمكانه الحقيقي ويخفيه.
  • خوادم ويب مشهورة: Apache HTTP Server وMicrosoft IIS.
انتبهي

DNS يحوّل الاسم إلى رقم IP فقط. نقل الصفحة نفسها هو عمل HTTP.

الأسبوع 1ص 28–32

GET و POST و Caching

GETPOST
الوظيفةيجلب (retrieve) معلومات من الخادميرسل (post) بيانات إلى الخادم
مكان البياناتتُضاف لنهاية الـ URL كـ query stringداخل رسالة HTTP، لا في الـ URL
مثالwww.google.com/search?q=deitelwww.searchengine.com/search
الحجممحدود بعدد معين من الأحرفمناسب للبيانات الكبيرة
الظهورتظهر في شريط العنوانلا يراها المستخدم
يبدأ منفورم method="get"، أو كتابة الرابط في المتصفحفورم method="post"
Cacheممكن يُحفظعادةً لا يُحفظ رده

تفكيك الـ query string

www.google.com/search?q=deitel

  • search اسم الـ form handler على الخادم.
  • q اسم المتغير في الفورم، وdeitel كلمة البحث.
  • ? يفصل الـ query string عن باقي الرابط.
  • كل زوج name=value، والأزواج يفصل بينها &.

Client-side caching

  • المتصفح يحفظ الصفحات التي فتحتِها مؤخرًا على الجهاز لتفتح أسرع.
  • رد HTTP يحدد كم من الوقت يبقى المحتوى fresh.
  • مهم ★ المتصفح عادةً لا يحفظ رد POST، لأن الإرسال التالي قد يرجع نتيجة مختلفة.
حيلة للحفظ

GET بطاقة بريدية: أي أحد يقرأ ما عليها في الرابط. POST ظرف: البيانات داخل الرسالة.

انتبهي

السلايد يقول إن POST «يخفي» البيانات، أي لا تظهر في شريط العنوان. هذا لا يعني أنها مشفرة. التشفير يأتي من HTTPS.

الأسبوع 1ص 33–38

الطبقات الثلاث، والـ client مقابل الـ server

Three-tier web application

Top tier · client tier · user interface tierBrowser

واجهة التطبيق: تجمع المدخلات وتعرض المخرجات.

Middle tier · business logic tierWeb server

فيه business logic وcontroller logic وpresentation logic. يتحكم في التواصل بين المستخدم والبيانات.

Bottom tier · data tier · information tierDatabase

يحفظ بيانات التطبيق.

اسمها multitier أو n-tier applications: تقسيم الوظائف إلى مجموعات منطقية (tiers).

Client-side scripting (JavaScript)

  • يُستخدم للتحقق من المدخلات (validate)، والتفاعل مع المتصفح، وتحسين الصفحات، والتواصل بين المتصفح والخادم.
  • حدوده: يعتمد على المتصفح (browser dependency)، لا يستطيع الوصول لملفات جهازك، وأي أحد يرى الكود من view source.
  • مهم ★ كل تحقق على الـ client يجب أن يتكرر على الـ server. لا تضعي كلمات مرور أو بيانات حساسة في الـ client.

Server-side scripting

  • مرونة أكبر وقدرات أوسع، ويصنع ردًا مخصصًا لكل مستخدم.
  • مثال الطيران: تطلبين رحلات بين مدينتين، فيسأل الخادم قاعدة البيانات ويبني صفحة HTML بالنتائج ويرسلها.
  • لغات: PHP، Python، Ruby، Java، ASP.NET، JavaScript.
حيلة للحفظ

المطعم: الصالة والمنيو هي client tier، المطبخ middle tier، والمخزن data tier.

الأسبوع 1ص 39، 45–53

تصميم الويب و Responsive Web Design

اللغات وأدوارها

  • HTML: markup language تحدد محتوى الصفحة وهيكلها.
  • CSS: الشكل: الخطوط، المسافات، الأحجام، الألوان، المواقع.
  • JavaScript: صفحات ديناميكية تتغير مع الأحداث مثل إدخال المستخدم. هي برمجة الـ client-side.

أقسام تصميم الويب

Design، Development، Content strategy، Multimedia.

  • IxD (Interaction design): الموقع سهل وفعّال وممتع.
  • UI (User interface): تنظيم الأزرار والروابط والقوائم.
  • UX (User experience): تجربة إيجابية للمستخدم.

وثائق المصمم

  • User research & testing: اسمه UCD (User-Centered Design).
  • Wireframe: هيكل صفحة واحدة بخطوط: أين المحتوى والقوائم.
  • Site diagram: هيكل الموقع كاملًا وعلاقة الصفحات ببعض.
  • Storyboard / user flow: مسار المستخدم داخل الموقع خطوة بخطوة.
  • Visual design: الشكل: الشعار والألوان والخطوط.

Front-end و Back-end

  • Front-end: كل ما يظهر في المتصفح: التصميم والواجهة وHTML وCSS وJavaScript.
  • Back-end: برامج على الخادم: معالجة النماذج، قواعد البيانات، أنظمة إدارة المحتوى.

Responsive Web Design

  • استراتيجية للتعامل مع مقاسات شاشات غير معروفة.
  • بدونه على الجوال: نص صغير، روابط صعب الضغط عليها، وتكبير وتحريك مزعج.
  • الحل: ملف HTML واحد لكل الأجهزة، مع style sheets مختلفة حسب حجم الـ viewport.
  • مهم ★ يحل مشاكل التخطيط، لكنه ليس حلًا لكل تحديات الجوال.
حيلة للحفظ

wireframe = هيكل صفحة واحدة. site diagram = خريطة الموقع كله. storyboard = قصة المستخدم وهو يتنقل.

الأسبوع 2ص 58–71

هيكل صفحة HTML5

<!DOCTYPE html>

<!-- Fig. 2.1: main.html -->
<!-- First HTML5 example. -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
  </head>

  <body>
    <p>Welcome to HTML5!</p>
  </body>
</html>

Start / end tags مهم ★

  • start tag: اسم العنصر بين أقواس <html>. end tag: نفس الاسم مع slash </html>.
  • void elements (empty elements) ليس لها end tag، مثل <br> و<img> و<meta>.
  • Attributes في الـ start tag: name ثم = ثم value. علامات التنصيص مستحسنة.
العنصروظيفته
<!DOCTYPE html>مطلوب حتى يعرض المتصفح الصفحة في standards mode.
<!-- -->تعليق يتجاهله المتصفح، لتوضيح الكود.
htmlيحتوي القسمين head وbody.
headمعلومات عن الصفحة: الترميز (UTF-8 الأشهر)، العنوان، ويمكن أن يحتوي CSS وscripts.
bodyالمحتوى الذي يراه الزائر.
titleعنصر nested داخل head. يظهر في شريط المتصفح والتبويب والمفضلة، وتستخدمه محركات البحث.
pفقرة.
h1–h6ستة مستويات للعناوين. h1 الأهم والأكبر، وكل واحد بعده أصغر.

الملف يُحفظ بامتداد .html أو .htm، ويُكتب بأي محرر نصوص مثل Notepad++ وSublime. خدمة W3C validation تتأكد أن الكود صحيح (syntax).

حيلة للحفظ

head هو الرأس: أفكار عن الصفحة لا تُرى. body هو الجسم: ما يراه الناس.

انتبهي

title عنوان التبويب داخل head، وh1 عنوان ظاهر داخل body، وheader عنصر HTML5 للترويسة (الأسبوع 3). ثلاثة أشياء مختلفة.

الأسبوع 2ص 72–80

الروابط والمسارات

<a href="http://www.facebook.com">Facebook</a>
<a href="mailto:deitel@deitel.com">Send an email</a>
  • الروابط تُصنع بعنصر a (anchor). مهم ★ href = hypertext reference: مكان المورد، صفحة أو مكان داخل صفحة أو بريد إلكتروني.
  • إذا لم يجد الخادم المستند يرجع خطأ 404. والمتصفح عادةً يضع خطًا تحت الرابط ويلونه بالأزرق.
  • mailto: يفتح برنامج البريد الافتراضي برسالة موجهة لهذا العنوان.
Absolute URLRelative URL
ماذا يكتبالرابط كاملًا: protocol ثم domain ثم pathالمسار نسبةً للملف الحالي فقط
متىلصفحة على موقع آخرلصفحة في نفس موقعك
مثالhttp://www.seu.edu.sarecipes/index.html
 
jenskitchen/            (the root)
├── about.html
├── index.html
├── images/
│   ├── jenskitchen.gif
│   └── spoon.gif
└── recipes/
    ├── salmon.html
    ├── tapenade.html
    └── pasta/
        ├── couscous.html
        └── linguine.html
الحالةمنإلىhref
نفس المجلدindex.htmlabout.htmlabout.html
مجلد أسفلindex.htmlsalmon.htmlrecipes/salmon.html
مجلد أعلىsalmon.htmlindex.html../index.html
مستويان للأعلىcouscous.htmlindex.html../../index.html
من الجذر (site root)أي صفحةsalmon.html/recipes/salmon.html
حيلة للحفظ

../ اصعدي مجلدًا (كل ../ درجة). / في البداية: ابدئي من الجذر. اسم-مجلد/: انزلي داخله.

الأسبوع 1 و2 · أسئلة

اختبري نفسك: الأسبوع 1 و2

جاوبي بصوت أو على ورقة أولًا، ثم اضغطي «الإجابة».

1ما الفرق بين Internet و Web؟

الإنترنت شبكة عالمية تربط الأجهزة والشبكات. الويب خدمة تعمل فوق الإنترنت لعرض المستندات والتطبيقات عبر HTTP.

2في الرابط http://www.deitel.com/books/downloads.html، أي جزء يترجمه DNS؟ وإلى ماذا؟

www.deitel.com (الـ hostname)، ويتحول إلى IP address.

3ماذا يعني HTTP/1.1 404 Not found؟ وماذا يعني 200؟

404: الخادم لم يجد المورد المطلوب. 200 OK: الطلب نجح.

4صح أم خطأ: POST يشفّر بيانات النموذج.

خطأ. POST يرسل البيانات داخل رسالة HTTP بدل الرابط. التشفير يأتي من HTTPS (SSL/TLS).

5في رابط GET، ما الذي يفصل الـ query string عن الرابط؟ وما الذي يفصل بين الأزواج؟

? يفصل الـ query string، و& بين كل زوج name=value.

6ما نوع المحتوى الذي يشير له MIME type image/jpeg؟ وtext/plain؟

image/jpeg صورة JPEG فيحاول المتصفح عرضها. text/plain نص يُعرض مباشرة.

7في three-tier، أي طبقة تحفظ البيانات؟ وأي طبقة فيها business logic؟

الحفظ في bottom tier (data tier / information tier). الـ business logic في middle tier.

8لماذا يجب تكرار التحقق من المدخلات على الخادم؟

لأن كود الـ client يمكن رؤيته وتجاوزه. كل تحقق في المتصفح يجب أن يتكرر على الخادم.

9من couscous.html (داخل recipes/pasta) كيف تربطين إلى index.html في الجذر؟

../../index.html، أو من الجذر مباشرة /index.html.

10لماذا <!DOCTYPE html> مطلوب؟ وأين يظهر محتوى title؟

DOCTYPE حتى يعرض المتصفح الصفحة في standards mode. والـ title يظهر في شريط المتصفح والتبويب والمفضلة ونتائج البحث، وليس داخل الصفحة.

ص 82–187 · محاضرتان في الملف

الأسبوع 3

HTML5: الصور، القوائم، الجداول، النماذج، وعناصر HTML5 الجديدة. هذا الأسبوع فيه أكبر كمية حفظ: أسماء عناصر وattributes.

imgSpecial charactersListsTablesrowspan / colspanFormsInternal linkingHTML5 input typesautocomplete / datalistPage-structure elements

الأسبوع 3ص 88–93

الصور: عنصر img

<img src="cpphtp.png" width="92" height="120"
     alt="C++ How to Program book cover">
Attributeوظيفته
src ★مكان الصورة (مسارها).
alt ★نص بديل يظهر إذا لم تُعرض الصورة. يجب أن يكون في كل img. يخدم ضعاف البصر (accessibility).
width / height ★اختيارية. بدونها يستخدم المتصفح المقاس الحقيقي للصورة. الوحدة pixels.

معلومات حول الصور

  • تظهر الصور بطريقتين: inline بعنصر img، أو background image بـ CSS.
  • الصيغ المقبولة: GIF وJPEG وPNG بالامتداد الصحيح (.gif .jpg .png). صيغ مثل TIFF وBMP وEPS يجب تحويلها أولًا.
  • img عنصر void، ليس له end tag.
  • Performance tip: اكتبي width وheight دائمًا، فيحجز المتصفح مكان الصورة قبل تحميلها وتظهر الصفحة أسرع.
  • لا تغيّري النسبة بين العرض والارتفاع: صورة 200×100 نسبتها 2:1، وأي مقاس جديد يحافظ على 2:1 وإلا تتشوه.

الصورة كرابط (Images as hyperlinks)

<a href="links.html">
  <img src="buttons/links.jpg" width="65" height="50" alt="Links">
</a>

نضع img داخل a، فتصبح الصورة قابلة للضغط وتنقل لصفحة أخرى.

حيلة للحفظ

src = source (المصدر). alt = alternative (البديل). تخيلي شخصًا لا يرى: alt هو النص الذي يُقرأ له.

الأسبوع 3ص 94–98

الرموز الخاصة (character entity references)

بعض الرموز غير موجودة في الكيبورد مثل ©، وبعضها يخرّب الكود مثل < لأنه بداية tag. الحل: نكتبها بالشكل &code;

الرمزالاسمالكود
&ampersand&amp;
<less-than&lt;
>greater-than&gt;
"quote&quot;
'apostrophe&apos;
(مسافة)non-breaking space&nbsp;
©copyright&copy;
® ™registered، trademark&reg; &trade;
¼ ½ ¾fractions&frac14; &frac12; &frac34;
— – …em dash، en dash، ellipsis&mdash; &ndash; &hellip;

مثال من السلايد

<p>All information on this site is
   <strong>&copy; Deitel &amp; Associates, Inc. 2012.</strong></p>

<p>Note: &lt; &frac14; of the information
   presented here is updated daily.</p>

All information on this site is © Deitel & Associates, Inc. 2012.
Note: < ¼ of the information presented here is updated daily.

عناصر نصية أخرى

  • <hr> horizontal rule: خط أفقي مع مسافة فوقه وتحته. يعتبر legacy (قديم)، والأفضل استخدام CSS بدله.
  • <br> line break: سطر جديد.
  • <del> يشطب النص، <sup> superscript مثل 102، <sub> subscript مثل x1.
حيلة للحفظ

lt = less than (أصغر <)، gt = greater than (أكبر >). كل entity يبدأ بـ & وينتهي بـ ;

الأسبوع 3ص 99–103

القوائم: ul و ol و dl

Unordered list: ul

<ul>
  <li>YouTube</li>
  <li>Wikipedia</li>
</ul>

كل عنصر يبدأ بنقطة (bullet، غالبًا disc). كل عنصر داخلها اسمه li (list item).

Ordered list: ol

<ol start="5">
  <li>Gutenberg</li>
  <li>Linotype</li>
</ol>

5. Gutenberg
6. Linotype

للقوائم التي يهم فيها الترتيب. المتصفح يرقّم تلقائيًا. ★ attribute start يبدأ الترقيم من رقم غير 1.

Description list: dl

<dl>
  <dt>Linotype</dt>
  <dd>Line-casting allowed type
      to be selected...</dd>
</dl>

أزواج اسم وقيمة، مثل المصطلح وتعريفه. dt الاسم، وdd القيمة أو الوصف.

Nested lists

قائمة داخل li لقائمة أخرى، لتمثيل علاقات هرمية مثل فهرس متعدد المستويات. القائمة الداخلية تُكتب داخل li قبل إغلاقه، ويمكن خلط ul وol.

<li>New applications
  <ol>
    <li>For business</li>
    <li>For pleasure</li>
  </ol>
</li>
حيلة للحفظ

u = unordered، بدون ترتيب (نقاط). o = ordered، مرتّبة (أرقام). dl قاموس: dt الكلمة، dd شرحها (d = description).

الأسبوع 3ص 104–108

الجداول: table

<table border="1"
  summary="This table lists fruits and their prices">
  <caption>Table of Fruits and Their Prices</caption>

  <thead>
    <tr><th>Fruit</th><th>Price</th></tr>
  </thead>

  <tfoot>
    <tr><th>Total</th><th>$3.75</th></tr>
  </tfoot>

  <tbody>
    <tr><td>Apple</td><td>$0.25</td></tr>
    <tr><td>Orange</td><td>$0.50</td></tr>
    <tr><td>Banana</td><td>$1.00</td></tr>
    <tr><td>Pineapple</td><td>$2.00</td></tr>
  </tbody>
</table>
Table of Fruits and Their Prices
FruitPrice
Total$3.75
Apple$0.25
Orange$0.50
Banana$1.00
Pineapple$2.00

هذا هو الناتج الحقيقي للكود. لاحظي: tfoot مكتوب قبل tbody في كود الكتاب، لكن المتصفح يعرضه في الأسفل.

العنصروظيفته
tableيعرّف الجدول.
captionعنوان الجدول.
summary (attribute)وصف لمحتوى الجدول تقرؤه أجهزة النطق (speech devices) لضعاف البصر.
thead ★الرأس: عناوين الجدول وعناوين الأعمدة.
tbody ★الجسم: البيانات الأساسية.
tfoot ★الذيل: نتائج الحسابات والملاحظات (footnotes).
tr ★صف (table row).
th ★خلية عنوان (header cell)، تظهر bold وفي المنتصف.
td ★خلية بيانات (data cell).
حيلة للحفظ

tr = table row، th = table header، td = table data. والأقسام مثل جسم الإنسان: head رأس، body جسم، foot قدم.

الأسبوع 3ص 109

دمج الخلايا: rowspan و colspan

قيمة الـ attribute هي عدد الصفوف أو الأعمدة التي تأخذها الخلية.

<tr>
  <!-- merge two rows -->
  <th rowspan="2">
    <img src="camel.png" width="205" height="167"
         alt="Picture of a camel">
  </th>
  <!-- merge four columns -->
  <th colspan="4">
    <strong>Camelid comparison</strong><br>
    Approximate as of 10/2011
  </th>
</tr>
<tr>
  <th># of humps</th>
  <th>Indigenous region</th>
  <th>Spits?</th>
  <th>Produces wool?</th>
</tr>
A more complex sample table
camel image
rowspan="2"		Camelid comparison
colspan="4"
# of humpsIndigenous regionSpits?Produces wool?
Camels (bactrian)2Africa/AsiaYesYes
Llamas1Andes MountainsYesYes

الخلية الزرقاء نزلت عبر صفين، والبرتقالية امتدت عبر 4 أعمدة.

انتبهي

الخلايا التي «ابتلعها» الدمج لا تُكتب. في الصف الثاني 4 خلايا فقط، لأن خلية الصورة من الصف الأول نازلة فيه.

حيلة للحفظ

row = صف أفقي، فـ rowspan يمدّ الخلية للأسفل عبر صفوف. col = عمود، فـ colspan يمدّها بالعرض عبر أعمدة.

الأسبوع 3ص 110–117

النماذج (Forms): الأساسيات

<form method="post" action="http://www.deitel.com">
  <input type="hidden" name="recipient"
         value="deitel@deitel.com">
  <label>Name:
    <input name="name" type="text" size="25">
  </label>
  <input type="submit" value="Submit">
  <input type="reset" value="Clear">
</form>

عنصر form

  • ★ method: كيف تُرسل البيانات للخادم. get يضيفها لنهاية الـ URL فتظهر في شريط العنوان. post يضيفها داخل الطلب (request).
  • ★ action: الـ script الذي تُرسل إليه البيانات، واسمه form handler.
  • نوع كل input يحدده attribute type.
العنصرماذا يفعلAttributes مهمة
type="text" ★حقل نص بسطر واحد.size عدد الأحرف الظاهرة، وmaxlength أقصى عدد أحرف يمكن كتابتها.
type="password"يخفي الكتابة بنجوم أو نقاط (masking).
type="checkbox"اختيار أكثر من خيار.المجموعة الواحدة لها نفس name.
type="radio"خيار واحد فقط من المجموعة.نفس name، وchecked للخيار الافتراضي.
select + optionقائمة منسدلة (drop-down).name يعرّف القائمة، وselected للافتراضي.
textareaنص بأكثر من سطر.rows عدد الأسطر، وcols عدد الأحرف في السطر.
type="hidden" ★غير مرئي (nonvisual). يحفظ بيانات تُرسل مع الفورم، مثل إيميل أو اسم صفحة.name وvalue
type="submit" ★زر يرسل البيانات إلى عنوان action.value هو النص المكتوب على الزر.
type="reset" ★زر يُرجع كل الحقول لقيمها الافتراضية.value
label ★يوضح للمستخدم وظيفة الحقل.
حيلة للحفظ

size = كم حرفًا ترين. maxlength = كم حرفًا تستطيعين أن تكتبي. Radio مثل أزرار راديو السيارة القديم: تضغطين محطة فتخرج التي قبلها. Checkbox مثل قائمة المشتريات: تؤشّرين على ما تريدين.

الأسبوع 3ص 118–123 · Feedback Form

جرّبي الفورم بنفسك

هذا نفس فورم الكتاب. عبّئيه واضغطي «أرسلي»، وانظري كيف تُرسل البيانات بـ GET وبـ POST. لا يُرسل شيء فعلًا.

Feedback Form
Things you liked:
How did you get to our site?

لو method="get"

البيانات تُلصق في الرابط بعد ?:

اضغطي «أرسلي» لترَي الرابط

لو method="post"

الرابط يبقى كما هو، والبيانات داخل الرسالة:

اضغطي «أرسلي» لترَي جسم الرسالة

لاحظي
  • الحقلان hidden ظهرا في البيانات مع أنك لم تريهما.
  • مع GET، حتى كلمة المرور ظهرت في الرابط.
  • من الـ checkbox يُرسل كل ما اخترتِه، ومن الـ radio واحد فقط.
  • كل قيمة تُرسل باسم الـ name حقها، والحقل بدون name لا يُرسل.
  • جرّبي Clear: يرجع كل شيء للافتراضي، حتى «Amazing» و«Search engine».

الأسبوع 3ص 124–129

الروابط الداخلية: #id

عنصر a يستطيع أن ينقلك لجزء آخر في نفس الصفحة: نضع id على العنصر الهدف، ونكتب في href علامة # ثم نفس الـ id.

<!-- id attribute creates an internal hyperlink destination -->
<h1 id="features">The Best Features of the Internet</h1>

<!-- an internal link's address is "#id" -->
<p><a href="#bugs">Go to <em>Favorite Bugs</em></a></p>
...
<h1 id="bugs">My 3 Favorite Bugs</h1>
<p><a href="#features">Go to <em>Favorite Features</em></a></p>

كيف يعمل

  1. العنصر الهدف عليه id="bugs".
  2. الرابط مكتوب href="#bugs".
  3. عند الضغط، ينزل المتصفح مباشرة إلى العنصر.

ومن صفحة أخرى يمكن الجمع بين الاثنين: page.html#bugs

انتبهي

داخل العنصر يُكتب الـ id بدون #: id="bugs". وفي الرابط مع #: href="#bugs".

حيلة للحفظ

# معناها «اذهبي إلى». ونفس الرمز سترينه في CSS لاختيار عنصر بالـ id (الأسبوع 4).

الأسبوع 3 · المحاضرة الثانيةص 137–160

أنواع input الجديدة في HTML5

كلها self-validating: المتصفح يتحقق من الصيغة بنفسه عند الضغط على Submit، بدون JavaScript. مهم ★ لكن الخادم يجب أن يتحقق مرة أخرى.

typeالصيغةملاحظة
color#FF0000Hexadecimal code أو اسم لون. المتصفحات الحديثة تعرض color picker.
dateyyyy-mm-ddمثل 2012-01-27.
datetimeyyyy-mm-ddThh:mm+ff:ggتاريخ ووقت ومنطقة زمنية (UTC).
datetime-localyyyy-mm-ddThh:mmتاريخ ووقت في حقل واحد، بدون منطقة زمنية.
monthyyyy-mmمثل 2012-01. كتابة January 2012 تعطي خطأ.
weekyyyy-Wnnnn من 01 إلى 53. مثل 2012-W01.
timehh:mmساعتان ونقطتان ودقيقتان. اختياريًا :ss و.ff لأجزاء الثانية.
emailname@domain.comيتحقق من الصيغة فقط، لا من وجود الإيميل. multiple يقبل عدة إيميلات بفواصل.
urlhttp://www.domain-name.comwww.deitel.com بدون http:// يُعتبر خطأ. يتحقق من الصيغة فقط.
numberأي رقممع min وmax وstep وvalue. الجوال يعرض لوحة أرقام.
rangeslidermin وmax وvalue. self-validating بطبيعته لأنك لا تستطيعين تجاوز الحدود.
searchنصمثل text تمامًا، ويظهر X لمسح الحقل.
tel ★رقم هاتفلا يتحقق بنفسه. نضيف pattern. الجوال يعرض لوحة أرقام الهاتف.
حيلة للحفظ

كل التواريخ من الكبير للصغير: سنة ثم شهر ثم يوم ثم ساعة. حرف T يفصل التاريخ عن الوقت، وحرف W قبل رقم الأسبوع.

الأسبوع 3ص 143–158

Attributes الجديدة مع input

Attributeوظيفتهمثال
autofocus ★يضع المؤشر في الحقل فور فتح الصفحة. لحقل واحد فقط في الفورم.<input type="color" autofocus>
placeholder ★نص مؤقت رمادي كمثال. يختفي عند الكتابة، ولا يُرسل مع الفورم.placeholder="name@domain.com"
required ★يجبر المستخدم على تعبئة الحقل قبل الإرسال. يعمل مع أي نوع.<input type="email" required>
patternregular expression تحدد الصيغة المقبولة.pattern="\(\d{3}\) +\d{3}-\d{4}" → (555) 555-5555
min max step valueأصغر قيمة، أكبر قيمة، مقدار الزيادة، القيمة الأولى.min="0" max="7" step="1" value="4"
multipleيقبل أكثر من قيمة، مثل عدة إيميلات.<input type="email" multiple>
formnovalidateعلى زر submit: يرسل الفورم بدون تحقق.<input type="submit" formnovalidate>
حيلة للحفظ

placeholder يعمل مع 6 أنواع فقط: text، search، url، tel، email، password. هي الأنواع التي تكتبين فيها نصًا حرًا. التاريخ والرقم واللون لها أدواتها.

انتبهي

placeholder ليس قيمة. value هي القيمة الحقيقية التي تُرسل.

جرّبي: اكتبي قيمًا خاطئة ثم «تحققي»

الأسبوع 3ص 161–168

autocomplete و datalist

<form method="post" autocomplete="on">
  <input type="text" id="firstName"
         placeholder="First name">

  <label for="txtList">Birth Month:
    <input type="text" id="txtList"
           placeholder="Select a month" list="months">
    <datalist id="months">
      <option value="January">
      <option value="February">
      ...
      <option value="December">
    </datalist>
  </label>
</form>

autocomplete

  • يعبّئ الحقول تلقائيًا من مدخلات سابقة، مثل الاسم والعنوان والإيميل.
  • يُوضع على الفورم كله أو على حقول معينة.
  • مثال أمان: on للاسم والعنوان، وoff لبطاقة الائتمان وكلمة المرور.

datalist

  • يعطي حقل النص قائمة اقتراحات.
  • الربط: list="months" في الـ input يساوي id="months" في الـ datalist.
  • عند كتابة حرف M تظهر الأشهر التي فيها M (يختلف قليلًا بين المتصفحات).
جرّبي: اكتبي حرف M
حيلة للحفظ

datalist = اقتراحات، وتستطيعين كتابة غيرها. select = يجب أن تختاري من القائمة.

الأسبوع 3ص 169–178، 184

عناصر هيكل الصفحة (Page-Structure Elements)

HTML5 أضاف عناصر لها معنى (semantic) بدل أن يكون كل شيء div. أسماؤها جاءت من دراسة لـ Google على أشهر 20 اسمًا يعطيها المطورون للـ div.

<header>
<nav>
<section>
Heading
<article>
<aside>
<footer>
العنصرمعناه
header ★ترويسة للصفحة أو القسم: عناوين h1–h6، شعار، صور، nav. يمكن أن يتكرر أكثر من مرة.
nav ★يجمع روابط التنقل.
section ★قسم من المستند، غالبًا له عنوان. يمكن أن يتداخل، ويمكن أن يكون داخل article.
article ★محتوى مستقل يمكن نشره وحده: خبر، مشاركة في منتدى، تدوينة. يمكن أن يتداخل (تعليقات القراء داخل المقال).
aside ★محتوى له علاقة بما حوله لكنه منفصل عن تسلسل النص، مثل خلفية تاريخية بجانب خبر.
footer ★أسفل المحتوى أو القسم: حقوق النشر ومعلومات التواصل.
حيلة للحفظ

تخيلي جريدة: header اسم الجريدة، nav فهرس الأقسام، section قسم الرياضة، article الخبر نفسه، aside صندوق «هل تعلم؟» بجانبه، footer أسفل الصفحة.

الأسبوع 3ص 173–186

عناصر HTML5 أخرى

figure و figcaption ★

<figure>
  <img src="jhtp.jpg" alt="Java How to Program, 9/e">
  <figcaption>Java How to Program, 9/e cover.</figcaption>
</figure>

figure يصف شكلًا (صورة، رسم بياني، جدول) يمكن نقله لجانب الصفحة أو لصفحة أخرى. figcaption هو التعليق على الصورة.

time ★

<time>2012-01-17</time>

يحدد تاريخًا أو وقتًا أو الاثنين. لا يحتاج أن يكون داخل header.

details و summary ★

summary يعرض سهمًا يشير لليمين بجانب العنوان. عند الضغط، يشير السهم للأسفل ويظهر محتوى details.

Deitel Developer Series Books

Android for Programmers: An App-Driven Approach. Click here for more information or to order this book.

أسئلة «اختبري نفسك» في هذا العرض مبنية بنفس العنصر.

meter ★

<meter min="0" max="54" value="14"></meter>

يعرض مقياسًا لقيمة داخل مدى. مثال الاستبيان: 54 شخصًا، 14 منهم قالوا yes.

mark و wbr

  • mark يظلّل النص (highlight)، like this.
  • wbr (word break) مكان مقترح لكسر كلمة طويلة عندما يلتف النص لعدة أسطر، حتى لا تنكسر في مكان غريب.
حيلة للحفظ

meter مثل عدّاد البنزين. mark قلم التظليل. wbr = word break. figcaption = caption للـ figure.

الأسبوع 3 · أسئلة

اختبري نفسك: الأسبوع 3

15 سؤالًا. لو أخطأتِ في سؤال، ارجعي لسلايده من «الفهرس».

1أي attribute يجب أن يكون في كل img؟ ولماذا؟

alt. يعرض نصًا بديلًا إذا لم تظهر الصورة، ويجعل الصفحة accessible لضعاف البصر.

2ماذا يظهر على الشاشة لو كتبتِ &lt;p&gt; في الكود؟

يظهر النص <p> كما هو، وليس عنصر فقرة.

3اكتبي قائمة مرقمة تبدأ من 3.

<ol start="3"><li>…</li></ol>

4في الجدول: أين نضع عناوين الأعمدة، وأين نضع المجموع؟

عناوين الأعمدة في thead بخلايا th. المجموع ونتائج الحسابات في tfoot.

5خلية تأخذ مكان 3 أعمدة. ماذا نكتب؟ وخلية تنزل عبر صفين؟

colspan="3" للأعمدة، وrowspan="2" للصفوف.

6ما الفرق بين radio و checkbox؟

radio: خيار واحد فقط من المجموعة. checkbox: أكثر من خيار. وفي الحالتين المجموعة لها نفس name.

7أي method يجعل بيانات الفورم تظهر في شريط العنوان؟ وما وظيفة action؟

get. وaction يحدد الـ script (form handler) الذي تُرسل إليه البيانات.

8size="25" و maxlength="10": ما الفرق؟

size: الحقل يُظهر 25 حرفًا. maxlength: أقصى ما يمكن كتابته 10 أحرف.

9ما وظيفة type="hidden"؟ وما وظيفة value على زر submit؟

hidden: حقل غير مرئي يحفظ بيانات تُرسل مع الفورم. value على submit: النص المكتوب على الزر.

10أي نوع input لا يتحقق من نفسه ونحتاج له pattern؟

tel.

11ما صيغة week؟ وصيغة datetime-local؟ وصيغة month؟

week: yyyy-Wnn (مثل 2012-W01). datetime-local: yyyy-mm-ddThh:mm. month: yyyy-mm.

12مع كم نوع يعمل placeholder؟ عدّديها.

6 أنواع: text، search، url، tel، email، password.

13كيف نربط input بـ datalist؟

list="months" في الـ input يساوي id="months" في الـ datalist.

14أي عنصر لمحتوى مستقل يمكن نشره وحده، مثل تدوينة؟ وأي عنصر لمحتوى جانبي مرتبط؟

article للمحتوى المستقل، وaside للمحتوى الجانبي.

15كيف نصنع رابطًا ينقل إلى <h2 id="contact"> في نفس الصفحة؟ وما وظيفة autofocus؟

<a href="#contact">…</a>. وautofocus يضع المؤشر في الحقل فور فتح الصفحة، ولحقل واحد فقط.

ص 188–243

الأسبوع 4

CSS3 (Cascading Style Sheets): كيف نكتب القواعد، ومن يفوز عند التعارض، وكيف نرتب الصفحة. هنا الفهم أهم من الحفظ، فجرّبي الأمثلة الحية.

RulesInline / embedded / externalSelectorsSpecificityInheritanceCascadeFonts & textColors & backgroundsBox modelFloatPositioningTransitionsMedia queries

الأسبوع 4ص 194–198

ما هو CSS؟ وكيف نكتب القاعدة

التعريف

  • CSS هو معيار W3C لتحديد presentation مستندات HTML، أي طريقة عرضها للمستخدم.
  • لغة منفصلة لها syntax خاص.
  • الفكرة: نفصل الشكل (CSS) عن الهيكل والمحتوى (HTML).

فوائد style sheets مهم ★

  1. تحكم دقيق في الخطوط والتخطيط (precise type and layout controls).
  2. عمل أقل (less work).
  3. تغيير شكل الموقع كله بتعديل style sheet واحد.
  4. مواقع أسهل في الوصول (more accessible).
  5. HTML يبقى بمعنى واضح، فيناسب الأجهزة غير المرئية والجوال.
h1selector
{
colorproperty
:
greenvalue
;
declaration
}
h1 { color: green; }
p  { font-size: small; font-family: sans-serif; }
  • ★ Selector: يحدد العنصر أو العناصر المتأثرة. أبسط نوع element type selector مثل p، وينطبق على كل عناصر p.
  • ★ Declaration: تعليمات العرض، وتتكون من property وvalue.
  • يمكن وضع أكثر من declaration داخل { }، وكل واحدة تنتهي بـ ;
حيلة للحفظ

القاعدة جملة: «يا (selector)، اجعل (property) تساوي (value)». يا h1، اجعل اللون أخضر.

الأسبوع 4ص 207–211

3 طرق لإضافة CSS

1. Inline style ★

<p style="font-size: 20pt;
          color: deepskyblue;">
  Styled text
</p>
  • attribute اسمه style على العنصر نفسه.
  • property ثم : ثم value، وبين الخصائص ;
  • يؤثر على هذا العنصر فقط.

2. Embedded style sheet ★

<head>
  <style type="text/css">
    em { font-weight: bold; }
    h1 { font-family: tahoma; }
    .special { color: purple; }
  </style>
</head>
  • عنصر style داخل head.
  • type="text/css" يحدد نوع الـ style sheet.
  • يؤثر على الصفحة كلها.

3. External style sheet ★

<link rel="stylesheet"
      type="text/css"
      href="styles.css">
  • ملف منفصل (.css) فيه قواعد CSS فقط، نربطه بعنصر link داخل head.
  • rel: العلاقة بين الملفين، أي أن الملف stylesheet للصفحة.
  • type: نوع الملف المرتبط. href: رابط ملف الـ CSS.
  • يؤثر على كل الصفحات التي تربطه.
حيلة للحفظ

inline لعنصر واحد، embedded لصفحة واحدة، external للموقع كله. وعند التعارض: الأقرب للعنصر يفوز، فالـ inline أقوى. وبين embedded وexternal، الذي يأتي آخرًا في الصفحة يفوز.

الأسبوع 4ص 199–201

الـ Selectors

النوعمثاليختار
Elementpكل عناصر p
ID ★#introالعنصر صاحب id="intro" (id فريد)
Class ★.specialكل العناصر صاحبة class="special"
Class + elementp.specialفقط عناصر p التي class فيها special
Descendantli emكل em داخل li، بأي عمق
Childdiv > h1h1 الابن المباشر لـ div فقط
Adjacent siblingh1 + pأول p يأتي بعد h1 مباشرة (نفس الأب)
General siblingh1 ~ pكل p تأتي بعد h1 (نفس الأب)
Groupedh1, p, emنفس القاعدة للثلاثة. الفاصلة = «و»
Universal*كل العناصر
جرّبي: اضغطي selector وانظري ماذا يختار

Title one

first paragraph

second paragraph two

  • item three

nested heading

اختاري selector من الأعلى.

حيلة للحفظ

# للـ id مثل الهوية الوطنية، فريدة. . للـ class مثل الشعبة الدراسية، يشترك فيها كثيرون. مسافة = داخله بأي عمق. > = ابن مباشر. + = الأخ الذي بعده مباشرة. ~ = كل الإخوة الذين بعده.

الأسبوع 4ص 202–203

Specificity: من يفوز عند التعارض؟

الـ selector الأدق (more specific) له وزن أكبر، فيغلب الأقل دقة. مهم ★

الترتيب من الأقوى للأضعف

  1. ID selectors #nav
  2. Class selectors .special
  3. Contextual selectors h1 strong
  4. Individual element selectors strong

★ إذا تساوى الوزن: القاعدة التي تأتي آخرًا تفوز.

مثال السلايد

strong    { color: red; }
h1 strong { color: blue; }

عنصر strong داخل h1 يظهر أزرق، لأن h1 strong (contextual) أدق من strong.

طريقة حساب سريعة (إضافية)

ID = 100، class = 10، عنصر = 1. #main p = 101، p.special = 11، h1 strong = 2، strong = 1. الأكبر يفوز.

؟p { color: gray; } و .note { color: green; }، والعنصر <p class="note">. ما لونه؟

أخضر. الـ class أقوى من الـ element.

؟p { color: red; } ثم بعدها p { color: blue; }. ما اللون؟

أزرق. نفس الوزن، فالأخيرة تفوز.

؟#intro { color: orange; } و p.lead { color: navy; }، والعنصر <p id="intro" class="lead">. ما لونه؟

برتقالي. الـ ID أقوى من الـ class.

حيلة للحفظ

النداء باسمك الكامل (ID) أقوى من «يا طالبات الشعبة» (class)، وهو أقوى من «يا من تجلس في الصف الأول» (contextual)، وهو أقوى من «يا بنات» (element).

الأسبوع 4ص 204–206

Inheritance و Cascade

Inheritance (الوراثة) مهم ★

  • العنصر ينقل بعض خصائصه للعناصر التي بداخله.
  • قاعدة خط على p تنطبق على الفقرات وعلى العناصر inline داخلها مثل em وstrong.
  • يُورَّث: خصائص النص: font-size، color، font-style…
  • لا يُورَّث: خصائص الصندوق: border، margin، padding، background.
  • img مستثنى من خصائص الخط، لأنها لا تنطبق على الصور.
  • أي خاصية تضعينها على عنصر معين تغلب القيمة الموروثة.
p { font-size: 20px; color: navy;
    border: 1px solid gray; }

الـ em داخل هذه الفقرة يأخذ 20px واللون الكحلي، لكنه لا يأخذ border خاصًا به.

Cascade (التتالي) مهم ★

  • CSS يسمح بأكثر من style sheet لنفس الصفحة.
  • Cascade هو ما يحدث عندما تتنافس عدة مصادر للستايل على نفس العنصر.
  • الستايل «ينزل» (cascades) حتى يغلبه أمر وزنه أكبر.

من الأضعف للأقوى

  1. User agent style sheet: ستايل المتصفح الافتراضي، عندما لا يوجد أي CSS.
  2. User style sheet: ستايلات المستخدم نفسه، تغلب الافتراضي.
  3. Author style sheet: ستايل صاحب الصفحة، يغلب الاثنين.
حيلة للحفظ

Inheritance مثل الوراثة في العائلة: لون العينين (خصائص النص) يُورَّث، لكن البيت (الصندوق: border وmargin) لا يُورَّث. وCascade: المتصفح أضعف من المستخدم، والمستخدم أضعف من كاتب الصفحة (author).

الأسبوع 4ص 212–216

الخطوط والنصوص والوحدات

Propertyماذا يحددقيم
font-familyنوع الخط، مع بدائل بالترتيبArial, Helvetica, sans-serif
font-sizeالحجم16px small x-large
font-weightالسماكةnormal bold bolder lighter 100–900
font-styleالميلانnormal italic oblique
font-variantأحرف كبيرة صغيرةsmall-caps normal
line-heightارتفاع السطر1.2em
text-indent ★إزاحة السطر الأول فقط1em
text-decorationزخرفة النصunderline overline line-through blink
text-alignالمحاذاةleft center right justify

الاختصار font

body {
  font: italic small-caps bold 16px/1.2em Arial, Helvetica, sans-serif;
}
/*    style  variant    weight size/line-height  family */
Relative (نسبية) ★Absolute (ثابتة) ★
px بكسل، يتغير حسب دقة الشاشةin إنش
em تقريبًا ارتفاع حرف M الكبيرcm وmm
ex تقريبًا ارتفاع حرف x الصغيرpt نقطة: 1pt = 1/72 in
% نسبة من حجم الخط الافتراضيpc pica: 1pc = 12pt
حيلة للحفظ

ترتيب اختصار font: Some Very Wise Students Love Fonts = Style، Variant، Weight، Size/Line-height، Family. الحجم والعائلة إلزاميان.

انتبهي

السلايد يضع px مع الوحدات النسبية لأنه يتغير حسب دقة الشاشة، فجاوبي حسب السلايد. والسلايد كتب أن font-style يأخذ none، والصحيح normal.

الأسبوع 4ص 217–220

الألوان والخلفيات

الألوان: نموذج RGB

الشاشة تصنع الألوان من 3 أضواء: Red وGreen وBlue. الطريقة الأشهر لتحديد اللون هي قيمة RGB.

الطريقةالأحمر
أرقام من 0 إلى 255rgb(255, 0, 0)
نسب مئويةrgb(100%, 0%, 0%)
hex بـ 6 خانات#FF0000
hex بـ 3 خانات#F00
 
body {
  background-image: url(logo.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: lightgrey;
}
Propertyوظيفته
background-imageرابط الصورة بالشكل url(fileLocation)
background-positiontop، bottom، center، left، right، وحدها أو مجتمعة.
background-repeat ★repeat الافتراضي، يكرر أفقيًا وعموديًا. no-repeat نسخة واحدة. repeat-x أفقيًا فقط. repeat-y عموديًا فقط.
background-attachmentfixed: الصورة ثابتة عند التمرير. scroll (الافتراضي): تتحرك مع الصفحة.
background-colorلون يملأ المكان الذي لا توجد فيه صورة.
حيلة للحفظ

x = المحور الأفقي (السينات)، y = العمودي (الصادات). repeat-x يكرر الصورة في صف، repeat-y في عمود.

الأسبوع 4ص 221–223

Box Model: الصندوق حول كل عنصر

كل عنصر block-level له صندوق: المحتوى (content)، حوله padding، حوله border، حوله margin.

margin
border
padding
content
الطبقةما هي
padding ★المسافة بين المحتوى وحافة العنصر، داخل الـ border. منها padding-top / right / bottom / left.
border ★الإطار. border-width (طول أو thin / medium / thick)، border-color، border-style: none، hidden، dotted، dashed، solid، double، groove، ridge، inset، outset.
margin ★المسافة بين حافة العنصر وأي شيء خارجه. منها margin-top / right / bottom / left.
جرّبي: حرّكي القيم واحسبي العرض الكلي
content

50 + 2×50 + 2×5 + 2×20 = 200px

القيم الأولى هي مثال السلايد: #one { width: 50px; border: 5px solid red; padding: 50px; margin: 20px; }. العرض الكلي = width + padding من الجهتين + border من الجهتين + margin من الجهتين.

حيلة للحفظ

برواز صورة على الجدار: الصورة = content، الكرتون الأبيض حولها داخل البرواز = padding، البرواز نفسه = border، المسافة بينه وبين البرواز التالي = margin. من الداخل للخارج: C ← P ← B ← M.

حيلة للحفظ

الاختصار بأربع قيم يمشي مع عقارب الساعة من الأعلى: margin: 10px 20px 30px 40px = Top، Right، Bottom، Left. تذكّري كلمة TRouBLe.

انتبهي

padding داخل الإطار ويتلون بخلفية العنصر. margin خارج الإطار ويبقى شفافًا.

الأسبوع 4ص 224–231

Float وتخطيط الأعمدة

float

  • يحرك العنصر إلى جهة (left أو right)، وباقي المحتوى يلتف حوله.
  • مثال الكتاب: .floated { float: right; width: 50%; } على عنوان، فيلتف النص حوله.
  • Floats هي الأداة الأساسية لصنع أعمدة في الصفحة.
  • المميزات: تمنع تداخل المحتوى، وتسهّل إبقاء الـ footer في الأسفل.
  • العيب: تعتمد على ترتيب العناصر في الكود (source order).
#main   { float: left; width: 70%; }
#extras { float: left; width: 30%; }
#footer { clear: both; }   /* stay at the bottom */

#wrapper {
  width: 960px;   /* fixed width */
  margin: auto;   /* centered */
}
#header
#main
#extras
#footer

Two columns, fluid

عرض كل عمود بالنسبة % مع float: left. الـ footer نعطيه clear ليبقى في الأسفل. max-width يمنع الصفحة من الاتساع الزائد، وmin-width يمنعها من الانضغاط الزائد.

#header
#main
#extras
#footer
white
space

Two columns, fixed-width

نلف المحتوى في div اسمه wrapper بعرض ثابت بالـ pixels. نفس طريقة float وclear.

·
#header
#main
#extras
#footer
·

Fixed width, centered

نجعل margin اليمين واليسار للـ wrapper تساوي auto، فتتوسط الصفحة كلها.

#header
#links
#main
#news
#footer

Three columns, fluid

عرض للأعمدة الثلاثة مع float: left، وclear للـ footer.

حيلة للحفظ

fluid = سائل يتمدد مع الشاشة (بالنسب %). fixed = ثابت (بالـ px). clear = «لا تلتف، انزل للأسفل».

الأسبوع 4ص 232–234

Positioning: absolute و relative و z-index

  • Normal flow: العناصر تظهر بترتيبها في ملف HTML.
  • ★ position: absolute يُخرج العنصر من الـ normal flow، ويحدد مكانه بالمسافة من top أو left أو right أو bottom بالنسبة للعنصر الأب.
  • ★ z-index يرتب العناصر المتداخلة كطبقات. القيمة الأعلى تظهر في الأمام.
  • ★ position: relative يزيح العنصر عن مكانه الطبيعي، ويبقى مكانه الأصلي محجوزًا.
  • span: عنصر inline نلف به جزءًا من النص لنعطيه ستايل.
.background_image { position: absolute; top: 0px;
                    left: 0px; z-index: 1; }
.foreground_image { position: absolute; top: 25px;
                    left: 100px; z-index: 2; }
.text             { position: absolute; top: 25px;
                    left: 100px; z-index: 3; }
جرّبي: z-index
z-index: 1
z-index: 2
z-index: 3
الأعلى قيمةً يظهر فوق.
relative في السلايد 
.super { position: relative; top: -1ex; }
.sub   { position: relative; bottom: -1ex; }

The text at the end of this sentence is in superscript.
The text at the end of this sentence is in subscript.

حيلة للحفظ

absolute: طالبة خرجت من الطابور ووقفت في مكان محدد، والطابور سدّ مكانها. relative: تحركت خطوة من مكانها، لكن مكانها في الطابور ما زال محجوزًا. z-index رقم الطبقة: الأعلى فوق.

الأسبوع 4ص 235–237

Transitions و Transforms

img {
  margin: 80px;
  -webkit-transition: -webkit-transform 4s;
  -moz-transition: -moz-transform 4s;
  -o-transition: -o-transform 4s;
  transition: transform 4s;
}
img:hover {
  transform: rotate(360deg) scale(2, 2);
}
جرّبي: مرّري الماوس أو اضغطي
C++
How to
Program
rotate(360deg) scale(1.6) خلال ثانيتين
  • transform: يغيّر شكل العنصر، مثل rotate للتدوير وscale للتكبير.
  • transition: يحدد مدة التغيير لكل property يتغير. هنا الـ transform يأخذ 4 ثوانٍ.
  • التغيير يحدث عند مرور الماوس فوق الصورة (:hover).
  • -webkit- و-moz- و-o- اسمها vendor prefixes، لمتصفحات قديمة (Chrome/Safari، Firefox، Opera).
  • ★ transition: transform 4s, opacity 2s; التدوير يأخذ 4 ثوانٍ والشفافية ثانيتين، فيستمر التدوير ثانيتين بعد انتهاء الشفافية.
حيلة للحفظ

transform = ماذا يحدث (دوران، تكبير). transition = كم يستغرق.

الأسبوع 4ص 238–242

Media types و Media queries

Media types

تحددين شكل الصفحة حسب نوع الوسيلة التي تعرضها.

  • screen الأشهر: شاشة الكمبيوتر.
  • print: عند الطباعة.
  • handheld: الأجهزة المحمولة.
  • braille: أجهزة تقرأ أو تطبع بلغة برايل.
  • speech: متصفحات تقرأ الصفحة بصوت.
  • all: كل الأنواع.
@media all {
  body { background-color: steelblue; }
  h1   { color: palegreen; }
}
@media print {
  body { background-color: white; }
  h1   { color: seagreen; }
}

على الشاشة الخلفية زرقاء، وعند الطباعة تصبح بيضاء.

Media queries مهم ★

تنسّقين المحتوى لأجهزة معينة: media type مع شروط تفحص خصائص الجهاز (media features).

Featureمعناه
width / heightمساحة عرض الصفحة، شاملة الـ scrollbars
device-width / device-heightشاشة الجهاز كاملة
orientationportrait إذا الطول أكبر من العرض، وlandscape إذا العرض أكبر
aspect-ratioنسبة width إلى height
device-aspect-ratioنسبة device-width إلى device-height
 
@media screen and (max-width: 600px) {
  #extras { float: none; width: 100%; }
}

مثال إضافي: إذا كانت الشاشة 600px أو أقل، ينزل العمود الجانبي للأسفل. هذا هو Responsive design من الأسبوع 1.

حيلة للحفظ

media type = ما الجهاز؟ media feature = ما مواصفاته؟ portrait مثل صورة شخصية (طولية)، landscape مثل صورة منظر طبيعي (عرضية).

الأسبوع 4 · أسئلة

اختبري نفسك: الأسبوع 4

16 سؤالًا. أسئلة الحساب اكتبيها على ورقة.

1سمّي أجزاء القاعدة p { color: red; }.

p = selector. color: red; = declaration، فيها property (color) وvalue (red).

2ما الطرق الثلاث لإضافة CSS؟ وأي واحدة تؤثر على عنصر واحد فقط؟

inline (attribute style)، embedded (عنصر style داخل head)، external (ملف .css مع link). الـ inline تؤثر على عنصر واحد.

3في <link rel="stylesheet" type="text/css" href="styles.css">، ما وظيفة rel وhref؟

rel يحدد العلاقة: الملف المرتبط هو stylesheet للصفحة. href رابط ملف الـ CSS.

4ما الفرق بين #box و .box؟

# يختار العنصر بالـ id (فريد). . يختار كل العناصر التي لها هذا الـ class.

5ما الفرق بين div > h1 و div h1؟

> للابن المباشر فقط. المسافة لأي h1 داخل div مهما كان عمقه.

6كم عنصر p يختار h1 + p؟ وh1 ~ p؟

h1 + p: واحد فقط، أول p بعد h1 مباشرة. h1 ~ p: كل p تأتي بعد h1 ولها نفس الأب.

7رتّبي من الأقوى: element، ID، class، contextual.

ID ثم class ثم contextual ثم element.

8قاعدتان لهما نفس الوزن تعارضتا. أيهما تفوز؟

التي تأتي آخرًا.

9اذكري خصائص لا تُورَّث للعناصر الداخلية.

خصائص الصندوق: border، margin، padding، background.

10رتّبي الـ cascade من الأضعف: author، user agent، user.

user agent ثم user ثم author (الأقوى).

11عنصر width: 100px، padding: 10px، border: 2px، margin: 5px. كم المساحة الكلية بالعرض؟

100 + 2×10 + 2×2 + 2×5 = 134px.

12ما الفرق بين padding و margin؟

padding داخل الإطار، بين المحتوى والـ border. margin خارج الإطار، بين العنصر وما حوله.

13ماذا تفعل background-repeat: repeat-y؟ وما القيمة الافتراضية؟

تكرر الصورة عموديًا فقط. الافتراضي repeat (أفقيًا وعموديًا).

14عنصر عليه z-index: 5 وآخر z-index: 2 متداخلان. أيهما في الأمام؟

صاحب z-index: 5.

15ما الفرق بين absolute و relative؟ وكيف نوسّط صفحة عرضها ثابت؟

absolute يخرج من الـ normal flow ويتحدد مكانه بالنسبة للأب. relative يتزحزح عن مكانه ويبقى مكانه محجوزًا. التوسيط: #wrapper { width: 960px; margin: auto; }

16اكتبي ترتيب الاختصار font. ومتى تكون orientation = portrait؟

font-style، font-variant، font-weight، font-size/line-height، font-family. وportrait عندما يكون الطول أكبر من العرض.

ص 244–295

الأسبوع 5

Introduction to JavaScript. هنا لا يكفي الحفظ: تتبّعي كل كود سطرًا سطرًا واكتبي الناتج قبل أن تنظري إليه.

<script>document.writelnalert / promptEscape sequencesvarparseIntArithmetic== != < >if…else?:forswitchdo…whilebreak / continue

الأسبوع 5ص 250–255

أول script: document.writeln

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A First Program in JavaScript</title>
    <script type="text/javascript">
      document.writeln(
        "<h1>Welcome to JavaScript Programming!</h1>" );
    </script>
  </head>
  <body></body>
</html>

Welcome to JavaScript Programming!

  • JavaScript لغة scripting تحسّن وظائف الصفحات وشكلها. كل المتصفحات الكبيرة فيها JavaScript interpreter ينفذ الأوامر.
  • ★ عنصر script غالبًا يكون في head، والمتصفح يقرأ head أولًا.
  • attribute type يحدد الـ MIME type ولغة الـ script. في HTML5 يمكن حذفه.
  • ★ document object يمثل الصفحة المعروضة الآن. وwriteln تكتب HTML داخلها.
  • ★ كل statement ينتهي بـ ; واسمها statement terminator. مستحسنة وليست إلزامية.
  • ★ JavaScript case sensitive: كتابة Document أو Writeln بحرف كبير = syntax error.
  • ★ الأفضل وضع الكود في ملف منفصل (.js)، فيمكن استخدامه في أي صفحة، مثل المكتبات.
انتبهي

السلايد مكتوب فيه أن الـ MIME type الافتراضي لـ script في HTML5 هو text/html، وهذا خطأ مطبعي: الافتراضي JavaScript. لو جاء سؤال بنفس صياغة السلايد حرفيًا، اختاري ما في السلايد. المهم أن type يمكن حذفه.

الأسبوع 5ص 256–258

النصوص: + و alert و escape sequences

الـ + مع النصوص ★

document.writeln( "<h1>Hello " + name + ", welcome!</h1>" );
  • الـ + بين النصوص اسمه concatenation operator: يلصقها ببعض.
  • Common Programming Error: قسمة statement في منتصف string = syntax error.
  • خطأ شائع آخر: الخلط بين كتابة HTML داخل الكود وبين شكله المعروض في الصفحة.

alert dialog

window.alert( "Welcome to\nJavaScript\nProgramming!" );

Welcome to
JavaScript
Programming!

  • الـ window object عنده method اسمها alert تعرض نافذة منبثقة (dialog) لجذب الانتباه.
  • تأخذ النص المعروض كـ argument.
Escape sequence ★معناه
\nسطر جديد (newline)
\ttab أفقي
\\يطبع backslash
\"يطبع " داخل نص محاط بـ " "
\'يطبع ' داخل نص محاط بـ ' '
حيلة للحفظ

الـ backslash \ معناه: «الحرف الذي بعدي له معنى خاص». n = new line، t = tab.

ملاحظة

\n تنزل سطرًا داخل alert. لكن داخل writeln لا يظهر سطر جديد في الصفحة، لأن HTML يتجاهل الأسطر. في الصفحة نستخدم <br>.

الأسبوع 5ص 259–266

prompt والمتغيرات

var name; // string entered by the user

// read the name from the prompt box as a string
name = window.prompt( "Please enter your name" );

document.writeln( "<h1>Hello " + name +
  ", welcome to JavaScript programming!</h1>" );

Hello Jim, welcome to JavaScript programming!

Identifier rules ★

اسم المتغير: حروف، أرقام، _، $. لا يبدأ برقم، ولا يكون keyword محجوزة.

صحيحfirstName صحيح_total صحيح$price خطأ2ndName خطأmy-name خطأvar
  • ★ prompt: نافذة يكتب فيها المستخدم قيمة. الـ argument الأول = الرسالة (prompt). الثاني (اختياري) = القيمة الافتراضية في الحقل. ترجع ما كُتب كـ string.
  • ★ var: لتعريف المتغير. المتغير مكان في الذاكرة تُحفظ فيه قيمة، وله name وtype وvalue.
  • يمكن تعريف عدة متغيرات في سطر واحد بفواصل: var a, b, c;
  • = اسمه assignment operator، وهو binary لأن له طرفين (operands).
  • Comments: // لسطر واحد، و/* … */ لعدة أسطر. المفسّر يتجاهلها.
  • ★ null: المتغير بلا قيمة. ليس string. لو طبعتِه يظهر كلمة null: Hello null, welcome…
  • ★ parseInt: يحوّل string إلى integer.
انتبهي

prompt يرجع string دائمًا. "5" + "3" = "53" (لصق). أما parseInt("5") + parseInt("3") = 8.

الأسبوع 5ص 267–271

العمليات الحسابية والمقارنة

العمليةOperatorمثال
جمع+f + 7
طرح-p - c
ضرب*b * m
قسمة/x / y
باقي القسمة ★%r % s
  • كلها binary: لها طرفان.
  • % (remainder) يعطي باقي القسمة: 7 % 3 = 1، و10 % 2 = 0.
  • نكتب التعبير في سطر واحد (straight-line form)، لا كسرًا فوق وتحت.

ترتيب العمليات (precedence) ★

  1. * و/ و% أولًا، من اليسار لليمين.
  2. بعدها + و-، من اليسار لليمين.
  3. الأقواس ( ) تغيّر الترتيب.
؟2 + 3 * 4

14 (الضرب أولًا).

؟(2 + 3) * 4

20

؟10 / 2 * 5

25 (من اليسار لليمين: 10 / 2 = 5، ثم 5 * 5).

؟7 % 3 + 1

2 (7 % 3 = 1، ثم + 1).

جبريًاJavaScriptالمعنى
=x == yx يساوي y
≠x != yx لا يساوي y
>x > yأكبر من
<x < yأصغر من
≥x >= yأكبر من أو يساوي
≤x <= yأصغر من أو يساوي

== و!= اسمها equality operators. و< > <= >= اسمها relational operators.

★ الـ relational أعلى precedence من الـ equality. والـ equality تُقيَّم من اليسار لليمين.

انتبهي

= يعطي قيمة (assignment). == يقارن. كتابة if ( x = 5 ) بدل == خطأ شائع.

الأسبوع 5ص 272–279

Control statements و if…else

  • Sequential execution: الأوامر تُنفذ بترتيبها. Transfer of control: تغيير هذا الترتيب.
  • ★ أي script يُكتب بثلاث control structures فقط: sequence وselection وrepetition.
Selectionاسمهيعني
ifsingle-selectionينفذ أو يتجاهل إجراءً واحدًا
if…elsedouble-selectionيختار بين إجراءين
switchmultiple-selectionيختار من إجراءات كثيرة

Repetition: while، do…while، for، for…in. وكلمات مثل null وtrue وfalse محجوزة.

if ( studentGrade >= 60 )
  document.writeln( "<p>Passed</p>" );
else
  document.writeln( "<p>Failed</p>" );

// the conditional operator ?: does the same in one line
document.writeln( studentGrade >= 60 ? "Passed" : "Failed" );

Conditional operator ?: ★

الـ operator الوحيد من نوع ternary (له 3 operands): الشرط ? القيمة لو true : القيمة لو false.

if ( studentGrade >= 90 )
  document.writeln( "A" );
else
  if ( studentGrade >= 80 )
    document.writeln( "B" );
  else
    if ( studentGrade >= 70 )
      document.writeln( "C" );
    else
      if ( studentGrade >= 60 )
        document.writeln( "D" );
      else
        document.writeln( "F" );

Nested if…else

الشروط تُفحص بالترتيب، وأول شرط صحيح يُنفذ ويتوقف الباقي.

؟ماذا يطبع لو studentGrade = 85؟ ولو 59؟

85 تطبع B. و59 تطبع F.

حيلة للحفظ

single / double / multiple = عدد المسارات: if مسار واحد، if…else مساران، switch مسارات كثيرة. و?: هي if…else مختصرة في سطر.

الأسبوع 5ص 280–283، 288–289

الحلقات: for و do…while

for: counter-controlled repetition ★

//  initialization;  condition;     increment
for ( var counter = 1; counter <= 7; ++counter )
  document.writeln( "<p style='font-size: " +
    counter + "ex'>HTML5 font size " + counter + "ex</p>" );

HTML5 font size 1ex … HTML5 font size 7ex (7 أسطر، كل سطر أكبر من الذي قبله)

  • الـ header فيه ثلاثة أجزاء: initialization، وloop-continuation condition، وincrement.
  • ★ الأجزاء الثلاثة اختيارية، لكن الفاصلتين المنقوطتين ; ; إلزاميتان.
  • يمكن أن تحتوي الأجزاء عمليات حسابية.
  • Off-by-one error: استخدام < بدل <= أو العكس، فتزيد أو تنقص الحلقة مرة. counter < 7 تعمل 6 مرات فقط.

do…while ★

var counter = 1;
do {
  document.writeln( "<h" + counter + ">This is an h" +
    counter + " level head" + "</h" + counter + ">" );
  ++counter;
} while ( counter <= 6 );

h1 إلى h6: ستة عناوين، كل واحد أصغر من الذي قبله

  • يفحص الشرط بعد تنفيذ الجسم، لذلك يُنفذ الجسم مرة واحدة على الأقل.
  • while يفحص الشرط قبل الجسم، فقد لا يُنفذ ولا مرة.
حيلة للحفظ

do…while: «جرّبي أولًا ثم اسألي». while: «اسألي أولًا».

الأسبوع 5ص 284–287

switch: الاختيار من حالات كثيرة

var choice; // string entered by the user
choice = window.prompt(
  "Write Banana, Orange or Apple in the input field." );

switch ( choice ) {
  case "Banana":
    text = "Banana is good!";
    break;
  case "Orange":
    text = "I am not a fan of orange.";
    break;
  case "Apple":
    text = "How you like them apples?";
    break;
  default:
    text = "I have never heard of that fruit...";
}
document.writeln( text );
  • ★ يقيّم الـ controlling expression بين الأقواس، ويقارنه بقيمة كل case.
  • إذا تطابق، تُنفذ الأوامر بعد الـ case بالترتيب حتى تصل إلى break.
  • ★ break آخر أمر في كل case، ليخرج من switch فورًا.
  • ★ default يُنفذ إذا لم يتطابق أي case، وغالبًا يكون الأخير.
  • break ليس مطلوبًا في آخر case، لأن التنفيذ يكمل بعد switch تلقائيًا.
  • كل case يمكن أن يحتوي عدة أوامر، بدون أقواس { }.
  • ★ case 1: case 2: متتالية بدون أوامر بينها = نفس الأوامر للحالتين.
؟ماذا يطبع لو كتب المستخدم Orange؟ ولو Mango؟ ولو banana بحرف صغير؟

Orange: I am not a fan of orange. Mango: يذهب للـ default. وbanana بحرف صغير أيضًا تذهب للـ default، لأن JavaScript case sensitive و"banana" لا تساوي "Banana".

انتبهي

لو نسيتِ break، يكمل التنفيذ إلى أوامر الـ case الذي بعده (fall through).

الأسبوع 5ص 290–294

break و continue

for ( var count = 1; count <= 10; ++count ) {
  if ( count == 5 )
    break; // break loop only if count == 5
  document.writeln( count + " " );
}
document.writeln(
  "<p>Broke out of loop at count = " + count + "</p>" );

1 2 3 4
Broke out of loop at count = 5

for ( var count = 1; count <= 10; ++count ) {
  if ( count == 5 )
    continue; // skip remaining loop code only if count == 5
  document.writeln( count + " " );
}
document.writeln( "<p>Used continue to skip printing 5</p>" );

1 2 3 4 6 7 8 9 10
Used continue to skip printing 5

  • ★ break في while أو for أو do…while أو switch: خروج فوري، ويكمل التنفيذ بعدها. يُستخدم للخروج المبكر من حلقة، أو لتخطي باقي switch.
  • ★ continue في while أو for أو do…while: يتخطى باقي أوامر الجسم ويذهب للدورة التالية.
  • ★ في while وdo…while يُفحص الشرط مباشرة بعد continue. في for يُنفذ الـ increment أولًا، ثم يُفحص الشرط.
جرّبي: غيّري الرقم في الشرط

اضغطي أحد الزرين

حيلة للحفظ

break = تخرجين من الحفلة كلها. continue = تتخطين هذه الأغنية فقط وتكملين الحفلة.

الأسبوع 5 · أسئلة

اختبري نفسك: الأسبوع 5

16 سؤالًا. أسئلة «ماذا يطبع» تتبّعيها على ورقة: اكتبي قيمة المتغير في كل دورة.

1ماذا يطبع document.writeln( "5" + 3 );؟

53. أحد الطرفين string، فيصير لصقًا.

2ماذا يطبع document.writeln( parseInt( "5" ) + 3 );؟

8. parseInt حوّل "5" إلى رقم.

3أي أسماء المتغيرات خطأ: _x، 2total، $sum، my name، for؟

2total (يبدأ برقم)، my name (فيه مسافة)، for (keyword محجوزة).

4ما قيمة 17 % 5؟

2. 17 = 3 × 5 + 2.

5ما قيمة 4 + 6 / 2 * 3؟

6 / 2 = 3، ثم 3 * 3 = 9، ثم 4 + 9 = 13.

6ما الفرق بين = و ==؟

= يعطي قيمة للمتغير (assignment). == يقارن قيمتين (equality).

7حوّلي إلى ?:: if ( age >= 18 ) msg = "Adult"; else msg = "Minor";

msg = age >= 18 ? "Adult" : "Minor";

8كم مرة تعمل for ( var i = 0; i < 5; ++i )؟

5 مرات (i = 0، 1، 2، 3، 4).

9ماذا يطبع: var i = 10; do { document.write( i ); ++i; } while ( i < 5 );

10. مرة واحدة، لأن do…while ينفذ الجسم قبل فحص الشرط.

10ماذا يطبع: for ( var c = 1; c <= 6; ++c ) { if ( c == 3 ) continue; document.write( c + " " ); }

1 2 4 5 6

11ونفس الكود لو كان break بدل continue؟

1 2

12في switch، ماذا يحدث إذا لم يتطابق أي case؟ وماذا لو نسينا break؟

يُنفذ default. ولو نسينا break يكمل التنفيذ إلى الـ case التالي.

13أي selection statement اسمه double-selection؟ وأيها multiple-selection؟

double-selection: if…else. multiple-selection: switch.

14ما الفرق بين alert و prompt؟

alert يعرض رسالة فقط. prompt يعرض رسالة مع حقل كتابة، ويرجع ما كُتب كـ string.

15كيف تكتبين علامة تنصيص " داخل نص محاط بعلامات " "؟

بالـ escape sequence \"، مثل "He said \"Hi\"".

16ما مشكلة Document.writeln( "Hi" );؟

JavaScript case sensitive. الصحيح document بحرف صغير، وإلا يحدث خطأ.

قبل الاختبار

فخاخ الاختبار

أسئلة كثيرة تأتي من الفروق الصغيرة. اقرئيها كلها قبل الدخول.

  1. title في التبويب داخل head، وh1 عنوان ظاهر، وheader عنصر HTML5 للترويسة.
  2. POST ليس تشفيرًا. التشفير من HTTPS.
  3. alt إلزامي في img. أما width وheight فاختيارية.
  4. radio = خيار واحد، checkbox = أكثر من خيار. والمجموعة لها نفس name.
  5. placeholder لا يُرسل. value هي القيمة.
  6. tel لا يتحقق بنفسه، فنستخدم pattern. وemail وurl يتحققان من الصيغة فقط.
  7. autofocus لحقل واحد فقط. required يعمل مع أي نوع.
  8. id="x" في العنصر، وhref="#x" في الرابط، و#x في CSS. والـ class في CSS بنقطة .x.
  9. tfoot يُكتب قبل tbody في مثال الكتاب، لكنه يظهر في الأسفل.
  1. div > p ابن مباشر. div p بأي عمق.
  2. ID أقوى من class، وclass أقوى من contextual، وcontextual أقوى من element. وعند التعادل: الأخيرة تفوز.
  3. خصائص النص تُورَّث. border وmargin وpadding وbackground لا تُورَّث.
  4. padding داخل الإطار، margin خارجه.
  5. absolute يخرج من الـ flow. relative يتزحزح ويبقى مكانه محجوزًا. z-index الأعلى في الأمام.
  6. prompt يرجع string: "2" + "2" = "22".
  7. = يعطي قيمة، == يقارن.
  8. do…while مرة واحدة على الأقل، while قد لا تعمل أبدًا.
  9. break يخرج من الحلقة، continue يتخطى الدورة الحالية فقط. وJavaScript case sensitive.

قبل الاختبار بنصف ساعة

ورقة آخر نظرة

الأسبوع 1

  • Internet شبكة، Web خدمة فوقها
  • ARPANET، packet switching، TCP/IP
  • Berners-Lee، CERN، 1989: HTML وHTTP. W3C سنة 1994
  • DNS: hostname ← IP
  • 200 OK، 404 Not found
  • MIME: text/html، text/plain، image/jpeg
  • GET: ?a=1&b=2 في الرابط. POST داخل الرسالة
  • Three-tier: client، middle (business logic)، data
  • تحقق المدخلات على الـ server دائمًا
  • RWD: HTML واحد وCSS حسب الـ viewport

الأسبوع 2

  • DOCTYPE = standards mode
  • head (title، meta charset) و body
  • void elements بلا end tag
  • h1 الأكبر والأهم، حتى h6
  • <a href>، mailto:، 404
  • absolute URL كامل، relative نسبي
  • ../ للأعلى، / من الجذر

الأسبوع 3

  • img: src، alt إلزامي، width/height
  • &lt; &gt; &amp; &copy; &nbsp;
  • ul، ol (start)، dl/dt/dd
  • caption، thead، tbody، tfoot، tr، th، td، rowspan، colspan
  • form: method + action
  • text (size، maxlength)، password، checkbox، radio، select/option، textarea (rows، cols)، hidden، submit، reset، label
  • رابط داخلي: href="#id"
  • color، date، datetime(-local)، month، week، time، email، url، number، range، search، tel
  • autofocus، placeholder (6 أنواع)، required، pattern، formnovalidate
  • datalist + list، autocomplete on/off
  • header، nav، section، article، aside، footer، figure، figcaption، time، details، summary، meter، mark، wbr

الأسبوع 4

  • selector { property: value; }
  • inline، embedded، external (link: rel، type، href)
  • # . مسافة > + ~ , *
  • ID > class > contextual > element
  • user agent < user < author
  • font: style variant weight size/line-height family
  • نسبية: px em ex %. ثابتة: in cm mm pt pc
  • rgb() و hex. repeat، no-repeat، repeat-x، repeat-y
  • content ← padding ← border ← margin
  • float + clear، margin: auto للتوسيط
  • absolute، relative، z-index
  • transition + transform: rotate، scale
  • @media print، width، orientation، aspect-ratio

الأسبوع 5

  • script في head، document.writeln
  • window.alert و window.prompt (ترجع string)
  • + يلصق النصوص
  • \n \t \\ \" \'
  • var، قواعد التسمية، // و/* */
  • null، parseInt
  • * / % قبل + -
  • == != < > <= >=
  • if (single)، if…else (double)، switch (multiple)
  • ?: الوحيد ternary
  • for ( init; condition; increment )
  • do…while مرة على الأقل
  • break يخرج، continue يتخطى

بالتوفيق

قبل الاختبار: اشربي ماء، واقرئي كل سؤال حتى آخره قبل أن تختاري. لو صعب عليك سؤال، اتركيه وارجعي له في النهاية.

ابدئي بالأسئلة التي تعرفينها، فهي تعطيك ثقة ووقتًا.