منهج الكمبيوتر لتانية إعدادي الترم الثاني

alostaz

المشرف العام
طاقم الإدارة
المشرف العام



الصف الثانى الاعدادى
الفصل الاول :لغة Html النموذج Form وبعض أدوات النموذج
النموذج Form :

يستخدم الأمر <form></form> لتصميم نافذة نموذج لاضافة مجموعة من عناصر صفحة الويب مثل أزرار أو حقول تستخدم فى ادخال بيانات بغرض ارسالها لموقع الويب ليتم تخزينها

إضافة حقل الاسم :

لاضافة صندوق نص Text الذى يستخدم لادخال بيانات نصية عن طريق الكتابة داخل الصندوق من لوحة المفاتيح Keyboard من خلال الامر < input type = "text">يظهر صندوق كتابة يتم ادخال البيانات من خلاله
خطوات اضافة صندوق نص بصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type="text"> داخل نموذج<form></form>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع الكتابة داخل صنوق النص









إضافة حقل كلمة المرور Password :
لاضافة حقل لإدخال كلمة المرور يتم إضافة حقل كلمة المرور Password ليظهر الرمز عند كتابة كلمة المرور وذلك لاخفاء مكونات كلمة المرور الحقيقة من خلال الامر < input type = "password">
خطوات إضافة حقل كلمة المرور Password :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type=" password "> داخل نموذج<form></form>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع الكتابة داخل حقل كلمة المرور وتظهر رموز كما بالشكل






إضافة حقل السن :
تستطيع اضافة صندوق نص لادخال السن من خلال <input type="text">
خطوات اضافة صندوق نص بصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type="text"> داخل نموذج<form></form>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع الكتابة داخل صنوق النص










إضافة زر اختيار بديل واحد Radio Button :

يستخدم زر Radio Button لاختيار بديل واحد فقط مثل اضافة ازار لاختيار النوع ذكر أو أنثى من خلال الكود
<input type ="radio">
خطوات اضافة إضافة زر اختيار بديل واحد Radio Buttonبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type=" radio "> داخل نموذج<form></form>ويكرر هذا الكود مرتين حسب البدائل المطلوبة
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع تحديد اى بديل منهم

ملاحظة هامة :
وعند تحديد ذكر و انثى فى نفس الوقت نجد تم تحديد زرين الاختيار ذكر و أنثى كذلك ولتجنب ذلك نقوم بعمل الاتى ولحل هذه المشكلة من خلال كتابة الكود كما سبق مع اعطاء اسم للبديلمثل a

1- اعطاء اسم مثل a لزر الاختيار الاول
2- اعطاء نفس الاسم a لزر الاختيار الثانى




الأسئلة والتدريبات للفصل الاول
أكتب المصطلح العلمى الدال على العبارات الآتية :
1- يستخدم مع الأزرار والحقول المضافة لصفحة الويب بغرض ادخال بيانات وارسالها لكى تخزن على موقع الويب
2- يسمح لك باختيار بديل واحد فقط من عدة بدائل
3- يضاف لصفحة الويب لإدخال بيانات نصية عن طريق الكتابة داخله
أكمل العبارات الاتية :
1- لتصميم صفحة تسجيل بيانات الب نحتاج لإضافة نموذج به مجموعة عناصر منها ................ و .............. تقوم باستخدامها لإدخال بياناتك
2- لإضافة حقل لادخال اسم الطالب يتم اضافة ..................... لصفحة الويب
3- يظهر الرمز عند الكتابة وذلك لأخفاء مكونات .................... الحقيقة
4- لإدخال النوع ( ذكر / أنثى ) نضيف لصفحة الويب ..............................
إختر ن العمود ب ما سناسبه من العمود أ :
( أ ) ( ب )
<input type="password"> لإضافة صندوق نص لصفحة الويب
< input type ="radio"> لإضافة حقل كلمة المرور لصفحة الويب
<input type ="text"> لإضافة زر اختيار بديل واحد لصفحة الويب
ضع علامة صح أمام العبارة الصحيحة وعلامة خطأأمام العبارة الخطأ :
1- فى صفحة الويب لا يشترط وجود نموذج لكى يتم ارسال البيانات المدخلة الى موقع الويب ليتم تخزينها
2- لإلغاء امكانية اختيار زر اختيار بديل واحد فى نفس الوقت نستخدم الخاصية name لإعطاء نفس الاسم للزرين
3- لإضافة حقل لإدخال اسم الطالب يتم اضافة صندوق النص Radio
▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒

الفصل الثانى :لغة HTML تابع بعض أدوات النموذج
إضافة صندوق اختيار Checkbox:

يستخدم زر الاختيار Checkbox لاختيار اكثر من بديل فى نفس الوقت مثل اختيار اللغة التى تجيدها من خلال الكود <input type="checkbox">وبتكرار الكود تستطيع اضافة اكثر من checkbox
خطوات اضافة إضافة صندوق اختيار Checkboxبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type=" checkbox "> داخل نموذج<form></form>ويكرر هذا الكود اكثر من مره حسب البدائل المطلوبة
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع تحديد اى اختيار منهم او تحديد اكثر من اختيار


زر الأمر Button :

يستخدم زر الأمر Button حيث عند الضغط عليه يقوم بوظائف مختلفة مثل تسجيل بيانات – مسح بيانات من عناصر النموذج – استدعاء دالة ويتم اضافته من خلال الكود التالى <input type ="Button">
خطوات اضافة زر الامر buttonبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type=" Button "> داخل نموذج<form></form>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع الضغط على الزر يؤدى مهمة محددة





