js dom & js bom

JS DOM & JS BOMدورة .أنيس حكمت أنيس أبو حميد: تقديم

@nees.com2aneeshikmat: البريد اإللكترونيwww.2nees.com: الموقع اإللكتروني

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

[email protected]أنيس حكمت أبو حميد

mailto:[email protected]�

الفهرس

المقدمةمتطلبات الدورةJAVASCRIPT DOM

تعريف الDOM تعريف الHTML DOMHTML DOM METHOD & PropertyJS DOM (methods, property can be used)Finding HTML ElementsChanging HTML & CSSHTML DOM EventsEvent Listener


الفهرس

JAVASCRIPT BOM تعريف الBOMJS PopupJS TimingJS ScreenJS LocationJS HistoryCookiesJS

الخاتمة


المقدمة

الدمد ل الذي علم بالقلم، علم اإلنسان ما لم يعلم، أحمده حمد الشاكرين، وأثني عليه بما هو أهله، والصالة والسالم على معلم الناس الخير، وعلى آله

.وصدبه، وكل من دعا بدعوته واقتفى أثره إلى يوم الدينأما بعد فإن طلب العلم ونشره من أفضل القربات التي يتقرب بها العبد من

ربه، ومن أبرز الطاعات التي تعلي منزلة المسلم، وترفع قدره عند هللا تعالى، ولقد أمر هللا عباده بالعلم والتعلم، والتفكر والتدبر، وحذرهم من

الجهل واتباع الهوى، وبين أن العلم الذي ينفع صاحبه يوم القيامة هو العلم الذي يخلص فيه العبد لمواله، ويبتغي فيه نيل رضاه، ويتأدب فيه بأدب

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

“منقول “ هذا الكالم الجميل [email protected]أنيس حكمت أبو حميد

المقدمة

أحبتي في هللا، في هذه الدورة المتواضعة، سنكمل ما بدأناه في مشوار تعلم، وسيكون موضوع هذه الدورة في جزئين إثنين“الجافا سكربت “ وإتقان

