بناء تطبيقات الويب فى نظم المعلومات الجغرافيه

‫د‪/‬رشا صابر نوفل‬ ‫بناء تطبيقات الويب يف نظم املعلومات اجلغرافية‬
‫بناء تطبيقات الويب‬
‫يف نظم املعلومات اجلغرافية‬
‫د‪ /‬رشا صابر نوفل‬
‫مجيع احلقوق حمفوظة للمؤلف‬
‫ال يجوز نشر جزء من هذا الكتاب أو طباعته أو نقله‬
‫أو ترجمته بأي طريقة دون موافقة المؤلف الخطية‬
‫‪2021‬‬
‫‪1‬‬
‫بسم اهلل الرمحن الرحيم‬
‫وما أوتيتم من العلم إال قليال‬
‫صدق اهلل العظيم‬
‫اإلسراء "‪"85‬‬
‫‪2‬‬
‫إهداء‬
‫إىل روح والدي أسكنه اهلل فسيح جناته‬
‫إىل أمي أطال اهلل يف عمرها‬
‫إىل مثلى األعلى األستاذ الدكتور مجعة داود‬
‫إىل أبنائي أمساء وأدهم‬
‫‪3‬‬
‫تقديم‬
‫بسم اهلل الرمحن الرحيم والصالة والسالم على أشرف اخللق سيدنا حممد صل اهلل عليه وسلم أما بعد؛ جاء هذا الكتاب بناء تطبيقات‬
‫الويب يف نظم املعلومات اجلغرافية ؛ فتزايد مستخدمي الويب وتطبيقاته كان دافع لظهور التطبيقات اخلاصة بعرض اخلرائط على الويب‬
‫وعمل تطبيقات خاصة بالبيانات اجلغرافية وحتليلها ؛ وملعرفة كيفية بناء تطبيقات الويب اخلاصة بنظم املعلومات اجلغرافية ؛ ال بد من‬
‫التطرق اىل معرفة بعض األساسيات ولذلك مت شرح أساسيات لغة ‪ HTML‬و ‪ CSS‬وكيفية تصميم واجهة الويب من خالهلم وذلك‬
‫يف الباب األول وجاء الباب الثاني لدراسة ماهية لغة اجلافا سكريبت " حيث أن هذه اللغات هي اللغات األفضل لبناء تطبيقات الويب‬
‫بصفة عامة " ؛ والباب الثالث بناء تطبيقات الويب يف نظم املعلومات اجلغرافية وذلك باستخدام ‪ API Arc GIS JS‬؛ بداية من عرض‬
‫اخلريطة على الويب ؛ واضافة العناصر األساسية وكيفية إضافة طبقات مت نشرها على ‪ Arc GIS online‬أو ‪ Arc Server‬؛‬
‫وبالتايل إمكانية عمل حتليالت مثل عمل أداة إلنشاء ‪ Buffer‬و ‪ view shed‬حول نقطة حمددة وانشاء أداة إلجياد مسار بني نقطتني ؛‬
‫وحساب فرق االرتفاع ؛ وأخريا جاء الباب الرابع لشرح إمكانية انشاء تطبيق ويب باستخدام ‪ArcGIS web APP Builder‬‬
‫رشا نوفل‬
‫‪4‬‬
‫فهرس الموضوعات‬
‫رقم الصفحة‬ ‫املوضوع‬
‫‪4‬‬ ‫تقديم ‪.‬‬
‫‪5‬‬ ‫فهرس الموضوعات‪.‬‬
‫‪8‬‬ ‫مقدمة‪.‬‬
‫‪8‬‬ ‫أهمية البرمجة ولماذا نبرمج؟‬
‫‪8‬‬ ‫كيف نبرمج؟‬
‫‪9‬‬ ‫االكواد‪.‬‬
‫‪9‬‬ ‫لغات البرمجة‪.‬‬
‫‪9‬‬ ‫الفرق بين تطبيقات سطح المكتب وتطبيقات الويب وتطبيقات الهواتف ‪.‬‬
‫‪10‬‬ ‫تعريف ‪Server‬؟‬
‫‪10‬‬ ‫الطريق الى تعلم برمجة تطبيقات الويب‪.‬‬
‫‪10‬‬ ‫تطبيقات الويب في نظم المعلومات الجغرافية‪.‬‬
‫‪12‬‬ ‫الباب األول‪ :‬أساسيات ‪ HTML‬و ‪ CSS‬يف برجمة الويب‪.‬‬
‫‪12‬‬ ‫مقدمة‪.‬‬
‫‪12‬‬ ‫مفاهيم أساسية ومصطلحات ‪.html‬‬
‫‪12‬‬ ‫خصائص وعناصر ‪.html‬‬
‫‪14‬‬ ‫‪.CSS‬‬
‫‪17‬‬ ‫معظم خصائص ‪.CSS‬‬
‫‪18‬‬ ‫بدء العمل مع ‪.HTML , CSS‬‬
‫‪20‬‬ ‫المعلومات األساسية بالـ ‪.head‬‬
‫‪22‬‬ ‫المعلومات الخاصة بالـ ‪.body‬‬
‫‪28‬‬ ‫انشاء جسم الموقع‪.‬‬
‫‪33‬‬ ‫إضافة صورة داخل الموقع‪.‬‬
‫‪35‬‬ ‫إضافة صورة كخلفية‪.‬‬
‫‪35‬‬ ‫عمل ‪.Hyper link‬‬
‫‪5‬‬
‫‪36‬‬ ‫عمل قائمة ‪.menu‬‬

‫‪38‬‬ ‫عمل ‪.slid par‬‬
‫‪39‬‬ ‫انشاء الجداول‪.‬‬
‫‪40‬‬ ‫عمل نماذج‪.‬‬
‫‪44‬‬ ‫الباب الثاني‪ :‬ماهية لغة ‪.Java Script‬‬
‫‪44‬‬ ‫مقدمة‪.‬‬
‫‪44‬‬ ‫انشاء ملف ‪ js‬وربطه بصفحة ‪.html‬‬
‫‪49‬‬ ‫المتغيرات ‪. Variables‬‬
‫‪54‬‬ ‫العوامل ‪.operators‬‬
‫‪56‬‬ ‫الشروط ‪.conditions‬‬
‫‪57‬‬ ‫الدوال ‪. functions‬‬
‫‪58‬‬ ‫‪. Events‬‬
‫‪59‬‬ ‫الحلقات التك اررية ‪.LOOP‬‬
‫الباب الثالث‪ :‬بناء تطبيقات الويب يف نظم املعلومات اجلغرافية باستخدام ‪61‬‬
‫‪61‬‬ ‫استخدام ‪API ArcGIS JS.‬‬
‫‪61‬‬ ‫العناصر األساسية لعمل الويب باستخدام ‪.API‬‬
‫‪61‬‬ ‫خطوات عمل الويب‪.‬‬
‫‪63‬‬ ‫كتابة مرجع للـ‪ API‬داخل الـ ‪.head‬‬
‫‪63‬‬ ‫تنسيق الصفحة‪.‬‬
‫‪67‬‬ ‫تطبيقات ‪API ArcGIS JS.‬‬
‫‪67‬‬ ‫تهيئة العمل‪.‬‬
‫‪69‬‬ ‫‪ -1‬إضافة خريطة لتطبيق الويب‪.‬‬
‫‪73‬‬ ‫‪ -2‬إضافة قائمة البحث باالسم‪.‬‬
‫‪74‬‬ ‫‪ -3‬إضافة إمكانية تغيير خريطة األساس‪.‬‬
‫‪77‬‬ ‫‪ -4‬إضافة نقطة وخط ومضلع‪.‬‬
‫‪87‬‬ ‫‪ -5‬انشاء نافذة منبثقة للرسم‪.‬‬
‫‪88‬‬ ‫‪ -6‬إضافة مشهد ثالثى األبعاد‪.‬‬
‫‪91‬‬ ‫‪ -7‬إضافة ‪ feature layer‬الى الويب‪.‬‬
‫‪102‬‬ ‫‪ -8‬إضافة وسيلة إيضاح للخريطة‪.‬‬
‫‪6‬‬
‫‪104‬‬ ‫‪ -9‬إضافة اطار للتعديل على ‪.feature‬‬

‫‪106‬‬ ‫‪ -10‬أضافة ‪ widget‬للرسم‪.‬‬
‫‪126‬‬ ‫‪ -11‬عمل تحليالت باستخدام ‪.API Arc GIS JS‬‬
‫‪126‬‬ ‫انشاء أداة لعمل ‪BUFFER‬حول نقطة محددة‪.‬‬ ‫‪-‬‬
‫‪133‬‬ ‫عمل رسم للحصول على ‪ View shed‬من نقطة محددة‪.‬‬ ‫‪-‬‬
‫‪139‬‬ ‫إيجاد مسار بين نقطتين‪.‬‬ ‫‪-‬‬
‫‪143‬‬ ‫حساب فرق االرتفاع بين نقطتين‪.‬‬ ‫‪-‬‬
‫‪151‬‬ ‫الباب الرابع ‪ :‬انشاء تطبيق ويب بـ ‪:Arc GIS web APP Builder‬‬
‫‪151‬‬ ‫مقدمة‪.‬‬
‫‪163-151‬‬ ‫بدء العمل مع التطبيق‪.‬‬
‫‪164‬‬ ‫قائمة المراجع والمصادر‪.‬‬
‫‪165‬‬ ‫نبذة عن المؤلف‪.‬‬
‫‪7‬‬
‫مقدمة‪:‬‬
‫البرمجة أصبحت من أهم أكبر المجاالت في العالم ؛ منذ بداية اختراع االنسان لأللة ؛ لتساعده في قضاء‬
‫مهامه الحياتية ؛ وبالتطور بدأ التفكير في التحكم في االلة عن طريق مجموعة من األوامر ؛ ثم أصبح لها‬
‫ذاكرة ثم شاشة الى أن أصبح الكمبيوتر؛ أي أن الكمبيوتر ما هو اال تطور طبيعي لأللة ؛ وهذه نفسها هي‬
‫أصل بداية البرمجة ؛ حيث يتم برمجة ألة محددة لتنفيذ مهام مطلوبة دون تدخل يدوى ‪.‬‬
‫والبرمجة هي سر التطور في الحياة البشرية في السنوات األخيرة؛ وهى اهم المجاالت التي قامت عليها‬
‫التكنولوجيا‪.‬‬
‫أهمية البرمجة؟ و لماذا نبرمج؟‬
‫تتلخص أهمية البرمجة في تسهيل المهام وتلخيصها وتقديم خدمات تساعدنا؛ وكذلك تخزين كم هائل من‬
‫المعلومات والقدرة على تحليلها بمنتهى السرعة والدقة‪ .‬وهذا ما لم يستطيع العقل البشري تنفيذه‪.‬‬
‫كيف نبرمج ؟‬
‫عند البدء في تعلم البرمجة أول ما يتبادر الى أذهاننا كيف نبرمج؟ واالجابة على هذا السؤال ال تنحصر في‬
‫معرفة األكواد المستخدمة في برمجة شيء ما؛ فالفكرة األساسية هي األهم في الموضوع ؛ وليست طريقة كتابة‬
‫األكواد ؛ فطريقة البرمجة سهلة لكن الحصول على الفكرة التي نريد تحقيق هدف محدد منها هي األساس "‬
‫أي معرفة ما الذى أريد تحقيقه من البرمجة" ؛ فأى برنامج عبارة عن مدخالت ‪ input‬ومخرجات ‪ output‬؛‬
‫فال بد من معرفة ما هي المدخالت للحصول على المخرجات التي تفى بالغرض المطلوب ؛ وبعد ذلك يأتي‬
‫عملية كتابة األكواد‪.‬‬
‫األكواد‪:‬‬
‫هي اللغة التي يستطيع الحاسب األلى فهمها؛ ولغة الكمبيوتر تسمى بلغة اآللة الـ ‪ machine learning‬وهى‬
‫( ‪ ) 0,1‬؛ واالكواد عبارة عن رموز وحروف تشبه اإلنجليزية وليتم تحويلها الى لغة االلة عن طريق الـ‬
‫‪ " compiler‬المحول أو المترجم " وهو موجود تلقائى داخل لغات البرمجة‪.‬‬
‫لغات البرمجة‪ :‬مثلها مثل أي لغة ال بد من معرفة أساسياتها؛ وليس مطلوب مننا حفظ هذه األساسيات بقدر‬
‫ما يطلب منى فهم األفكار األساسية والخطوات المطلوب تنفيذها ومعرفة كيفه حل المشاكل‪.‬‬
‫‪8‬‬
‫الفرق بين تطبيقات سطح المكتب وتطبيقات الويب وتطبيقات الهواتف الذكية‪:‬‬
‫تطبيقات سطح المكتب ‪ :‬هي التطبيقات التي يتم استخدامها على أجهزة سطح المكتب " الجهاز الخاص‬
‫بالمستخدم " ‪.‬‬
‫عيوب تطبيقات سطح المكتب‪:‬‬
‫‪ -‬ال بد من عمل تحميل التطبيق على جهازي‪.‬‬
‫‪ -‬كل األجهزة ال يمكنها تشغيل التطبيق؛ فال بد من وجود مواصفات تتناسب مع كل تطبيق ؛ فال بد من‬
‫توافق كل من الـ ‪ hardware‬مع التطبيق وكذلك ‪ Software‬نظام التشغيل" ‪." operator system‬‬
‫‪ -‬ال بد من عمل تحديثات للتطبيق مع تحديثات الشركة المنتجة وهذه التحديثات تتم من خالل المستخدم"‬
‫هو الذى يقوم بعمل التحديث"‪.‬‬
‫‪ -‬ال بد من تناسب المساحة مع مساحة الجهاز الخاص بك‪.‬‬
‫‪ -‬إذا تم عمل حذف لل‪ operator system‬يتم حذف التطبيق تلقائى وال بد من تنزيله مرة أخرى‪.‬‬
‫تطبيقات الويب ‪ :‬هي أي تطبيق يمكن تشغيله على المتصفح؛ فال يتم تحميله ؛ لكنه يكون موجود على السيرفر‬
‫الخاص بالشركة المنتجة ؛ ويتم التصفح بداخله من خالل متصفحات االنترنت مثل جوجل وجوجل كروم وفاير‬
‫فوكس وغيرها ؛ ال يرتبط بمواصفات جهازى فأى جهاز مهما كانت مواصفاته يمكنها تشغيل تطبيقات الويب ؛‬
‫بالنسبة للتحديثات ال يكون للمستخدم أي تدخل فيها فالتحديث يتم من خالل الشركة تلقائيا ؛ وال يرتبط بتغيير‬
‫نظام التشغيل‪.‬‬
‫تطبيقات الهواتف الذكية ‪ :‬هي التطبيقات التي يمكن تحميلها على هواتفنا الجوالة والتي أصبحت تشكل طفرة‬
‫في تقديم الخدمات للمواطنين ؛ حيث تطبيقات الخاصة بدفع الفواتير ‪ ،‬تطبيقات الرحلة اليومية ؛ وغيرها من‬
‫التطبيقات ‪.‬‬
‫‪9‬‬
‫تعريف ‪" Server‬السيرفر"‪:‬‬
‫التطبيق يتم وضعه على جهاز هذا الجهاز يسمى بالسيرفر ؛ "يوضع عليه سوفت وير لجعله سيرفر "؛ والتي‬
‫تجعله قادر على عرض محتوياته على االنترنت ؛ هذا الجهاز ال بد من أن تكون مواصفاته عالية جدا النه‬
‫يعمل خالل ‪ 24‬ساعة ومتصل باإلنترنت ويخدم عدد كبير من المستخدمين ‪.‬‬
‫الطريق الى تعلم برمجة تطبيقات الويب‪:‬‬
‫لكل برمجة ولها طريق أمثل ال بد من أن نخطو حتى يتسنى لنا الوصول بسهولة وسرعة ؛ فبرمجة تطبيقات‬
‫سطح المكتب لها طريق يختلف عن تطبيقات الهواتف الذكية وكالهما تختلف عن تطبيقات الويب؛ ولكل طريق‬
‫اللغة التي ال بد من اتقانها حتى نسلكه ؛ ويقتصر الحديث هنا فقط على تطبيقات الويب‪ .‬ولمعرفة اللغات التي‬
‫يجب دراساتها لبرمجة تطبيقات الويب ال بد من التفرقة بين ‪ Front-end‬و ‪ Back-end‬داخل الويب‪.‬‬
‫‪ Back- end:‬و ‪Front-end‬‬
‫سبق وأن وضحنا أن تطبيق الويب يتم عرضه على متصفح االنترنت؛ في حين ان التطبيق يتم تنزيله على‬
‫سيرفر ؛ أي أن ألى تطبيق ويب جزئيين جزء على جهازي ‪ Front end‬وهو ما أراه "شكل الموقع – األلوان‬
‫– التصميم" ؛ أما التفاعالت الموجود على السيرفر فيسمى ‪. Back end‬‬
‫ولكل منهما متخصص وقد يجمع متخصص بين الوظيفتين‪.‬‬
‫وظيفة ‪: Front-end‬عمل التصميم ؛ األلوان ؛ حركة المفاتيح؛ واللغات التي يفهمها المتصفح هي فقط (‬
‫‪.)html-css-JavaScript‬‬
‫‪ Html+css‬لعمل التصميم و ‪ JS‬لعمل أي شيء به ‪" Animation‬حركة"؛ فالـ‪ Html‬و‪ css‬مصمتة لكن‬
‫لتحرك التطبيق من صفحة ألخرى يقوم بتسجيل بيانات أو عمل أي حركة فالمتصفح ال يتعامل اال مع الجافا‬
‫سكريبت ؛ لكن هناك لغات أخرى ظهرت مؤخ ار يمكن أن يتعامل معها المتصفح وهي ليست محور حديثنا‬
‫األن‪.‬‬
‫يفضل بعد تعلم ‪ JavaScript‬تعلم ‪JavaScript frame work‬؛ مثل ‪Vue – React -angular‬‬
‫وهذه يساعد على عمل حدود للعمل مما يجعل العمل أكثر فاعلية‪.‬‬
‫‪10‬‬
‫وظيفة ‪: Back-end‬‬
‫لعمل عملية في الموقع مثل عمل الحجز أو إضافة الماستركارد مثل سوق دوت كوم ؛ وذلك يتم من خالل‬
‫كتابة كود هذا الكود يتم تنفيذه على السيرفر؛ اللغات التي تعمل على ذلك ؛ الجافا ‪ -C# -PHP -‬البايثون‬
‫الروبى‪.‬‬
‫السؤال االن هل يمكن تعلم هذه اللغات األخيرة دون تعلم لغات الخاصة بعمل ‪Front-end‬؟‬
‫اإلجابة بالطبع ال ألن في النهاية لغات السيرفر ما هي اال ترجمة لما يتم تصميمه بالـ ‪ HTML,CSS,JS‬؛‬
‫فال بد من معرفة األساس‪.‬‬
‫تطبيقات الويب في نظم المعلومات الجغرافية‪:‬‬
‫هي تطبيقات ويب يتم انشاؤها للتعامل مع بيانات نظم المعلومات الجغرافية ؛وفى هذا الكتاب سوف نعرض‬
‫تطبيقات ‪.API ArcGIS JavaScript‬‬
‫وللدخول الى برمجة تطبيقات الويب في نظم المعلومات الجغرافية ال بد من معرفة أساسيات تطبيقات الويب‬
‫بصفة عامة ؛ وذلك من خالل معرفة أساسيات‪ html,css,JS‬ثم التطبيق على ‪API ArcGIS‬‬
‫‪ JavaScript‬و معرفة كيفية عمل تطبق ويب باستخدام ‪.GIS Web App Builder‬‬
‫‪11‬‬
‫الباب األول‪ :‬أساسيات ‪ HTML‬و ‪ CSS‬يف برجمة الويب‬
‫مقدمة‪.‬‬
‫‪ HTML‬هي اختصار للـ ‪ " Hyper Text Markup Language‬لغة الترميز المتشعبة"؛ وهى لغة تصميم‬
‫مواقع وهى اول لغة تم استخدامها فى تصميم صفحات المواقع وليس لها أي عالقة ببرمجة المواقع وهى تتميز‬
‫بالسهولة ويمكن الى شخص تعلمها بسهوله‪ .‬التفاهم لمتصفحات االنترنت؛ وهى أسهل لغة تقرأها متصفحات‬
‫االنترنت ؛ فهناك العديد من اللغات مثل ‪ php‬؛ ‪Asp‬؛ ‪ Aspx‬؛ كلها لغات لبرمجة متصفحات االنترنت لكن‬
‫متصفح االنترنت ال يق أر سوى ‪ html‬؛ أي أن كل لغات البرمجة تصب في ‪ HTML‬؛ فمثال لو ذهبنا الى‬
‫متصفح ‪Google‬‬
‫فلو ذهبنا الى الكود الخاص به نجده تم تصميمه بالـ ‪Html‬‬
‫‪12‬‬
‫‪HYPER TEXT:‬‬
‫هي الطريقة الخاصة بالتحرك علي صفحات االنترنت بالضغط علي نص معين يدعي ‪ Hyperlinks‬وسيله‬
‫للتنقل ألى مكان في شبكة االنترنت عن طريق الضغط علي الوصالت ) االرتباط التشعبية‪ ) LINKS‬؛وتعتمد‬
‫علي ماذا داخل األوسمة "‪ "Tages‬بمعني أنها تحتوي علي أكواد كأي لغة أخري‪.‬‬
‫‪:MARK-UP‬‬
‫وهى تشبه التنسيقات التي نقوم بها على النصوص‪ ،‬فهذه الكلمة تعني توصيف النص‪ ،‬مثل معالجات‬
‫الكلمات فتضيف العناوين والنقاط والنص السميك الخ‪.‬‬
‫أدوات تعلم ‪:HTML‬‬
‫‪ -‬متصفح االنترنت‪.‬‬
‫‪ -‬محرر نصي " نستخدم هنا ‪." visual Studio Cod‬‬
‫الفرق بين المصطلحات‬
‫‪ : HTML‬كلها مصطلحات لنفس اللغة ؛ والتي تعطى البنية الغير تصميمية للموقع ‪.‬‬
‫‪: HTML5‬تم الدمج بين ‪ CSS , JS ,‬وبين ‪. HTML‬‬
‫‪ : Xhtml‬بها قواعد وقوانين أكثر‪.‬‬
‫‪13‬‬
‫مفاهيم أساسية ومصطلحات بـ ‪: html‬‬
‫‪:Tag‬‬
‫ويعرف بالعربية وسم ويكتب >‪ < tag‬وهى كلمة تعبير عن أوامر ‪ html‬الموجودة داخل األقواس أي ان‬
‫االمر يتم كتابته داخل االقواس > < ‪.‬‬
‫‪:Container Tags‬‬
‫هي األوسام التي يتطلب أن يتم فتحه ألداء أمر معين وال بد من إغالقه بعد االنتهاء؛ أي انه تاج فتح وتاج‬
‫غلق ويكتب >‪. < tag>…</tag‬‬
‫يمكن أن يحتوى التاج على ثالثة عناصر هي‪:‬‬
‫‪ Element‬مثل ‪.table , title, Font‬‬
‫‪ : Attribute‬وهو الخصائص مثل ‪.color‬‬
‫‪ : Value‬القيمة ‪.‬‬
‫مثال يوضح الثالث عناصر‬
‫خصائص وعناصر ‪: HTML‬‬
‫يمثل نوع المستند ؛ يتم تحديد النوع كرقم اصدار >‪<!DOCTYPE html‬‬ ‫>‪<!DOCTYPE‬‬
‫‪ html‬ليتعامل معه المتصفح على هذا األساس ونوع المستند ألخر اصدار حالى هو ‪html5‬‬
‫ويكتب فى أول الصفحة كما هو موضح>‪.<!DOCTYPE html‬‬
‫>"‪<html lang="en‬‬ ‫عنصر >‪ <html‬والذى يأتي بعد نوع المستند وهو‬
‫عبارة عن أساس الصفحة والذى يكمن بداخله جميع عناصرها‪.‬‬
‫>‪<head‬‬ ‫>‪ <head> <head/‬الرأس ويحتوى على معلومات الصفحة كعنوان الصفحة‬
‫‪14‬‬
‫وترميز الصفحة والكلمات المفتاحية للصفحة وأى معلومة أخرى ‪.‬‬