ملاحظة :فى الكود السابق تم استخدام خاصية Vaue لتحديد النص الذى يظهر على الزرbutton
يوجد ثلاث انوع من الأزرار التى يمكن اضافته على النموذج كالاتى :
1- زر الامر button يتم اضافته ويستخدم لتنفيذ مهام مطلوبة من خلال الكود
2- زر submit يستخدم لارسال البيانات
3- زر Reset يستخدم لحذف البيانات
ثانيا : زر الارسال Submit:
يستخدم زر الارسال Submit بالضغط عليه يتم ارسال البيانات التى تم ادخالها عن طريق النموذج لصفحة اخرى وذلك بأضافة الخاصية Action الخاصة بالـ Form ويتم اضافته من خلال الكود التالى <input type=" Submit">
خطوات اضافة إضافة زر الارسال Submitبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type=" Submit "> داخل نموذج<form></form>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع الضغط على الزر ليقوم بارسال البيانات الى صفحة ويب اخرى





عند النقر على الزر Submit يتم الانتقال الى للصفحة Process.php حيث يتم استقبال البيانات التى تم ادخالها عن طريق أدوات التحكم ومعالجتها بواسطة كود هذه الصفحة المكتوب بلغة PHP
ثالثاً : زر الحذف Reset:
يستخدم زر Reset لحذف القيم التى سبق ادخالها والعودة للقيم الافتراضية للأدوات وتستطيع اضافة زر Reset من خلال الكود <input type="reset">
خطوات اضافة إضافة زر الحذف Resetبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى <input type=" reset "> داخل نموذج<form></form>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت وتستطيع الضغط على الزر ليقوم بارسال البيانات الى صفحة ويب اخرى






الأسئلة والتدريبات للفصل الثانى
ضع علامة صح امام العبارة الصحيحة وعلامة خطأ أمام العبارة الخطأ :
1- لاختيار اللغة التى تجيدها أو أكثر من لغة يتم اضافة صناديق الاختيار لصفحة الويب
2- تستخدم الخاصية name لتحديد النص الذى يظهر على الزر
3- زر submit يستخدم لحذف البيانات المكتوبة داخل حقول الادخال
أكمل العبارات التالية :
1- زر .............. يستخدم لتنفيذ أحد المهام التى تقوم بتوصيفها من خلال كتابة كود
2- زر ..................... يستخدم لارسال البيانات
3- زر .............................. يستخدم لحذف البيانات
إختر ن العمود ب ما سناسبه من العمود أ :
( أ ) ( ب )
<input type="submit"> لإضافة صندوق الاختيار لصفحة الويب
< input type ="reset"> لإضافة زر الأمر الى لصفحة الويب
<input type ="checkbox"> لإضافة زر الإرسال الى لصفحة الويب
<input type="button"> لإضافة ر الحذف الى صفحة الويب

▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒
الفصل الثالث:المشروع تصميم صفحة ويب لتسجيل بياناتك

الوحدة الثانية : لغة Java Script
الفصل الاول : المفاهيم الأساسية للغة Java Script

تستطيع تحويل صفحة الويب الى صفحة تفاعلية لتسجيل بياناتك والتاكد ان البيانات المدخلة بالصفحة صحيحة من خلال أكواد Java Script حيث ان لغة HTML لن تمكنك من التاكد من صحة البيانات المدخلة
أساسيات لغة Java Script:
• أوامر وتعليمات لغة Java Script تسمى جمل Statements
• تكتب الأوامر والتعليمات اى الجمل Statements داخل كود HTML
• تكتب جمل Java Script داخل الأمر <script></script>
• يجب انهاء كل جملة Statement بفاصلة منقوطة :))
• يوضع فى الاعتبار حالة الأحرف صغيرة أ كبيرة عند كتابة الجمل Statements

تستطيع كتابة <script></script> بين head او body
جملة alert :

تستخدم جملة alert لعرض رسالة داخل صندوق مما يجذب الانتباه لقرائتها من خلال الامر
alert (" الرسالة"):

خطوات اظهار رسالة alertبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى ( " مرحبا بكم فى جروب برمجيات امال مصطفى فى الحاسب الالى " ) alertداخل سكربت <script ></ script>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت تظهر الرسالة

جملة document.Write :
تستخدم جملة document.Write لإظهار رسالة مكتوبة على صفحة الويب نفسها ( كتابة نص ) من خلال الكود التالى
خطوات جملة document.Writeبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى
Document.write("الكمبيوتر وتكنولوجيا المعلومات للصف الثانى الاعدادى أعداد آمال مصطفى "):
داخل سكربت <script ></ script>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت تظهر كنص
<script>
Document.write("الكمبيوتر وتكنولوجيا المعلومات للصف الثانى الاعدادى أعداد آمال مصطفى "):
</script>


الأسئلة والتدريبات للفصل الاول
أكتب المصطلح العلمى الدال على العبارات الآتية :
1- لغة تستخدم لجعل صفحة تسجيل بياناتك صفحة تفاعلية
2- تستخدم لعرض رسالة داخل صندوق مما يجذب الانتباه لقراءتها
3- تستخدم لاظهار رسالة مكتوبة على صفحة الويب نفسها
ضع علامة صح او خطا امام العبارات الاتية :
1- لا يكفى استخدام لغة HTML لتتحقق من صحية البيانات المدخلة الى صفحة الويب
2- لابد من كتابة جمل script فى ملف منفصل عن ملف تعليمات HTML
3- يجب انهاء كل جملة Statement بفاصلة منقوطة ( : )
4- فى لغة Jave Script لا يوجد فارق بين حالة الأحرف صغيرة أم كبيرة عند كتابة الجمل Statements
▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒

الفصل الثانى : استدعاء كود Java Script
استدعاء كود Java Script باستخدام زر أمر Button :

من خلال كود <script></script> نلاحظ انه تم تنفيذ الكود تلقائى ونستطيع تنفيذ الكود عند وقوع حدث مثل النقر بالماوس على زر أمر Button من خلال الدالة Function
الدالة Function :

هى مجموعة من الأوامر التى تنفذ عند استدعائها ويجب اعطاء اسم مناسب للدالة يدل على وظيفتها
1- إاشاء الدالة function تحتوى على جمل Java Script
2- استدعاء الدالة function لتنفيذ أوامر عند النقر على زر الأمر Button
أولاً : إنشاء دالة function:
1- اكتب الأمر Function ثم اكتب اسم مناسب للدالة ( يفضل ان يدل على وظيفتها )
2- اكتب الكود الذى يتم تنفيذه ما بين قوسين { } حيث يتم تنفيذه عند استدعاء الدالة

نشاط : انشاء دالة لاستدعاه يظهر رسالة مكتوب به العبارة " جمهورةي مصر العربية "
خطوات انشاء دالة لاستدعاه يظهر رسالة مكتوب به العبارة " جمهورةي مصر العربية "بصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى كما بالصورة
داخل سكربت <script ></ script>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت

نلاحظ بعد كتابة الكود التالى لم ينفذ شئ لان لابد من كتابة كود استدعاء الدالة كالتالى
1- يتم إضافة زر أمر Button
2- إضافة الخاصية onclick لزر أمر Button
3- الخاصية Onclick تكون قيمتها اسم الدالة المطلوب استدعائها
<input type="button" onclick=" اسم الدالة المطلوب استدعائها ">
نشاط لاستدعاء الدالة كالتالى



ملاحظة : عند وقوع حدث النقر على زر الأمر Button تم استدعاء الدالة amalmostafa ليظهر صنوق رسالة " جمهورية مصر العربية "
التعامل مع محتوى صندوق نص textbox :
فى الشكل التالى يوضح
1- يظهر صندوق نص وزر أمر "click me " بعد كتابة نص داخل هذا الصندوق
2- عند النقر على زر الأمر "click me"
3- يظهر صندوق رسالة يعرض محتوى صندوق النص
خطوات ظهور رسالة بالنص المكتوب داخل صندوق النص عند الضغط على زر buttonبصفحة الويب :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى كما بالصورة
داخل سكربت <script ></ script>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت

عند ادخال نص والضغط على زر الامر Button تظهر النص داخل رسالة
شرح الكود :
• اعطاء اسم للنموذج <form> وهو الاسم form1 عن طريق الخاصية name
• اعطاء اسم لصندوق النص وهو الاسم amal1 عن طرق الخاصية name
• تم الوصول الى النص المكتوب داخل صندوق النص عن طريق الأمر form1.amal1.value أى عن طريق الخاصية value للصندوق amal1 الموجود بالنموذج form1
الأسئلة والتدريبات للفصل الثانى
أكمل العبارات التالية :
1- إذا أردت ان تنفذ جمل الـ Jave script عند وقوع حدث مثل النقر على زر أمر Button سوف نحتاج الى استخدام ..........................
2- .............................. هى مجموعة من الآوامر التى تنفذ عند استدعائها ويجب اعطائها اسم مناسب يدل على وظيفتها
ضع علامة صح أو خطا أمام العبارات الاتية :
1- يتم اضافة الخاصية Value لزر الأمر Button لإستدعاء دالة أو تنفيذ كود jave script
2- تستخدم الخاصية Onclick لكتابة نص يظهر على الزر
3- للوصول الى محتوى صندوق النص لابد من اعطاء اسم للنموذج واسم لصندوق النص
4- يتم كتابة جمل لغة Jave script داخل الامر <script>
▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒
الفصل الثالث : جملة التفرع If Statement

التفرع Branching :

تنفيذ كود معين بناءاً على تحقق تعبير شرطى فاذا تحقق ينفذ الكود وأذا لم يتحقق ينفذ كود اخر فلا ينفذ كود الا بمدى تحقق الشرط


