- صاحب الملف: موقع مذكرة دوت كوم
- حجم الملف: 2 ميجا بايت تقريبًا
- عدد الصفحات: 21
- نوع التحميل: مباشر
- قابلية الطباعة: قابل للطباعة
- صيغة الملف: docx
- تحميل ملف منهج الحاسب الألي للصف الثاني الإعدادي الترم الثاني
الفصل الاول :لغة Html النموذج Form وبعض أدوات النموذج النموذج Form :
يستخدم الأمر لتصميم نافذة نموذج لاضافة مجموعة من عناصر صفحة الويب مثل أزرار أو حقول تستخدم فى ادخال بيانات بغرض ارسالها لموقع الويب ليتم تخزينها
إضافة حقل الاسم :
لاضافة صندوق نص Text الذى يستخدم لادخال بيانات نصية عن طريق الكتابة داخل الصندوق من لوحة المفاتيح Keyboard من خلال الامر < input type = "text">يظهر صندوق كتابة يتم ادخال البيانات من خلاله
خطوات اضافة صندوق نص بصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذج
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع الكتابة داخل صنوق النص
اكتب الكود التالى داخل نموذج
إضافة حقل كلمة المرور Password :
لاضافة حقل لإدخال كلمة المرور يتم إضافة حقل كلمة المرور Password ليظهر الرمز عند كتابة كلمة المرور وذلك لاخفاء مكونات كلمة المرور الحقيقة من خلال الامر < input type = "password">
خطوات إضافة حقل كلمة المرور Password :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذج
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع الكتابة داخل حقل كلمة المرور وتظهر رموز كما بالشكل
اكتب الكود التالى داخل نموذج
إضافة حقل السن :
تستطيع اضافة صندوق نص لادخال السن من خلال
خطوات اضافة صندوق نص بصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذج
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع الكتابة داخل صنوق النص
اكتب الكود التالى داخل نموذج
إضافة زر اختيار بديل واحد Radio Button :
يستخدم زر Radio Button لاختيار بديل واحد فقط مثل اضافة ازار لاختيار النوع ذكر أو أنثى من خلال الكود
خطوات اضافة إضافة زر اختيار بديل واحد Radio Buttonبصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذجويكرر هذا الكود مرتين حسب البدائل المطلوبة
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع تحديد اى بديل منهم
اكتب الكود التالى
داخل نموذج
ملاحظة هامة :
وعند تحديد ذكر و انثى فى نفس الوقت نجد تم تحديد زرين الاختيار ذكر و أنثى كذلك ولتجنب ذلك نقوم بعمل الاتى ولحل هذه المشكلة من خلال كتابة الكود كما سبق مع اعطاء اسم للبديلمثل a
⦁ اعطاء اسم مثل a لزر الاختيار الاول
⦁ اعطاء نفس الاسم a لزر الاختيار الثانى
الأسئلة والتدريبات للفصل الاول
أكتب المصطلح العلمى الدال على العبارات الآتية :
⦁ يستخدم مع الأزرار والحقول المضافة لصفحة الويب بغرض ادخال بيانات وارسالها لكى تخزن على موقع الويب
⦁ يسمح لك باختيار بديل واحد فقط من عدة بدائل
⦁ يضاف لصفحة الويب لإدخال بيانات نصية عن طريق الكتابة داخله
أكمل العبارات الاتية :
⦁ لتصميم صفحة تسجيل بيانات الب نحتاج لإضافة نموذج به مجموعة عناصر منها ................ و .............. تقوم باستخدامها لإدخال بياناتك
⦁ لإضافة حقل لادخال اسم الطالب يتم اضافة ..................... لصفحة الويب
⦁ يظهر الرمز عند الكتابة وذلك لأخفاء مكونات .................... الحقيقة
⦁ لإدخال النوع ( ذكر / أنثى ) نضيف لصفحة الويب ..............................
إختر ن العمود ب ما سناسبه من العمود أ :
( أ ) ( ب )
لإضافة صندوق نص لصفحة الويب
< input type ="radio"> لإضافة حقل كلمة المرور لصفحة الويب
لإضافة زر اختيار بديل واحد لصفحة الويب
ضع علامة صح أمام العبارة الصحيحة وعلامة خطأأمام العبارة الخطأ :
⦁ فى صفحة الويب لا يشترط وجود نموذج لكى يتم ارسال البيانات المدخلة الى موقع الويب ليتم تخزينها
⦁ لإلغاء امكانية اختيار زر اختيار بديل واحد فى نفس الوقت نستخدم الخاصية name لإعطاء نفس الاسم للزرين
⦁ لإضافة حقل لإدخال اسم الطالب يتم اضافة صندوق النص Radio
الفصل الثانى :لغة HTML تابع بعض أدوات النموذج إضافة صندوق اختيار Checkbox:
يستخدم زر الاختيار Checkbox لاختيار اكثر من بديل فى نفس الوقت مثل اختيار اللغة التى تجيدها من خلال الكود وبتكرار الكود تستطيع اضافة اكثر من checkbox
خطوات اضافة إضافة صندوق اختيار Checkboxبصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذجويكرر هذا الكود اكثر من مره حسب البدائل المطلوبة
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع تحديد اى اختيار منهم او تحديد اكثر من اختيار
اكتب الكود التالى
داخل نموذج
زر الأمر Button :
يستخدم زر الأمر Button حيث عند الضغط عليه يقوم بوظائف مختلفة مثل تسجيل بيانات – مسح بيانات من عناصر النموذج – استدعاء دالة ويتم اضافته من خلال الكود التالى
خطوات اضافة زر الامر buttonبصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذج
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع الضغط على الزر يؤدى مهمة محددة
اكتب الكود التالى داخل نموذج
ملاحظة :فى الكود السابق تم استخدام خاصية Vaue لتحديد النص الذى يظهر على الزرbutton
يوجد ثلاث انوع من الأزرار التى يمكن اضافته على النموذج كالاتى :
⦁ زر الامر button يتم اضافته ويستخدم لتنفيذ مهام مطلوبة من خلال الكود
⦁ زر submit يستخدم لارسال البيانات
⦁ زر Reset يستخدم لحذف البيانات
ثانيا : زر الارسال Submit:
يستخدم زر الارسال Submit بالضغط عليه يتم ارسال البيانات التى تم ادخالها عن طريق النموذج لصفحة اخرى وذلك بأضافة الخاصية Action الخاصة بالـ Form ويتم اضافته من خلال الكود التالى
خطوات اضافة إضافة زر الارسال Submitبصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذج
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع الضغط على الزر ليقوم بارسال البيانات الى صفحة ويب اخرى
اكتب الكود التالى داخل نموذج
عند النقر على الزر Submit يتم الانتقال الى للصفحة Process.php حيث يتم استقبال البيانات التى تم ادخالها عن طريق أدوات التحكم ومعالجتها بواسطة كود هذه الصفحة المكتوب بلغة PHP
ثالثاً : زر الحذف Reset:
يستخدم زر Reset لحذف القيم التى سبق ادخالها والعودة للقيم الافتراضية للأدوات وتستطيع اضافة زر Reset من خلال الكود
خطوات اضافة إضافة زر الحذف Resetبصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى داخل نموذج
⦁ احفظ الملف النصى بامتداد Htm أو HTML
⦁ افتح الملف كمستعرض الانترنت وتستطيع الضغط على الزر ليقوم بارسال البيانات الى صفحة ويب اخرى
اكتب الكود التالى داخل نموذج
الأسئلة والتدريبات للفصل الثانى
ضع علامة صح امام العبارة الصحيحة وعلامة خطأ أمام العبارة الخطأ :
⦁ لاختيار اللغة التى تجيدها أو أكثر من لغة يتم اضافة صناديق الاختيار لصفحة الويب
⦁ تستخدم الخاصية name لتحديد النص الذى يظهر على الزر
⦁ زر submit يستخدم لحذف البيانات المكتوبة داخل حقول الادخال
أكمل العبارات التالية :
⦁ زر .............. يستخدم لتنفيذ أحد المهام التى تقوم بتوصيفها من خلال كتابة كود
⦁ زر ..................... يستخدم لارسال البيانات
⦁ زر .............................. يستخدم لحذف البيانات
إختر ن العمود ب ما سناسبه من العمود أ :
( أ ) ( ب )
لإضافة صندوق الاختيار لصفحة الويب
< input type ="reset"> لإضافة زر الأمر الى لصفحة الويب
لإضافة زر الإرسال الى لصفحة الويب
لإضافة ر الحذف الى صفحة الويب
الفصل الثالث:المشروع تصميم صفحة ويب لتسجيل بياناتك
الوحدة الثانية : لغة Java Scriptالفصل الاول : المفاهيم الأساسية للغة Java Script
تستطيع تحويل صفحة الويب الى صفحة تفاعلية لتسجيل بياناتك والتاكد ان البيانات المدخلة بالصفحة صحيحة من خلال أكواد Java Script حيث ان لغة HTML لن تمكنك من التاكد من صحة البيانات المدخلة
أساسيات لغة Java Script:
⦁ أوامر وتعليمات لغة Java Script تسمى جمل Statements
⦁ تكتب الأوامر والتعليمات اى الجمل Statements داخل كود HTML
⦁ تكتب جمل Java Script داخل الأمر
⦁ يجب انهاء كل جملة Statement بفاصلة منقوطة (:)
⦁ يوضع فى الاعتبار حالة الأحرف صغيرة أ كبيرة عند كتابة الجمل Statements
تستطيع كتابة بين head او body
جملة alert :
تستخدم جملة alert لعرض رسالة داخل صندوق مما يجذب الانتباه لقرائتها من خلال الامر
alert (" الرسالة"):
خطوات اظهار رسالة alertبصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى ( " مرحبا بكم فى جروب برمجيات امال مصطفى فى الحاسب الالى " ) alertداخل سكربت
الأسئلة والتدريبات للفصل الاول
أكتب المصطلح العلمى الدال على العبارات الآتية :
⦁ لغة تستخدم لجعل صفحة تسجيل بياناتك صفحة تفاعلية
⦁ تستخدم لعرض رسالة داخل صندوق مما يجذب الانتباه لقراءتها
⦁ تستخدم لاظهار رسالة مكتوبة على صفحة الويب نفسها
ضع علامة صح او خطا امام العبارات الاتية :
⦁ لا يكفى استخدام لغة HTML لتتحقق من صحية البيانات المدخلة الى صفحة الويب
⦁ لابد من كتابة جمل script فى ملف منفصل عن ملف تعليمات HTML
⦁ يجب انهاء كل جملة Statement بفاصلة منقوطة ( : )
⦁ فى لغة Jave Script لا يوجد فارق بين حالة الأحرف صغيرة أم كبيرة عند كتابة الجمل Statements
▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒
الفصل الثانى : استدعاء كود Java Scriptاستدعاء كود Java Script باستخدام زر أمر Button :
من خلال كود نلاحظ انه تم تنفيذ الكود تلقائى ونستطيع تنفيذ الكود عند وقوع حدث مثل النقر بالماوس على زر أمر Button من خلال الدالة Function
الدالة Function :
هى مجموعة من الأوامر التى تنفذ عند استدعائها ويجب اعطاء اسم مناسب للدالة يدل على وظيفتها
⦁ إاشاء الدالة function تحتوى على جمل Java Script
⦁ استدعاء الدالة function لتنفيذ أوامر عند النقر على زر الأمر Button
أولاً : إنشاء دالة function:
⦁ اكتب الأمر Function ثم اكتب اسم مناسب للدالة ( يفضل ان يدل على وظيفتها )
⦁ اكتب الكود الذى يتم تنفيذه ما بين قوسين { } حيث يتم تنفيذه عند استدعاء الدالة
نشاط : انشاء دالة لاستدعاه يظهر رسالة مكتوب به العبارة " جمهورةي مصر العربية "
خطوات انشاء دالة لاستدعاه يظهر رسالة مكتوب به العبارة " جمهورةي مصر العربية "بصفحة الويب :
⦁ انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
⦁ اكتب الكود التالى كما بالصورة
داخل سكربت

0 التعليقات:
إرسال تعليق