‫>‪ <meta‬وصف ومعلومات عن المستند ‪<meta charset="UTF-‬‬
‫>"‪8‬‬
‫تحتوى على خاصية ‪ name‬والذى يحتوى على احد األسماء‪" keywords,description,generator,author‬‬
‫وخاصية ‪ content‬وتحتوى قيمة االسم ‪.‬‬
‫>"‪<meta http-equiv="X-UA-Compatible" content="IE=edge‬‬
‫>"‪<meta name="viewport" content="width=device-width, initial-scale=1.0‬‬
‫>‪<title>Document</title‬‬ ‫>‪<title‬عنوان الصفحة الذى يتم عرضه‬

‫في نافذة المتصفح فقط ويتم كتابة هذا العنصر داخل عنصر >‪<head‬‬
‫تحتوى ربط بين صفحة ‪ HTML‬ومصدر خارجة مثل ‪ CSS‬أو أيقونة الصفحة >‪<Link‬‬
‫>‪<styly></style‬‬ ‫تعريف بخصائص النمط داخل ‪html‬‬
‫>‪<script></script‬‬ ‫برنامج نصى يعمل بجانب العميل‬
‫كالجافا سكريبت داخل ‪html‬‬
‫عنصر الجسم الذى يحتوى على العناصر الظاهرة >‪<body></body‬‬
‫في صفحة االنترنت‬
‫>‪<p><p/‬‬ ‫عنصر الفقرة النصية ‪paragraph‬‬
‫رأس العنوان حيث ‪ h1‬أكبر عنوان ثم ‪ h2‬الذى يليه )‪<h1></h1>(2,3,4,5,6‬‬
‫وهكذا وهى اختصار ‪head title‬‬
‫جزء رأسى مثل اسم الموقع ؛ عنوان مقالة >‪<header></header‬‬
‫؛اسم الكاتب الخ‪.‬‬
‫>‪<footer></footer‬‬ ‫جزء سفلى فالموقع قد يحتوى على روابط‬
‫في القائمة السفلية وحقوق الموقع ألخ‬
‫المقالة أو نص الصفحة " فقرة نصية او اكتر من فقرة" >‪<article></article‬‬
‫>‪<div></div‬‬ ‫قسم أو شعبة مثال الجزء العلوى من المقالة ويحتوى على‬
‫عنوان ومعلومات المقالة كالكاتب وتاريخ النشر‬
‫‪15‬‬
‫>‪<img‬‬ ‫صورة‬ ‫وينقسم الى‬

‫قائمة غير مرتبة بأرقام >‪<ul><li></li></ul‬‬
‫>‪<ol><li></li></ol‬‬ ‫قائمة مرتبة بأرقام أو حروف‬
‫>‪<table></table‬‬ ‫جدول‬
‫>‪<tr></tr‬‬ ‫صف جدول ‪table row‬‬
‫>‪<th></th‬‬ ‫رأس الجدول ‪table head‬‬
‫>‪<td></td‬‬ ‫محتويات الجدول ‪table Data‬‬
‫>‪<iframe></iframe‬‬ ‫اطار داخلى للصفحة ‪in line frame‬‬
‫>‪<span></span‬‬ ‫نص مخصص داخل فقرة‬
‫>‪<from></from‬‬ ‫نموذج إلضافة داخله حقول وأزرار‬
‫حقل يتم تحديد فيه الحقل النصى أو األزرار او حقل خيارات >‪<input‬‬
‫حقل نصى كبير يكون بارتفاع يكفى لعدة أسطر >‪<textarea><textarea‬‬
‫>‪<figure></figure‬‬ ‫عنصر إلضافة االشكال داخله‬
‫>‪<canvas></canvas‬‬ ‫عنصر يمكن الرسم بداخله كدائرة او مربع‬
‫>‪<audio></audio‬‬ ‫عنصر مشغل صوتى‬
‫>‪<vido></vido‬‬ ‫عنصر مشغل فيديو‬
‫‪: CSS‬هي اختصار لـ ‪ Cascading Style Sheets‬وهى بالعربية ( صفحات األنماط المتتالية ) ؛ وهى‬
‫ليست لغة برمجة بقدر أنها لغة أنماط صفحات مواقع االنترنت لتحديد خصائص الصفحة من أشكال ؛‬
‫قياسات ؛ ألوان ؛ حدود ‪.‬‬
‫طريقة إضافة خصائص ‪ CSS‬على عناصر ‪ :HTML‬هناك ثالثة طرق هما ‪:‬‬
‫‪ -‬اسم العنصر األساسي المكتوب‪.‬‬

‫‪ -‬إعطاء العنصر اسم خاص ‪.id‬‬
‫‪ -‬إعطاء العنصر اسم عام ‪.Class‬‬
‫الفرق بين المعرف الخاص والعام‪:‬‬
‫‪ :Id‬المعرف الخاص ‪ #id‬ال يتكرر في أي عنصر أخر أما ‪.‬‬
‫‪16‬‬
‫‪: Class‬المعرف العام ‪ class‬يتم تك ارره في أي عنصر يحمل نفس الخصائص‪.‬‬
‫معظم خصائص ‪: CSS‬‬
‫الخلفية ( اللون – الصورة – التكرار – الموقع – نوع االرفاق) ‪background‬‬
‫)‪Background-(color-image-repeat-position-attachment‬‬
‫‪font‬‬ ‫النص (النوع‪-‬الحجم‪ -‬العرض)‬
‫)‪Font-(family-size-weight‬‬
‫‪color‬‬ ‫لون النص‬
‫‪border‬‬ ‫الحد ( اللون والحجم واتجاه الحدود)‬
‫)‪Border(color-size-style-top-right-bottom-left‬‬
‫‪Width‬‬ ‫العرض‬
‫‪height‬‬ ‫االرتفاع‬
‫‪margin‬‬ ‫الفراغ الخارجي‬
‫‪padding‬‬ ‫الفراغ الداخلى‬
‫‪text-decoration‬‬ ‫شكل النص (خط أسفله ؛ خط فوقه ؛خط مشطوب عليه)‬
‫‪text-align‬‬ ‫محاذاة النص (يمين – يسار‪-‬وسط)‬
‫‪position‬‬ ‫الموقع (ثابت – مطلق)‬
‫‪Top-right-bottom-left‬‬
‫‪display‬‬ ‫العرض(كتلة على الخط – ال شيء)‬
‫‪direction‬‬ ‫اتجاه النص (من اليمين الى اليسار ومن اليسار الى اليمين)‬
‫‪17‬‬
‫‪cursor‬‬ ‫شكل الفأرة‬
‫‪float‬‬ ‫الطفو يمين ويسار‬
‫مكونات الموقع الرئيسية وشكله‪:‬‬
‫>‪< header‬‬
‫جسم الموقع >‪< body‬‬
‫القائمة الرئيسية < ‪< nav‬‬
‫العمود الجانبي >‪< aside‬‬
‫التذييل >‪< footer‬‬
‫بدء العمل مع ‪ Html‬و ‪CSS‬‬
‫لعمل صفحة ‪ html‬نفتح محرر النصوص " تم استخدام ‪Visual studio code‬‬
‫نفتح ملف جديد‬
‫يتم حفظ الملف‬
‫‪18‬‬
‫البد من كتابة اسم الملف يليه ‪.html‬‬
‫يتم كتابة‬
‫>‪<!DOCTYPE html‬‬
‫هذا نكون عرفنا المتصفح أننا نقوم بكتابة ملف ‪HTML‬‬
‫كتابة ‪ tag‬بداخله ‪html‬؛ وسبق وأن ذكرنا أن ال بد من وجود ‪ tag‬لبداية الكتابة وأخر للغلق فبمجرد كتابة‬
‫‪ tag‬البداية يتم كتابة ‪ tag‬الغلق تلقائيا‪:‬‬
‫>‪<html></html‬‬
‫نقوم بترحيل ‪ tag‬الغلق ألسفل ‪.‬‬
‫نكتب >‪ <head‬ثم نكتب >‪, <body‬وتغلق أيضا بـ>‪</body‬‬
‫‪19‬‬
‫لكتابة التعليق ‪:‬‬
‫>‪< !-- this is comment--‬‬
‫>‪<!--here the html file--‬‬

‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫معلومات الـ ‪ Head‬دائما معلوماتها عبارة عن المعلومات التي نخاطب بها الـ ‪ ، Server‬بينما المعلومات‬
‫المطلوب ظهورها على الموقع نضعها في الـ ‪.body‬‬
‫المعلومات الرئيسية بالـ ‪head‬‬
‫‪ : Meta‬وهى أحد أندر المعلومات التي ال تحتاج الى ‪ tag‬غلق وهى كل المعلومات التي نقدمها للـ‬
‫‪Server‬‬
‫مثل معلومات ‪ seo‬وهى المعلومات التي يبحث عنها محرك البحث لمعرفة ما يوفره الموقع وما يقدمه من‬
‫خدمات ‪.‬‬
‫>‪<meta keword="html,wep"/‬‬
‫‪: Link‬ويشمل ‪ rel‬و ‪ type‬و ‪href‬‬

‫‪relation : Rel‬‬
‫‪ : Type‬النوع‬
‫‪" hyper refrence : Href‬نضع مسار ملف أو اسم ملف "‬
‫>"‪<link rel="stylesheet" type="text/css" href="style.css‬‬
‫‪20‬‬
‫ملحوظة‪ :‬يمكن كتابة ‪ h‬واختيار ‪ html5‬من القائمة المنسدلة ؛ فيتم كتابة محتويات الصفحة تلقائيا؛على‬
‫النحو الموضح أدناه‪:‬‬
‫>‪<!DOCTYPE html‬‬ ‫‪ html5‬تدل على استدعاء‬

‫>"‪<html lang="en‬‬ ‫تعنى ان اللغة انجليزية‬
‫>‪<head‬‬
‫>"‪<meta charset="UTF-8‬‬
‫>"‪<meta http-equiv="X-UA-Compatible" content="IE=edge‬‬
‫>"‪<meta name="viewport" content="width=device-width, initial-scale=1.0‬‬
‫>‪<title>Document</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ : Titel‬وهى المعلومة الوحيدة التي يتم كتابتها داخل الـ ‪ head‬وتظهر داخل الموقع‪.‬‬
‫>‪<title> this is the course to GIS </title‬‬
‫فنالحظ عند عمل ‪ Refresh‬لملف ‪ html‬تم تغيير العنوان‬
‫بالنسبة للمعلومات الخاصة بالـ ‪:body‬‬
‫كل المعلومات التي تظهر داخل الموقع‪.‬‬
‫‪ -‬أول ‪ tag‬الـ ‪ div‬وهو اختصار من ‪ " division‬التقسيم"‬
‫>‪<div‬‬
‫‪this is my web site‬‬
‫‪21‬‬
‫>‪</div‬‬
‫ولتغيير حجم الخط واللون ؛‬
‫>";‪<div style="color:darkblue;font-size:30px‬‬
‫واألفضل من ذلك يتم عمل ملف جديد بامتداد ‪ css‬ونسميه ‪style.css‬‬
‫‪22‬‬
‫رشا صابر نوفل‬/‫د‬ ‫بناء تطبيقات الويب يف نظم املعلومات اجلغرافية‬
‫ على النحو التالى‬head ‫يتم ربط الملفين عن طريق وضع لينك في جزء الـ‬
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> this is the course to GIS > this is the course to GIS </title>
"body ‫ ؛ وليكن على النحو التالى " داخل عنصر الـ‬html ‫ داخل ملف‬id ‫يتم كتابة‬
<div id="GIS_wep">
this is my wepsite
</div>
‫ ثم نفتح أقواس ونكتب المواصفات الخط والحجم واللون‬# ‫ بعد عالمة‬css ‫ داخل ملف‬id ‫ونكتب نفس الـ‬
‫المطلوبة ؛ وذلك كما موضح‬
#GIS_wep{
color: darkblue;
font-size: 30px; }
23
‫كما يمكن كتابة ‪ div‬أخرى‬
‫>"‪<div class="wepsite_rasha‬‬
‫‪this is my wepsite named rasha‬‬
‫> ‪</div‬‬
‫وبدل كتابة ‪ id‬يتم كتابة الـ ‪clas‬وفى ملف ‪ css‬يتم كتابة بدل الهشتاج ‪ #‬دوت على النحو التالى‬
‫{‪.wepsite_rasha‬‬
‫;‪color: red‬‬
‫;‪font-size: 30px‬‬
‫}‬
‫لعمل مضلع داخل الموقع‪ :‬من ملف ‪scc‬‬
‫‪border: solid 1px red‬‬