مثال : فى حالة اختبار مجموع درجات ( التعبير الشرطى ) إذا كان مجموع الدرجات أكبر من او يساوى 50 ( 50=> الدرجة IF ) يطبع ناجح ( تم تحقق الشرط فسوف ينفذ الكود
اولاً جملة IF :الصيغة العامة لجملة IF :


1- Condition هو التعبير الشرطى المطلوب اختباره
2- ما بين القوسين { } يكتب الكود
3- فى حالة تحقق الشرط ينفذ الكود ما بين القوسين وفى حالة عدم تحقق التعبير الشرطى لا ينفذ الكود ما بين القوسين

نشاط : تصميم صفحة ويب عند ادخال درجة اكبر من 50 تظهر رسالة ناجح
1- صندوق نص
2- زر أمر المجموع بحيث يتم ادخال الدرجات فى صندوق النص
3- عند النقر على زر المجموع فاذا كانت الدرجة أكبر من او تساوى 50 يتم طباعة اظهار رسالة ناجح
خطوات تصميم صفحة ويب لاظهار كلمة ناجح فى حالة ان تكون الدرجة اكبر من او تساوى 50 :
1- انشئ ملف نصى جديد بفتح برنامج Notepad وكتابة الهيكل البنائى للغة HTML
2- اكتب الكود التالى كما بالصورة داخل سكربت <script ></ script>
3- احفظ الملف النصى بامتداد Htm أو HTML
4- افتح الملف كمستعرض الانترنت عند ادخال درجة اكبر من او تساوى 50 تظهر رسالة ناجح


الأسئلة والتدريبات للفصل الثالث
أكتب المصطلح العلمى الدال على العبارات الآتية :
1- تنفيذ أو عدم تنفيذ أوامر أو جمل تبعاً لنتيجة اختبار تعبير شرطى معين
2- جملة يتم استخدامها لاختبار التعبير الشرطى
ضع علامة صح امام العبار الصحيحة وعلامة خطأ أمام العبارة الخطأ :
1- فى حالة عدم تحقق التعبير الشرطى ينفذ الكود ما بين القوسين
2- فى حالة x=100 يتحقق الشرط X>=20 ويكون جواب الشرط نعم
▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒
الفصل الرابع :التحقق من صحة البيانات المدخلة فى صفحة الويب

التحقق من صحة البيانات المدخلة :

هى عملية التحكم فى البيانات التى يتم ادخالها
فى تصميم صفحات الويب قد يحث الاتى
• ترك حقول فارغة
• كتابة عدد غير محدد من الحروف والأرقام فى الحقل
• عدم مطابقة كلمة المرور
• ادخال اى نوع من البيانات داخل الحق
لذلك نحتاج الى التحقق من صحة البيانات
اولاً : عدم ترك حقل فارغ Reguired Field :
عند وضع صندوق نص والضغط على زر ارسال بدون كتابة الاسم تظهر رسالة غير مسموح


شرح الكود السابق :
1- انشاء نموذج على صفحة الويب من خلال الكود التالى
<form name ="form1" action="data.php">
الخاصية Name : تعنى اسم النموذج وهو form1 سوف يستخدم فى التعامل معه من داخل الكود
الخاصية action : تحدد العملية التى سيتم تنفيذها عند ضغط زر submit وعادة تكون عملية ارسال للبيانات التى أدخالها المستخدم عن طريق أدوات التحكم فى صفحة الويب وتسمى data.php وتكون مخزنة على جهاز الخادم
2- لإظهار صندوق النص text1 من خلال الكود
<input type="text" name="text1" >
3- لإظهار زر submit على صفحة الويب من خلال الكود
<input type="submit" value="ارسال" onclick="return f1();"/>
الخاصية value : لكتابة كلمة ارسال على الزر submit
الخاصية onclick : تمثل حدث يجعل الزر يستجيب للنقر بالماوس ويقوم بتنفيذ كود معين أو استدعاء دالة لتنفيذها ( الدالة باسم f1() ) وأمر return لإستقبال القيمة الراجعة من تنفيذ الدالة
4- لإنشاء الدالة f1() التى يتم تنفيذها عند النقر على زر submit من خلال الكود التالى
function f1(){
5- لاختبار محتوى صندوق النص text1 الموجود داخل النموذج form1 عن طريق الخاصية value حيث ان القيمة تعنى ان صندوق النص فارغ
if(form1.text1.value=="")
6- لإظهار الرسالة " غير مسموح بترك حقل الإسم فارغ " نستخدم ألأمر alert كما بالكود التالى
alert("غير مسموح بترك حقل الاسم فارغ")
7- لإرجاع قيمة الدالة f1 ب false فى حالة ترك صندوق النص فارغ من خلال الكود التالى
return false;



الفصل الخامس :تابع التحقق من صحة البيانات المدخلة فى صفحة الويب
ثانياً : التحكم فى طول البيان المدخل بالحقل
للتحكم فى طول البيان المدخل بالحقل اى احتواء الحقل على قيمة لا تقل عن عدد محدد من الرموز أو الحروف او الارقام اى كانت نوع البيانات الدخلة


شرح الكود السابق :
1- انشاء نموذج على صفحة الويب من خلال الكود التالى
<form name ="form1" action="data.php">
الخاصية Name : تعنى اسم النموذج وهو form1 سوف يستخدم فى التعامل معه من داخل الكود
الخاصية action : تحدد العملية التى سيتم تنفيذها عند ضغط زر submit وعادة تكون عملية ارسال للبيانات التى أدخالها المستخدم عن طريق أدوات التحكم فى صفحة الويب وتسمى data.php وتكون مخزنة على جهاز الخادم
2- لإظهار صندوق النص text1 من خلال الكود لكتابة كلمة المرور
<input type="password" name="text1">
3- لإظهار زر submit على صفحة الويب من خلال الكود
<input type="submit" value="ارسال" onclick="return f1();"/>
الخاصية value : لكتابة كلمة ارسال على الزر submit
الخاصية onclick : تمثل حدث يجعل الزر يستجيب للنقر بالماوس ويقوم بتنفيذ كود معين أو استدعاء دالة لتنفيذها ( الدالة باسم f1() ) وأمر return لإستقبال القيمة الراجعة من تنفيذ الدالة
4- لإنشاء الدالة f1() التى يتم تنفيذها عند النقر على زر submit من خلال الكود التالى
function f1(){
5- لاختبار محتوى صندوق النص text1 الموجود داخل النموذج form1 عن طريق الخاصية value حيث ان القيمة لابد ان لا تقل عن 16 حرف
if(form1.text1.value.length<16)
6- لإظهار الرسالة " طول كلمة المرور لا يقل عن 16 حرف " نستخدم ألأمر alert كما بالكود التالى
alert("طول كلمة المرور لا يقل عن 16 حرف ")
7- لإرجاع قيمة الدالة f1 ب falseفى حالة ادخال اقل من القيمة المسموح به من خلال الكود التالى
return false;
ثالثاً : مطابقة البيانات المدخلة فى حقلين :



شرح الكود السابق :
1- انشاء نموذج على صفحة الويب من خلال الكود التالى
<form name ="form1" action="data.php">
الخاصية Name : تعنى اسم النموذج وهو form1 سوف يستخدم فى التعامل معه من داخل الكود
الخاصية action : تحدد العملية التى سيتم تنفيذها عند ضغط زر submit وعادة تكون عملية ارسال للبيانات التى أدخالها المستخدم عن طريق أدوات التحكم فى صفحة الويب وتسمى data.php وتكون مخزنة على جهاز الخادم
2- لإظهار صندوق النص text1 من خلال الكود لكتابة كلمة المرور
< input type="password" name="text1">
3- لإظهار صندوق النص اخر text1 من خلال الكود لتاكيد كلمة المرور مرة ثانية
<input type="password" name="text2">
4- لإظهار زر submit على صفحة الويب من خلال الكود
< input type="submit" value="ارسال" onclick="return f1():"/>
الخاصية value : لكتابة كلمة ارسال على الزر submit
الخاصية onclick : تمثل حدث يجعل الزر يستجيب للنقر بالماوس ويقوم بتنفيذ كود معين أو استدعاء دالة لتنفيذها ( الدالة باسم f1() ) وأمر return لإستقبال القيمة الراجعة من تنفيذ الدالة
5- لإنشاء الدالة f1() التى يتم تنفيذها عند النقر على زر submit من خلال الكود التالى
function f1() {
6- لاختبار محتوى صندوق النص text1 الموجود داخل النموذج form1 عن طريق الخاصية value حيث ان القيمة تكون نفس قيمة صندوق النص الاخر
if(form1.text1.value!==form1.text2.value)
7- لإظهار الرسالة " الكلمتين غير متطابقين " نستخدم ألأمر alert كما بالكود التالى
alert(" الكلمتين غير مطابقين")
8- لإرجاع قيمة الدالة f1 ب false فى حالة ادخال كلمتين مختلفين داخل صنودق النص
return false;
رابعاً : منع ادخال نوع من البيانات مخالف لنوع الحقل :
لمنع ادخال نوع من البيانات مخالف لنوع الحقل
1- صندوق نص
2- زر submit عند الضغط عليه يتم اختبار القيمة المدخلة وفى حالة ادخال قيمة غير عددية تظهر رسالة تحذيرية بادخال قيم عددية


شرح الكود السابق :
1- انشاء نموذج على صفحة الويب من خلال الكود التالى
<form name ="form1" action="data.php">
الخاصية Name : تعنى اسم النموذج وهو form1 سوف يستخدم فى التعامل معه من داخل الكود
الخاصية action : تحدد العملية التى سيتم تنفيذها عند ضغط زر submit وعادة تكون عملية ارسال للبيانات التى أدخالها المستخدم عن طريق أدوات التحكم فى صفحة الويب وتسمى data.php وتكون مخزنة على جهاز الخادم
2- لإظهار صندوق النص text1 من خلال الكود لادخال قيمة عددية
<input type="text" name="text1" >
3- لإظهار زر submit على صفحة الويب من خلال الكود
<input type="submit" value="ارسال" onclick="return f1():"/>
الخاصية value : لكتابة كلمة ارسال على الزر submit
الخاصية onclick : تمثل حدث يجعل الزر يستجيب للنقر بالماوس ويقوم بتنفيذ كود معين أو استدعاء دالة لتنفيذها ( الدالة باسم f1() ) وأمر return لإستقبال القيمة الراجعة من تنفيذ الدالة
4- لإنشاء الدالة f1() التى يتم تنفيذها عند النقر على زر submit من خلال الكود التالى
function f1(){
5- لاختبار محتوى صندوق النص text1 الموجود داخل النموذج form1 عن طريق الخاصية value حيث ان القيمة تكون قيمة عددية
If(isNaN(form1.text1.value()
6- لإظهار الرسالة " أدخل قيمة عددية " نستخدم ألأمر alert كما بالكود التالى
alert("أدخل قيمة عددية ")
7- لإرجاع قيمة الدالة f1 ب false فى حالة ادخال حروف بدلا من ارقام من خلال الكود التالى
return false;
الاسئلة والتدريبات للفصول السابقة
أكمل العبارات الاتية :
من حالات التحكم فى صحة البيانات التى يتم إدخالها :
• ترك حقول فارغة
• ...................................................
• ...................................................
• ...................................................
ضع علامة صح امام العبارة الصحيحة وعلامة خطا امام العبارة الخطأ :
1- لمطابقة كلمة المرور نستخدم الشرط form1.text.value==""
2- تضاف الخاصية action للأمر <form> لتحديد الصفحة المطلوب الانتقال اليها مع ارسال بيانات النموذج
3- لإنشاء الدالة f1() التى يتم انفيذها عند النقر على زر submit استخدمنا الكود function f1 () {
4- لإرجاع قيمة الدالة f1 بـ false فى حالة ترك صندوق النص فارغاً نستخدم الكود retirn false :
5- طول البيان المدخل فى صندوق النص أقل من او يساوى 8 حروف form1.text1.value.length<=8
6- لتحقق من عدم ترك حقل فارغ نستخدم الكود form1.text1.value!==form1.text2.value
7- لمنع ادخال بيانات عددية فى صندوق النص نستخدم الشرط IsNaN ( form1.text1.value)
▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▒▒
الفصل السادس :
المشروع التحقق من صحة البيانات المدخلة فى صفحة تسجيل البيانات


الفصل السابع أثرائى :HTML 5

هى اصدار جديد من لغة HTML ظهر عام 2014 وبه العديد من التحسينات من خلال استخدام مجموعة من الأدوات الجديدة التى تسهل من فكرة تصميم صفحة الويب
برامج مستعرض الانترنت مثل google chrome و firefox و Internet Explorer وغيرها لا يدعم بشكل كامل الأوامر الجديدة الخاصة بالاصدار HTML5 لذا سيتم تحديد المسترض المطلوب لتنفيذ كل أمر سوف يتم شرحه
صندوق اللون color
يتيح للمستخدم اختيار لون من صندوق الالوان ولاضافة صندوق الالوان color الى صفحة الويب من خلال الامر<input type="color"> ينفذ من خلال جوجل كروم
1- انشاء ملف نصى بكتابة التركيب الاساسى للغة HTML
2- كتابة الكود <input type="color"> داخل النموذج <form>
3- حفظ الملف النصى بامتداد htm
4- فتح ملف مستعرض الانترنت

صندوق التاريخ Date:
يتيح للمستخدم ادخال تاريخ معين بواسطة نافذة التقويم من خلال الكود التالى <input type="date"> ينفذ من خلال مستعرض جوجل كروم
1- انشاء ملف نصى بكتابة التركيب الاساسى للغة HTML
2- كتابة الكود <input type="date"> داخل النموذج <form>
3- حفظ الملف النصى بامتداد htm
4- فتح ملف مستعرض الانترنت

صندوق العدد Number:
يتم انشاء هذه الأداة على صفحة الويب لإدخال قيم لابد أن تكون عدديةويمكن تحديد مدى معين لهذه القيم ولاضافة صندوق العدد من خلال الكود ينفذ من خلال مستعرض Google chrome و Firefox
<input type="number" min="1" max="20">

ملاحظات :
تكتب القيمة المطلوب أدخالها فى صندوق أداة العدد ثن نضغط زر submit
يقوم مستعرض الانترنت بعرض القيم المدخلة وإذا كانت قيمة غير عددية تظهر رسالة تطلب ادخال قيمة عددية
وفى حالة ادخال قيمة عددية يقوم مستعرض بالتاكد من ان القيمة هى المحصورة بين القيمة الصغرى min والقيمة العظمىmax

استخدام الخاصية Reguired : هذا الامر ينفذ بمستعرض internet Explorer
عند استخدام هذه الخاصية م بعض الأدوات السابقة مثل text – password – date – number – checkbox – radio يتطلب ذلك ضرورة ادخال قيمة عن طريق المستخدم وعدم تركها فارغة
1- انشاء ملف نصى بكتابة التركيب الاساسى للغة HTML
2- كتابة الكود <input type="text reguired"> داخل النموذج <form>
3- حفظ الملف النصى بامتداد htm
4- فتح ملف مستعرض الانترنت
عند الضغط على زر submit بدون ادخال اى قيمة فى صندوق النص سوف يظهر رسالة المستعرض تطلبضرورة ادخال قيمة وعدم ترك الصندوق فارغ

الاسئلة والتدريبات للفصل
أكتب المصطلح العلمى الدال على العبارات الآتية :
1- اصدار جديد من لغة HTML به العديد من التحسينات التى نلمسها من خلال مجوعة من الأدوات الجديدة
2- من الوامر الجديدة الخاصة بلغة HTML5 وهو أمر يتعلق باضافة عناصر النموذج المستخدمة فى الادخال
3- خاصية عند استخدامها مع بعض الادوات يتطلب ذلك ضرورة ادخال قيمة عن طريق المستخدم وعدم تركها فارغة
4- حقل يتم اضافته لصفحة الويب لإدخال قيم عددية فقط ويمكن تحديد مدى معين لهذه القيم
5- إختر ن العمود ب ما سناسبه من العمود أ :
( أ ) ( ب )
<input type="date"> لإضافة صندوق الألوان color الى صفحة الويب
< input type ="number"> لإضافة صندوق التاريخ date الى لصفحة الويب
<input type ="color"> لإضافة صندوق العدد number الى لصفحة الويب

الوحدة الثالثة: الاستخدام الامن للإنترنت
تعدشبكة الانترنت من أهم وسائل الاتصال فى مختلف المجالات بشكل جعل هناك ضرورة التركيز على المخاطر التى قد تنتج أجراء ذلك الاستخدام وتتنوع هذه المخاطر ما بين الاصابة بالفيروسات امدمرة للبيانات المخزنة على الجهاز والاختراق للعبث بملفات المستخدم أو استغلال الاخرين يقصد الاساءة أو الابتزاز أو الانتحال أو سرقة البيانات الشخصية وغيرها من أنواع المخاطر فالكثير من الاشخاص لا يدركون أن بعض المعلومات التى قد تبدو تافة لا معنى له تعنى الكثير لأناس اخرين


الاستخدام الامن للانترنت
أولاً : سرقة الهوية identity :

انتحال أو استخدام شخص ما اسم شخص آخر أو اى معلومات تتعلق به لسرقته أو سرقة غيره
ثانياً : البرامج الضارة Maware :

البرامج العدائية أو المتطفلة أو المزعجة التى تسلل مستترة لأنظمة البرامج الكمبيوتر واسمها مشتق من الكلمات Malicious ( خبيث ) و software ( برامج ) ولتفادى هذه البرامج يمكنك استخدام برامج مكافحة الفيروسات لتأمين جهازك .
ثالثاً : برامج التجسس :

برامج كمبيوتر تقوم بتجميع المعلومات الشخصية عن المستخدمين دون الحصول على موافقتهم ولتفادى هذه البرامج يجب استخدام برامج الكشف عن الملفات الخبيثة كملفات التجسس والملفات الدعائية والملفات التى تسيطر على متصفح الانترنت الخاص بك
رابعاً : الفيروس Virus :
برنامج صغير ضار له قدرة على الانتشار الذاتى يصيب أجهزة الكمبيوتر والبرامج
خامساً : الرموز السرية :
يقصد به كافة البيانات الشخصية التى تخص أى فرد يتعامل مع وسائل تكنولوجيا المعلومات والاتصالات والتى لا ينبغى الكشف عنها لأى أحد مثل اسم المستخدم Username وكلمة المرور password عند التعامل مع الانترنت أو التليفون المحمول .
مواقف هامة وكيفية التعامل معها
الموقف الاول :
أحيانا يكون التسجيل بإدخال اسم المستخدم والرقم السرى للصفحة على موقع التواصل الاجتماعى بهدف الاشتراك فى التطبيق وارسال معلومات المطلوبة وقد يتعرض المستخدم احيانا لسرقة حسابه الشخصى وخصوصا ان هذه التطبيقات فى كثير من الاحيان تكون بهدف الهاكر
كيفية التعامل مع الموقف:
يفضل عدم الاشتراك فى مثل هذه التطبيقات على وجه العموم لصعوبة معرفة الهدف الرئيسى منها وخاصة إذا كان التسجيل بادخال الرقم السرى للحساب الشخصى وإذا حدث بالفعل يرجى سرعة تغيير الرقم السرى حرصا من دخول احدهم والعبث فى الصفحات الشخصية
الموقف الثانى :
وضع بعض المستخدمين وخاصة على مواقع التواصل الاجتماعى صور شخصية لهم أو لأفراد العائلة فى مناسبات وأماكن خاصة
المشكلة التى قد تحدث : قد يتعرض المستخدم للوقوع فى عمليات ابتزاز أو التشهير أو التعامل معها بشكل غير آمن عن طريق برامج متخصصة فى الصور مثل الفوتوشوب وخلافه
التعامل مع الموقف :
عدم وضع صور شخصية خاصة بأى حال من الاحوال ونشرها للعامة وعند النشر لابد التاكد على سريتها وعدم الاطلاع عليها الا لأصدقاء المقربين فقط
الموقف الثالث :
وضع أرقام التليفون وبيانات شخصية مثل عنوان السكن أو عنوان العمل وتفاصيله عند التسجيل فى المنتديات أو عمل حساب شخصى على مواقع التواصل
المشكلة التى قد تحدث :
قد يتعرض المستخدم للوقوع احيانا لسرقات المنزلية أو الخطف وخاصة إذا كان المستخدم من صغار السن ولا يوجد رقابة منزلية كافية عند التسجيل على هذه المواقع
التعامل مع الموقف :
عدم وضع تفاصيل شخصية أو معلومات هامة تخص المستخدم والأفضل اخفائها إذا لز الأمر عند إنشاء صفحات على مواقع تواصل أو منتديات والرقابة على صغار المستخدمين من قبل المنزل وعدم السماح لهم بتناول البيانات الشخصية الهامة ونشرها فقط للمصادر الموثوقة
الموقف الرابع :
التحدث مع أشخاص غريبة بهدف التعارف وتبادل الاراء والثقافات عبر مواقع التواصل الاجتماعى
المشكلة التى قد تحدث :
قد يحدث بعض الخداع من بعض الاشخاص وخاصة أصحاب الشخصيات الوهمية وقد يؤدى هذا للوقوع فى كثير من لمشكلات الحياتية لخطورة الموقف واطلاع البعض على بعض السرار العائلية واستغلالها
التعامل مع الموقف :
استخدام أحد مواقع التواصل الاجتماعى بهدف زيادة الروابط والاجتماعيات بين الافراد ولكن لابد ان يتم بمحاذيير منها التاكد من بيانات الشخص وتحديد هويته الفعلية والافضل عدم التعامل ع اشخاص يستخدمون اسماء حركية وليست حقيقية وكذلك لمن يريد الاطمئنان ان يكون هناك اصدقاء مشتركين للطرفين للتاكد من صحة هوية الشخص قبل التعامل معه
الموقف الخامس :
التسجيل فى بعض الوظائف الكترونياً عن طريق استكمال استمارات فيها تفاصيل وبيانات شخصيه
المشكلة التى قد تحدث :
قد يحدث بعض الخداع من بعض الشركات الوهمية عن طريق الاعلان عن وظائفف غير حقيقة لمجرد دخول المستخدم وكتابة بياناته الشخصية وارقام الهواتف لعمل قاعدة بيانات للمستخدمين واختيار العناصر المميزة لاستغلالها أو الاستفادة منها لاغراض معينة
التعامل مع الموقف:
التقديم الغلكترونياً نظام اصبح متعارف عليه عالمياً توفيراً للوقت والجهد ولكن بمحاذيير مثل التاكد من وجود هذه الشركاات فعلا أو الاماكن المعلنة عن وظائف عن طريق التحقق الفعلى من وجودها ومعرفة عنوانها والاتصال الفعلى والمباشر معهم والتكد من اعلانهم عن التقديم لوظائف فعلية ويفضل التعامل مع المؤسسات الحكومية أو الرسمية
ارشادات هامة للاستخدام الأمنللإنترنت
1- الحفاظ على كلمة المرور واسم المستخدم الخاصين بك وعدم نشرهم.
2- فكر جيدا قبل نشر الصور الشخصية أو إرسال نصوص او ملفات صوت او فيديو عبر الانترنت
3- استئذن صاحب الشان قبل نشر صور الغير أو ارسال بريده الإلكترونى وتليفوناتهم لشخص آخر على الانترنت
4- لا تقبل اى رسائل مجهولة المصدر
5- لا تقم بإضافة آخرين لقائمة الأصدقاء ما لم تكن تعرفهم معرفة شخصية
6- إذا كنت غاضباً فلا تقم بإرسال أية رسائل
7- عليك ان تدرك أن عدم اتخاذ موقف حيال عمليات التعدى التى تشهدها يعد نوعاً من التستر على التعدى لذا بادر باتخاذ أجراء مناسب أو اخبار من تثق بهم من الكبار
8- تعلم كيفية حظر وصول بعض الأشخاص إلى غرف الدردشة والإبلاغ عنهم وكيفية حفظ أو طباعة نسخة من أى حوار فقد يحتاج واليك الإبلاغ عنها
9- تعلم ايضا حظر الرسائل العدئية أو استلام أية رسائل إلكترونية مزعجة من أشخاص بعينهم
10- إدراك ان الحوارات عبر الانترنت ليس ذات خصوصية فقج يقوم آخرون بنسخ هذه الحوارات وطباعتها وإطلاع الآخرين على اى تعليقات أو صور تقوم بنشرها





بعض المصطلحات الهامة المستخدمه فى الاستخدام الأمن للانترنت :

المعنى Term المعنى Term
التعدى الالكترونى Cyber Bullying الاستخدام المقبول للانترنت Acceptable Use Policy
جدار الحماية Firewall طلب المساعدة Asking for Help
الازدراء Contempt مدونة على الإنترنت Web Blog
سرقة الهوية Identity Theft البلوتوث Bluetooth
شبكة محلية LAN غرفة الدردشة Chat Room
اسم المستخدم User Name شبكات الكمبيوتر Computer Network
كلمة المرور Password شبكة واسعة WAN
خبيث Malicious برامج ضارة Malware
فيرس Virus مدونة من محمول الى كمبيوتر MoBlog
كاميرا الويب Web Cam آداب التعامل على الانترنت Netiguette
الرموز السرية Secret Codes نافذة قفاعية Pop Menu
ماكينات الصرف الالى ATM رسائل مزعجة Spam
الصفح السعيد Happy Slapping التصيد الاحتيالى Phishing
برامج التجسس Spyware التلفزيون الاجتماعى التفاعلى Social interactive television
الاسئلة والتدريبات للفصل
السؤال الاول : أكمل العبارات التالية :
1- انتحال او استخدام شخص ما اسم شخص اخر أو اى معلومات تتعلق به لسرقته أوسرقة غيره يسمى ....................
2- تعتبر .............. برامج كمبيوتر تقوم بتجميع المعلومات الشخصية عن المستخدمين دون الحصول على موافقتهم
3- برنامج صغير ضار له قدرة على الانتشار الذاتى يصيب أجهزة الكمبيوتر والبرامج هو ...................
4- الرموز السرية نقصد بها كافة البيانات الشخصية التى تخص آى فرد يتعاملمع وسائل تكنولوجيا المعلومات والاتصالات والتى لا ينبغى الكشف عنها لآى أحد مثل ........................ و ............................
5- Web Blogتعنى .......................................................................................
السؤال الثانى : ما الذى تفعله عند :
1- التحدث مع أشخاص غريبة بهدف التعارف وتبادل الآراء والثقافات عبر مواقع التواصل الاجتماعى
2- التسجيل فى بعض الوظائف الكترونياً عن طريق استكمال استمارات فيها تفاصيل وبيانات شخصية
السؤال الثالث : أكتب كلمة صح امام العبارة الصحيحة وكلمة خطأ أمام العبارة الخطأ :
1- يمكنك نشر صور الغير او إرسال بريدهم الالكترونى وتليفوناتهم لشخص آخر على الانترنت
2- عند التعامل مع الانترنت لا تقبل أية رسائل مجهولة المصدر
3- عدم اتخاذ موقف حيال عمليات التعدى التى تشهدها على الانترنت يعد نوعا من التستر على المتعدى
4- الحوارات عبر الانترنت ذات خصوصية فلا يمكن لآخرين بنسخ هذه الحوارات وطباعتها

أعـــــــــــداد أ/ آمال مصطفى

حمل المذكرة منسقة ومدعمة بالصور من المرفقات
 



المرفقات

الطلاب شاهدو أيضا

ربما تبحث أيضا عن : المنتدى
alostaz عربى خامسة ابتدائى ترم ثانى
alostaz عربى خامسة ابتدائى ترم ثانى
alostaz دين خامسة ابتدائى ترم ثانى
alostaz عربى خامسة ابتدائى ترم ثانى
alostaz دراسات ثالثة اعدادى ترم اول
alostaz حاسب الى ثالثة اعدادى ترم ثانى
alostaz حاسب الى ثالثة اعدادى ترم اول
alostaz حاسب الى تانية اعدادى ترم ثانى
alostaz حاسب الى تانية اعدادى ترم اول
alostaz حاسب الى اولى اعدادى ترم ثانى
alostaz حاسب الى اولى اعدادى ترم اول
رنا محمد حاسب الى تانية اعدادى ترم اول
alostaz حاسب الى ثالثة اعدادى ترم اول
alostaz حاسب الى ثالثة اعدادى ترم اول
Mai Fadeel حاسب الى لاولى ثانوى ترم ثانى

ربما تبحث أيضا عن :