: وهما(1JavaScript DOM(2JavaScript BOM

.نسأل هللا تعالى، أن يوفقنا وإياكم في هذا العمل، وفي كل األعمال الى كل خير


متطلبات الدورة

لكل دورة منهاج ومجموعة من المتطلبات لضمان اإلستمرارية في التعلم، وتدصيل أكبر قدر من المعلومة القابلة للفهم والتطبيق بالشكل الصديح،

: وهنا ستكون متطلبات الدورة هي(1HTML(2CSS(3JS ) معرفة األنواع والمتغيرات والمصفوفات والfunction..الخ (.P:ومتصفح إنترنت ++notepadمدرر نصوص مثل 4)

^_^من هنا ) المتطلب السابق(يمكنك تدميل الدورة الخاصة بالجافا سكربت


http://www.2nees.com/parallex/ar/courses/%D8%AF%D9%88%D8%B1%D8%A9-%D8%AC%D8%A7%D9%81%D8%A7-%D8%B3%D9%83%D8%B1%D8%A8%D8%AA�

JAVASCRIPT DOM(DOCUMENT OBJECT MODEL)

1

JS HTML DOMفأنا أختصرها من JS DOMعندما أتددث عن : مالحظة


DOMتعريف ال

^_^قبل البدء، شاهد هذه الصورة بتمعن، ثم انتقل للشريدة التالية


DOMتعريف ال

^^ واآلن، لنبدأ بتدليل الموضوع بشكل علمي بنائا على الصورة السابقة Document Object Modelهي إختصار لثالث كلمات DOMأوال ال

هي نظام“ ) : W3C(وهي حسب المنظمة العالمية العتماد معايير الويب أساسي ولغة مدايدة تسمح للبرامج ولغات السكربت من الوصول الى

، والتعديل عليه..المدتوى، والبنية التركيبية للملف، والتنسيق: أقسام رئيسية وهي 3الى DOMويتم تقسيم ال .. Dynamicبشكل

1 (Core DOM 2 (HTML DOM 3 (XML DOM


HTML DOMتعريف ال

HTML DOM، يمكننا تخيل تعريف ال DOMإعتمادا على تعريف ال : على أنها HTML DOMويمكن باختصار إعادة صياغة التعريف لل

للتعامل مع جميع عناصر ال W3Cالمعايير التي تم اعتمادها من قبل ال HTMLمن خالل عمليات الدذف واإلضافة والتعديل ، .

،HTML DOMوندن هنا، وبهذه الدورة بصدد الدديث عن التعامل مع ال JSمالحظة، أنني بدديثي عن ) للجزء األول(لذلك ذكرت في الشريدة األولى

DOM فأنا أعنيJS HTML DOM ^_^...


HTML DOMتعريف ال

ما هي األمور التي يمكنني إنجازها بعد تعلم هذا الجزء من الدورة؟ : الجواب هو

من خالل الجافا Dynamicallyبشكل HTMLتغير المدتوى الموجود بال 1). سكربت

. HTMLتغيير التنسيق الخاص بأي عنصر من عناصر ال 2). إضافة عناصر أو مدتوى جديد على الصفدة3). حذف عنصر أو مدتوى من الصفدة4)..تقوم بتصميمه Eventالقيام بدور تفاعلي بين الصفدة وأي 5)إمكانية التعديل أو الدذف أو اإلضافة على أي من خصائص العناصر 6)

)attribute (^_^ واآلن لنبدء على بركة هللا تعالى، في أول موضوع رسمي لنا في هذا الجزء


: قال أبو بكر الصديق رضي هللا عنه، يوم وفاة الدبيب المصطفى صل هللا عليه وسلم

هللا عليه وسلم فإن مدمدا قد مات ومن كان يعبد هللا فإن هللا صل من كان يعبد مدمدا أال حي ال يموت وقال إنك ميت وإنهم ميتون وقال وما مدمد إال رسول قد خلت من قبله الرسل أفإن مات أو قتل انقلبتم على أعقابكم ومن ينقلب على عقبيه فلن يضر هللا شيئا

.يبكونوسيجزي هللا الشاكرين قال فنشج الناس كتاب فضائل الصدابة–من صديح البخاري 3467مقتبس من حديث رقم

فهذا الدبيب المصطفى صل هللا عليه وسلم قد مات، وندن سنموت من بعده، لكن السؤال األهم، الرسول صل هللا عليه وسلم أدى األمانة وبلغ الرسالة ونصح األمة، أدى مهمته

ونشهد له بذلك أمام هللا تعالى، لكن هل قدمنا ندن أعمال تدقق الهدف من خلقنا ؟ . اللهم آمين.. نسأل هللا تعالى أن تكون أعمالنا في سبيل ما خلقنا من أجله

خاطرة


HTML DOM METHOD & Property

(1Method : هي الAction الذي سأقوم باستخدامه للوصول أو تدديد. HTMLالعنصر الموجود في صفدة ال

(2Property : هي القيمة التي يمكننا جلبها من عنصرHTML أو تعديلها^_^ ... HTMLعلى عنصر ال

: ^_^لنشاهد مثاال ذلك تستخدم لجلب البيانات أو تعديلها من عنصر innerHTML: 1مالحظة HTMLHTMLتستخدم للبدث وتدديد عنصر getElementById: 2مالحظة

..^_^ الخاص به IDمن خالل


HTML DOM METHOD & Property

:مثال

getElementByIdالحظ هنا أن ال حسب التعريف وأن Methodهي ال

هي التي innerHTMLال Property“ قيمة “ احتوت على


JS DOM (methods, property can be used)

التي يمكننا methodsاآلن، سنتطرق بإذن هللا تعالى، الى مجموعة من أشهر بجزئياتها المختلفة نذكر HTMLلتغيير عناصر ال JSاستخدامها مع ال : منها مع الوظيفة

سنتطرق بإذن هللا تعالى، الى أمثلة تشرح هذه الدوال بعد ذلك أو في: مالحظة. ^_^المواضيع القادمة إن شاء هللا تعالى

(1Method نستخدمها للبدث عن عنصر في صفدة الHTML وهي :(1document.getElementById() وتستخدم للبدث عن عنصر من خالل الID(2document.getElementsByTagName() وتستخدم للبدث عن عناصر

” ul“ مثل tagحسب اسم ال (3document.getElementsByClassName() وتستخدم للبدث عن عناصر

”className“تدتوي كالس معين مثل



(2Method نستخدمها للتغير على عناصر الHTML وهي :(1element.innerHTML : وتستخدم لجلب مدتوى عنصر الHTML أو تغييره.(2element.attribute : وتستخدم لجلب قيم الAttribute الخاصة بعنصر

HTML على شكلNamedNodeMap object .(3element.setAttribute(attribute,value) : وتستخدم إلضافةAttr الى

.classNameمع تدديد قيمتها مثل اضافة كالس باسم HTMLعنصر لكن .. الخ ..hasAttrو ..getAttrبكل تأكيد ستجد هناك وسائل مثل : مالحظة

الموضوع هنا تغيير قيمة العنصر، ومن ثم بكل تأكيد لن أتطرق لكل الدوال التي يمكن . استخدامها، فيمكنك البدث عنها بذاتك

(4element.style.property : وتستخدم هذه لتغير التنسيق)style ( الخاص بعنصر. HTMLما على صفدة ال



(3Method نستخدمها إلضافة أو حذف عناصر الHTML وهي:(1document.createElement() : تستخدم إلنشاء عنصرHTML جديد.(2document.removeChild() : وتستخدم لدذف عنصرHTML.(3document.appendChild() : وتستخدم إلضافة عنصرHTML على عنصر

. موجود(4document.replaceChild() : وتستخدم الستبدال أحد عناصر الHTML

.بعنصر آخر(5document.write(text) : تستخدم هذه الدالة إلضافة مدتوىHTML ) بالtag (

، وغالبا ما تستخدم هذه لغايات HTMLأو بدون، أو إضافة سكربت كود الى صفدة ال . TESTال



: HTML DOMالى Events Handlersإضافة 4)(1document.getElementById(id).onclick=function(){code} :

المراد، ومن ثم تنفيذ “ idال “ وتستخدم هذه الصيغة للبدث عن عنصر الذي يدتوي ^^ onclick eventما بنائا على ) function(أمر معين

. Clickمكان ال Eventوغيرها من ال onchangeبنفس األسلوب يمكننا إستخدام 2)

، أو إظهار) التدقق من األخطاء( Validationمن األمثلة على إستخدام هذه العمليات، ال الخ) ..collapse(نصوص وإخفائها



(5HTML DOM Object تدتوي من الDOM 1 العديد من، لنشاهد ^_^ Objectالخصائص التي يمكننا استخدامها عن طريق ال

: ^^أهمها (1document.anchors : وتستخدم لجلب جميع ال “<a> “ من الصفدة والتي قد

.^^ achorsبعد ال lengthتدتوي صفة ما، ترتيب ما، أو حتى عددهم باستخدام (2document.baseURI : تستخدم لجلب الرابط)Absolute URI ( الخاص

. بالصفدة(3document.body : تستخدم لجلب ال<body></body> وما يدتويه^^.(4document.cookie : هذه الخاصية المهمة تستخدم السترجاع جميع الcookie

. ^_^الخاصة بي (5document.doctype : تستخدم إلرجاع نوع الdoctype الخاص بالصفدة^^.(6document.documentElement : تستخدم إلرجاع<html></html>

.وما تدتوي



HTML DOM Objectتابع 5)(7document.documentURI : تقوم على ارجاع الرابط الخاص بموقع ملف

..معين، وتعمل على جميع أنواع الملفات(8document.domain : تقوم على إرجاع الدومين الخاص بالموقع مثل

nees.com2www. ^_^(9document.embeds : تقوم على إرجاع جميع ال<embed> في الصفدة.

(10document.forms : تقوم على إرجاع جميع ال<form> في الصفدة.(11document.head : تقوم على إرجاع ال<head></head> في الصفدة وما

.تدتويه(12document.images : تقوم على إرجاع جميع ال<images> في الصفدة.(13document.inputEncoding : هذه الخاصية الجميلة ترجع الEncode

الخ..ISOأو UTF-8: الخاص بالصفدة مثل


http://www.2nees.com/�


HTML DOM Objectتابع 5)(14document.links : تستخدم هذه إلرجاع جميع العناصر من نوع.<a> أو

<area> والتي تدتوي علىhref ^_^.(15document.scripts : تستخدم هذه الدالة إلرجاع جميع ال

<script></script> المستخدمة في صفدة الHTML .(16document.title : تقوم على إرجاع العنوان الخاص بالصفدة من الtag

<title>.(17document.URL : تستخدم هذه إلرجاع الURL الخاص بالملف .

، كماURNوال URLوال URIيمكنك البدث عن الفرق بين ال : وظيفة لك: مالحظة. ^^التي قمت باستخدامها لجلب الروابط objectيمكنك البدث عن الفرق بين



، لكن قبل اإلنتقالP! :_!واآلن يا صديقي العزيز، لننتقل الى الخطوة التالية لنستعرض بعض األمثلة على ما ذكرنا، وبكل تأكيد لن أقوم بتنفيذ جميع ما

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

دون العودة الى..^_^الشرح مجددا

: مثالهل يمكنك كتابة (

الشيفرة البرمجية الخاصة بهذه النتيجة

قبل اإلنتقال)للشريدة التالية؟



: الشيفرة البرمجية الخاصة بالشاشة السابقة

Consoleال تنسى مشاهدة ال


أعوذ بال من الشيطان الرجيم

قل إن صالتي ونسكي ومدياي ومماتي ل رب العالمين ال شريك له وبذلك أمرت { .} وأنا أول المسلمين

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

خاطرة


Finding HTML Elements

وكيفية إستخدامها، وبعد شرح الفكرة methodبعد حديثنا المتواضع عن ال العامل لكل تصنيف قمنا بذكره، ننتقل الى تخصيص عملية الشرح حسب كل

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

وباختصار، فإن هذا الموضوع سيتددث عن البدث والوصول الى عناصر الHTML وما سيتم استخدامه من خصائص هي ال ^^ بالصفدةID والكالس

.. Html Objوال Css selectorوال Tagوال



: IDمن خالل ال : أوال



: Tag Nameكم خالل ال : ثانيا[email protected]أنيس حكمت أبو حميد


من خالل : ثالثاClass Name :



من خالل : رابعاquery

Selector All :



من خالل : خامساHTML Object

Collections: أنيس حكمت أبو حميد[email protected]


هل رأيت سهولة وجمال األمر، بكل بساطة كل ما عليك القيام به هو^_^ استخدام ما تعلمناه من دوال، ومن ثم اإلنطالق واإلبداع ضمن هذا العالنم،واآلن أرجوا أنك قمت بتطبيق جميع األمثلة السابقة، واال فلن تستفيد خبرة

!!برمجية

اذا قمت بتنفيذها أو قد واجهت مجموعة من األخطاء، فل تشاهد تطبيق لجميع: األمثلة السابقة


وإياك وإياه***فال تصدب أخا الجهل حليما حين آخاه*** فكم من جاهل أردىإذا ما المرء ماشاه***يقاس المرء بالمرء

مقاييس وأشباه*** و للشيء من الشيءدليل حين يلقاه***وللقلب على القلب

هللا عنه وأرضاهأبي طالب رضي علي بن

خاطرة


Changing HTML & CSS

من أشهر األمثلة التي استخدمناها بكثرة في هذه: Changing Html: أوال: ، واآلن لنطلع عليى غيرها^_^ innerHTMLالدورة والى اآلن ال

(1document.write() : تددثنا سابقا أن هذه الدالة تستخدم للكتابة على) جافا سكربت(ويمكن ان تقوم بتنفيذ شفرة برمجية HTMLصفدة ال

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

). المدتوى القديم


Changing HTML & CSS

يمكننا تغير أيضا القيمة الخاصة ب : Attributeتغيير القيمة الخاصة ب 2)Attr والصيغة العامة لذلك هي^_^، فالتعديل ال يقتصر على المدتوى ، :

document.getElementById(id).attribute=new [email protected]أنيس حكمت أبو حميد : مثال

Changing HTML & CSS

لتغيير خصائص DOMهنا سنقوم باستخدام ال : Changing Css: ثانياstyle، وبكل بساطة األمر ال يتعدى سوى إضافة ^_^التنسيق لعنصر ما

^_^ : ، شاهد الصيغة العامة^^ومن ثم التنسيق المطلوب document.getElementById(id).style.property=new style

[email protected]أنيس حكمت أبو حميد : مثال

Changing HTML & CSS

: واآلن لنشاهد ناتج تطبيق األمثلة السابقة معا

ال تستعرض الشيفرة البرمجية قبل مداولتك تنفيذ أو تطبيق ما تم ذكره في() الشرائح السابقة


HTML DOM Events

صفدات الويب تدتوي العديد من األمور التفاعلية بينها وبين المستخدم، مثلالخ، وهذا....النقر على أزرار وروابط وتدديد نصوص وتدريك مؤشر الفأرة

التي Actionحتى يتسنى التدكم في هذه ال Scriptاألمر يتطلب تدخل ال .. ^_^ Eventقام بها المستخدم ، وهذا ما يسمى بال

) P )onclick:األكثر شهرة Eventواآلن لنشاهد مثاال على إستخدام ال

قبل النقر بعد النقر


HTML DOM Events

: التي يمكننا إستخدامها eventواآلن لنشاهد بعضا من ال (1onchange : عندما يددث تغيير على عنصر الhtml )التي تقبل اإلدخال (

.textboxمثل الكتابة داخل (2onmouseover : ينطلق هذاEvent عندما يمر مؤشر الفأرة فوق عنصر

.HTMLال (3onmouseout : ينطلق هذا الEvent عندما يصبح مؤشر الفأرة خارج

. العنصر(4onmousedown : ينطلق هذا الEvent ،عندما يتم النقر على زر الفأرة

التالي Eventوينتهي عندما ترفع أصبع يدك على الفأرة لينطلق ال (5onmouseup : ينطلق هذا الEvent مباشرة بعد عند ترك األصبع للزر )

).Downبعد عملية الضغط clickثم upثم downترتيب عمليات النقر على زر الفأرة يتم أوال : مالحظة


HTML DOM Events

(6onfocus : ينطلق هذا الEvent عندما يتم تدديد عنصر الhtml .بإذن هللا Eventsسيتم عرض مثال لتتضح الفكرة بعد ذكر بعض ال (

).تعالى(7onload : ينطلق هذا الEvent بعد اإلنتهاء من تدميل عنصر ال

HTML المراد .(8onkeydown : ينطلق هذا الEvent عند الضغط على أحد أزرار

) عندما يصبح زر لوحة الفاتيح باألسفل(لوحة المفاتيح (9onkeyup : ينطلق الEvent عندما يصبح زر لوحة المفاتيح في

.األعلى(10onkeypress : ينطلق هذا الEvent ،عند الضغط على لوحة المفاتيح

فيستثى مثال (لكن هذه الخاصية ال تعتمد جميع أزرار لوحة المفاتيح shift, ctrl, alt..الخ (


HTML DOM Events

(11onblur : ينطلق هذا الEvent عند مغادرة عنصر الHTML ) onfocusبمعنى آخر، الددث المقابل لل (

(12onsubmit : ينطلق هذا الEvent عند الضغط علىSubmit ).Form) .When Form Is Submittedالخاصة بال

(13oncopy : ينطلق هذا الEvent عند القيام بعملية الcopy لنصأو من خالل الفأرة ctrl & c(بأي طريقة من الطرق الثالث ^_^ معين

). أو المتصفح(14onscroll : ينطلق هذا الEvent عند القيام بعمليةscrolling .(15onresize : ينطلق هذا الevent عند القيام بتغيير حجم شاشة العرض

. documentلل


HTML DOM Events

التي ذكرنها هي جزء من كل، أي يوجد هناك الكثير من ال Eventsهذه ال Events غيرها، وحاولت اإلقتباس هنا من كل جزئية بعض الevents

Clipboardفمثال من ال Event قمت بأخذ الoncopy وهناك مثالonpaste لذلك أريد أن تبدث عن ال ^_^لم أتطرق لها ،Events

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

بإذن هللا تعالى، مع بعض المالحظات ومثال على جزء مما ذكرنا منEvents ^_^..


HTML DOM Events

: مثل JS DOMمعين من خالل Eventل assignيمكنك عمل : مالحظةdocument.getElementById(“btn").onclick = yourScript;

: واآلن لنشاهد مثال على ما ذكرنا وتطرقنا اليه


HTML DOM Events

: HTMLصفدة ال


HTML DOM Events

: الجافا سكربت في الصفدة[email protected]أنيس حكمت أبو حميد

هل تعرف من هو بيري ريس ؟هو بدار مسلم، استطاع رسم خرائط تشمل معظم أجزاء العالم، خرائطه هذه وضعت

عام من 27علماء الغرب في ورطة، ألن بيري ريس انتهى من رسم الخريطة قبل ، ” أنتيليا“ وكانت تسمى بخرائطهم ب !! اختشاف كولومبوس للقارة األمريكية

واألعجب من هذا أن دقة هذه الخرائط، جعلتهم يتددثون أن هناك رجال فضاء ساعدوهم ، ألن هناك تطاق بين هذه الخرائط وبين صور األقمار الصناعية “ههههه “ في هذا

! بشكل مخيف !

والسؤال المهم، من أرسل كولومبوس في هذا الوقت الى أمريكا ؟ وما هي توجهاته ؟ وما الذي قام بفعله هؤالء بالهنود الدمر؟، ولماذا؟

! مجرد أسئلة بريئة

خاطرة


Event Listener

addEventListener() تستخدم هذه الدالةJS DOM إلعطاء عنصرالتي تعلمناها Event/sأحد أو مجموعة من ال HTMLمن عناصر ال

وذكرناها سابقا، وتتميز هذه الدالة بإمكانية لنفس العنصر ودون أن يتم عمل Event Clickيمكنك إضافة أكثر من 1)

override بمعنى آخر لو فرضنا أن هناك رابط !لألول ،x وقمت ،وال “ أنيس “ األول يقوم بطباعة clickباستخدام هذه الدالة إلضافة

click أنيس “ ، فسيقوم بتنفيذ وطباعة “حكمت “ الثانية تقوم بطباعة. xعند الضغط على الرابط “ حكمت

لنفس العنصر، يعني Eventيمكنك من خالل إستخدامها وضع أكثر من 2).الخ، وذلك من خالل السكربت..click, onfocus, oncopyمثال


Event Listener

، وال نكتفي windowمن خاللها مع ال Eventيمكننا أيضا استخدام ال 3)^_^ HTMLفقط بعناصر ال

أيضا من مزايها أنها أسهل في التدكم، والتعديل، ووضوح الشيفرة 4).^_^البرمجية من الطريقة التقليدية

الذي عملت عليه فقط من Event Listenerويمكنك بسهولة حذف ال 5)()removeEventListenerوهي ^_^ خالل جملة واحدة

) هذه نتائج المثال: (واآلن لنشاهد مثاال


Event Listener

: الشيفرة البرمجية


Event Listener

: 2مثال [email protected]أنيس حكمت أبو حميد

Event Listener

:3مثال

الى ال Event Listenerسنقوم بارسال قيم من خالل ال (في هذا المثال Function المراد استخدامه، وهذا أمر مهم، فإذا دققت النظر في األمثلة

بعد اسم ال () السابقة ستجد أننا لم نرسل متغيرات، ولم نقم حتى بوضع function لذلك انتبه لهذه النقاط ..^_^الذي نقوم باستدعائه. ^_^


Event Listener

^_^)Capturing Event Propagationأم ( Bubbling: 4مثال وهذه ال <p>عندما يقوم المستخدم بالنقر على نص معين موجود داخل

<p> موجودة داخل<div> هل سيتم تنفيذ ال ،click علىp فقط ؟ أم علىdiv فقط ؟ أم سيتم تنفيذ الclick علىp ثمdiv . ؟ أم سيتم تنفيذ الclick؟ pثم divعلى

ما رأيك صديقي في الموضوع؟ وهل تراه مهما ؟ إن هذا الموضوع صديقي مهم وجميل جدا للتدكم في مجموع العمليات التي

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

...^_^ترغبها من خالل الشيفرة البرمجية الخاصة بك


Event Listener

Bubbling : هذه تعني أن سير العمل لتنفيذ الEvent ) وليكنclick (إذا تم.p -> div: النقر على النص بالشكل التالي

Capturing : هذه تعني أن سير العمل لتنفيذ الEvent ) وليكنclick (اذا. div -> p: تم النقر على النص بالشكل التالي

,addEventListener(event: الصيغة اإلفتراضية هي function, propagation);Propagation : الدالة اإلفتراضية هيfalse )Bubbling ( وture تعني

capturing ^_^: وظيفة

أو divدون ال Eventوتنفيذ ال pبخصوص التدكم بخيار الضغط على ال ، فهذا يكون من خالل البدث والقرائة) No Action(العكس، أو الغاء فعالية النقر

()preventDefaultأو ()stopPropagation..عن إحدى هذه المواضيع


Event Listener

: 4واآلن نعود لمشاهدة المثال [email protected]أنيس حكمت أبو حميد

Event Listener

، والصيغة العامة لهremoveEventListenerوآخر مثال وهو عن ال عليك كتابة Event، وعندما ترغب بدذف addEventListenerتشبه ال

: شاهد المثال... addبذات الطريقة الخاصة بال removeال

1مثال 2مثال


المبين، ال إله إال هللا العدل اليقين، ال إله إال هللا ربنا ورب آبائنا الدق ال إله إال هللا الملكاألولين، سبدانك إني كنت من الظالمين، ال إله إال هللا وحده ال شريك له، له الملك وله الدمد يديي ويميت، وهو حي ال يموت، بيده الخير، وإليه المصير، وهو على كل شيء قدير، ال إله إال هللا إقرارا بربوبيته، سبدان هللا خضوعا لعظمته، وال حول وال قوة إال بال العلي العظيم، ال إله إال هللا الملك المبين، ال إله إال هللا العدل اليقين، ال إله إال هللا

.وحده ال شريك له، له الملك وله الدمد وهو على كل شيء قدير

خاطرة


JAVASCRIPT BOM(BROWSER OBJECT MODEL)

2


BOMتعريف ال

، وهذه تعني الدوالBrowser Object Modelهي إختصار ل BOMال والخصائص الموجودة في متصفح اإلنترنت، والتي تسمح للجافا سكربت

..^_^بالتعامل معها وبما أن التعامل هنا يعتمد على متصفح اإلنترنت، فهذا يعني أن ما هو موجودفي متصفح ما، ليس بالضرورة أن يكون موجودا في متصفح آخر، وهذا يعني

، لكن مع هذا فإن الخاصية“ BOMال توجد معايير رسمية لل “ أيضا باألهمية بمكان، ولهذا فإن المتصفدات وخصوصا الرئيسية منها، تداول

واآلن لنبدء على بركة.. ^_^ الدفاظ على ما يتم استخدامه بكثرة في الغالب *_* BOMهللا تعالى، بدراسة هذه الجزئية، ولنبدء بالغوص في ال


BOMتعريف ال

^_^ بشكل سهل BOMواآلن شاهد هذه الصورة، والتي توضح مفهوم ال


BOMتعريف ال

أول مالحظة خطرت ببالك اآلن، وبعد مشاهدة الصورة السابفة كيف لل Window أن تكون فيparent لكل منdocument وما تعلمناه عن ال

HTML DOM وعن الBOM نفسه وما تتعلق به من خصائص، وعن^^window، والجواب بكل بساطة يكمن في تعريف ال ^_^الجافا سكربت

تم دعمه من جميع المتصفدات، ويدتوي على objectهي windowال باإلضافة ) Global method & property(أشهر الدوال والخصائص

، والتي من خاللها يتم تمثيلها لك من خاللfunctionالى المتغيرات، وال نافذة المتصفح، وجميع هذه العناصر من متغيرات ودوال وغيرها، تصبح

window object ^_^:Pبشكل تلقائي كعضو داخل ال


BOMتعريف ال

:واآلن أريدك أن تعطيني رأيك بهذه الصيغةwindow.document.getElementById("header");

هل تشبه صيغة تعرفها؟ ؟ ;document.getElementById("header")وهل تختلف عن

الجواب ال تختلف، والسبب في ذلك يعود أننا قلنا في خضم حديثنا ال window هي الparent وأنها تمثلobject وأن ما تدتها يصبح تلقائيا

^_^، وبهذا فإن الثانية هي ذاتها األولى ^_^.. objectتابع لهذا ال


JS Popup

وتعرفنا window، في التعريف قمنا بالدديث عن ال ^_^ Windowال ل والخصائص التي يمكننا إستخدامها، hعليها، واآلن لنتددث عن أشهر الدو

JSهو ال objectوأول ..windowوالتي تندرج بالنهاية تدت موضوع ال Popup

(1alert() : تستخدم هذه إلظهار رسالة على شكلPopup ^_^ .(2confirm() : تستخدم هذه إلظهار رسالة على شكلPopup فيها

. ^_^أزرار للتأكيد أو اإللغاء (3prompt() : تستخدم هذه إلظهار رسالة على شكلPopup وتدتوي ،

. على مربع نص إلدخال قيمة، مع زر للموافقة واإللغاء


JS Popup

: ^_^واآلن، لنشاهد مثاال معا [email protected]أنيس حكمت أبو حميد

JS Timing

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

: دالتين مهمتين وهما(1setInterval() : ،تستخدم هذه الدالة لتنفيذ شيفرة برمجة مرة تلو المرة

دون توقف بنائا على فترة زمنية مدددة، تقوم أنت كمبرمج بتدديدها، كما ^^ أنه يتوفر لك خيار برمجي آخر إلنهاء هذا التكرار في لدظة معينة

: والصيغة العامة هيsetInterval("javascript function", milliseconds);

، ^^موجودة لكن قمنا بدذفها لجواز ذلك windowوبكل تأكيد فإن ال ، ولن أذكرك بهذه المعلومة مرة alertكما ذكرنا سابقا وكما فعلنا مع ال

P:أخرى [email protected]أنيس حكمت أبو حميد

JS Timing

:setIntervalمالحظات على javascript“نجد أن Functionبالصيغة العامة لهذا ال 1)

function ” تعني أنك يجب أن تستخدمfunction وال يجوز استخدام. ^_^ functionغير ال

(2Milliseconds هو الوقت المطلوب لكل دورة) أي الوقت الالزم ليتم 1، فهذا يعني 1000تنفيذ الشيفرة البرمجية في كل مرة، فلو قمنا بوضع

. ^_^ثانية، أي أن الشيفرة البرمجية سيتم تنفيذها كل ثانية مرة واحدة )1000 ms =1s (

والصيغة العامة setIntervalإليقاف ال ()clearIntervalتستخدم 3)، وال clearInterval(intervalVariable): لها هي

intervalVariable هذه تعني المتغير الذي اسند اليه دالة الوقت مثلintervalVariable = setInterval(”…”, 2000);


JS Timing

.2setTimeout() : تقوم هذه الدالة على تنفيذ الشيفرة البرمجية التيتدتويها لمرة واحدة فقط، ويتم تدديد الوقت الالزم حتى يتم تنفيذ الشيفرة

..أيضا msالبرمجة بال : الصيغة العامة

setTimeout("javascript function", milliseconds);

ينطبق هنا setIntervalبكل تأكيد ما تم ذكره من مالحظات على أيضا، لكن الدالة المسؤولة هنا عن الغاء هذا المؤقت هو

clearTimeout(timeoutVariable)^_^ JS Timingلنذهب ونشاهد أمثلة متنوعة على ال ..واآلن


JS Timing

: مثال

فعليك clearTimeoutإذا أردت تطبيق المثال على مباشرة بعد Clear Time Outأن تنقر على زر ال

) P:ثواني فقط 3تملك ( Start Timeالضغط على


اللهم قونا بالدق وللدق وفي الدقوأعذنا من شرور أنفسنا

سبدانك اللهم وبدمدكأشهد أن ال إله إال أنتأستغفرك وأتوب إليك

خاطرة


JS Screen

لجلب المعلومات الخاصة بشاشة العرض للمستخدم، Objectيستخدم هذا ال .^_^وأهم هذه المعلومات هي اإلرتفاع والعرض الخاص بالشاشة

: الخصائص التي سنتددث عنها(1screen.width :وتستخدم هذه لجلب العرض الخاص بالشاشة بالبكسل.(2screen.height:وتستخدم هذه لجلب اإلرتفاع الخاص بالشاشة بالبكسل(3screen.availWidth وscreen.availHeight تستخدم هذه لجلب

الكن يتم طرح الدجم الخاص “ اإلرتفاع والعرض الخاص بالشاشة بالبكسل windowsببعض مزايا العرض لنظام التشغيل مثال من الدجم، مثل ال

taskbar ^_^^_^ : انتقل للشريدة التالية لمشاهدة المثال..واآلن


JS Screen

: مثال


JS Location

، وإعادة)URL(لجلب العنوان الخاص بالصفدة objectيستخدم هذا ال توجيه الصفدة الى صفدة أخرى، كما يمكن الدصول على معلومات مدددة

^^الخاص بالصفدة pathوال host nameمثل ال URLمن ال

: واآلن لنشاهد أهم الدوال التي سنقوم باستخدامها(1location.href : تستخدم لجلب الURL الخاص بالصفدة.(2location.hostname : تستخدم لجلب الhostname مثل

nees.com2www.(3location.pathname : تستخدم لجلب الpath الخاص بملف

/js/aneesCustomScript.js


http://www.2nees.com/�

JS Location

(4location.protocol : يستخدم لجلب الprotocol الخاص بالصفدة^_^ httpمثل

(5location.assign() : تستخدم لعملload لملف آخر في الملف... الدالي

: 1مثال : واآلن لنشاهد األمثلة


JS Location

:2مثال

الذي أنا فيه، documentفي ال 2nees.comل loadهنا سيتم عمل للرجوع في المتصفح خطوة backوهذا يعني أنه سيمكنني الضغط على زر ! location.replaceللخلف، وهذا ما يختلف عن استخدام ال

location.replace تقوم بتبديل نفس الdocument الذي أنا فيه، وهذا يعنيbackوبهذا لن يكون هناك زر hestoryالخاص بال Sessionعدم تخزين ال

^_^


JS Location

:3مثال

^_^ شاهد كيف يمكنك إعادة توجيه الصفدة الى الرابط الذي ترغب به ^_^ واآلن، لنشاهد جميع األمثلة معا


JS History

الخاص بالمتصفح، وطبعا Historyيدتوي على ال objectهذا ال ولخصوصية هذا األمر خصوصا لدى المستخدمين، فإنه قد يدتوي نوعا من

Session Historyالقيود في حرية الوصول الى الروابط المدفوظة في ال : يمكننا إستخدامها وهما method 2وهناك

(1history.back() : وهذه تستخدم للرجوع الى الصفدة السابقة) أي). في المتصفح backتعمل كما يعمل زر

(2history.forward() : وهذه تستخدم للذهاب للصفدة التالية) صفدةفي forwardكنت فيها ثم عدت الى صفدة قبلها، وتشبه عمل زر

^_^ واآلن لنذهب ونشاهد مثاال ... ^_^ ) المتصفح


JS History

:مثال

لتطبيق المثال، أوال قم بالضغط على زر إعادة التوجيه، ثم قم بالضغط على زرBack ... بعد ذلك قم بالضغط على زرGo Forward ^_^


اللهم قونا بالدق وللدق وفي الدقوأعذنا من شرور أنفسنا

سبدانك اللهم وبدمدكأشهد أن ال إله إال أنتأستغفرك وأتوب إليك

خاطرة


JS Cookies

هذا الموضوع مهم جدا، فهو يتددث عن الكعكات، والكعكات طعام لذيذ مع^_^ P:بعتذر شكلي رحت لموضوع ثاني ! _! P:الشاي

TXT fileهي مجموعة من البيانات التي يتم تخزينها في ملف Cookiesال ، وسبب إبتكار هذه الفكرة الرائعة،userعلى جهاز الداسوب الخاص بال

الداجة الى طريقة نستطيع من خاللها الدصول على المعلومات الخاصةلل shutdownبالمستخدم بعد مغادرته للموقع، ألن السيرفر سيقوم بعمل

connection عندما يتم اإلنتهاء من عرض البيانات على المتصفح، وبهذاحفظ معلومات المستخدمين، لتقديم “ الرئيسي هو Cookiesيكون دور ال

معلومات المستخدمين قد تكون المعلومات التي يضعها الموقع للمستخدم (أفضل خدمة) P:ولن أتددث هنا عن الجانب السلبي .... ( ”) لتقديم خدمة أفضل


JS Cookies

داخل الملف؟ Cookiesكيف يتم حفظ ال - Nameداخل الملف على شكل Cookiesيتم حفظ ال Value بديث يمثل

اإلسم الذي يمثل المعلومة التي نرغب باستدعائها (اإلسم البرمجي Nameال . ^_^هي القيمة الخاصة بهذا اإلسم Value، وال ) userNameمثل

: cookiesمثال على name = Anees

age = 24email = [email protected]


JS Cookies

وهو Cookiesواآلن، لنبدأ حديثنا حول الموضوع األول في ال : Create a Cookie: أوال

من خالل الجافا سكربت، وذلك عن طريق استخدام Cookieيمكننا إنشاء ال document.cookie األمر سهل، لكن قبل أن أكمل، ما هو رأيك بال ،document.cookie .. هل هيDOM أمBOM ؟

، BOMبذاته Cookie، ال ^_^بكل تأكيد DOMالجواب يجب أن يكون لكن ما نستخدمه لندفظ المعلومات من الصفدة وغيرها من العمليات سيكون

) وجب التنبيه(^^ .. DOMأي سيكون documentمن خالل ال


JS Cookies

يمكنك التدكم بعدة أمور، مثل المدة الزمنية لهذا ال cookiesعند إنشاء ال Cookie وامتداد الصفدة الخاص بهذا ال ،Cookieويمكن تدديد ال ،

Domain ويمكن تدديد ان هذا ال ،Cookie ال يجب أن يعمل الى مع الSecure Protocol مثل الHttps وطبعا جميع هذه االمور خيارات ،

– Nameإفتراضية، تلزم أنت فقط ب ال Value ^_^

): انتبه جيدا لما ورد فيه، ثم انتقل للشريدة التالية: (مثال


JS Cookies

: مالحظات. Cookieأول صيغة هي الصيغة األبسط، واإلزامية إلنشاء أي 1)، والحظ أن طريقة التعريف Expire dateثاني صيغة قمنا بتدديد ال 2)

.expireللفصل بين الخيارات، ومن ثم وضعنا ال ;تتم من خالل كتابة ، )وكالهما واحد( GMTأو UTCيجب أن يكون expire dateال 3)

toUTCStringأو toGMTStringوهذا يعني أنه يمكنك إستخدام ^_^ للدصول على الوقت المطلوب بهذه الصيغة

، فإنه ينتهي بمجرد إغالق cookieفي حالة لم تقم بتدديد المدة لدياة ال 4). المتصفح


JS Cookies

؟ cookieكيف يمكننا جلب ما لدينا من : ثانيا، كيف ذلك ؟ P:أيضا document.cookie^_^ الجواب باستخدام

التي لدي سيتم جلبها على شكل Cookieالحظ أن جميع ال : (شاهد المثالstring (


JS Cookies

موجودة ؟ Cookieكيف يمكننا تعديل قيمة : ثالثا، websiteوهنا nameتعتمد على Cookieعملية التعديل على ال

الخ.. pathويمكنني تغيير القيمة والوقت وال


JS Cookies

موجود ؟ Cookieكيف يمكننا حذف : رابعاأيضا، ونقوم بتصفير الوقت، nameتعتمد على Cookieعملية الدذف لل

: شاهد المثال.. وكأنه منتهي Cookieليكون ال


JS Cookies

، هل هذا الشكلcookieواآلن، لقد فهمنا الشكل األساسي للتعامل مع ال ! منطقي أم فيه مشكلة نوعا ما ؟

cookieهذا الشكل الذي ذكرناه هو الشكل البسيط المفيد في حالة وجود ، ألن هذا الشكل كما تالحظ يقوم بارجاع االسم والقيمة فقط، ولجميع -_-واحدة

، وجميع ال )بدث(العناصر، ولم أقم بتدديد أيضا العنصر الذي أرغب به cookie التي سيتم إضافتها، فعليا ستقوم بإضافة الcookie الىfile مجددا

مشهورات Function 3لهذا سنقوم باستخدام ..overwrittenوليس عملية ^_^لنشاهد معا ذلك ...للقيام بهذه العمليات


JS Cookies

:Set Cookieهو المسؤول عن ال Functionأول ال *

بما Cookieبأبسط صوره، ويقوم بكل بساطة بإنشاء ال Functionهذا ال حسب الرغبة، فيمكنك “ التعديل عليه “ نرسل له من متغيرات، كما يمكنك

اذا لم أرغب expiresأو إضافة شرط بخصوص ال Pathإضافة متغير ال setCookie(‘name’, ‘abc’, 2)الخ، وطريقة اإلستخدام هي ...بكونها الزامية

... abcوقيمته nameلمدة يومين، اسمه cookieوهذا يعني قم بإنشاء


JS Cookies

:get Cookieهو ال Functionsثاني ال *

الذي أرغب بالدصول cookieيقوم على إرجاع ال Functionهذا ال getCookie(‘name’)، مثل nameعليها من خالل ال


JS Cookies

السابق بسيطة إذا تتبعتها، فهي تقوم Functionطريقة عمل ال : مالحظةمع إشارة ال concatثم عملية ) للبدث عنه(على أخذ اإلسم الذي قمت بكتابته

=websiteمثل Cookieوهذا يعني أنني أخذت المقتطف األول من ال = ، فكما تذكر هي الفاصل;بعد ذلك أقوم بتدول النص الى مصفوفة من خالل ال

بين كل من القيم التي يمكننا إستخدامها، ثم قمنا بعمل جملة دوران، بطول ..=websiteالمصفوفة الناتجة، ثم أردنا بالتأكد أنه ال يوجد فراغ قبل ال

وبعد ذلك قم بقطع...لذلك قمنا بوضع شرط، اذا وجدت فراغات قم بدذفها الى نهاية القيمة الخاصة بهذا اإلسم = النص من الموقع الذي تنتهي عنده ال

^_^...


JS Cookies

يقوم على التدقق من قيمة معينة لتنفيذ شرط معين Functionثالث ال الى لنستخدمها في أمر ما، Cookieبعدها، وعليا ندن ما قمنا بكتابة ال

يجب أن ال 2رقم Functionالتي تعلمناها في ال Cookieوعملية جلب ال لو قمت بارسال Function، في هذا ال ^_^تكون عبثية، وهنا يظهر دورها

، إن لم يكن getمثال، فسيتم أوال البدث عنه لجلبه من خالل ال nameال theresموجودا، ستظهر لك القيمة no name أما اذا كانت موجودة ،

aneesفسيطبع هنا


JS Cookies

واآلن، لنشاهد مجموع األمثلة السابقة معا حول هذا الموضوع، وال تنسى أن ...local serverتقوم بتشغيل هذا المثال على

أفكار رئيسية، لكن يمكنك البدث أو 3تمثل Function 3هذه ال : مالحظة 10خاصة بك للقيام بمثل هذه العمليات، فمثال لدي Functionتطوير

األمر ليس ..فانكشن قمت بكتابتها لتخدمني بالشكل المناسب أو الذي أرغبه^_^ تفكير “ منطق “ حفظا، وإنما : شاهد األمثلة


اللهم أنت الدليم فال تعجل، وأنت الجواد فال تبخل، وأنت العزيز فال تذل، وأنت المجير .فال تضام، وأنت المنيع فال ترام، وأنت على كل شيء قدير

اللهم ال تدرمني سعة رحمتك، وسبوغ نعمتك، وشمول عافيتك، وجزيل عطائك، وال .تجازني بقبيح عملي، وال تصرف وجهك الكريم عني برحمتك يا أرحم الراحمين

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

اللهم آمين

خاطرة


mawdoo3أدعية رائعة منقولة من موقع

الدمد ل رب العالمين، أن من علينا وعليكم بواسع منه وفضله، ووفقنا ألن نكمل ما بدأناه في أول هذه الدورة المتواضعة، والدمد ل رب العالمين أن وفقنا ألن نتعلم

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

إخواني األعزاء، هذا العمل المتواضع ما هو الى عمل بشري، والعمل البشري ال يصل الى الكمال والتمام، وإنما بذلنا ما بوسعنا بإذن هللا تعالى بأن نتدرى أدق معاني الدقة

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

.والفضل

الخاتمة


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

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

: دورات أخرى قد تهمكHTML CSS HTML5 CSS3 JSON AngularJS Bootstrap

SASS PHP-Advance-101 Drupal 7 jQuery jQuery UI

: جميع هذه الدورات تجدونها بإذن هللا في موقعwww.2nees.com/courses

الخاتمة


ورخر داوا ا ن الحمد ل رب العالمين

js dom & js bom

Education