‫}‬
‫ويمكن وضع رقم للون بدل من اختيار اللون وال بد من وضع ‪ #‬قبل رقم اللون ؛‬
‫‪24‬‬
‫شكل يوضح قيم بعض األلوان‬
‫ولتباعد الكالم عن الحدود‬
‫من خالل ‪ padding : 10px‬مثال ‪.‬‬
‫وللتباعد عن حواف الموقع عن طريق ‪margin‬‬
‫;‪padding: 50px‬‬
‫;‪margin: 50px‬‬
‫‪25‬‬
‫كما يمكن تباعد الكالم عن الحدود في األعلى فقط من خالل ‪ padding-top‬؛ كما يمكن تباعد ‪margin‬‬
‫‪ – left‬لتباعد عن صفحة الويب من اليسار فقط ‪.‬‬
‫لعمل الويب بمنتصف الصفحة يتم كتابة‬
‫;‪Margin :0 auto‬‬
‫;‪Margin: 0 auto‬‬
‫ملحوظة ‪ :‬إذا تم وضع * تعنى الكل ؛ فاذا تم وضع ‪ * clor = red‬يتم تحويل كل شيء داخل البوردر‬
‫والبوردر نفسه الى اللون األحمر‪.‬‬
‫{*‬
‫}‬
‫وذلك على النحو التالى‪:‬‬
‫أي وضع * يخبر المتصفح بتطبيق ما داخل األقواس على الموقع كله اال إذا تم إعطائه أي أوامر تالية لذلك‬
‫وما داخل األقواس الموجودة بالـ * تعرف بال ـ ‪ selector‬العامة واألوامر التالية لذلك والواقعة داخل الـ‪#‬‬
‫تعرف بالـ ‪ selector‬الخاصة ‪.‬‬
‫‪26‬‬
:)html( ‫الصفحة النهائية‬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>> this is the course to GIS > this is the course to GIS </title>
</head>
<body>
<div id="GIS_wep">
this is my wepsite
</div>
<div class="wepsite_rasha">
this is my wepsite named rasha
</div>
</body>
</html
css: ‫الصفحة النهائية للـ‬
#GIS_wep{
color: darkblue;
font-size: 30px;
}
.wepsite_rasha{
color:purple;
font-size: 30px;
border:solid 1px red;
padding: 50px;
margin: 50px; }
27
:" body " ‫انشاء جسم الموقع‬
:‫ على النحو التالى‬body‫ داخل الـ‬dev ‫يمكن انشاء أكثر من‬
‫ أخرى اسمها‬dev‫ و‬header ‫ اسمها‬dev ‫ ؛ تحتوى على‬GIS wep ‫ رئيسية اسمها‬dev ‫فمثال عندى‬
HOW BUILD GIS WEP " ‫ العبارة التالية‬header ‫ الخاصة بالـ‬dev ‫ وتم كتابة داخل الـ‬paragraph
‫ على النحو التالى‬paragraph ‫ الثانى يتم كتابة‬dev ‫وداخل الـ‬
div id="GIS wep">

<div id="header">
HOW BUILD GIS WEP
</div>
<div id="paragraph">
ArcGIS Server is the predominant platform used to develop GIS application
the Web. There are a number of programming languages you can use to devel
applications with ArcGIS Server, including JavaScript, Flex, and
JavaScript has become the preferred language for developing applications
</div>
</div>
:‫فيظهر على صفحة المتصفح على النحو التالى‬
‫ أخر‬dev‫ الرئيسى و‬dev ‫وهذا يتيح تنظيم المتصفح الى أقسام حيث يمكن تنظيم كل قسم على حدى " الـ‬
. paragraph ‫ وأخر خاص بالـ‬heder ‫فرعى خاص بالـ‬
28
‫لدينا عدة ‪ Tags‬يمكن وضعهم داخل الـ ‪ dev‬الخاص بالـ ‪header‬‬
‫سبق وأن ذكرنا أن التاج يمكن وضعه بفتح األقواس > < ؛ وال بد من غلق التاج >‪</‬‬
‫وفيما يلى يتم عمل ‪ tag‬ونسميه ‪ " h1‬اختصار لـ ‪ " header‬و ‪ tag‬أخر أسميه ‪h2‬‬
‫ليكون بهذا الشكل ‪:‬‬
‫>‪<h1> HOW BUILD GIS WEP</h1‬‬
‫وتظهر على الموقع بهذا الشكل ؛‬
‫ويمكن عمل ‪ tag‬أخرى ونسميها ‪ h2‬وأخرى ‪h3‬‬
‫>‪<body‬‬
‫>"‪<div id="GIS_wep‬‬
‫>"‪<div id="header‬‬
‫>‪<h1>HOW BUILD GIS WEP </h1‬‬
‫>‪<h2>HOW BUILD GIS WEP </h2‬‬
‫>‪<h3>HOW BUILD GIS WEP</h3‬‬
‫>‪<h4>HOW BUILD GIS WEP</h4‬‬
‫>‪</div‬‬
‫فنجد أنه تم تنسيقه تلقائيا على النحو الموضح أدناه‬
‫‪29‬‬
. h6 ‫ حيث يمكن تنظيم التاج حتى‬css ‫ التي يمكن اتباعها دون ربطها بالـ‬html ‫وهذه احدى وظائف‬
‫ وذلك كما يلى‬class ‫ ونعطيه‬p ‫ ونسميه‬paragraph ‫ الـ‬div ‫ داخل‬tag ‫يتم عمل‬
<div id="paragraph">
<p class="gis_paragraph">
ArcGIS Server is the predominant platform used to develop GIS application
the Web. There are a number of programming languages you can use to devel
applications with ArcGIS Server, including JavaScript, Flex, and
JavaScript has become the preferred language for developing applications
</p>
</div>
tag ‫ بلون مختلف يتم ذلك عن طريق عمل‬paragraph ‫ملحوظة لو أردت كتابة كلمات داخل الـ‬
red Colour ‫ اسمه‬class ‫ قبل وبعد الكلمات المراد تغيير لونها وعمل‬span
<span class="red Colour">(ArcGIS Server),</span>
‫ وكتابة‬css ‫ثم الذهاب الى صفحة‬
.red_Colour{
color: red;
}
30
:‫ لعمل فقرة جديدة داخل متصفحك ال بد من كتابة الكود التالى‬: ‫ملحوظة‬
<p>
Welcome in my site these’s the first time I building new sit
<p>
body ‫ و‬head , ‫ كوضع لون لخلفية الـ‬css ‫كما يمكن عمل العديد من التنسيقات األخرى داخل صفحة الـ‬
*{
margin: 0;
padding: 0;
}
#GIS_wep{
}
#header{
color:yellow;
font-size: 30px;
background-color:darkgreen;
height: 50px;
padding: 20px;
}
#paragraph{
color:whitesmoke;
background-color:darkblue;
font-size: 25px;
}
.red_Colour{ color: red; }
31
‫نفس الملف على صفحة ‪HTML‬‬
‫‪32‬‬
‫ملحوظة ‪ :‬لكتابة تعليق داخل صفحة ‪ css‬؛ ‪/* this is comment*/‬‬
‫‪/*this is comment*/‬‬
‫إضافة ‪ dev‬اخر للـ ‪footer‬‬

‫>"‪<div id="footer‬‬
‫‪this is fotter‬‬
‫>‪</div‬‬
‫ويتم عمل التنسيقات داخل ‪scc‬‬

‫{‪#footer‬‬
‫;‪color: yellow‬‬
‫;‪font-size: 30px‬‬
‫;‪height: 50px‬‬
‫;‪background-color: darkgreen‬‬
‫}‬
‫اضافة صورة داخل الموقع ‪:‬‬
‫إضافة صورة داخل ملف ‪: html‬‬
‫داخل ‪ dev‬الخاص بالـ ‪ paragraph‬يتم عمل ‪ div‬تسمى ‪ img‬داخلها يتم وضع مسار الصورة " اسم الملف‬
‫واسم الصورة كما موضح؛‪:‬‬
‫ملحوظة ‪ image tag‬ال يحتاج الى تاج للغلق‪.‬‬
‫>‪<div‬‬
‫>‪<img src="images/map.jpg.jpg" /‬‬
‫> ‪</div‬‬
‫‪33‬‬
‫نجد انه تم وضع الصورة داخل صفحة الويب على النحو التالى ‪:‬‬
‫ولتحديد مقياس الصورة ؛‬
‫أما من خالل صفحة ‪ css‬أو من خالل نفس ‪ tag‬الخاص بالصورة ؛ عن طريق كتابة العرض واالتفاع‬
‫المناسبين للصورة ‪ .‬وإضافة ‪ = alt‬نضع اسم للصورة ؛ وذلك لسهولة الحصول على الصورة بمحركات‬
‫البحث‪.‬‬
‫>‪<img src="images/map.jpg.jpg" width="300px" height="400" alt="map"/‬‬
‫اسم الصورة داخل الملف" يتم وضع ‪ alt‬لسهولة قرائتها داخل الموقع" اسم ملف الحفظ مع اسم الصورة واالمتداد‬
‫‪34‬‬
‫ولوضع الصورة خلفية ‪:‬‬
‫فمثال لوضع الصورة خلفية في مساحة الـ ‪header‬‬
‫من صفحة ‪ css‬وفى الهشتاج الخاص بالـ ‪ header‬ونكتب ‪ background-image:‬ثم نضع‪url‬‬
‫;)‪background-image: url(images/image.jpg.jpg‬‬
‫نالحظ أنه تم وضع الصورة في الخلفية " حيث الجزء األسفل من الصورة " ولوضع الجزء األعلى من‬
‫الصورة؛‬
‫;‪background-position: bottom left‬‬
‫لوضع صورة خلفية للـ ‪ : paragraph‬بنفس الطريقة على الهشتاخ الخاص بالـ ‪ paragraph‬بصفحة‬
‫‪. css‬‬
‫نالحظ هنا ان الصورة تتحرك مع تحرك صفحة المتصفح ؛ لو أردنا تثبيت أي صورة فيهم ؛ يتم ذلك عن‬
‫طريق‬
‫;‪background-attachment: fixed‬‬
‫عمل ‪: hyper link‬‬
‫المقصود بالـ ‪ hyper link‬هو الصور او الكلمات التي تكون مرتبطة بمواقع أخرى " أي بمجرد الضغط‬
‫عليها نذهب الى صفحة أخرى"؛ فيما يلى كيفية عمل هذه الوظيفة داخل موقعى‪:‬‬
‫نذهب الى المنطقة المراد عمل ‪ hyper link‬فيها سواء في الـ ‪ header‬أو الـ ‪ footer‬ونفتح‬
‫األقواس < نكتب حرف ‪ a‬ثم ‪ href‬؛ ثم = " " ثم نقفل األقواس ونقفل ‪ a‬وبين األقواس نكتب الكلمة المراد‬
‫عمل ‪ hyper link‬لها‪.‬‬
‫>‪<a href=""> wepGIS </a‬‬
‫وداخل " " يتم وضع اللينك المراد الدخول عليه ؛ مثل وضع ‪ Google‬مثال ؛‬
‫‪35‬‬
‫>‪<a href="http:/www.google.com"> wepGIS </a‬‬
‫فبهذا مجرد الضغط على الكلمة يفتح لنا متصفح ‪. google‬‬
‫ولضبط الكلمة المتعلقة بالـ ‪ hyper link‬من صفحة ‪ css‬؛ يتم كتابة ‪a‬‬
‫{‪a‬‬
‫}‬
‫‪ : Unset‬إلزالة الخط من تحت الكلمة‪.‬‬
‫‪ : Underline‬لوضع الخط ‪.‬‬
‫‪ inherit : Color‬يعنى أن اللون موروث " أي تابع للنص المكتوب إذا كان النص ابيض يكون باألبيض‬
‫وإذا كان اسود يكون اسود وهكذا‪.‬‬
‫ملحوظة ‪ :‬تم كتابة ‪ a‬دون هشتاج ‪ #‬أو دوت ‪ .‬ألن ‪ a‬من العناصر األساسية ‪.‬‬
‫ملحوظة ‪ : 2‬هناك أولويات عند تطبيق المتصفح لألوامر ؛ فيتم تطبيق األوامر الموجودة داخل التاج بملف‬
‫‪ ، html‬أوال قبل ملف ‪ css‬؛ يعنى إذا كان لون الـ ‪ paragraph‬مثال داخل ملف ‪ css‬أبيض وتم وضعه‬
‫داخل صفحة ‪ html‬أحمر ؛ فيتم تطبيق اللون األحمر‪.‬‬
‫عمل قائمة ‪ menu‬داخل الموقع‪:‬‬
‫يتم عمل القائمة عن طريق تاج يسمى >‪ <ul‬؛ داخلها تاج >‪ <li‬؛ عدد هذا التاج الثانى هو عدد األزرار‬
‫التي يتم وضعها داخل القائمة ؛ فمثال لو أردت عمل ثالثة أزرار يتم وضعها ثالثة مرات ‪.‬‬
‫>‪<ul‬‬
‫>‪<li> home </li‬‬
‫>‪<li> about </li‬‬
‫>‪<li> contact</li‬‬
‫>‪</ul‬‬
‫فتظهر داخل الموقع ؛ على النحو الموضح أدناه "حيث تم انشاؤها داخل ‪ tag‬الـ ‪header‬‬
‫‪36‬‬
‫لعمل تنسيقات علىها من صفحة ‪css‬‬
‫{‪ul‬‬
‫لوضعها في يمين الصفحة ;‪float: right‬‬
‫}‬
‫{‪li‬‬
‫لعرضهم على سطر واحد ;‪display: -webkit-inline-box‬‬
‫لتباعد الكلمات عن بعضها البعض ;‪padding-right: 20px‬‬
‫}‬
‫بعد ذلك يتم عمل خطوط فاصلة وربط كل قائمة بلينك‬
‫>‪<li>| <a href="new.html" home </a> </li‬‬
‫لعمل هذه اللينكات الى صفحات أخرى داخل الموقع الخاص بى‪:‬‬
‫يتم نسخ ملف ‪ html‬ونسميها ‪about‬‬
‫‪37‬‬
‫يتم فتحها داخل المشروع ؛ يتم التعديل عليها حيث وضع المعلومات المراد وضعها داخل صفحة الـ ‪about‬‬
‫؛ ويتم وضع اسم الملف داخل قائمة اللينك ‪about.html‬‬
‫>‪<li>| <a href="about.html.html"> about </a> </li‬‬
‫وبهذه الطريقة يمكن عمل صفحات الموقع المطلوبة‪.‬‬
‫وفى الـ ‪ contact‬يمكن وضع اللينك الخاص بالفيسبوك " ال بد من وضع الرابط كامل اذا كان اللينك خارج‬
‫ملفات العمل "‪.‬‬
‫لعمل ‪:side par‬‬
‫يتم وضعها بين قسم ال‪ " paragraph‬األوسط" وقسم الـ ‪fotter‬‬
‫يتم عمل ‪ div‬جديدة ونعطيها ‪ id‬باسم ‪side par‬‬
‫نقوم بعمل ‪ div‬بداخلها ولتكن ‪ h2‬ونعطيها اسم ‪.‬‬
‫ونقوم بعمل ‪ div‬أخرى ولتكن لوضع ‪."paragraph " p‬‬
‫>"‪<div id="side par‬‬

‫>‪<div><h2>TITEL SIDE PAR</h2></div‬‬
‫>‪<div><p>paragraph side par</p></div‬‬
‫>‪</div‬‬
‫لوضعها بيمين الصفحة " من صفحة ‪:css‬‬
‫ملحوظة ‪ :‬ال بد من اتاحة مساحة فارغة لوضع الشريط الجانبى ؛ ويتم ذلك عن طريق تعديل مساحة ‪pody‬‬
‫الخاصة بالموقع " ‪ " paragraph‬وذلك في صفحة ‪ scc‬داخل خصائص الـ ‪. paragraph‬‬
‫;‪width: 70%‬‬
‫‪38‬‬
‫لتكون التنسيقات على النحو التالى‪:‬‬
‫{‪#sidepar‬‬
‫;‪background-color:chartreuse‬‬
‫;‪border: solid 2px black‬‬
‫;‪float: right‬‬
‫;‪width: 28%‬‬
‫;‪margin-left: 1%‬‬
‫}‬
‫نالحظ أن الشريط الجانبى ارتفاعه صغير وال يغطى الصفحة كاملة ؛ وهذه تعد من أحد مشاكل الـ ‪ css‬؛‬
‫لكن يمكن التغلب على هذه المشكلة من خالل ‪:‬‬
‫نأتى بأعلى التنسيقات وداخل ال* ونجعل ‪%100 hight‬‬
‫{*‬
‫;‪height: 100%‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫}‬
‫انشاء الجداول ‪:‬‬
‫الدراج جدول داخل متصفحى يستخدم االمر>‪<TABLE > ....</TABL‬‬
‫ولتحديد عدد الصفوف داخل الجدول عن طريق‪ <tr > ....</tr> :‬فلو أردنا ثالثة صفوف يتم تكرار هذا‬
‫الكود ثالثة مرات ولتحديد األعمدة في كل صف من خالل؛ > ‪ <td > ....</ td‬؛ كما موضح أدناه‪:‬‬
‫>"‪<table width="365"hight="218" border="1‬‬

‫>‪<tr‬‬
‫\>‪<td>1</td‬‬
‫>‪<td>2</td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫‪39‬‬
‫>‪<td>3</td‬‬
‫>‪<td>4</td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪<td>5</td‬‬
‫>‪<td>6 </td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫لعمل نماذج داخل المتصفح ‪:‬‬
‫يتم عمل النماذج داخل المتصفح باستخدام >‪ <from> </from‬؛ حيث يمكن من خاللها نقل إجابات‬
‫المستخدمين الى الـ ‪Server‬؛ وهناك طريقتين من طرق ارسال البيانات ‪:‬‬
‫‪ Action:‬حيث يتم تحديد عنوان بريد الكترونى الخاص بالسيرفر ليتم ارسال البيانات عليه‪.‬‬
‫‪ Method:‬وهى تحدد الطريقة التي يتم بها التعامل مع عنوان البريد االلكترونى الموجود وتنقسم الى قيمتين؛‬
‫‪ Get‬إذا كانت عملية المعالجة تتم داخل الخادم نفسه " ‪ " Server‬وهى طريقة أكثر أمانا؛ ‪ post‬وهى التي‬
‫يتم فيها عملية المعالجة خارج الموقع عن طريق ارسالها لبريد الكترونى‪.‬‬
‫خصائص النماذج‪:‬‬
‫‪ Radio Button‬وهو يسمح باالختيار من أكثر من متعدد ؛ مثل السؤال عن الجنس ؛ وال يسمح إال‬
‫باختيار نوع واحد فقط ؛ ويكتب كما يلى‪:‬‬
‫‪40‬‬
What’s your gender ?

<FORM ACTION= " rashanofal82@gmail.com " method ="post " >
<INPUT TYPE = "RADIO" NAME = " sex" VALUE = " male"> male <br>
<INPUT TYPE = "RADIO" NAME = " sex" VALUE = " female"> female
</FORM>
:"‫ حيث يقوم على انشاء مكان للكتابة " مكان واحد فقط‬Text field
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
:‫حيث تظهر قائمة يتم االختيار منها وذلك على النحو التالى‬: Select list
What is your favorite games?<br>

<select name="sport">
<option value="football" selected>football
<option value="basket">basket
<option value="handball">handball
</select>
</form>
41
‫ هي قائمة بها عدة اختيارات حيث يستطيع المستخدم تمرير القائمة واالختيار‬: Multiple select lest
:‫منها‬
<form>
What is your favorit game ?<br>
<select name="game" multiple size="2">
<option value="football">football
<option value="basketball">basketball
<option value="handball">handball
</select>
</form>
: ‫ حيث يتيح الكتابة ألكثر من سطر‬: text Area Box: ‫الـ‬
<form>
Enter your comment :<textarea></textarea>
</form>
:‫ مكان للكتابة لكن الكتابة تظهر على هيئة نقاط او نجوم‬:Password
Password <BR>
<FORM ACTION= " mailto:someone@domain.com " method ="post ">
<INPUT TYPE = " Password ">
</FORM>
42
‫خزن موقعنا عليه‪،‬‬

‫خدم ‪ُ Server‬ي ّ‬
‫ولكي يستطيع الجميع الوصول إلى موقعنا على االنترنت‪ ،‬نحتاج إلى ُم ّ‬
‫تقدم لك خدمة‬
‫باإلضافة إلى عنوان ‪ URL‬يشير إلى الموقع ؛ هناك عدد هائل من الشركات التي يمكن أن ّ‬
‫سمى هذه الخدمة عادة باستضافة ويب‪Webhosting.‬‬
‫خدم لهذا الغرض‪ .‬تُ ّ‬
‫الم ّ‬
‫تأجير مساحة على ُ‬
‫‪43‬‬
‫الباب الثانى ‪ :‬ماهية لغة ‪Java Script‬‬
‫مقدمة‪.‬‬
‫تعتبر لغة الجافا سكريبت ‪ ( JS) Jav Script‬هي لغة برمجية عالية المستوى ؛من أهم وأشهر لغات‬
‫البرمجة وهى لغة برمجة ديناميكية تستخدم في متصفحات الويب لزيادة التفاعلية بها ؛ وهى لغة متعددة‬
‫االستخدامات حيث تستخدم لتوفير تطبيقات الويب " وتشمل أيضا األلعاب" باإلضافة الى استخدامها في‬
‫أغلب المواقع‪.‬‬
‫بدأت اللغة عندما قامت شركة ‪ Netscape‬بتطوير لغة برمجة تدعى ‪ Live Script‬والتي تغير اسمها‬
‫الحقا إلى ‪ JavaScript‬بعد ان تعاونت شركة ‪ Netscape‬مع شركة ‪ Sun Microsystems‬لتطويرها‪.‬‬
‫انشاء ملف جديد للجافا سكريبت وربطه بملف ‪:html‬‬
‫‪ -‬يتم عمل ‪ Folder‬على جهازى ؛ وتسميته مثال ‪.jvascript‬‬
‫ثم ننشىء ملف جديد من ‪ file‬ثم ‪ new flle‬ثم نحفظ الملف من ‪saveAs‬‬
‫‪44‬‬
‫وفى اسم الملف ال بد من كتابة االسم يليله ‪ .‬ثم ‪html‬‬
‫ثم ذلك نجده أنشىء الملف ‪.‬‬
‫لوضع إضافات ‪ html‬الى المحرر‪:‬‬
‫فيفتح نافذة ‪html‬‬
‫‪45‬‬
‫الطريقة األولى لتنفيذ أوامر الجافا سكريبت على ‪ Html‬هو انشاء العنصر ‪ script‬ضمن عناصر ‪body‬؛ ثم‬
‫كتابة أوامر الجافا سكريبت؛ مع مراعاة ان يكون العنصر الـ ‪ script‬الذى يتم إنشاؤه أسفل جميع عناصر‬
‫‪ body‬؛ وذلك كما موضح بالشاشة التالية حيث تم كتابة االمر الذى يظهر لنا رسالة محددة داخل نافذة ؛‬
‫ثم على اسم الملف من اعلى كليك يمين؛‬
‫بفتح الملف نجده ينفذ األوامر‪.‬‬
‫‪46‬‬
‫الطريقة الثانية لتنفيذ أوامر الجافا سكريبت على ‪ :Html‬انشاء ملف جافا سكريبت وربطه بملف ‪html‬‬
‫الذى تم إنشاؤه؛‬
‫انشاء ملف جافا اسكريبت ؛ نفتح ملف جديد ؛‬
‫نقوم بتسمية الملف ؛ مع مراعاة اآلتى ‪:‬‬

‫‪ -‬ال يبدأ االسم برقم ‪.‬‬
‫‪ -‬ال يمكن وضع مسافات ‪.‬‬
‫‪ -‬ال يسمح باستخدام الرموز ماعدا عالمتى – و _ ‪.‬‬
‫‪ -‬يحدد صيغة الملف ‪.js‬‬
‫وفيما يلى نجده تم كتابة اسم الملف الذى تم إنشاؤه وهذا يعنى انه تم انشاء الملف بشكل سليم ‪.‬‬
‫‪47‬‬
‫ثم يتم ربط الملف بملف ‪ html‬عن طريق فتح ملف ‪ html‬وفى عناصر ‪ bodoy‬يتم انشاء عنصر ‪script‬‬
‫ثم يتم كتابة ‪ scr‬ثم كتابة اسم ملف الجافا سكريبت ؛ثم امتداد الملف كما موضح‬
‫>‪<script src="Script.js"></script‬‬
‫فلو تم كتابة األمر الخاص باظهار رسالة ‪ alert‬وتم كتابة ‪ hello‬على ملف الجافا سكريبت؛‬
‫فنجد أنه تم تنفيذ األمر داخل صفحة ‪.html‬‬
‫للحفظ تلقائياً‪:‬‬
‫من ‪ File‬ثم ‪Auto Save‬‬
‫‪48‬‬
‫املتغريات ‪:variable‬‬
‫يمكن تعريف المتغيرات ببســاطة أنها عبارة عن صــندوق حيث يمكن وضــع أي نوع من أنواع البيانات بداخله؛‬
‫ويكون له اسـ ــم محدد ؛ حيث يتم الرجوع الى هذه المتغي ارت واسـ ــتخدامها عن طريق هذا االسـ ــم ‪ .‬والمتغير ما‬
‫هو اال مس ـ ـ ـ ــاحة محددة يتم حجزها في الذاكرة العشـ ـ ـ ـ ـوائية لتخزين بعض البيانات ؛ فالمتغيرات تس ـ ـ ـ ــتخدم عند‬
‫برمجة اى برنامج به قيم متغيرة ؛ مثال الترحيب بالطالب بالجامعة ؛ فاسـ ـ ــم الطالب متغير ؛ فليس من المقنع‬
‫أن نقوم بعمل رسالة ترحب بكل طالب على حدى ؛ لكتابة المتغيرات في الجافا سكريبت ؛‬
‫‪ Var‬ثم مسافة ثم اسم المتغير‬
‫يمكن تسمية اسم المتغيرات حيث يمكن‬
‫‪ -‬يبدأ بحرف صغير‪.‬‬

‫‪ -‬يبدأ بحرف كبير ‪:‬‬
‫‪ -‬استخدام _ ‪.‬‬
‫‪ -‬استخدام عالمة ‪.$‬‬
‫‪ -‬يمكن أن تستخدم األرقام ‪.‬‬
‫‪ -‬ال يمكن أن يبدأ االسم برقم ‪.‬‬
‫‪ -‬ال يمكن احتواءه على أي رمز ماعدا عالمة ‪.$‬‬
‫‪ -‬ال يمكن استخدام األدوات المحجوزة ؛ وهى تظهر بلون مختلف ‪.‬‬
‫‪49‬‬
‫الكلمات المحجوزة في الجافا سكريبت‪.‬‬
‫‪https://www.w3schools.com/js/js_reserved.asp‬‬
‫أنواع المتغيرات ‪:‬‬
‫‪ String -‬النصوص ‪ :‬وهى تضم اى البيانات التي تحتوى على نصوص؛ ويتم كتابته بين " " ثم‬
‫نهاية المتغيربـ ;‬
‫‪50‬‬
‫لعرض البيانات نكتب‬
‫ثم نفتح ملف ‪ html‬وكليك يمين ثم اختيار ‪inspect‬‬
‫فتظهر النافذة التالية ؛ بالضغط على ‪console‬‬
‫‪51‬‬
‫‪ Numbers -‬األرقام ‪ :‬وتشمل األرقام بأنواعها سواء أرقام صحيحة أو عشرية موجبة أو سالبة‪.‬‬
‫‪ Boolean -‬المنطقية‪ :‬وهى المتغيرات التي تحتوى على بيانات فقط ‪ true‬أو ‪.false‬‬
‫‪ Undefined -‬غير محدد ‪ :‬أي نوع البيانات غير محددة ويكتب بالشكل الموضح أدناه ‪.‬‬
‫‪ Null -‬وهى يستخدم لمسح البيانات من المتغير ؛ ففي الجافا سكريبت يمكن تحديد قيم المتغير بعد‬
‫انشاء المتغير ؛ ففي المثال السابق تم كتابة المتغير بنوع بيانات غير محدد ؛ فيمكن إضافة البيانات‬
‫فيما بعد على النحو التالى‪:‬‬
‫فتم وضع نوع البيانات للمتغير ‪ x‬من نوع النصوص ؛ كما يمكن أيضا في الجافا اسكريبت تغيير‬
‫قيمة متغير بعد إنشاؤه ؛‬
‫فمثال لتغيير قيمة المتغير ‪ x‬فيتم بكتابة = ‪ name‬ويتم كتابة القيمة الجديدة للمتغير ‪.‬‬
‫‪52‬‬
‫لمعرفة نوع المتغير ؛‬
‫;)‪console.log(typeof google‬‬
‫‪ : Array‬وهو نوع من المتغيرات عبارة عن قائمة تحتوى على أعداد من البيانات ؛ قد تكون مختلفة " ارقام‬
‫مع نصوص ويتم حفظها داخل ] [ ‪.‬‬
‫‪ Object‬الكائنية ‪:‬وهو للبيانات التى يستخدم لوصف الكائن (الشيء) فكل شيء في البرمجة عبارة عن‬
‫كائن ‪.‬‬
‫)'‪var x = document.querySelector('h1‬‬
‫‪53‬‬
‫العوامل‪: Operators‬‬
‫العوامل هي رموز لها معانى محددة وتنقسم إلى ‪:‬‬
‫‪ -‬العوامل الحسابية ‪: Arithmetic operator‬‬
‫وهى تستخدم كاأللة الحاسبة لعمليات الحسابية الجمع والطرح والضرب والقسمة وخالفه من العمليات‬
‫وتكتب كما هو موضح ‪:‬‬
‫وبفتح ملف ‪ html‬وفى نافذة ‪ console‬نجد نواتج العمليات الحسابية ‪.‬‬
‫باإلضافة الى استخدام ‪ " ++‬تعنى زيادة الناتج بواحد"‬

‫و ‪ " – -‬تعنى انخفاض الناتج بقيمة واحد"‪.‬‬
‫كما يمكن كتابة العمليات بالشكل التالى‪:‬‬
‫‪54‬‬
‫‪: Assignment operators‬‬ ‫‪-‬‬

‫وهى أن أعطى قيمة لمتغير بناء على المعامالت وهى‪:‬‬
‫مثال ‪. x=y‬‬ ‫=‬
‫=‪ +‬مثال ‪. x+=y‬‬
‫= ‪ -‬مثال ‪. x-=y‬‬
‫=* مثال ‪. x*=y‬‬
‫=** مثال ‪. x**=y‬‬
‫=‪ /‬مثال ‪. x/=y‬‬
‫=‪ //‬مثال ‪. x//=y‬‬
‫=‪ %‬مثال ‪. x%=y‬‬
‫‪55‬‬
‫عمليات المقارنة )‪:(Comparison Operators‬‬
‫= تساوى ؛ != ال تساوى ؛ < أكبر من؛ >أصغر من ‪ .‬؛>= أكبر من أو يساوى‪ .‬؛<= أصغر من أو يساوى‬
‫;‪var x = 1‬‬
‫;‪var y = 10‬‬
‫;‪var z = 0‬‬
‫‪z = x + y; // z = 1 + 10 => 11‬‬
‫‪z = x - y; // z = 1 - 10 => -9‬‬
‫‪z = x * y; // z = 1 * 10 => 10‬‬
‫‪z = x / y; // z = 1 / 10 => 0.1‬‬
‫‪z = x % y; // z = 1 % 10 => 0.1‬‬
‫;‪z = x++; // z = 2‬‬
‫;‪z = x--; // z = 0‬‬
‫الشروط ‪. Conditions‬‬
‫الشرط هو وضع قيود محددة لتنفيذ الكود؛ فلو الشرط صحيح يتم تنفيذ الكود؛ ولو الشرط خطأ لم يتم تنفيذه؛‬
‫الشروط ثالثة هما‪:‬‬
‫وتعنى إذا كان الشرط صحيح فنفذ هذا الكود‪IF :.‬‬
‫‪ :Else‬وتعنى إذا لم يتحقق أي شرط فنفذ هذا الكود‪.‬‬
‫تطبيق ‪ IF‬مع ‪: else‬‬
‫;'‪var x ='5‬‬
‫{)'‪if (x ==='5‬‬
‫;)'!‪alert('ok,this is greate‬‬
‫{‪}else‬‬
‫;)'‪alert('wrong‬‬
‫}‬
‫‪56‬‬
‫الش ْرطي‪ .‬يمكنك كتابة االختيا ارت بداخله مثال هل‬

‫الكود الذي بداخل القوسين ) ‪ if ( ...‬هو االختبار َ‬
‫المتغير يساوي عدد معين او نص معين‪ .‬ففي المثال هل المتغير ‪ 5 = x‬فالنتيجة صحيح كما هو واضح‬
‫امامنا لذلك سيقوم بتشغيل السطور البرمجية بداخل األقواس }{‪ ،‬لكن ماذا لو كان المتغير ال يساوي ‪ 5‬ففي‬
‫هذه الحالة ستقوم الجافا سكريبت بتشغيل السطور الموجودة بداخل األقواس ‪{}else.‬‬
‫فهنا تم تغيير قيمة ‪ x‬الى ‪ 6‬فتحقق الرسالة الموجودة مع ‪. else‬‬
‫المحدد)‪: (Switch‬‬
‫يستخدم المحدد ‪ Switch‬لتبسيط كتابة الشروط ؛ فمثال لو لدينا نص )‪ (Statement‬يتكون من مئة شرط أو‬
‫أكثر‪ ،‬فليس من المنطقي أن نستخدم الجملة الشرطية )‪ (If..Else‬مئة مرة‪ ،‬ففكرة جملة ‪ Switch‬تعتمد على‬
‫المتغير الخاص بها والذي يعتبر المحدد لها‪ ،‬أي ستكون النتائج حسب قيمة ذلك المتغير‪.‬‬
‫الدوال ‪Function‬‬
‫الدوال هي تجميع مجموعة أكواد الستخدامها في وظيفة محددة ؛ فمثال لو البرنامج يحتاج الى كود هذا الكود‬
‫يتم تشغيله أكثر من مرة وفى اكثر من مكان فبدال من إعادة ذلك فيتم كتابته مرة واحدة وإسناده إلى دالة تقوم‬
‫بإستدعائها بإسم الدالة ؛ فسبق أن استخدمنا ‪ alert‬وهى دالة لعمل رسالة ترحيب و دالة‬
‫‪ document.querySelector‬وهي دوال جاهزة بالمتصفح ‪.‬‬
‫;)'‪var rasha = document.querySelector('h1‬‬

‫;)'‪alert('hi‬‬
‫‪57‬‬
‫فنالحظ أن الدوال تنتهى دائما بـ( ) ألنها تتطلب وضع ‪ arguments‬وهى بيانات تحتاجها الدالة لتأدي‬
‫وظيفتها المطلوبة منها ؛ كما أيضا يمكن كتابة دوال خاصة بنا " حيث يقوم المستخدم بعمل دالة مخصصة‬
‫لبرنامجه" وفيما يلى كيفية كتابة الدالة تستخدم لضرب رقمين ‪:‬‬
‫{ )‪function multiply(num1,num2‬‬
‫;‪var result = num1 * num2‬‬
‫;‪return result‬‬
‫}‬
‫;)‪multiply(9,17‬‬
‫;)‪multiply(7,3‬‬
‫‪:Events‬‬
‫األحداث مهمة لبناء صفحات ويب تفاعلية فهى عبارة عن ربط جزء معين من برنامج ليقوم بالعمل عند‬
‫حدوث أحداث معينة واألكثر استخداما هو ‪ click event‬؛ وهو يحدث عندما تقوم بالضغط على شيء ما‬
‫بالفأرة‪ .‬لنأخذ مثال بسيط يشرح حدث الضغط‪ ،‬فمثال الكود التالي ‪:‬‬
‫{ )(‪document.querySelector('html').onclick = function‬‬
‫;)'!‪alert('Ouch! Stop poking me‬‬
‫}‬
‫{ )(‪document.querySelector('html').onclick = function‬‬
‫;)'!‪alert('Ouch! Stop poking me‬‬
‫}‬
‫بعد كتابته قم بالضغط على أي مكان بالصفحة ؛‬
‫‪58‬‬
‫هناك اكثر من طريقة لربط حدث بأحد عناصر الصفحة ؛ في هذا المثال قمنا باختيار عنصر <‪،>html‬‬
‫وحددنا حدث الضغط عليه ‪ onclick‬وقمنا بإعطائه الحدث دالة مجهولة (من غير اسم) يقوم بتشغيلها عندما‬
‫يحصل هذا الحدث (الضغط على العنصر)‪.‬‬
‫احللقات التكرارية ‪Loops‬‬
‫التكرار يمكننا من تنفيذ مجموعة من األوامر والتعليمات البرمجية ؛ وهناك أنواع منهما‪:‬‬
‫‪ :For‬حيث يتم تكرار العمل إذا تحقق الشرط ؛ فمثال لو أريد كتابة جملة معينة مائة مرة ؛ فيتم عمل تكرار‬
‫حتى ال يتم كتابة الجملة بهذا العدد‪.‬ويتم كتابتها على النحو التالى؛‬
‫;‪Var x‬‬
‫)‪for(x = 1; x <= 10; x++‬‬
‫;)<"‪{Document.write(x +">br‬‬
‫}‬
‫‪ : do...while‬فهى حلقة التتوقف عن التكرار حتى يتم تحقق الشرط المحدد ويتم كتابتها على النحو التالى‪:‬‬
‫;‪var i = 0‬‬
‫{ ‪do‬‬
‫;‪i += 1‬‬
‫;)‪console.log(i‬‬
‫;‪} while (i < 5);var i = 0‬‬
‫{ ‪do‬‬
‫;‪i += 1‬‬
‫;)‪console.log(i‬‬
‫;)‪} while (i < 5‬‬
‫‪59‬‬
‫‪ : While‬حيث تستمر بتنفيذ األكواد المرتبطة بها طالما الشرط المحدد يساوي ‪ true.‬وعندما سيصبح‬
‫الشرط يساوي ‪ ،false‬ستتوقف (‪ )statement‬المرتبطة بالحلقة عن التنفيذ وسينتقل التحكم الى التعليمة‬
‫البرمجية التي تلي الحلقة ‪.while‬‬
‫;‪var n = 0‬‬
‫;‪var x = 0‬‬
‫{ )‪while (n < 3‬‬
‫;‪n++‬‬
‫;‪x += n‬‬
‫}‬
‫فنالحظ أنها مع كل تكرار‪ ،‬ستقوم الحلقة بالزيادات على ‪ n‬وتضيف قيمته إلى ‪ .x‬لتكون القيم في التكرار‬
‫األول ‪ n = 1‬و ‪ x = 1‬وفى الثاني‪ n = 2 :‬و ‪ x = 3‬بينما التكرار الثالث‪ n = 3 :‬و ‪x = 6‬‬
‫وبعد االنتهاء من التكرار الثالث‪ ،‬الشرط ( ‪ ) 3 < n‬لم يعد يساوي ‪ ،true‬لذلك ستنتهي الحلقة التك اررية‪.‬‬
‫‪60‬‬
‫الباب الثالث ‪ :‬بناء تطبيقات الويب يف نظم املعلومات اجلغرافية‬
‫استخدام ‪ArcGIS API JavaScript‬‬
‫اآلن بعد أن عرضنا بعض أساسيات ‪ HTML‬و ‪ CSS‬و ‪ JavaScript‬فال بد من معرفة كيفية إنشاء بعض‬
‫تطبيقات الويب لنظم المعلومات الجغرافية وذلك من خالل عرض كيفية إنشاء الخريطة وإضافة الطبقات اليها‪.‬‬
‫لتعلم تطبيقات الويب الخاصة بنظم المعلومات الجغرافية ال بد من معرفة واجهة برمجة التطبيقات (‪.)API‬‬
‫وهذا ما ينطبق على انشاء تطبيقات الويب باستخدام ‪ ArcGIS API JavaScript‬؛ هناك بعض الخطوات‬
‫األساسية التي يجب عليك اتباعها إلنشاء أي خرائط ويب باستخدام ‪ArcGIS API JavaScript‬‬
‫إنشاء كود ‪ HTML‬لصفحة الويب‬
‫في الفصل السابق ‪ ،‬تعلمت المفاهيم األساسية لـ ‪ HTML‬و ‪ CSS‬وجافا سكريبت‪ .‬اآلن ‪ ،‬ستبدأ في تطبيق‬
‫هذه المهارات في العمل‪.‬‬
‫انشىء ملف ‪. Html‬‬
‫أفتح محرر األكواد " ‪"Visual studio‬‬
‫العناصر األساسية لعمل ويب باستخدام ‪API :‬‬
‫‪ -‬قاعدة بيانات ‪.‬‬

‫‪ -‬طبقات على برنامج ‪.Arc map‬‬
‫‪ -‬نشر على ‪.Arc Server‬‬
‫‪ -‬عرضها أو عمل ويب لها‪.‬‬
‫خطوات عمل ويب باستخدام ‪:APIARCGIS‬‬
‫‪-‬نفتح ملف ‪ html‬على محرر األكواد؛‬
‫‪-‬بمجرد كتابة ‪ h‬يتم اختيار ‪ html5‬يكتب العناصر األساسية للصفحة ‪.‬‬
‫داخل الـ ‪head‬‬
‫‪ -‬يتم تغيير العنوان داخل الـ ‪ title‬وليكن ‪my map‬‬

‫‪ -‬يتم ادخال لينك مكتبة ايزرى جافا اسكريبت ‪ API‬وهى مكتبة اونالين لشركة ايزرى ‪.‬‬
‫‪61‬‬
.‫) وكود الجافا سكريبت‬css ( ‫ كود‬-
:body ‫داخل الـ‬
"my view " ‫) ونسميه باسم وليكن‬id( ‫ نضع به الخريطة الخاصة بنا و نعطى له‬div ‫ نقوم بعمل‬-
.‫ لنعطى للخريطة المقاسات‬style ‫ نقوم بعمل‬-
‫ ثم‬rquier ‫ داخله نبدأ بكتابة‬script ‫ يتم كتابة الكود الخاص بالخريطة ونقوم بعمل‬body ‫ وعند‬-
.‫استدعاء الخرائط من مكتبة ايزرى‬
.view ‫ واألخر اسميه‬map ‫" أحدهما اسميه‬let " ‫ عمل متغيرين‬-
: ‫ليكون الكود التالى‬

<!DOCTYPE html>
<html>
<head>
<title>my Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximumscale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/
themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/
esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
62
dojo.require("esri.map");
function init(){
var map = new esri.Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
‫نجده تم انشاء الخريطة داخل صفحة الويب على النحو الموضح أدناه‬
63
‫كتابة مرجع للـ ‪ API‬داخل الـ ‪head :‬‬
‫تقوم <‪ >script‬بتحميل ‪ .ArcGIS API for JavaScript‬تم استخدام اصدار ‪ . 3.9‬يمكن تحديث الرقم‬
‫عندما يتم إصدار إصدارات جديدة من ‪ .، API‬تقوم العالمة <‪ >link‬بتحميل ملف ‪esri.css‬‬
‫‪ ،‬والتي تحتوي على أنماط خاصة بعناصر واجهة مستخدم ‪ Esri‬ومكوناتها‪.‬‬
‫يمكن ارجاع الخريطة الى نقطة محددة " باحداثيات هذه النقطة" وعمل زووم عليها بنسبة محددة وذلك بالكود‬
‫التالى ‪:‬‬
‫>‪<script‬‬
‫;)"‪dojo.require("esri.map‬‬
‫{)(‪function init‬‬
‫{ ‪var map = new esri.Map("mapDiv",‬‬
‫‪center: [46.7166,24.4],‬‬
‫‪zoom: 3,‬‬
‫"‪basemap: "streets‬‬
‫;)}‬
‫}‬
‫;)‪dojo.ready(init‬‬
‫>‪</script‬‬
‫تنسيق الصفحة ‪:‬‬

‫يمكنك إضافة معلومات التصميم إلى عالمة <‪ >head‬التي ستحدد أنماطا مختلفة جوانب صفحة الويب‪.‬‬
‫كما هو موضح في الكود التالي‪ .‬في هذه الحالة ‪ ،‬يتضمن التصميم إعداد خريطة بحيث تمأل نافذة المتصفح‬
‫بالكامل‪:‬‬
‫>‪<style‬‬
‫{ ‪html, body, #mapDiv‬‬
‫;‪padding:0‬‬
‫;‪margin:0‬‬
‫;‪height:100%‬‬
‫}‬
‫>‪</style‬‬
‫‪64‬‬
: ‫الكود كامل‬
:‫يجب أن يظهر رمز هذا التطبيق البسيط على النحو التالي‬
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9,
IE=10">
<meta name="viewport" content="initial-scale=1, maximum-
scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet"
href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet"
href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/
claro.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
65
‫‪basemap: "topo",‬‬
‫‪center: [46.7166,24.4], // long, lat‬‬
‫‪zoom: 13,‬‬
‫"‪sliderStyle: "small‬‬
‫;)}‬
‫;)}‬
‫>‪</head‬‬
‫>"‪<body class="claro‬‬
‫>‪<div id="map"></div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫بعد عمل ‪ Run‬أو فتح صفحة الويب نجد أنه تم وضع الخريطة‪.‬‬
‫مما سبق تعلمنا كيفية تهيئة ملف الجافا سكريبت واضافة الخريطة اليه؛ لكن نحن في حاجة الى إضافة‬
‫طبقات بعد ذلك الى الخريطة؛ وخالف ذلك‪.‬‬
‫‪66‬‬
‫تطبيقات ‪:API Arc GIS JS‬‬
‫تهيئة العمل‪:‬‬
‫لعمل تطبيق ويب باستخدام مكتبة ‪APIARCGIS JS‬؛ يتطلب منا عمل مفتاح للـ ‪ API‬؛ وذلك عن طريق‬
‫الخطوات التالية‪:‬‬
‫ادخل على الرابط التالى‪:‬‬
‫‪https://developers.arcgis.com/javascript/latest/‬‬
‫ثم اضغط على ‪ create your first APIkey‬من النافذة التالية ‪:‬‬
‫‪67‬‬
‫ادخل العنوان والوصف‬
‫تظهر شاشة بها مفتاح ‪API‬‬
‫‪68‬‬
:‫ إضافة خريطة لتطبيق الويب‬-1

. ‫ إلنشاء صفحة ونستخدم عنصر‬CSS ‫ و‬HTML ‫ أضف‬،> HTML ‫ ؛ داخل‬html ‫أضف‬ -
‫ بإعادة تعيين أي إعدادات للمتصفح وذلك ليصبح الكود‬CSS ‫ لعرض الخريطة ويقوم‬viewDiv
:‫على النحو التالى‬
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
:‫ وذلك بالكود التالى‬head ‫ في تاج‬css , js ‫ عن طريق وضع مرجع مكتبة‬API ‫ عمل مرجعية‬-
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">

<script src="https://js.arcgis.com/4.18/"></script>
69
‫إضافة النماذج ‪ :‬فتحتوي ‪ ArcGIS JS API‬على وحدات أو نماذج ‪ AMD‬النمطية‪ .‬قم باإلشارة إلى‬
‫الوحدات النمطية للخريطة و ‪.MapView‬‬
‫في عالمة <‪ ، >head‬أضف عالمة <‪ >script‬وعبارة تتطلب ‪ AMD‬لتحميل وحدتي ‪ Map‬و‬
‫‪.MapView‬‬
‫>‪<script‬‬
‫‪require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapVi‬‬
‫{ )‪ew‬‬
‫;)}‬
‫الحصول على مفتاح ‪ API‬واضافة الخريطة ‪:‬حيث مفتاح ‪ API‬مطلوب للوصول إلى خدمات ‪ ArcGIS‬؛‬
‫ويتم ذلك عن طريق االنتقال إلى لوحة التحكم للحصول على مفتاح ‪ API‬؛ ثم بعذ ذلك يتم انشاء خريطة‬
‫باستخدم خريطة لتعيين طبقة خريطة األساس وتطبيق مفتاح ‪ API‬الخاص بك ز وذلك من خالل الكود‬
‫التالى " بحيث يتم وضعه داخل عنصر " ‪ require‬لتصبح على النحو التالى‪:‬‬
‫‪require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapVie‬‬

‫{ )‪w‬‬
‫;"‪esriConfig.apiKey = "YOUR-API-KEY‬‬
‫{(‪const map = new Map‬‬
‫‪basemap: "arcgis-topographic" // Basemap layer service‬‬
‫;)}‬
‫;)}‬
‫إنشاء عرض الخريطة‪:‬‬

‫استخدم فئة ‪ MapView‬لتعيين موقع الخريطة المراد عرضها فلتوسيط عرض الخريطة ‪ ،‬اضبط خاصية المركز‬
‫على احداثى المنطقة المطلوبة وخاصية ‪ zoom‬على ‪ .13‬وضبط خاصية ‪ container‬إلى ‪ viewDiv‬لعرض‬
‫محتويات الخريطة‪.‬‬
‫تحدد خاصية ‪ zoom‬مستوى التكبير ‪ /‬التصغير للخريطة‪ .‬تتراوح القيم عادة من ‪ 0‬إلى ‪ 0 :20‬وهي األبعد‬
‫عن سطح األرض و ‪ 20‬هي األقرب‪ .‬يمكن أن تدعم بعض طبقات خريطة األساس مستويات تكبير إضافية‬
‫تصل إلى ‪.23‬‬
‫‪70‬‬
‫ يمكنك استخدام هذه األحداث لتغيير‬.‫ أيضا خصائص أخرى مثل النقر والنقر المزدوج‬MapView ‫يدعم‬
‫موضع الخريطة أو للعثور على المعالم في الطبقات ؛ يتم ذلك على الملف باالكواد التالية " يتم وضعها‬
. require ‫أسفل األكواد السابقة داخل‬
const view = new MapView({
map: map,
center: [31.13, 30.02],// Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
:‫ليصبح الكود على النحو التالى‬
<html>
<head>
<title>ArcGIS API for JavaScript</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapVi
ew) {
71
esriConfig.apiKey = "YOUR-API-KEY";
const map = new Map({
basemap: "streets" // Basemap layer service
});
map: map,
center: [31.13, 30.02], // Longitude, latitude
});
});
</script>
</head>
<body>
</body>
</html>
72
:‫ إضافة قائمة البحث باألسماء‬-2
‫ حتى يصبح الكود كما يلى‬Function ‫ الى‬Search ‫ ؛ واضافة‬Require ‫يتم إضافة الكود التالى داخل‬
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search"
], function(esriConfig,Map, MapView, Search) {
‫ثم إضافة صندوق البحث واضافته للخريطة وذلك عن طريق وضع الكود التالى أسفل األكواد قبل قفل‬
:‫ـ‬script‫ال‬
const search = new Search({ //Add Search widget

view: view
});
view.ui.add(search, "top-right"); //Add to the map
});
:‫ إضافة إمكانية تغيير خريطة األساس داخل الويب‬-3
"62 ‫يتم إضافة أكواد عرض الخريطة" الموجودة بصفحة‬
:‫ حتى تصبح على النحو التالى‬require ‫إضافة العناصر التالية داخل عنصر‬
require([
"esri/config",
"esri/Map",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {
73
‫يمكن التبديل بين خرائط األساس وذلك لتمكين التحديد بين خريطتي أساس باستخدام عنصر واجهة مستخدم‬
Script ‫ قبل عنصر‬html‫خريطة األساس وذلك بوضع الكود ؛ أخر صقحة الـ‬
const basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "arcgis-imagery"
});
});
</script>
});‫األقواس‬ ‫إضافة زرار يمين الصفحة أسفل الكود السابق" داخل‬

view.ui.add(basemapToggle,"bottom-right");
‫ لتحديد‬BasemapGallery ‫تحديد خرائط األساس من المعرض عن طريق استخدام عنصر واجهة مستخدم‬
:‫خرائط أساس مختلفة بوضع الكود التالى اسفل الكود السابق‬
const basemapGallery = new BasemapGallery({
view: view,
source: {
query: {
title: '"World Basemaps for Developers" AND owner:esri'
}
}
});
: ‫أخي ار إضافة الكود التالى‬

view.ui.add(basemapGallery, "top-right"); // Add to the view

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS APIjs</title>
74
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
"esri/Map",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {
basemap: "streets"
});
container: "viewDiv",
map: map,
zoom: 3
});
const basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "arcgis-imagery"
});
view.ui.add(basemapToggle,"bottom-right");
});
75
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="viewDiv"></div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ -4‬إضافة ‪:point, line, and polygon‬‬

‫يمكننا إضافة الرسوم وعرضها" النقاط والخطوط والمضلعات " في الخريطة على المتصفح‪ .‬فيما يلى شرح‬
‫كيفية عرض النقاط والخطوط والمضلعات على الخريطة كرسومات‪.‬‬
‫إضافة النماذج ‪ :‬في عنطر ‪ require‬يتم إضافة ‪ Graphic, Graphic Layer‬وذلك على النحو التالى‪:‬‬
‫ملحوظة يتم التعديل على الملف السابق؛يتم التعديل على عنصر ‪ require‬حتى يصبح على النحو التالى‪:‬‬
‫[(‪require‬‬
‫‪"esri/config",‬‬
‫‪"esri/Map",‬‬
‫‪"esri/views/MapView",‬‬
‫‪"esri/Graphic",‬‬
‫"‪"esri/layers/GraphicsLayer‬‬
‫{ )‪], function(esriConfig,Map, MapView, Graphic, GraphicsLayer‬‬
‫;"‪esriConfig.apiKey = "YOUR-API-KEY‬‬
‫‪76‬‬
"arcgis-topographic "‫باقى الكود كما هو ؛ ويمكن تغيير خريطة األساس واستخدام‬
basemap: "arcgis-topographic" // Basemap layer service

});
"‫ " السطرين الموجودين بأسفل الكود‬:‫إضافة طبقات الرسوم‬

});
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
:‫إضافة طبقة " رسم " نقاط‬

});
const point = { //Create a point
type: "point",
longitude: 31.13,
latitude: 30.02
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
};
77
:‫ثم إضافة االكواد التالية‬
const pointGraphic = new Graphic({

geometry: point,
symbol: simpleMarkerSymbol
});
<html>
<html>
<head>
<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
"esri/Map",
"esri/Graphic",
78
"esri/layers/GraphicsLayer"
], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {
basemap: "arcgis-topographic" //Basemap layer service
});
map: map,
center: [31.13,30.02], //Longitude, latitude
zoom: 13,
container: "viewDiv"
});
type: "point",
longitude: 31.13,
latitude: 30.02
};
color: [226, 119, 40], // Orange
outline: {color: [255, 255, 255], // White
width: 1
}
};
geometry: point,
});
graphicsLayer.add(pointGraphic);
79
});
</script>
</head>
<body>
</body>
</html>
: ‫إضافة خط‬
"‫يتم إضافة مواصفات الخط ومسار " احداثيات المسار‬
color: [255, 255, 255], // White

width: 1
}
};
geometry: point,
});
80
const polyline = {
type: "polyline",
paths: [
[31.13, 30.02], //Longitude, latitude
[31.8, 30.00] //Longitude, latitude
]
" width ‫ " بعد‬:‫بعد ذلك يتم إضافة الكود‬
const polylineGraphic = new Graphic({

geometry: polyline,
symbol: simpleLineSymbol
});
graphicsLayer.add(polylineGraphic);
.‫فنجده تم إضافة الخط‬
:‫إلضافة مضلع‬
const polygon = {
type: "polygon",
rings: [
]
};
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
81
color: [255, 255, 255],

width: 1
}
};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
:‫"إضافة نقطة – خط – مضلع‬: ‫صفحة الكود كامل‬
<html>
<html>
<head>
<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
"esri/Map",
82
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

basemap: "arcgis-topographic" //Basemap layer service
});

map: map,
center: [31.13,30.02], //Longitude, latitude
zoom: 13,
container: "viewDiv"
});


type: "point",
longitude: 31.13,
latitude: 30.02
};
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
83
};

geometry: point,
});
// Create a line geometry

const polyline = {
type: "polyline",
paths: [
[31.13,30.02], //Longitude, latitude
[31.12,30.01], //Longitude, latitude
[31.11,30.00] //Longitude, latitude
]
};
const simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 40], // Orange
width: 2
};
const polylineGraphic = new Graphic({

geometry: polyline,
symbol: simpleLineSymbol
});
graphicsLayer.add(polylineGraphic);
// Create a polygon geometry

const polygon = {
type: "polygon",
rings: [
84

]
};
const simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // Orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
});
graphicsLayer.add(polygonGraphic);
});
</script>
</head>
<body>
</body>
</html>
85
‫‪ -5‬إلنشاء نافذة منبثقة للرسم‪:‬‬
‫يمكنك عرض نافذة منبثقة للرسم عند النقر فوقه‪ .‬تستخدم التعليمات البرمجية التي تُنشئ رسم المضلع‬
‫إلظهار نافذة منبثقة تحتوي على اسم ووصف الرسم كما يلى ‪:‬‬
‫‪width: 1‬‬
‫}‬
‫;}‬
‫{ = ‪const popupTemplate‬‬
‫‪title: "{Name}",‬‬
‫"}‪content: "{Description‬‬
‫}‬
‫{ = ‪const attributes‬‬
‫‪Name: "Graphic",‬‬
‫"‪Description: "I am a polygon‬‬
‫}‬
‫{(‪const polygonGraphic = new Graphic‬‬
‫ثم إضافة‬
‫‪symbol: simpleFillSymbol,‬‬
‫‪attributes: attributes,‬‬
‫‪popupTemplate: popupTemplate‬‬
‫‪86‬‬
:html ‫ إضافة المحتويات والعناصر التالية داخل صفحة‬:"‫ إضافة مشهد ثالثى "خريطة ثالثية‬-6
<html>
<head>
<title>ArcGIS scean</title>
<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
</body>
</html>
head ‫ داخل عنصر الـ‬API ‫ضع مرجع‬

modules ‫إطافة الـ‬
basemap: "streets", //Basemap
ground: "world-elevation", //Elevation service
87
});
:‫انشاء المنظر الثالثي‬

const view = new SceneView({
map: map,
camera: {
position: {
x: 31.13, //Longitude
y: 30.02, //Latitude
z: 2000 //Meters
},
tilt: 75 }
:‫الكود‬
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=no">
<title>ArcGIS scene</title>
88
<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/SceneView"
], function(esriConfig,Map, SceneView) {
basemap: "streets", //Basemap layer service
ground: "world-elevation", //Elevation service
});
map: map,
camera: {
position: {
x: 31.13, //Longitude
y: 30.02, //Latitude
z: 2000 //Meters
},
tilt: 75
89
‫}‬
‫;)}‬
‫;)}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div id="viewDiv"></div‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ -7‬إضافة ‪ feature layer‬الى خريطة الويب‪:‬‬

‫تستخدم ‪ feature layer‬لتخزين كميات كبيرة من البيانات الجغرافية؛ في صورها " النقطة – الخط – المساحة‬
‫" ؛ ويمكن الوصول الى معلومات تم تخزينها في ‪ feature layer‬واضافتها داخل تطبيق ويب وذلك عن‬
‫طريق الوصول الى عنوان ‪. url‬‬
‫أوالً‪ :‬التدريب على ملفات تم رفعها من قبل شركة ايزرى على موقع ‪:server‬‬
‫فتح محرر األكواد‪:‬وضع أكواد إضافة الخريطة؛ عمل استدعاء لـ‪ Feature layer‬؛ واضافتها داخل الـ‬
‫‪function‬؛ كتابة مفتاح ‪ API‬الخاص بى وكتابة ‪ URL‬الخاص بالبيانات "‪."Feature layer‬‬
‫‪-‬الحصول على ‪ URL‬الدخول على موقع‬

‫‪https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services‬‬
‫‪90‬‬
‫يتم اختيار الملفات التي نريدها ؛ دبل كليك عليها يفتح الصفحة ؛ يتم اختيار الـ‪Trialias(0) Layers‬‬
‫ثم يتم نسخ ‪ url‬من أعلى الصفحة‪:‬‬
‫تكرار ذلك لطبقات نقاطك وخطوط ومضلعات؛‬
‫ليصبح الكود في النهاية على النحو التالى ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<meta charset="utf-8" /‬‬
‫>‪<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /‬‬
‫>‪<title>ArcGIS API for JavaScript</title‬‬
‫>‪<style‬‬
‫‪html,‬‬
‫‪body,‬‬
‫{ ‪#viewDiv‬‬
‫;‪padding: 0‬‬
‫;‪margin: 0‬‬
‫;‪height: 100%‬‬
‫;‪width: 100%‬‬
‫}‬
‫‪91‬‬
</style>
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapVi
ew) {
basemap: "streets" // Basemap layer service
});
map: map,
center: [-118.7151, 34.0904], // Longitude, latitude
});
});
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<html>
<head>
92
<title> APIGIS JS FL</title>

<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
"esri/Map",
"esri/layers/FeatureLayer"
], function(esriConfig,Map, MapView, FeatureLayer) {
esriConfig.apiKey = "---------------------";

basemap: "arcgis-topographic"
});

map: map,
93
center: [-118.80543,34.02700],
zoom: 13
});
//Trailheads feature layer (points)

const trailheadsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/Featu
reServer/0"
});
map.add(trailheadsLayer);
//Trails feature layer (lines)

const trailsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trails/FeatureSer
ver/0"
});
map.add(trailsLayer, 0);
// Parks and open spaces (polygons)
const parksLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Travel%20from%
20Find%20Locations%20in%20LA%20West%20Coffee%20Shops%20(5%2010%2015%20Minutes
)/FeatureServer/0"
});
map.add(parksLayer, 0);
});
</script>
</head>
<body>
</body>
</html>
94
‫ثانياً ‪ :‬وضع طبقات موجودة على ‪ Arcmap‬إلى ‪ server‬وعمل عنوان ‪ url‬لها‪:‬‬

‫‪-‬ال بد من وجود برنامج ‪.gisserver‬‬
‫‪-‬يتم وضع برنامج‪ Arc gis desktop‬كخادم لبرنامج ‪.Server‬‬
‫من ‪arc Catalog‬‬
‫‪95‬‬
‫ثم تظهر الرسالة التالية‬
‫‪ ServerURL‬لو البرنامج على جهازى ؛ يتم كتابة (اسم الجهاز أو ‪ local host‬ورقم االرك سيرفر‬
‫على النحو التالى ‪.)http://localhost:6080/arcgis‬‬
‫‪96‬‬
‫ثم ‪.finish‬‬
‫نجده ظهرهه كمستخدم‬
‫نحفظ الخريطة ؛ كالـ ‪Arcmap Document‬‬
‫أخي ار نقوم بعمل ‪share‬‬
‫‪97‬‬
‫ثم‬
‫ثم ‪ finish‬؛ ثم ‪ puplish‬ثم ‪.ok‬‬
‫ندخل على ‪ service directory‬و نقوم بعمل تسجيل الدخول نجد الخريطة التي تم رفعها ؛ يتم نسخ ‪url‬‬
‫ووضعها في الكود كما سبق وأن ذكرنا ‪.‬‬
‫‪98‬‬
‫طريقة أخرى لرفع الملفات على االنترنت ‪:‬‬
‫عمل تسجيل دخول الى ‪ Arc gis on line‬من برنامج االرك ‪ GIS‬ديسك توب من ‪ file‬واختار ‪Sine‬‬
‫‪ in‬وتسجيل الدخول ثم عمل ‪ Share‬مرة أخرى وأختار من النافذة التالية ‪ host‬الخاص بى على االرك‬
‫اونالين‪.‬‬
‫‪99‬‬
‫لو اردنا عمل تعديل على البيانات ؛ على االونالين يتم اختيار ‪feature Access‬‬
‫ظهرت النافذة التالية ؛ فال بد من تصحيح األخطاء الموجودة بها؛‬
‫الخطأ األول يطلب إضافة ‪ Tag‬؛ فيتم وضع ‪ add tag‬في خانة ‪ Tags‬؛ ثم الضغط على ‪ Analyze‬؛‬
‫والذهاب الى الخطأ الثاني والضغط عليه دبل كليك ؛ يطلب وضع وصف فيتم وضعه ثم الضغط على‬
‫‪ Analyze‬وفى النهاية يتم الضغط على ‪.Publish‬‬
‫‪100‬‬
:‫ إضافة وسيلة االيضاح للخريطة‬-8
‫ ثم إضافة وسيلة التوضيح " المفتاح ؛ واضافة نفس‬require ‫يتم إضافة خريطة الويب الخاصة بايزرى في‬
: ‫ حتى يصيح الكود على النحو التالى‬function ‫العناصر الى‬
<html>
<head>
<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
101
"esri/WebMap",
"esri/widgets/ScaleBar",
"esri/widgets/Legend"
], function(esriConfig, WebMap, MapView, ScaleBar, Legend) {
esriConfig.apiKey = " ‫وضح مفتاح‬---API-----------------‫;" الخاص بك‬
const webmap = new WebMap({
portalItem: {
id: "41281c51f9de45edaf1c8ed44bb10e30"
}
});
map: webmap
});
const scalebar = new ScaleBar({
view: view
});
view.ui.add(scalebar, "bottom-left");
const legend = new Legend ({
view: view
});
view.ui.add(legend, "top-right");
});
</script>
</head>
<body>
</body>
</html>
102
:feature ‫إضافة اطار للتعديل على‬-9
Requier ‫ إلى الـ‬Editor ‫ و‬FeatureLayers ‫إضافة‬
require([
"esri/config",
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/widgets/Editor"
],
‫ الخاص بالبيانات ؛‬url ‫إضافة‬
const myPointsFeatureLayer = new FeatureLayer({

url: " " });
esriConfig.apiKey = " ";
[myPointsFeatureLayer] ‫وضع طبقات للخريطة تحتوى‬
basemap: "arcgis-topographic",
layers: [myPointsFeatureLayer]
103
:‫انشاء اطار لمربع التعديل واضافته على الخريطة‬
const editor = new Editor({

view: view
});
// Add widget to the view
view.ui.add(editor, "top-right");
<html>
<head>
<title>ArcGIS JavaScript </title>
<style>
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/config",
"esri/Map",
"esri/layers/FeatureLayer",
104
"esri/widgets/Editor"
], function(esriConfig,Map, MapView, FeatureLayer, Editor) {
// Reference a feature layer to edit

const myPointsFeatureLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/Fe
atureServer/0"
});
esriConfig.apiKey = "AAPKbb66530808344503bed21632f9b025a5uN5GiA8PpuNLYpi8XQdaq
87URclwKZh_gavAGAnwkM4rsF88AP9Wdf_jzulPWyuG";

basemap: "arcgis-topographic", // Basemap layer service
layers: [myPointsFeatureLayer]
});

map: map,
center: [-118.80543,34.02700],
zoom: 13
});
// Editor widget
const editor = new Editor({
view: view
});
// Add widget to the view
105
view.ui.add(editor, "top-right");
});
</script>
</head>
<body>
</body>
</html>
106
: ‫ للرسم‬widget‫إضافة‬-10
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Sketch widget </title>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/widgets/Sketch", "esri/Map", "esri/layers/GraphicsLayer", "esri/views/MapVie
w"], function(
Sketch,
Map,
GraphicsLayer,
MapView
){
const layer = new GraphicsLayer();

basemap: "topo-vector",
layers: [layer]
107
});
map: map,
zoom: 12,
center: [31, 30]
});
const sketch = new Sketch({
layer: layer,
view: view,
// graphic will be selected as soon as it is created
creationMode: "update"
});
view.ui.add(sketch, "top-right");
});
</script>
</head>
<body>
</body>
</html>
108
:3D ‫الرسم على‬

<html>
<head>
<title>Sketch in 3D </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sketchPanel {
width: 200px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.8);
}
.esri-button {
margin: 2px;
}
#snapping {
padding: 10px;
}
#snappingctrlkey {
display: inline;
}
109
#actionbuttons {
display: none;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/symbols/WebStyleSymbol"
], function (Map, SceneView, GraphicsLayer, SketchViewModel, WebStyleSymbol) {
// the layer where the graphics are sketched
const graphicsLayer = new GraphicsLayer({ elevationInfo: { mode: "on-the-ground" } });

basemap: "satellite",
layers: [graphicsLayer],
ground: "world-elevation"
});
map: map,
camera: {
position: [9.76504392, 46.43538764, 2073.31548],
heading: 226.79,
tilt: 88.35
}
});
const blue = [82, 82, 122, 0.9];
const white = [255, 255, 255, 0.8];
// polygon symbol used for sketching the extruded building footprints
const extrudedPolygon = {
110
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
size: 10, // extrude by 10 meters
material: {
color: white
},
edges: {
type: "solid",
size: "3px",
color: blue
}
}
]
};
// polyline symbol used for sketching routes

const route = {
type: "line-3d",
symbolLayers: [
{
type: "line",
size: "10px",
material: {
color: white
}
},
{
type: "line",
size: "3px",
material: {
color: blue
111
}
}
]
};
// point symbol used for sketching points of interest

const point = {
type: "point-3d",
symbolLayers: [
{
type: "icon",
size: "20px",
resource: { primitive: "kite" },
outline: {
color: blue,
size: "3px"
},
material: {
color: white
}
}
]
};
// load the default value from the snapping checkbox

let snappingcheckboxsavedstate = document.getElementById("snappingcheckbox").checked ? true :
false;
// define the SketchViewModel and pass in the symbols for each geometry type
// set the snappingOptions.selfEnabled to the default state
const sketchViewModel = new SketchViewModel({
layer: graphicsLayer,
view: view,
112
pointSymbol: point,
polygonSymbol: extrudedPolygon,
polylineSymbol: route,
snappingOptions: {
selfEnabled: snappingcheckboxsavedstate
}
});
// after drawing the geometry, enter the update mode to update the geometry
// and the deactivate the buttons
sketchViewModel.on("create", function (event) {
if (event.state === "complete") {
document.getElementById("startbuttons").style.display = "inline";
document.getElementById("actionbuttons").style.display = "none";
}
if (event.state === "cancel") {
}
});
// graphic backup to revert a canceled update process

let updatebackupgraphic;
sketchViewModel.on("update", function (event) {

console.log(event);
if (event.state === "start") {
updatebackupgraphic = event.graphics[0].clone();
document.getElementById("startbuttons").style.display = "none";
document.getElementById("actionbuttons").style.display = "inline";
}
if (event.aborted) {
113
// revert to the graphic before starting the update process

graphicsLayer.remove(event.graphics[0]);
graphicsLayer.add(updatebackupgraphic);
}
}
});
const drawButtons = Array.prototype.slice.call(document.getElementsByClassName("starttool"));
// set event listeners to activate sketching graphics

drawButtons.forEach(function (btn) {
btn.addEventListener("click", function (event) {
// to activate sketching the create method is called passing in the geometry type
// from the data-type attribute of the html element
sketchViewModel.create(event.target.getAttribute("data-type"));
});
});
document.getElementById("cancel").addEventListener("click", function (event) {
sketchViewModel.cancel();
});
document.getElementById("done").addEventListener("click", function (event) {
sketchViewModel.complete();
});
view.ui.add("sketchPanel", "top-right");
// checkbox to toggle the snapping on/off

document.getElementById("snappingcheckbox").addEventListener("change", function (event) {
snappingcheckboxsavedstate = event.target.checked ? true : false;
sketchViewModel.snappingOptions.selfEnabled = snappingcheckboxsavedstate;
});
114
// observe the if the CTRL-key got pressed to give the user a visual feedback
// the logic itself for toggling snapping is in the SketchViewModel
view.on(["key-down"], (ev) => {
if (ev.key === "Control") {
document.getElementById("snappingctrlkey").style.fontWeight = "bold";
document.getElementById("snappingctrlkey").style.color = "red";
document.getElementById("snappingcheckbox").checked = !snappingcheckboxsavedstate;
}
});
view.on(["key-up"], (ev) => {
document.getElementById("snappingctrlkey").style.fontWeight = "normal";
document.getElementById("snappingctrlkey").style.color = "black";
document.getElementById("snappingcheckbox").checked = snappingcheckboxsavedstate;
}
});
// add the checkbox to the bottom-right of the view
view.ui.add("snapping", "bottom-right");
});
</script>
</head>
<body>
<div id="sketchPanel" class="esri-widget">
<div id="startbuttons">
<button id="point" data-type="point" class="esri-
button starttool">Draw a point of interest</button>
<button id="line" data-type="polyline" class="esri-button starttool">Draw a route</button>
<button id="extrudedPolygon" data-type="polygon" class="esri-
button starttool">Draw a building</button>
</div>
<div id="actionbuttons">
<button id="cancel" class="esri-button">Cancel</button>
115
<button id="done" class="esri-button">Done</button>

</div>
</div>
<div id="snapping" class="esri-widget">
<input type="checkbox" id="snappingcheckbox" checked />
<label id="snappinghint"
>snapping (use
<div id="snappingctrlkey">CTRL-key</div>
to toggle)</label
>
</div>
</body>
</html><html>
<head>
<title>Sketch in 3D | Sample | ArcGIS API for JavaScript 4.18</title>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sketchPanel {
width: 200px;
padding: 10px;
116
}
.esri-button {
margin: 2px;
}
#snapping {
padding: 10px;
}
#snappingctrlkey {
display: inline;
}
#actionbuttons {
display: none;
}
</style>
<script>
require([
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/symbols/WebStyleSymbol"
], function (Map, SceneView, GraphicsLayer, SketchViewModel, WebStyleSymbol) {
// the layer where the graphics are sketched
const graphicsLayer = new GraphicsLayer({ elevationInfo: { mode: "on-the-ground" } });

layers: [graphicsLayer],
});

117
map: map,
camera: {
position: [9.76504392, 46.43538764, 2073.31548],
heading: 226.79,
tilt: 88.35
}
});
const blue = [82, 82, 122, 0.9];

const white = [255, 255, 255, 0.8];
// polygon symbol used for sketching the extruded building footprints

const extrudedPolygon = {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
size: 10, // extrude by 10 meters
material: {
color: white
},
edges: {
type: "solid",
size: "3px",
color: blue
}
}
]
};
// polyline symbol used for sketching routes

const route = {
type: "line-3d",
118
symbolLayers: [
{
type: "line",
size: "10px",
material: {
color: white
}
},
{
type: "line",
size: "3px",
material: {
color: blue
}
}
]
};
// point symbol used for sketching points of interest

const point = {
type: "point-3d",
symbolLayers: [
{
type: "icon",
size: "20px",
resource: { primitive: "kite" },
outline: {
color: blue,
size: "3px"
},
material: {
color: white
}
119
}
]
};
// load the default value from the snapping checkbox

let snappingcheckboxsavedstate = document.getElementById("snappingcheckbox").checked ? true :
false;
// define the SketchViewModel and pass in the symbols for each geometry type
// set the snappingOptions.selfEnabled to the default state
const sketchViewModel = new SketchViewModel({
layer: graphicsLayer,
view: view,
pointSymbol: point,
polygonSymbol: extrudedPolygon,
polylineSymbol: route,
snappingOptions: {
selfEnabled: snappingcheckboxsavedstate
}
});
// after drawing the geometry, enter the update mode to update the geometry
// and the deactivate the buttons
sketchViewModel.on("create", function (event) {
}
if (event.state === "cancel") {
}
});
120
// graphic backup to revert a canceled update process

let updatebackupgraphic;
sketchViewModel.on("update", function (event) {

console.log(event);
if (event.state === "start") {
updatebackupgraphic = event.graphics[0].clone();
}
if (event.aborted) {
// revert to the graphic before starting the update process
graphicsLayer.remove(event.graphics[0]);
graphicsLayer.add(updatebackupgraphic);
}
}
});
const drawButtons = Array.prototype.slice.call(document.getElementsByClassName("starttool"));
// set event listeners to activate sketching graphics

drawButtons.forEach(function (btn) {
btn.addEventListener("click", function (event) {
// to activate sketching the create method is called passing in the geometry type
// from the data-type attribute of the html element
sketchViewModel.create(event.target.getAttribute("data-type"));
});
});
121
document.getElementById("cancel").addEventListener("click", function (event) {

sketchViewModel.cancel();
});
document.getElementById("done").addEventListener("click", function (event) {
sketchViewModel.complete();
});
view.ui.add("sketchPanel", "top-right");
// checkbox to toggle the snapping on/off

document.getElementById("snappingcheckbox").addEventListener("change", function (event) {
snappingcheckboxsavedstate = event.target.checked ? true : false;
sketchViewModel.snappingOptions.selfEnabled = snappingcheckboxsavedstate;
});
// observe the if the CTRL-key got pressed to give the user a visual feedback
// the logic itself for toggling snapping is in the SketchViewModel
view.on(["key-down"], (ev) => {
document.getElementById("snappingctrlkey").style.fontWeight = "bold";
document.getElementById("snappingctrlkey").style.color = "red";
document.getElementById("snappingcheckbox").checked = !snappingcheckboxsavedstate;
}
});
view.on(["key-up"], (ev) => {
document.getElementById("snappingctrlkey").style.fontWeight = "normal";
document.getElementById("snappingctrlkey").style.color = "black";
document.getElementById("snappingcheckbox").checked = snappingcheckboxsavedstate;
}
});
122
// add the checkbox to the bottom-right of the view

view.ui.add("snapping", "bottom-right");
});
</script>
</head>
<body>
<div id="sketchPanel" class="esri-widget">
<div id="startbuttons">
<button id="point" data-type="point" class="esri-
button starttool">Draw a point of interest</button>
<button id="line" data-type="polyline" class="esri-button starttool">Draw a route</button>
<button id="extrudedPolygon" data-type="polygon" class="esri-
button starttool">Draw a building</button>
</div>
<div id="actionbuttons">
<button id="cancel" class="esri-button">Cancel</button>
<button id="done" class="esri-button">Done</button>
</div>
</div>
<div id="snapping" class="esri-widget">
<input type="checkbox" id="snappingcheckbox" checked />
<label id="snappinghint"
>snapping (use
<div id="snappingctrlkey">CTRL-key</div>
to toggle)</label
>
</div>
</body>
</html>
123
: APIGIS JS ‫عمل تحليالت باستخدام‬-11

:‫ حول نقطة محددة‬Buffer ‫انشاء أداة لعمل‬
<html>
<head>
<title> buffers</title>
<style>
html,
body {
padding: 0;
124
margin: 0;
height: 100%;
}
.viewDivBase {
padding: 0;
margin: 0;
height: 100%;
width: 49.9%;
}
#viewDiv2d {
float: left;
}
#viewDiv3d {
float: right;
}
#info {
color: #444;
padding: 5px;
margin: 5px;
width: 120px;
text-align: center;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
.chkLabel {
font-size: 12px;
}
</style>
125
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/geometry/geometryEngine"
], function(Map, SceneView, MapView, GraphicsLayer, Graphic, geometryEngine) {
// Create a 2D MapView and a 3D SceneView
// each referencing the same map with two
// graphics layers
var map = new Map({

basemap: "satellite"
});
// Add two graphics layers to map: one for points, another for buffers
var bufferLayer = new GraphicsLayer();
var pointLayer = new GraphicsLayer();
map.addMany([bufferLayer, pointLayer]);
var viewOptions = {
map: map,
zoom: 3,
center: [0, 60]
};
var view3d = new SceneView(viewOptions);
view3d.container = "viewDiv3d";
view3d.ui.add("info", "top-right");
var view2d = new MapView(viewOptions);
126
view2d.container = "viewDiv2d";
var polySym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [140, 140, 222, 0.5],
outline: {
color: [0, 0, 0, 0.5],
width: 2
}
};
var pointSym = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [255, 0, 0],
outline: {
color: [255, 255, 255],
width: 1
},
size: 7
};
// Indicates whether buffering is enabled
var bufferEnabled = false;
/**
* When the space bar is tapped, then buffering is enabled.
* @param {Object} event - The event object associated with the
* key-down event.
*/
function keyDownListener(event) {
var keyInput = event.key;
127
bufferEnabled = (keyInput === " " || keyInput === "Spacebar") && !bufferEnabled;
if (bufferEnabled) {
document.getElementById("mode").innerHTML = "navigation";
} else {
document.getElementById("mode").innerHTML = "buffering";
}
}
view2d.on("key-down", keyDownListener);
view3d.on("key-down", keyDownListener);
view2d.on("pointer-move", function(event) {
createBuffer(event, view2d);
}
});
view3d.on("pointer-move", function(event) {
createBuffer(event, view3d);
}
});
view2d.on("click", function(event) {
bufferPoint(event.mapPoint);
});
view3d.on("click", function(event) {
bufferPoint(event.mapPoint);
});
128
/**
* Stops propagation on the given event and constructs a point for
* buffering.
*
* @param {Object} event - Event object containing XY screen coordinates.
* @param {Mapview | SceneView} view - View instance from which the point was obtained
.
*/
function createBuffer(event, view) {
// prevent further propagation of the current event bubbling up the event chain.
// in this case, it will prevent default `drag` event behavior for the MapView
// which is to move around the view by dragging the pointer.
event.stopPropagation();
// convert screen coordinates to map coordinates

var point = view.toMap({
x: event.x,
y: event.y
});
if (point) {
bufferPoint(point);
}
}
/**
* Buffers the given point by 560 kilometers.
*
* @param {esri/geometry/Point} point - A point instance to buffer.
*/
function bufferPoint(point) {
129
if (!bufferEnabled) {
console.log("buffering not enabled. Hit the space bar key and click/drag to buffer.");
return;
}
clearGraphics();
// removes z-values from the point when taken from a SceneView.
// GeometryEngine does not support 3D geometries.
point.hasZ = false;
point.z = undefined;
pointLayer.add(
new Graphic({
geometry: point,
symbol: pointSym
})
);
var buffer = geometryEngine.geodesicBuffer(point, 560, "kilometers");
bufferLayer.add(
new Graphic({
geometry: buffer,
symbol: polySym
})
);
}
/**
* Clears all graphics from all GraphicsLayers
*/
function clearGraphics() {
pointLayer.removeAll();
bufferLayer.removeAll();
}
130
});
</script>
</head>
<body>
<div class="viewDivBase" id="viewDiv2d"></div>
<div class="viewDivBase" id="viewDiv3d">
<div id="info" class="esri-widget">
<label class="chkLabel"
>Press <strong>space bar</strong> to enable <strong> <span id="mode">buffering</span
>.</strong> Then click or
move the mouse to buffer.
</label>
<br />
</div>
</div>
</body>
</html>
131
:‫ من نقطة محددة‬viewshed ‫عمل رسم للحصول على‬
<html>
<head>
<title> viewshed </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
top: 18px;
right: 18px;
padding: 12px;
color: white;
width: 200px;
}
</style>

132
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/geometry/Point",
"esri/tasks/Geoprocessor",
"esri/tasks/support/LinearUnit",
"esri/tasks/support/FeatureSet"
], function(Map, SceneView, GraphicsLayer, Graphic, Point, Geoprocessor, LinearUnit, Featur
eSet) {
var gpUrl =
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/ESRI_Elevation_W
orld/GPServer/Viewshed";
var map = new Map({

basemap: "hybrid",
});
var view = new SceneView({

map: map,
camera: {
// autocasts as new Camera()
position: [7.59564, 46.06595, 5184],
tilt: 70
}
});
133
var graphicsLayer = new GraphicsLayer();

var markerSymbol = {
color: [255, 0, 0],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
var fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [226, 119, 40, 0.75],
outline: {
color: [255, 255, 255],
width: 1
}
};
var gp = new Geoprocessor(gpUrl);

gp.outSpatialReference = {
// autocasts as new SpatialReference()
wkid: 102100
};
view.on("click", computeViewshed);
function computeViewshed(event) {
134
graphicsLayer.removeAll();
var point = new Point({

longitude: event.mapPoint.longitude,
latitude: event.mapPoint.latitude
});
var inputGraphic = new Graphic({

geometry: point,
symbol: markerSymbol
});
graphicsLayer.add(inputGraphic);
var inputGraphicContainer = [];

inputGraphicContainer.push(inputGraphic);
var featureSet = new FeatureSet();
featureSet.features = inputGraphicContainer;
var vsDistance = new LinearUnit();

vsDistance.distance = 5;
vsDistance.units = "miles";
var params = {
Input_Observation_Point: featureSet,
Viewshed_Distance: vsDistance
};
gp.execute(params).then(drawResultData);
}
function drawResultData(result) {
var resultFeatures = result.results[0].value.features;
135
// Assign each resulting graphic a symbol

var viewshedGraphics = resultFeatures.map(function(feature) {
feature.symbol = fillSymbol;
return feature;
});
// Add the resulting graphics to the graphics layer

graphicsLayer.addMany(viewshedGraphics);
view.goTo({
target: viewshedGraphics,
tilt: 0
})
.catch(function(error) {
if (error.name != "AbortError") {
console.error(error);
}
});
}
});
</script>
</head>
<body>
<div id="paneDiv" class="esri-widget">Click on map to execute ViewShed GP Task</div>
</body>
</html>
136
:‫ايجاد مسار بين نقطتين‬

<html>
<head>
<title>RouteTask </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
137
#paneDiv {
position: absolute;
top: 10px;
left: 62px;
padding: 0 12px 0 12px;
color: white;
}
</style>

<script>
require([
"esri/Map",
"esri/Graphic",
"esri/tasks/RouteTask",
"esri/tasks/support/RouteParameters",
"esri/tasks/support/FeatureSet"
], function(Map, MapView, Graphic, GraphicsLayer, RouteTask, RouteParameters, FeatureSe
t) {
// Point the URL to a valid route service that uses an

// ArcGIS Online hosted service proxy
var routeTask = new RouteTask({
url: "https://utility.arcgis.com/usrsvcs/appservices/srsKxBIxJZB0pTZ0/rest/services/World/
Route/NAServer/Route_World"
});
138
// The stops and route result will be stored in this layer

var routeLayer = new GraphicsLayer();
// Setup the route parameters

var routeParams = new RouteParameters({
stops: new FeatureSet(),
outSpatialReference: {
// autocasts as new SpatialReference()
wkid: 3857
}
});
// Define the symbology used to display the stops

var stopSymbol = {
style: "cross",
size: 15,
outline: {
width: 4
}
};
// Define the symbology used to display the route
var routeSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [0, 0, 255, 0.5],
width: 5
};
var map = new Map({
basemap: "streets-navigation-vector",
139
layers: [routeLayer] // Add the route layer to the map

});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
center: [-117.195, 34.057],
zoom: 13
});
// Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
view.on("click", addStop);
function addStop(event) {
// Add a point at the location of the map click
var stop = new Graphic({
geometry: event.mapPoint,
symbol: stopSymbol
});
routeLayer.add(stop);
// Execute the route task if 2 or more stops are input
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
routeTask.solve(routeParams).then(showRoute);
}
}
// Adds the solved route to the map as a graphic
function showRoute(data) {
var routeResult = data.routeResults[0].route;
routeResult.symbol = routeSymbol;
routeLayer.add(routeResult);
}
});
</script>
140
</head>
<body>
<div id="paneDiv" class="esri-widget">
<div>
<p>
Click on the map to add stops to the route. The route from the last stop to the newly added
stop is
calculated. If a stop is not reachable, it is removed and the last valid point is set as the star
ting point.
</p>
</div>
</div>
</body>
</html>
141
:‫حساب فرق االرتفاع بين نقطتين‬

<html>
<head>
<title> Elevation </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
top: 12px;
left: 62px;
width: 80%;
padding: 0 12px 0 12px;
border: 1px solid white;
color: black;
}
#resultsDiv {
font-size: 1.2em;
text-align: center;
border-bottom: 1px solid gray;
padding: 10px 0px;
}
142
#activeElevationLayerDiv {
margin: 10px 0;
}
ul #red {
color: rgb(150, 26, 15);
}
ul #green {
color: rgb(21, 150, 15);
}
ul span {
color: black;
}
ul {
margin: 0 0 10px 0;
}
</style>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/geometry/Polyline",
"esri/layers/ElevationLayer",
"esri/core/promiseUtils"
], function(Map, SceneView, Graphic, Polyline, ElevationLayer, promiseUtils) {
// Create elevation layers
var beforeLandslideUrl =
143
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide
_Before_3DTerrain/ImageServer/";
var afterLandslideUrl =
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide
_After_3DTerrain/ImageServer/";
var beforeLandslideLayer = new ElevationLayer({
url: beforeLandslideUrl
});
var afterLandslideLayer = new ElevationLayer({
url: afterLandslideUrl
});
// Create Map and View

var map = new Map({
ground: {
layers: [beforeLandslideLayer, afterLandslideLayer]
}
});
var view = new SceneView({

map: map,
camera: {
// initial view:
heading: 332.8,
tilt: 65.5,
position: {
x: -13563643,
y: 6153016,
z: 577,
spatialReference: {
144
wkid: 3857
}
}
}
});
// Initialize symbols
var afterPointSymbol = {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: "object", // autocasts as new ObjectSymbol3DLayer()
material: {
color: [150, 26, 15]
},
resources: {
primitive: "sphere"
},
width: 8
}
]
};
var beforePointSymbol = {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: "object", // autocasts as new ObjectSymbol3DLayer()
material: {
color: [21, 150, 15]
},
resources: {
primitive: "sphere"
145
},
width: 8
}
]
};
var lineSymbol = {
type: "line-3d", // autocasts as new LineSymbol3D()
symbolLayers: [
{
type: "line", // autocasts as new LineSymbol3DLayer()
material: {
color: [150, 26, 15]
},
size: 1
}
]
};
var resultsContainer = document.getElementById("resultsDiv");
view.on("click", function(event) {
resultsContainer.innerHTML = "Querying elevation...";
// Query both elevation layers for the elevation at the clicked map position
var position = event.mapPoint;
var queryBeforeLandslide = beforeLandslideLayer.queryElevation(position);
var queryAfterLandslide = afterLandslideLayer.queryElevation(position);
// When both query promises resolve execute the following code
promiseUtils
.eachAlways([queryBeforeLandslide, queryAfterLandslide])
.then(function(results) {
var posBeforeLandslide = results[0].value.geometry;
var posAfterLandslide = results[1].value.geometry;
146
// Clear graphics from previous result (if applicable)

view.graphics.removeAll();
// Draw a point graphic for position before landslide
view.graphics.add(
new Graphic({
geometry: posBeforeLandslide,
symbol: beforePointSymbol
})
);
// Draw a point graphic for position after landslide
view.graphics.add(
new Graphic({
geometry: posAfterLandslide,
symbol: afterPointSymbol
})
);
// Draw a vertical line that illustrates the elevation difference
var lineGeometry = new Polyline({
spatialReference: posBeforeLandslide.spatialReference,
hasZ: true
});
lineGeometry.addPath([posBeforeLandslide, posAfterLandslide]);
view.graphics.add(
new Graphic({
geometry: lineGeometry,
symbol: lineSymbol
})
);
// Compute and display the difference in elevation
var elevationDifference = Math.abs(posBeforeLandslide.z - posAfterLandslide.z);
147
resultsContainer.innerHTML = "Elevation difference: " + elevationDifference.toFixed(2) +

" m";
})
.catch(function(error) {
resultsContainer.innerHTML = "Elevation query failed (" + error.message + ")";
});
});
// When both elevation layers are set "visible", the surface is defined by the latter layer (aft
erLandslideLayer).
// Thus we can toggle between "before" and "after" by toggling the visibility of afterLandsli
deLayer.
document.getElementById("elevAfter").addEventListener("change", function(event) {
afterLandslideLayer.visible = event.target.checked;
beforeOrAfter = event.target.checked ? "after" : "before";
});
});
</script>
</head>
<body>
<div id="paneDiv" class="esri-widget">
<div id="resultsDiv">
Click on the map to see the difference in elevation before and after the landslide.
</div>
<div id="activeElevationLayerDiv">
Legend:
<ul>
<li id="green"><span>Surface point before landslide</span></li>
<li id="red"><span>Surface point after landslide</span></li>
</ul>
<input type="checkbox" id="elevAfter" checked />
148
<label for="elevAfter">Show surface after landslide</label>

</div>
</div>
</body>
</html>
149
‫الباب الرابع‪ :‬انشاء تطبيقات الويب بالـ ‪ArcGIS web App Builder‬‬
‫مقدمة‪:‬‬
‫‪ ArcGIS Web App Builder‬تطبيق يتيح إنشاء تطبيقات الويب بسهولة؛ حيث يتضمن أدوات قوية‬
‫لتكوين تطبيقات ‪ HTML‬مميزة باإلضافة الى قابليته للتوسيع من قبل المطورين إلنشاء تطبيقات متخصصة‬
‫خاصة بيباتات نظم المعلومات الجغرافية‬
‫الميزات الرئيسية لبرنامج ‪:Web App Builder‬‬
‫‪ -‬القدرة على انشاء تطبيقات ‪ HTML / JavaScript‬تعمل على متصفحات سطح المكتب واألجهزة‬
‫اللوحية والهواتف الذكية‪.‬‬
‫‪ -‬متكامل مع منصات ‪ ArcGIS Online‬و ‪.ArcGIS Enterprise‬‬
‫‪ -‬انشاء تطبيقات بواجهة مستخدم جاهزة للتحليالت ‪ ،‬مثل االستعالم والمعالجة الجغرافية والطباعة‪.‬‬
‫‪ -‬إطار عمل قابل للتوسيع للمطورين إلنشاء عناصر واجهة مستخدم وموضوعات‪.‬‬
‫بدء العمل مع التطبيق‪:‬‬
‫تحميل ‪ ArcGIS wep AppBuldier‬؛ يتم تصطيبه على الجهاز على النحو التالى‪:‬‬
‫تظهر النافذة التالية‬
‫‪150‬‬
‫‪ :‬يتم وضع ‪ url‬الخاص بصفحتى على االرك اون الين‬
‫ثم تظهر خانة ‪ID‬‬

‫طريقة الحصول على ‪ ID‬الخاص بالتطبيق‪:‬‬
‫اذهب الى صفحتك على ‪ content‬ومنها ‪ Add item‬ثم واختار ‪An application‬‬
‫‪151‬‬
‫فتظهر النافذة التالية‬
‫بعد ملىء الحقول يتم الدخول على ‪setting‬‬
‫‪152‬‬
‫ثم ‪Register‬‬
‫نذهب الى الصفحة ونقوم بنسخ الرابط التالى ؛ مع مراعاة وضع اسم الجهاز‬
‫‪153‬‬
‫يتم نسخ ‪ ID‬الخاص بالتطبيق‪:‬‬
‫ونضعه على النافذة الخاصة بطلب حقل ‪ ID‬؛ تأتى رسالة التسجيل‬
‫يفتح الصفحة التالية ‪:‬‬
‫‪154‬‬
‫اختار القالب المناسب؛‬
‫تظهر نافذة وضع العنوان للتطبيق ووصف التطبيق ؛‬
‫‪155‬‬
‫من ‪ map‬؛ ‪Shoose wep map‬‬
‫يتم اختيار الخريطة"تم رفعها على األكونت الخاص بي كما سبق وأن ذكرنا"‪.‬‬
‫‪156‬‬
‫ندخل على ‪ my contact‬؛ نغير الخريطة الى ‪public‬‬
‫ثم نفتح الخريطة ؛ نقوم بعمل التعديالت المطلوبة؛ ثم بعد ذلك نقوم بعمل ‪save as‬‬
‫يمكن عمل ‪ share‬من نافذة العرض السابقة واختيار‪ New APP‬ومنها ‪ Wep app builder.‬أو أختار‬
‫الخريطة ؛ من النافذة التالية؛‬
‫‪157‬‬
‫يمكن عمل اعدادات على الـ ‪ Layout‬؛ ‪ style‬؛ من ‪Theme‬؛ وعمل تعديالت على الطبقات واالحداثيات‬
‫ومقياس الرسم من ‪ Widget‬كما يمكن إضافة أدوات أخرى كاالستفسار أو القياس ؛ على النحو التالى‬
‫‪158‬‬
‫أو إضافة التحليالت من ‪.Analysis‬كما يمكن وضع أداة للرسم البيانى‪:‬‬
‫‪159‬‬
‫وضع أداة لالستفسار‪:‬‬
‫‪160‬‬
‫وضع أداة للتعديل‪:‬‬
‫‪161‬‬
‫في النهاية يتم عمل ‪ Save‬ثم ‪.Launch‬‬
‫‪162‬‬
‫قائمة المراجع والمصادر‬
:‫المراجع‬
.2017 ‫ ؛‬HTML5 ‫ايمش ؛ عبد اللطيف ؛ نحو فهم أعمق لتقنيات‬-
.‫م‬2014 ‫ ؛‬Java Script ‫إبراهيم ؛ أحمد إبراهيم ؛ المختصر المفيد في لغة‬
ArcGIS " ‫ موسى؛ محمد محمود إبراهيم ؛ الدليل العملى الدارة واستخدام خادم نظم المعلومات الجغرافية‬-
.‫م‬2014 ‫؛‬Server 10
“Google Earth ‫ نوفل ؛ رشا صابر الحوسبة السحابية وتحليل بيانات االستشعار عن بعد الضخمة‬-
.2021Engine”
- ESRI,Getting to know Web GIS, 2015.
- Rene Rubalcava ,Introducing ArcGIS API 4 for JavaScript Turn Awesome
Maps into Awesome Apps, 2017.
- Hussein Nasser , Building web Applications with ArcGIS , 2014.
- Hytham Ahmed Create Wep Map Application whih ArcGIS Server Manager,
,2015.
- Packt Publishing,Building Web and Mobile ArcGIS Server Applications with
JavaScript Master the ArcGIS API for JavaScript, and build exciting, custom
web and mobile GIS applications with the ArcGIS Server Eric Pimpler, 2014.
- Tyler Mitchell,Using open Source GIS Toolkits , Wep Mapping , 2005.
:‫مواقع عبر شبكة االنترنت‬ -

https://developers.arcgis.com/javascript/latest/api-reference/
163
‫نبذة عن المؤلف‬
‫االسم‪ :‬رشا صابر نوفل‪.‬‬

‫محل الميالد‪ :‬سرس الليان ـ محافظة المنوفية ـ‬
‫الحالة االجتماعية‪ :‬متزوجة ‪.‬‬
‫الوظيفة‪ :‬مدرس مادة بقسم الجغرافيا بكلية اآلداب جامعة المنوفية‪.‬‬
‫‪Rashanofal82@gmail.com :Email‬‬
‫المؤهالت العلمية ‪:‬‬
‫درجة الليسانس في اآلداب من قسم الجغرافيا‪ ،‬شعبة خرائط ‪ ، 2002‬بتقدير عام جيد من كلية اآلداب ـ جامعة‬ ‫‪-‬‬
‫المنوفية‪.‬‬
‫درجة الماجستير في اآلداب ( جغرافيا ) بتقدير ممتاز من جامعة المنوفية ‪.2010‬‬ ‫‪-‬‬
‫درجة الدكتوراه في اآلداب ( جغرافيا ) بمرتبة الشرف األولى مع التوصية بالطبع والنشر من كلية اآلداب جامعة‬ ‫‪-‬‬
‫المنوفية ‪.2015‬‬
‫الدورات التدريبية ‪:‬‬
‫دورات فى الحاسب اآللى‪:‬‬
‫‪ ‬دورة ‪. ICDL‬‬
‫‪ ‬دورة ‪. ICTP‬‬
‫دورات فى نظم المعلومات الجغرافية واالستشعار عن بعد‪:‬‬
‫‪Fundamentals of Geographic Information Systems (Gis1).‬‬ ‫‪‬‬

‫‪Advanced Geographic Information Systems (Gis2).‬‬ ‫‪‬‬
‫‪Getting Started with GIS ( ForArc Gis 10) .‬‬ ‫‪‬‬
‫‪Basics of Geography Coordinate Sestems (for Arc GIS10.1).‬‬ ‫‪‬‬
‫‪Using Arc Map in Arc GIS Desktop 10 .‬‬ ‫‪‬‬
‫‪Editing in ArcGIS Desktop 10.‬‬ ‫‪‬‬
‫‪Arc GIS Data Interoperability Basics.‬‬ ‫‪‬‬
‫‪Creating and Sharing Locator Packages (for Arc GIS 10.1).‬‬ ‫‪‬‬
‫‪Field GIS : Collecting and Editing Data Using Arc Pad 10.‬‬ ‫‪‬‬
‫‪Fundamentals of Remote Sensing (Rs1) ‬‬
‫‪164‬‬
‫خامساً‪ :‬المشاركات‪:‬‬
‫‪ ‬المشاركة فى فاعليات مؤتمر سيناء بين الماضى والحاضر والمستقبل خالل الفترة من ‪ 2015/ 19-18‬بكلية اآلداب‬
‫جامعة المنوفية‪.‬‬
‫‪ ‬المشاركة فى فاعليات أول مؤتمر للجيوماتكس فى مصر برعاية المنظمة الدولية للطيران المدنى خالل الفترة ‪24-23‬‬
‫ابريل ‪. 2017‬‬
‫‪ ‬المشاركة بوحدة الجودة بالكلية ضمن فريقها التنفيذى بمعيار ( الهيكل التنظيمى )‪.‬‬
‫‪ ‬المشاركة فى تحكيم مسابقة أنتل للعلوم والهندسة ‪ ISEF‬بإدارة منوف التعليمية ‪2017‬م‪.‬‬
‫‪ ‬المشاركة فى مسابقة أنتل للعلوم والهندسة ‪ ISEF‬لجنة التحكيم ‪2018‬م‪.‬‬
‫‪ ‬المشاركة فى مسابقة الباحث الصغير على مستوى محافظة المنوفية (إشراف بحثى) عام ‪ 2019‬م‪.‬‬
‫‪ ‬المشاركة فى مؤتمر المدن الذكية ‪ Smart City‬والتنمية المستدامة عام ‪. 2019‬‬
‫‪ ‬المشاركة فى المؤتمر الجغرافى الدولى الثالث بكلية األداب جامعة المنوفية " مركز البحوث الجغرافية والكارتوجرافية‬
‫‪.2020‬‬
‫اإلنتاج العلمى‪:‬‬
‫‪ ‬بحث بعنوان العالقات المكانية لجزيرة وراق الحضر والقاهرة الكبرى اإلصدار رقم ‪ 105‬لشهر ابريل ‪ 2016‬من‬
‫مجلة بحوث كلية اآلداب جامعة المنوفية ‪.‬‬
‫‪ ‬بحث بعنوان استخدام تقنيات الجيوماتكس الحديثة فى البحث الجغرافى مقارنة بالطرق التقليدية بالتطبيق على‬
‫الخصائص العمرانية بشياخة حسن عامر القماش" بمدينة شبين الكوم"(الدراسة الميدانية وتحليل البيانات) ‪2017‬م‪.‬‬
‫‪ ‬بحث بعنوان استخدام تقنيات الجيوماتكس والهواتف الذكية لرصد المشاكل البيئية بالتطبيق على مدينة منوف‪.‬‬
‫‪ ‬بحث استخدام تقنيات الجيوماتكس في تقييم مستويات التلوث الضوضائي بمدينة منوف ؛ رشا صابر نوفل ؛‬
‫منى جابر ؛ المؤتمر الدولى الثالث بكلية األداب جامعة المنوفية‪.‬‬
‫كتب للمؤلف‬
‫‪ -1‬الرسم والتحليل ببرنامج )‪ ( (Arc GIS Desktop "10.3" Manual‬الجزء األول)؛ ‪2017‬م‪.‬‬
‫‪ -2‬الرسم والتحليل ببرنامج )‪ ( (Arc GIS Desktop "10.3" Manual‬الجزء الثانى)؛ ‪2017‬م‪.‬‬
‫‪ -3‬استخدام تقنية نظم المعلومات الجغرافية والهواتف الذكية فى الدراسة الميدانية ‪Cloud Manual & Mobile GIS‬‬
‫‪ 2017Data Collection Manual‬م‬
‫‪ -4‬تحليل الصورة الفضائية ببرنامج )"‪ (ENVI Classic 5" Manual‬الجزء األول‪2017 ،‬م‪.‬‬
‫‪ -5‬السلسلة األولى ‪ Arc Tool box‬صندوق أدوات التحليل المكانى ‪ Spatial Analyst Tools‬الجزء األول؛ ‪2017‬م‪.‬‬
‫‪ -6‬دليل استخدام ‪2018 ARCGIS PRO‬م‪.‬‬
‫‪165‬‬
‫‪ -7‬المرئيات الفضائية حكاية نهضة علمية حديثة ‪ 2018‬م‪.‬‬
‫تحليل الشبكات فى نظم المعلومات الجغرافية بالتطبيق ببرنامج ‪Arc GIS‬إصدار ‪10.5‬؛ ‪. 2018‬‬ ‫‪-8‬‬
‫نظم المعلومات الجغرافية "مشروع تطبيقي" ؛ دكتور محمد ربيع قطوش و دكتورة رشا نوفل ‪.2019‬‬ ‫‪-9‬‬
‫‪ -10‬تقنية الليدار ثورة معلوماتية ‪.2019‬‬
‫‪ -11‬نظم المعلومات الجغرافية علم حائر بين العلوم ‪2020 /2019‬م‪.‬‬
‫‪ -12‬التحليالت المكانية في نظم المعلومات الجغرافية ؛تطبيقات على برنامج ‪.2020 Arc GIS‬‬
‫‪ -13‬تحليل المرئيات الفضائية ببرنامج ‪ (ENVI‬تطبيقات عملية على ‪ )ENVI 5.3‬الجزء الثانى ؛ ‪2020‬م ‪.‬‬
‫‪ -14‬البرمجة المكانية بلغتى البايثون ‪ R‬في نظم المعلومات الجغرافية ‪2021/2020‬م‪.‬‬
‫‪ -15‬الف سؤال حول نظم المعلومات الجغرافية "الجزء األول" ‪2021‬م‪.‬‬
‫‪ -16‬الحوسبة السحابية وتحليل بيانات االستشعار عن بعد الضخمة ”‪.2021“Google Earth Engine‬‬
‫هذه الكتب متوفرة على شبكة اإلنترنت (الصفحة الرسمية للدكتورة رشا نوفل)‬
‫‪ Dr.RashaNofal‬د‪ /‬رشا نوفل @‬
‫‪https://www.facebook.com/pg/Dr.RashaNofal/videos/?ref=page_internal.#‬‬
‫‪166‬‬
‫‪167‬‬

بناء تطبيقات الويب فى نظم المعلومات الجغرافيه

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

بناء تطبيقات الويب فى نظم المعلومات الجغرافيه

Uploaded by

Copyright:

Available Formats

‫د‪/‬رشا صابر نوفل‬ ‫بناء تطبيقات الويب يف نظم املعلومات اجلغرافية‬

‫بناء تطبيقات الويب‬

‫يف نظم املعلومات اجلغرافية‬

‫د‪ /‬رشا صابر نوفل‬

‫مجيع احلقوق حمفوظة للمؤلف‬

‫ال يجوز نشر جزء من هذا الكتاب أو طباعته أو نقله‬

‫أو ترجمته بأي طريقة دون موافقة المؤلف الخطية‬

‫بسم اهلل الرمحن الرحيم‬

‫وما أوتيتم من العلم إال قليال‬

‫صدق اهلل العظيم‬

‫إىل روح والدي أسكنه اهلل فسيح جناته‬

‫إىل أمي أطال اهلل يف عمرها‬

‫إىل مثلى األعلى األستاذ الدكتور مجعة داود‬

‫إىل أبنائي أمساء وأدهم‬

‫رقم الصفحة‬ ‫املوضوع‬

‫‪4‬‬ ‫تقديم ‪.‬‬

‫‪5‬‬ ‫فهرس الموضوعات‪.‬‬

‫‪36‬‬ ‫عمل قائمة ‪.menu‬‬

‫‪104‬‬ ‫‪ -9‬إضافة اطار للتعديل على ‪.feature‬‬

‫‪165‬‬ ‫نبذة عن المؤلف‪.‬‬

‫أهمية البرمجة؟ و لماذا نبرمج؟‬

‫عيوب تطبيقات سطح المكتب‪:‬‬

‫‪ -‬ال بد من عمل تحميل التطبيق على جهازي‪.‬‬

‫‪ -‬ال بد من تناسب المساحة مع مساحة الجهاز الخاص بك‪.‬‬

‫تعريف ‪" Server‬السيرفر"‪:‬‬

‫الطريق الى تعلم برمجة تطبيقات الويب‪:‬‬

‫‪ Back- end:‬و ‪Front-end‬‬

‫ولكل منهما متخصص وقد يجمع متخصص بين الوظيفتين‪.‬‬

‫تطبيقات الويب في نظم المعلومات الجغرافية‪:‬‬

‫الباب األول‪ :‬أساسيات ‪ HTML‬و ‪ CSS‬يف برجمة الويب‬

‫فلو ذهبنا الى الكود الخاص به نجده تم تصميمه بالـ ‪Html‬‬

‫أدوات تعلم ‪:HTML‬‬

‫الفرق بين المصطلحات‬

‫‪: HTML5‬تم الدمج بين ‪ CSS , JS ,‬وبين ‪. HTML‬‬

‫‪ : Xhtml‬بها قواعد وقوانين أكثر‪.‬‬

‫مفاهيم أساسية ومصطلحات بـ ‪: html‬‬

‫يمكن أن يحتوى التاج على ثالثة عناصر هي‪:‬‬

‫‪ Element‬مثل ‪.table , title, Font‬‬

‫‪ : Attribute‬وهو الخصائص مثل ‪.color‬‬

‫مثال يوضح الثالث عناصر‬

‫خصائص وعناصر ‪: HTML‬‬

‫وترميز الصفحة والكلمات المفتاحية للصفحة وأى معلومة أخرى ‪.‬‬

‫>‪<title>Document</title‬‬ ‫>‪<title‬عنوان الصفحة الذى يتم عرضه‬

‫>‪<img‬‬ ‫صورة‬ ‫وينقسم الى‬

‫‪ -‬اسم العنصر األساسي المكتوب‪.‬‬

‫الفرق بين المعرف الخاص والعام‪:‬‬

‫‪ :Id‬المعرف الخاص ‪ #id‬ال يتكرر في أي عنصر أخر أما ‪.‬‬

‫‪: Class‬المعرف العام ‪ class‬يتم تك ارره في أي عنصر يحمل نفس الخصائص‪.‬‬

‫معظم خصائص ‪: CSS‬‬

‫الخلفية ( اللون – الصورة – التكرار – الموقع – نوع االرفاق) ‪background‬‬

‫‪font‬‬ ‫النص (النوع‪-‬الحجم‪ -‬العرض)‬

‫‪color‬‬ ‫لون النص‬

‫‪border‬‬ ‫الحد ( اللون والحجم واتجاه الحدود)‬

‫‪margin‬‬ ‫الفراغ الخارجي‬

‫‪padding‬‬ ‫الفراغ الداخلى‬

‫‪text-decoration‬‬ ‫شكل النص (خط أسفله ؛ خط فوقه ؛خط مشطوب عليه)‬

‫‪text-align‬‬ ‫محاذاة النص (يمين – يسار‪-‬وسط)‬

‫‪position‬‬ ‫الموقع (ثابت – مطلق)‬

‫‪display‬‬ ‫العرض(كتلة على الخط – ال شيء)‬

‫‪cursor‬‬ ‫شكل الفأرة‬

‫‪float‬‬ ‫الطفو يمين ويسار‬

‫مكونات الموقع الرئيسية وشكله‪:‬‬

‫جسم الموقع >‪< body‬‬

‫القائمة الرئيسية < ‪< nav‬‬