‫انذسس األول ‪ :‬مقذمت )‪3 (introduction‬‬

‫انذسس انثاني ‪ :‬بناء انجمهت )‪6 (syntax‬‬

‫انذسس انثانج ‪ :‬انمتغيشاث )‪71 (variable‬‬
‫انذسس انشابع ‪ :‬انعوامم )‪22 (operators‬‬
‫انذسس انخامس ‪ :‬اتخار انقشاس )‪22 (Decision making‬‬
‫انذسس انسادس ‪ :‬انحهقاث انتكشاسيت )‪36 (loops‬‬
‫انذسس انسابع ‪ :‬انذوال أو انوظائف )‪45 (functions‬‬
‫انذسس انثامن ‪ :‬األحذاث )‪52 (Events‬‬
‫انذسس انتاسع ‪ :‬مهفاث انتعشيف )‪51 (cookies‬‬
‫انذسس انعاشش ‪ :‬إعادة توجيه انصفحت )‪63 (Page Redirection‬‬
‫انذسس انحادى عشش ‪ :‬تحذيج انصفحت )‪61 (Page Refresh‬‬
‫انذسس انثاني عشش ‪ :‬مشبعاث انحواس )‪63 (Dialog Boxes‬‬
‫انذسس انثانج عشش ‪ :‬انكهمت انمحجوصة ‪15 (Void Keyword) void‬‬
‫انذسس انشابع عشش ‪ :‬طباعت انصفحت )‪13 (Page Printing‬‬
‫انخاتمت ‪27‬‬
 ‫ميحرلا نمحرلا هللا‬ ‫بسم‬
‫‪JavaScript Tutorial part 1‬‬

‫دروس تعليمة فى ‪JavaScript‬‬

‫انذسس األول ‪ :‬مقذمت )‪(introduction‬‬

‫‪ ‬تمهيد ‪:‬‬
‫‪ JavaScript ‬هً لغة برمجة خفٌفة ومفسرة تسمح لن ببناء التفاعلٌة فً صفحات ‪ HTML‬ثابتة وهً‬
‫مصممة إلنشاء تطبٌمات تتمحور حول الشبكة‪ .‬وهً مجانٌة ومتكاملة مع جافا‪ .‬من السهل جدًا تنفٌذ‬
‫‪ JavaScript‬ألنها لغة مدمجة مع لغة ‪ .HTML‬وهى لغة مفتوحة ومنصة مشتركة‬

‫‪ : Audience ‬الجمهور المستفاد من تلن السلسة‬

‫‪ ‬تم إعداد هذا الدرس التعلٌمً للمبتدئٌن فً ‪ JavaScript‬لمساعدتهم فً فهم األساسٌات إلنشاء صفحات‬
‫وٌب وتطبٌمات وٌب دٌنامٌكٌة ‪web applications‬‬

‫‪ : Prerequisites ‬المتطلبات الرئٌسٌة لبل البدأ فى تعلم هذه السلسلة‬

‫‪ٌ ‬جب أن ٌكون لدٌن معرفة عملٌة أساسٌة مع نظام التشغٌل ‪ Windows‬أو ‪Linux‬‬
‫‪ٌ ‬جب أن ٌكون لدٌن معرفة مسبمة بلغة ‪. HTML‬‬
‫‪ ‬ومن األفضل أن ٌكون لدٌن بعض المفاهٌم البرمجة الشٌئٌة ‪object-oriented programming‬‬
‫وفكرة عامة حول إنشاء تطبٌمات عبر اإلنترنت ‪online applications‬‬

‫‪ : Overview ‬نظرة عامة لبل البدأ فى شرح دروس ‪JavaScript‬‬

‫‪ JavaScript ‬هً لغة برمجة دٌنامٌكٌة ‪ . dynamic‬فهً خفٌفة الوزن وتستخدم فً الغالب كجزء من‬
‫صفحات الوٌب ‪ ، web pages‬حٌث تمكن المستخدم من التفاعل مع صفحات الوٌب وإنشاء صفحات‬
‫دٌنامٌكٌة‪ .‬وهى لغة برمجة مفسرة ‪ interpreted‬مع لدراتها على استخدام المدرات البرمجة الشٌئٌة ‪.‬‬
 ‫‪ : JavaScript history ‬تارٌخ لغة ‪JavaScript‬‬
‫‪ ‬كلنت تسمى لغة ‪ JavaScript‬باسم ‪ ، LiveScript‬ولكن ‪ Netscape‬غٌرت اسمها إلى‬
‫‪ ، JavaScript‬ربما بسبب اإلثارة التً تولدها كلمة ‪.Java‬‬
‫‪ ‬لدمت ‪ JavaScript‬أول ظهور لها فً ‪ Netscape 2.0‬عام ‪ 5995‬باالسم ‪.LiveScript‬‬
‫‪ ‬تم تضمٌن جوهر األغراض العامة ‪ general-purpose core‬للغة فً ‪Internet Explorer‬‬
‫و ‪ Netscape‬ومتصفحات الوٌب األخرى‪.‬‬

‫إصدارا لٌاسًٌا من لغة ‪ JavaScript‬األساسٌة وحددت لها بعض الموصفات‬

‫ً‬ ‫‪ ‬حددت ‪ECMA-262‬‬
‫المٌاسٌة منها ‪:‬‬
‫‪ : interpreted programming language ‬أى هً لغة برمجة خفٌفة ومفسرة‬
‫‪ ‬مصممة إلنشاء تطبٌمات تتمحور حول الشبكة ‪.network-centric applications‬‬
‫‪ integrated with Java ‬أى لغة مكملة ومتكاملة مع جافا‪.‬‬
‫‪ integrated with HTML ‬أى لغة مكملة ومتكاملة مع ‪.HTML‬‬
‫‪ Open and cross-platform ‬أى منصة مفتوحة المصدر‬

‫‪ : Client-side JavaScript ‬مفهوم لغة ‪ JavaScript‬من جانب العمٌل‬

‫‪ٌ ‬عتبر ‪ Client-side JavaScript‬هو أكثر أشكال اللغة شٌو ً‬
‫ع ا‪.‬‬
‫‪ٌ ‬جب أن ٌكتب ‪ script‬بداخل مستند ‪ HTML‬أو عمل مرجع ‪ reference‬داخل لغة ‪HTML‬‬
‫ٌشٌر إلى هذا ‪ script‬حتى ٌتمكن المتصفح من تفسٌر وفهم الكود‬
‫‪ ‬هذا ٌعنً أن صفحة الوٌب ال تحتاج إلى أن تكون لغة ثابتة ‪ ، Static HTML‬بل ٌمكن أن تتضمن‬
‫برامج تتفاعل مع المستخدم ‪ ،‬وتتحكم فً المتصفح ‪ ،‬وتنشئ محتوى ‪ HTML‬بشكل دٌنامٌكً‪.‬‬
‫‪ ‬توفر ‪ Client-side JavaScript‬العدٌد من المزاٌا عن طرٌك البرامج النصٌة التملٌدٌة ‪ CGI‬التى‬
‫تستخدم من جانب العمٌل ( أو ما ٌسمى ب ‪)CGI server-side scripts‬‬
‫‪ ‬على سبٌل المثال ‪ ،‬لد تستخدم ‪ JavaScript‬للتحمك مما إذا كان المستخدم لد أدخل عنوان برٌد‬
‫إلكترونً صال ًحا‬
‫‪ٌ ‬تم تنفٌذ كود ‪ JavaScript‬عندما ٌرسل المستخدم النموذج ‪ ، form‬وإذا كانت جمٌع اإلدخاالت‬
‫صالحة ‪ valid entries‬فسٌتم تمدٌمها إلى خادم الوٌب‪.‬‬

‫‪ٌ ‬مكن استخدام ‪ JavaScript‬فً اعتراض األحداث التً ٌدٌرها المستخدم ‪user-initiated‬‬
‫‪ events‬مثل النمرات على األزرار ‪ clicks‬ومالحة الرابط ‪ link navigation‬واإلجراءات‬
‫األخرى التً ٌستخدمها المستخدم صراحةً أو ضمنًٌا‪.‬‬
 ‫‪ : Advantages of JavaScript ‬مميزات لغة ‪JavaScript‬‬
‫‪ : Less server interaction‬تفاعلها قليل مع الخادم ‪server‬‬ ‫‪‬‬
‫ٌمكنن التحمك من صحة إدخال المستخدم لبل إرسال الصفحة إلى الخادم‪ .‬وهذا ٌملل حركة مرور‬
‫الخادم ‪ ،‬مما ٌعنً تحمٌل ألل على الخادم الخاص بن‪.‬‬
‫‪ : Immediate feedback to the visitors‬ذات رد فعلى سريع مع المستخدمين‬ ‫‪‬‬
‫ال ٌتعٌن علٌهم انتظار إعادة تحمٌل الصفحة لمعرفة ما إذا كانوا لد نسٌوا إدخال شًء ما‪.‬‬
‫‪ : Increased interactivity‬سريعة التفاعل‬ ‫‪‬‬
‫ٌمكنن إنشاء واجهات تتفاعل عندما ٌمرر المستخدم فولها بالماوس أو ٌنشطها عبر لوحة المفاتٌح‬
‫‪ : Richer interfaces‬لها واجهات كثيرة‬ ‫‪‬‬
‫ٌمكنن استخدام ‪ JavaScript‬لتضمٌن عناصر مثل مكونات السحب واإلفالت ‪drag-and-drop‬‬
‫وشرائح التمرٌر ‪ sliders‬لمنح واجهة غنٌة لزوار مولعن‬

‫‪ : disadvantages of JavaScript ‬عيوب لغة ‪JavaScript‬‬

‫ال ٌمكننا التعامل مع جافا سكرٌبت كلغة برمجة كاملة ‪full-fledged programming language‬‬ ‫‪‬‬
‫ال تسمح ‪ JavaScript‬من جانب العمٌل بمراءة الملفات أو كتابتها‪ .‬ولد تم االحتفاظ بها ألسباب أمنٌة‪.‬‬ ‫‪‬‬
‫ال ٌمكن استخدام ‪ JavaScript‬لتطبٌمات الشبكات بسبب عدم توفر مثل هذا الدعم‪.‬‬ ‫‪‬‬
‫جافا سكرٌبت لٌس لدٌها أي إمكانات ‪ multithreading‬أو متعددة المعالجات ‪multiprocessor‬‬ ‫‪‬‬

‫‪ : JavaScript Development Tools ‬أدوات تطوير لغة ‪JavaScript‬‬

‫‪ ‬من أفضل ممٌزات لغة ‪ JavaScript‬هً أنها ال تتطلب أدوات تطوٌر باهظة الثمن ولكن ٌمكنن‬
‫البدء باستخدام محرر نصوص بسٌط مثل ‪ Notepad‬وأٌضا ً ً‬
‫نظرا ألنها لغة مفسرة‬
‫‪ interpreted‬داخل متصفح الوٌب ‪ ،‬فإنن ال تحتاج حتى إلى شراء مترجم ‪.compiler‬‬
‫‪ ‬ومع ذلن ٌمكن استخدام بعض محررات النصوص التى تجعل بٌئة العمل سهلة منها اآلتى ‪:‬‬
‫‪ : Microsoft FrontPage ‬لامت ‪ Microsoft‬بتطوٌر محرر ‪ HTML‬وٌوفر لمطوري‬
‫برامج الوٌب عددًا من أدوات ‪ JavaScript‬للمساعدة فً إنشاء موالع وٌب تفاعلٌة‪.‬‬
‫‪ : Macromedia Dreamweaver MX ‬هو محرر مشهور جدا فى ‪ HTML‬و ‪JavaScript‬‬
‫وٌوفر العدٌد من مكونات ‪ JavaScript‬الجاهزة مسبما ‪ ،‬وٌتكامل بشكل جٌد مع لواعد البٌانات‬
‫‪ databases‬وٌتوافك مع االصدارات الجدٌدة مثل ‪ XHTML‬و ‪.XML‬‬
‫‪ : Macromedia HomeSite 5 ‬هو محرر مشهور جدا فى كال من لغة ‪ HTML‬ولغة‬
‫‪ JavaScript‬و ٌمكن استخدامه إلدارة الموالع الشخصٌة بفعالٌة ‪personal websites‬‬
 ‫انذسس انثاني ‪ :‬بناء انجمهت )‪(syntax‬‬

‫‪ : syntax of JavaScript ‬كيفية بناء كود ‪JavaScript‬‬

‫‪ ‬فى هذا الدرس سوف نتعلم ‪ ،‬كٌفٌة كتابة أكواد ‪ javascript‬وكٌفٌة استخدام أكواد ‪ javascript‬مع‬
‫لغة ‪HTML‬‬
‫مالحظات يجب اتباعها لكتابة أكواد ‪javascript‬‬
‫‪ٌ -5‬مكنن تنفٌذ ‪ JavaScript‬باستخدام عبارات ‪ JavaScript‬الموضوعة داخل ‪ script tag‬كاآلتى ‪:‬‬

‫‪ٌ -2‬مكنن وضع ‪ ، >script< tags‬التً تحتوي على أكواد الجافا سكرٌبت ‪ ،‬فً أي مكان داخل‬
‫صفحة الوٌب الخاصة بن ‪ ،‬ولكن من المستحسن عادة أن تحتفظ بها ‪.>head< tags‬‬
‫‪ٌ -3‬موم ‪ >script< tag‬بتنبٌه برنامج المستعرض لبدء ترجمة كل النص بٌن هذه العالمات كبرنامج‬
‫نصً ‪. script‬‬
‫‪ٌ -4‬جب أن نحٌط أكود ‪ javascript‬ب ‪ )<!--….--//> ( comment tag‬حٌث هذا التعلٌك ٌحفظ‬
‫أكواد ‪ javascript‬من المتصفحات التى ال تدعم لغة ‪ ، javascript‬ونالحظ ان لغة ‪javascript‬‬
‫ال تتعرف سوى على ) ‪ open tag ( <!--‬بٌنما ال تتعرف على )>‪ close tag (--‬لذلن نستخدم‬
‫تعلٌك خاص بلغة ‪ javascript‬وهو عبارة عن )‪(//‬‬
‫‪ٌ : script tag ‬ستخدم هذا ‪ tag‬لكتابة أكواد ‪ HTML‬بداخله ‪ ،‬وٌحتوى على خاصٌتٌن هما ‪:‬‬
‫‪ : language attribute‬تستخدم هذه الخاصٌة لتحدٌد لغة البرمجة او لغة الخاصة ‪script‬‬
‫الذى سوف نستخدمه وٌجب تعٌٌن لٌمته إلى "‪ "javascript‬كما فى الصورة السابمة‬
‫‪ : type attribute‬تستخدم هذه الخاصٌة لإلشارة إلى لغة البرمجة المستخدمة ‪ ،‬وٌجب‬
‫تعٌٌن لٌمته إلى " ‪ " text / javascript‬كما فى الصورة السابمة‬
 ‫‪ ‬مثال أول برنامج بلغة ‪javascript‬‬

‫‪ ‬عند فتح المتصفح نالحظ أن هذا الكود سوف ٌطبع كلمة "‪ "Hello Mahmoud‬داخل الصفحة‬

‫‪ ‬شرح الكود السابك ‪:‬‬

‫‪ : write( ) ‬هذه الكلمة هى عبارة عن دالة ‪ method‬أو وظٌفة ‪ function‬تستخدم لطباعة‬
‫محتوى على الشاشة ‪ ،‬وسوف نتعرف على الدوال ‪ methods‬فٌما بعد‬
‫‪ ‬نكتب المحتوى أو ما ٌسمى ب ‪ strings‬الذى نرٌد طباعته بٌن عالمات االلتباس المزدوجة‬
‫‪ double quotes‬كما ٌظهر فى الصورة "‪"Hello Mahmoud‬‬
‫‪ : document ‬هو عبارة عن ‪ٌ object‬حتوى على دوال كثٌرة منها دالة ‪write‬‬
‫‪ : string ‬هو عبارة عن سلسة نصٌة أو سلسلة من الحروف مثل ‪ Hello Mahmoud‬وٌتم‬
‫وضعها بٌن ( " " ) ‪double quotes‬‬
 ‫بعض قواعد لغة ‪: javascript‬‬
‫‪ٌ ‬تم تجاهل المسافات ‪ spaces‬وعالمات التبوٌب ‪ tabs‬والخطوط الجدٌدة ‪ newlines‬التً تظهر‬
‫فً برامج ‪ JavaScript‬ولذلن ٌمكنن استخدامهم داخل البرنامج كما تحب‬

‫‪ ‬مثال ‪ :‬فى المثال التالى نالحظ أنه ٌمكن استخدام سطر جدٌدة فارغة‬

‫‪ٌ ‬مكنن استخدام الفاصلة المنموطة ) ; ( ‪ semicolon‬بعد نهاٌة كل سطر وٌمكنن عدم استخدامهم‬
‫ولكن عندما ترٌد أن تكتب أكثر من جملة ‪ statement‬فى سطر واحد ٌجب استخدام الفاصلة‬
‫المنموطة ) ; ( ‪semicolon‬‬

‫‪ ‬مثال ‪ :‬فى المثال التالى لم نستخدم ‪semicolon‬‬

‫‪ ‬مثال ‪ :‬فى المثال التالى تم استخدام ‪semicolon‬‬

‫‪ ‬تعتبر لغة ‪ javascript‬هى لغة ‪ case-sensitive language‬أى حساسة لحالة األحرف وهذا‬
‫ٌعنً أنه ٌجب دائ ًما كتابة الكلمات الرئٌسٌة اللغوٌة ‪ keywords‬والمتغٌرات ‪ variables‬وأسماء‬
‫معرفات أخرى ‪ identifiers‬مراعٌا ً حالة الحروف‬ ‫الدوال ‪ function names‬وأي ّ‬
‫‪ ‬بمعنى آخر أن هنان فرق بٌن كلمة ‪ time‬وبٌن كلمة ‪ Time‬فهما بالنسبة للغة ‪ javascript‬لٌسوا‬
‫كلمة واحدة ولذلن ٌجب توخً الحذر أثناء كتابة أسماء المتغٌرات والدوال فى لغة ‪javascript‬‬

‫‪ : Comments in javascript ‬كٌفٌة كتابة التعلٌمات داخل لغة ‪javascript‬‬

‫‪ : Comments ‬التعلٌمات هى عبارة عن جزء من التعلٌمات البرمجٌة ٌتم تجاهله بواسطة أي‬
‫متصفح وٌب او بواسطة أى ‪ compiler‬وتستخدم لإلشارة إلى أجزاء من المستند وأي مالحظات‬
‫أخرى ألي شخص ٌنظر إلى الكود ‪ .‬وتساعدن التعلٌمات على فهم الكود وزٌادة إمكانٌة لراءة‬
‫التعلٌمات البرمجٌة‪.‬‬
‫‪ ‬تدعم لغة ‪ javascript‬التعلٌمات بنفس الشكل الذى تدعمه لغة ‪ C‬ولغة ‪ C++‬وٌوجد نوعٌن من‬
‫التعلٌمات التى ٌمكن استخدامهما ‪:‬‬
‫‪ ‬األول ‪ٌ : single line comment :‬ستخدم لعمل ‪ comment‬لسطر واحد فمط عن‬
‫‪// single line comments‬‬ ‫طرٌك كتابة التعلٌك بعد هذه العالمة‬

‫‪ ‬الثانى ‪ٌ : double line comment :‬ستخدم لعمل ‪ comment‬ألكثر من سطر عن‬

‫طرٌك كتابة التعلٌمات بٌن هاتٌن العالمتٌن ‪/* multi line comments */‬‬
 ‫ داخل المتصفحات‬javascript ‫ كٌفٌة دعم لغة‬: Enabling JavaScript in Browsers 
‫ لد‬، ‫ولكن فً كثٌر من األحٌان‬. javascript ‫جمٌع المتصفحات الحدٌثة تأتً مع دعم مدمج للغة‬
.‫ هذا الدعم ٌدوًٌا‬disable ‫ أو تعطٌل‬enable ‫تحتاج إلى تمكٌن‬
‫ فً المستعرضات الخاصة بن مثل‬JavaScript ‫سوف نشرح هذا الجزء كٌفٌة عمل دعم او تفعٌل‬
.Opera ‫ و‬chrome ‫ و‬Firefox ‫ و‬Internet Explorer ‫المتصفحات‬

internet explorer ‫ داخل‬javascript ‫ تفعٌل‬: JavaScript in Internet Explorer : ً ‫ أوال‬

o Follow Tools → Internet Options from the menu.
o Select Security tab from the dialog box.
o Click the Custom Level button.
o Scroll down till you find Scripting option.
o Select Enable radio button under Active scripting.
o Finally click OK and come out

 To disable JavaScript support in your Internet Explorer, you need to select

Disable radio button under Active scripting.

firefox ‫ داخل‬javascript ‫ تفعٌل‬: JavaScript in firefox : ً ‫ ثانيا‬

o Open a new tab → type about: config in the address bar.
o Then you will find the warning dialog. Select I’ll be careful, I promise!
o Then you will find the list of configure options in the browser.
o In the search bar, type javascript.enabled.
o There you will find the option to enable or disable javascript by right-
clicking on the value of that option → select toggle.

 If javascript.enabled is true; it converts to false upon clicking toggle. If

javascript is disabled; it gets enabled upon clicking toggle.
 chrome ‫ داخل‬javascript ‫ تفعٌل‬:JavaScript in chrome : ً ‫ ثالثا‬
o Click the Chrome menu at the top right hand corner of your browser.
o Select Settings.
o Click Show advanced settings at the end of the page.
o Under the Privacy section, click the Content settings button.

 In the "Javascript" section, select "Do not allow any site to run JavaScript" or
"Allow all sites to run JavaScript (recommended)

opera ‫ داخل‬javascript ‫ تفعٌل‬: JavaScript in opera : ً ‫ رابعا‬

o Follow Tools → Preferences from the menu.
o Select Advanced option from the dialog box.
o Select Content from the listed items.
o Select Enable JavaScript checkbox.
o Finally click OK and come out.

 To disable JavaScript support in your Opera, you should not select the Enable
JavaScript checkbox
 ‫‪ : Warning for Non-JavaScript Browsers ‬تحذٌر عند استخدام المتصفحات التى ال‬
‫تدعم لغة ‪javascript‬‬
‫إذا كان علٌن المٌام بشًء مهم باستخدام ‪ ، JavaScript‬فٌمكنن عرض رسالة تحذٌر للمستخدم‬
‫باستخدام عالمات <‪.>noscript‬‬
‫‪ٌ : >noscript< Tag ‬تم استخدام هذا ‪ tag‬لعرض رسالة للمستخدم عندما ال ٌدعم المتصفح الخاص‬
‫به لغة ‪javascript‬‬
‫‪ ‬مثال‬

‫‪ ‬فى المثال السابك إذا كان متصفح المستخدم ال ٌدعم لغة ‪ javascript‬أو لم ٌتم تفعٌل لغة‬
‫‪ ، javascript‬فسٌتم عرض الرسالة الموجودة داخل ‪>noscript /< tag‬‬
 ‫‪ : Placement in HTML File ‬أماكن كتابة أكواد ‪ javascript‬داخل مستند ‪HTML‬‬
‫ٌمكنن بسهولة كتابة أكواد ‪ javascript‬داخل أى مكان فى ملف ‪ HTML‬ولكن أكثر الطرق استخداما ً‬
‫هى الطرق اآلتٌة ‪:‬‬

‫‪ٌ : <head> section -5‬مكن كتابة ‪ script‬بداخل ‪<head> tag‬‬

‫‪ ‬فى المثال السابك سوف ٌتم عرض ‪ button‬على الشاشة ومكتوب علٌه "‪"Say Hello‬‬

‫‪ ‬عند الضغط على هذا ‪ button‬فسوف تظهر رسالة تعرض جملة "‪ "Hello World‬كاآلتى ‪:‬‬
 ‫‪ٌ :<body> section -2‬مكن كتابة ‪ script‬بداخل ‪<head> tag‬‬
‫إذا كنت تحتاج إلى نص برمجً لٌتم تشغٌله أثناء تحمٌل الصفحة بحٌث ٌموم البرنامج النصً بإنشاء‬
‫محتوى فً الصفحة ‪ ،‬فسٌنتمل النص البرمجً فً الجزء <‪ >body‬من المستند‪ .‬فً هذه الحالة ‪،‬‬
‫لن ٌكون لدٌن أي وظٌفة محددة باستخدام ‪.JavaScript‬‬
‫‪ ‬مثال ‪:‬‬

‫‪ ‬الحظ الناتج‬
 ‫‪ٌ -3‬مكن كتابة ‪ script‬بداخل ‪ <head> tag‬وأٌضا ً ‪ <body> tag‬معا ً‬
‫‪ ‬مثال ‪:‬‬

‫‪ ‬فى المثال السابك سوف ٌتم عرض ‪ button‬على الشاشة ومكتوب علٌه "‪"Say Hello‬‬

‫‪ ‬عند الضغط على هذا ‪ button‬فسوف تظهر رسالة تعرض جملة "‪ "Hello World‬كاآلتى ‪:‬‬
‫‪ٌ : external file -4‬مكن كتابة ‪ script‬داخل ملف خارجى ثم نشٌر إلى الملف ونحدد مساره داخل‬
‫‪<head> section‬‬
‫أوال ‪ :‬نفتح ملف جدٌد باسم ‪ myjavascript‬وٌنتهى بامتداد ‪js‬‬
‫ثانٌا ً ‪ :‬نكتب أكواد ‪ javascript‬داخل هذا الملف‬
‫ثالثا ً ‪ :‬نشٌر أو نشٌف هذا الملف داخل مستند ‪HTML‬‬
‫‪ ‬مثال ‪:‬‬
‫‪ ‬الخطوة األولى ‪ :‬فتحنا ملف جدٌد وكتبنا كود ‪javascript‬‬

‫‪ ‬الخطوة الثانٌة ‪ :‬نستدعى هذا الملف أو نشٌر الٌه داخل المستند عن طرٌك استخدام الخاصٌة ‪src‬‬

‫‪ ‬الحظ النتٌجة‬

‫‪ ‬هذه الطرٌمة مهمة جدا ً ألنها تساعد على تنظٌم الكود حتى ٌتثنى لنا اٌجاد األخطاء بسهولة وتساعد‬
‫على لراءة االكواد بسهولة وأٌضا ً تعمل على عمل استخدام للكود فى اى مستند آخر او ما ٌسمى ب‬
‫‪reusing‬‬
 ‫انذسس انثانج ‪ :‬انمتغيشاث )‪(variable‬‬
‫‪ : JavaScript Datatypes ‬انواع البيانات التى تدعملها ‪javascript‬‬
‫هى عبارة عن أنواع البٌانات التى تدعملها لغة البرمجة ‪ ،‬وهى من الواحدات األساسٌة الموجودة فى‬
‫لغات البرمجة‬
‫‪ ‬لغة ‪ javascript‬تدعم ‪ 3‬أنواع فقط هم ‪:‬‬
‫‪ : Numbers -5‬هى عبارة عن المٌم الرلمٌة وتنمسم غلى نوعٌن‬
‫‪ : Integer numbers ‬أرلام صحٌحة مثل ‪123‬‬
‫‪ : float numbers ‬أرلام عشرٌة ومثل ‪12.5‬‬
‫مالحظة ‪:‬‬
‫‪ ‬لغة ‪ JavaScript‬ال تمٌز بٌن المٌم ‪ Integer‬ولٌم ‪ float‬وٌتم تمثٌل كافة األرلام فً‬
‫‪ JavaScript‬على أنها لٌم عشرٌة ‪float‬‬
‫ٌتم تمثٌل األرلام فى ‪ JavaScript‬باستخدام تنسٌك ‪ 64-bit floating-point‬والذى تم تعرٌفه‬
‫عن طرٌك ‪IEEE 754‬‬

‫‪ : Strings -2‬هى عبارة عن المٌم النصٌة مثل "‪ "Hello‬ومثل أى ‪ text‬نكتبه وٌتم وضعه بٌن‬
‫هاتٌن العالمتٌن ( " " )‬

‫‪ : Boolean -3‬هى عبارة عن المٌم المنطمٌة وهى عبارة عن لٌمتٌن ‪:‬‬

‫‪ٌ : true ‬عنى واحد ‪ 1‬وتستخدم عند تحمك الشرط سندرسها فٌما بعد‬
‫‪ٌ : false ‬عنى صفر ‪ 0‬وتستخدم عند عدم تحمك الشرط سندرسها فٌما بعد‬

‫‪ ‬سوف ندرس بالتفصٌل فٌما بعد هذه األنواع‬

‫‪ ‬هنان أنواع بٌانات آخرى تدعملها لغة ‪ javascript‬منها ‪:‬‬
‫أوال‪ : trivial data types :‬أنواع البٌانات البسٌطة والغٌر مهمة وهى التى تحمل لٌمة واحدة مثل‪:‬‬
‫‪ : null o‬معناها فارغ أو فاضً أى لٌس هنان لٌمة موجودة‬
‫‪ : undefined o‬معناها غٌر معرفة أى لٌست معروفة بداخل ‪javascript‬‬
‫ثانٌاً‪ : composite data types :‬أنواع البٌانات المركبة وهى التى تحمل أكثر من لٌمة مثل‬
‫‪ : object o‬ومعناها كائن وهو مصطلح مشهور سوف نتعرف علٌه فٌما بعد‬
 ‫‪ : JavaScript variables ‬المتغيرات داخل ‪javascript‬‬
‫المتغٌرات هى عبارة عن أماكن ٌتم حجزها داخل الذاكرة لتخزٌن بٌانات ‪ data‬وٌمكن تعرٌف‬
‫المتغٌرات على أنها وعاء ‪ container‬أو حاوٌة ٌتم وضع البٌانات بداخلها ثم الرجوع الى هذه‬
‫البٌانات فٌما بعد‬
‫مالحظات ‪ :‬لكى نستخدام المتغٌرات ٌجب مراعاة اآلتى ‪:‬‬
‫‪ : variable naming ‬تسمٌة المتغٌرات ٌجب تحدٌد اسم للمتغٌرات لكى أتمكن من الرجوع إلٌها‬
‫عندما نحتاج إلٌها ونالحظ أن هنان لواعد لكتابة أسماء المتغٌرات سندرسها فى هذا الفصل‬

‫‪ : variable declaration ‬اإلعالن عن المتغٌرات ٌجب اإلعالن عنها عن طرٌك كلمة محجوزة‬
‫(‪ )keyword‬داخل ‪ javascript‬تسمى ‪ var‬وهنان طرٌمتٌن لإلعالن ‪:‬‬
‫‪ ‬األولى ‪ٌ : single variable :‬تم اإلعالن عن كل متغٌر على حدة‬

‫‪ ‬الثانى ‪ٌ : multiple variables :‬تم اإلعالن عن أكثر من متغٌر باستخدام ‪ var‬ونفصل بٌنهم‬
‫بعالمة الفاصلة ) ‪comma ( ,‬‬

‫نالحظ فى األمثلة السابمة أننا لد أعلنا عن متغٌرات ومعنى هذا أننا حجزنا أماكن فى الذاكرة ‪ ،‬ولد‬
‫حددنا اسم هذه األماكن عن طرٌك تسمٌة المتغٌرات ولكن لم نحدد لٌمتها حتى اآلن‬

‫‪ : var ‬هى عبارة عن كلمة محجوزة (‪ )keyword‬فى لغة ‪ٌ javascript‬تم استخدامها عند عملٌة‬
‫‪ declaration‬أو عملٌة ‪initialization‬‬
‫‪ ‬ال ٌمكن استخدام نفس المتغٌر مرتٌن (أى ٌجب عدم إعادة إعالن نفس المتغٌر مرتٌن)‬

‫‪ ‬لغة ‪ javascript‬هً لغة غٌر معدلة ‪ untyped‬وهذا ٌعنً أن المتغٌر داخل ‪ٌ javascript‬مكنه‬
‫االحتفاظ بمٌمة أي نوع بٌانات‪ .‬على عكس العدٌد من اللغات األخرى ولذلن لٌس من الضرورى تحدٌد‬
‫نوع المٌمة التً سٌحتفظ بها المتغٌر أثناء اإلعالن المتغٌرات ‪ .‬وٌمكن أن ٌتغٌر نوع لٌمة المتغٌر أثناء‬
‫تنفٌذ أحد البرامج وٌعتنى ‪ javascript‬بهذه التغٌرات تلمائًٌا‪.‬‬
‫‪ : variable initialization ‬تهٌئة المتغٌرات ٌمكن وضع لٌمة بدائٌة للمتغٌرات عند تخزٌن المٌمة‬
‫‪ storing‬وهنان طرٌمتٌن للتهٌئة ‪:‬‬
‫‪ ‬األولى ‪ٌ :‬تم عمل ‪ initialization‬بطرٌمة مباشرة فى سطر واحد كاآلتى ‪:‬‬

‫‪ ‬الثانى‪ٌ :‬تم عمل ‪ declaration‬ثم عمل ‪ initialization‬كل عملٌة فى سطر كاآلتى ‪:‬‬

‫‪ٌ ‬جب أن تتم علمٌة ‪ declaration‬لبل عملٌة ‪initialization‬‬

‫أسماء المتغٌرات )‪ (Variable names‬أو ال ُمعرفات )‪ٌ (Identifiers‬مكن أن تكون مجموعة من‬
‫األحرف واألرلام ‪ ،‬ولكن ٌجب أن تبدأ بحرف أو ‪. ( _ ) underscore‬‬

‫‪ ‬شروط وقواعد تسمية المتغير ‪ variable‬او ال ُمعرف ‪identifier‬‬

‫‪ -5‬ان ال ٌكون عبارة عن ‪ Keywords‬فال ٌمكن حجز متغٌر باسم ‪write‬‬
‫‪ -2‬ان ال ٌبدأ برلم وفى حالة استخدام الرلم ٌجب ان ٌسبك ب (_)‪underscore‬‬
‫‪ -3‬ان ٌبدا بحرف ومتبوعا بسلسلة من الحروف أو االرلام او ( _ )‬
‫‪ -4‬ال ٌحتوى على فراغات ‪spaces‬‬
‫‪ -5‬ال ٌحتوى على حروف الترلٌم ‪ punctuation characters‬مثل ( @ أو ‪ $‬أو ‪) %‬‬
‫‪ٌ -6‬فضل أن تكون الحروف صغٌرة ‪lowercase letters‬‬
 (Keywords) ‫الكلمات المحجوزة‬
‫ وال ٌمكن استخدامها‬compiler ‫هى عبارة عن اسماء او كلمات محجوزة فى الذاكرة من لبل‬
‫ فهى كلمة محجوزة داخل الباٌثون ونستخدمها‬print ‫ مثل الكلمات‬keywords ‫كتعارٌف امثلة على‬
‫ بتكون‬keywords ‫ التى سوف نتعرف علٌها فٌما بعد وال‬keywords ‫للطباعة وهنان العدٌد من ال‬
case sensitive ‫حساسة لحالة األحرف‬
‫ بمعنى أن لو‬case sensitive programming ‫ هى لغة حساسة لحالة الحروف‬javascript ‫ لغة‬
‫ فهما متغٌرٌن مختلفٌن‬a ‫ فهو ٌختلف عن المتغٌر‬A ‫عندنا متغٌر اسمه‬

javascript ‫ داخل ال‬Keywords ‫ جمٌع‬: JavaScript Reserved Words

abstract else instanceof switch boolean enum
synchronized break export interface this byte
long throw case false native throws
catch final new transient char finally
true float package try const for
typeof continue function protected var debugger
public void default if return volatile
implements short while do import static
double in super null private delete
extends class int with goto

lowercase ‫ تبدأ ب‬keywords ‫ جمٌع‬

functions ‫ ال ٌمكن استخدام هذه الكلمات كأسماء متغٌرات أو أسماء دوال‬
 ‫‪ : JavaScript Variable Scope ‬نطاق او مجال المتغيرات داخل ‪javascript‬‬
‫‪ : Variable Scope ‬نطاق المتغٌر او مجال المتغٌر هو عبارة عن منطمة البرنامج الذي ٌتم‬
‫تعرٌفه فٌه ‪ ،‬وهنان نوعان‪:‬‬
‫‪ ‬النوع األول ‪ : Global Variables :‬المتغٌرات العامة‬
‫هى متغٌرات عامة ٌمكن اإلعالن عنها وتعرٌفها فى أى مكان داخل ‪ javascript‬فٌمكن‬
‫اإلعالن عنها خارج الدوال‪ methods‬وٌمكن االعالن عنها خارج ‪class‬‬
‫‪ ‬النوع الثانى ‪ : Local Variables :‬المتغٌرات الخاصة‬
‫هى متغٌرات خاصة ٌمكن اإلعالن عنها وتعرٌفها فى أماكن محددة داخل ‪ javascript‬فٌمكن‬
‫اإلعالن عنها داخل الدوال ‪functions‬‬
‫‪ : Function parameters o‬معامالت الدوال تكون دائما ً ‪ local variable‬وهى عبارة‬
‫عن متغٌرات أو لٌم او تعبٌرات ٌتم تمرٌرها للدوال‬
‫‪ Local Variables o‬له األولوٌة عن ‪ Global Variables‬الذى ٌحمل نفس االسم‪ .‬فإذا لمت‬
‫بتعرٌف متغٌر ‪ Local‬خارج جسم الدالة ‪ function body‬ولمت بتعرٌف متغٌر بنفس‬
‫االسم كمتغٌر ‪ global‬داخل جسم الدالة ‪ ،‬فإنن تموم بإخفاء المتغٌر ‪global‬‬
‫‪ ‬مثال ‪:‬‬

‫‪ ‬الحظ النتٌجة‬

‫‪ : onload method ‬هذه الدالة سوف تنفذ عند تحمٌل الصفحة‬

 ‫انذسس انشابع ‪ :‬انعوامم )‪(operators‬‬
‫العوامل )‪ : (operators‬هى رموز خاصة ‪ particular symbols‬والتى تمثل معالجة رٌاضٌة‬
‫او منطمٌة معٌنة ٌتم استخدامها لتنفٌذ العملٌات ‪ operations‬على ال ُمعامالت ‪.operands‬‬
‫‪ : operators ‬عبارة عن رمز له معنى محدد‬

‫مثال ‪:‬‬ ‫‪‬‬

‫‪ ‬مالحظة ‪:‬‬
‫‪ ‬الطرف األٌسر )‪ٌ (4+5‬سمى تعبٌر ‪expression‬‬
‫‪ ‬المٌمتٌن ‪ 4‬و ‪ 5‬تسمى ُمعامالت ‪operands‬‬
‫‪ ‬االشارتٌن ‪ +‬و = تسمى عوامل ‪operators‬‬
‫‪ ‬المٌمة ‪ 9‬هى الناتج من هذا التعبٌر ‪expression‬‬

‫‪ ‬باالعتماد على عدد ‪ operands‬التى تتعامل معها ‪ operators‬فان ‪ operators‬تصنف الى ثالث‬
‫فئات ‪:‬‬
‫أ‪ : Unary -‬احادى تعمل على ‪single operand‬‬
‫ب‪ :Binary -‬ثنائي تعمل على ‪two operands‬‬
‫ت‪ :Ternary -‬ثالثى تعمل على ‪ three operands‬ومعروفة ب ‪conditional operator‬‬

‫‪ ‬أنواع العوامل )‪ٌ : (types of operation‬وجد ‪ 6‬أنواع سوف نتعرف علٌها بالتفصٌل‬
‫‪ ‬النوع األول ‪ : Arithmetic Operators :‬العوامل الحسابٌة‬
‫‪ ‬النوع الثانى ‪ : Relational Operators :‬العوامل العاللٌة‬
‫‪ ‬النوع الثالث‪: Logical Operators :‬العوامل المنطمٌة‬
‫‪ ‬النوع الرابع ‪ : Membership Operators :‬العوامل العضوٌة‬
‫‪ ‬النوع الخامس ‪ : Bitwise Operators :‬عوامل الخاصة بالبت‬
‫‪ ‬النوع السادس‪ :Assignment Operators :‬عوامل التخصٌص‬
 ‫‪ -5‬النوع األول ‪ : Arithmetic Operators :‬العوامل الحسابٌة هى عوامل تستخدم لتنفٌذ العملٌات‬
‫الحسابٌة مثل (الجمع والطرح والضرب والمسمة )‬

‫‪Symbol‬‬ ‫‪Name‬‬ ‫‪Example Description‬‬

‫‪+‬‬ ‫‪Addition‬‬ ‫‪x + y‬‬ ‫عملٌة الجمع‬
‫‪-‬‬ ‫‪Subtraction‬‬ ‫‪x – y‬‬ ‫عملٌة طرح‬
‫*‬ ‫‪Multiplication‬‬ ‫‪x * y‬‬ ‫عملٌة ضرب‬
‫‪/‬‬ ‫‪Division‬‬ ‫‪x / y‬‬ ‫عملٌة لسمة‬
‫‪%‬‬ ‫‪Modulus‬‬ ‫‪x % y‬‬ ‫عملٌة بالى المسمة‬
‫=‬ ‫‪Assignment‬‬ ‫‪x = y‬‬ ‫تخصٌص لٌمة ‪ y‬الى ‪X‬‬
‫**‬ ‫أس ‪Exponent‬‬ ‫‪x ** y‬‬ ‫مضاعفة لٌمة ‪ X‬بمٌمة ‪ X ( y‬أُس ‪)y‬‬
‫‪//‬‬ ‫‪Floor Divide‬‬ ‫‪x // y‬‬ ‫عملٌة لسمة ولكن الناتج هٌتمرب أللرب عدد صحٌح‬
‫‪+‬‬ ‫‪Unary plus‬‬ ‫‪+ x‬‬ ‫عملٌة ضرب المتغٌر فى اشارة موجبة‬
‫‪-‬‬ ‫‪Unary minus‬‬ ‫‪- x‬‬ ‫عملٌة ضرب المتغٌر فى اشارة سالبة‬

‫‪ -2‬النوع الثانى ‪ : Relational Operators :‬العوامل العاللٌة هى عوامل تستخدم للتحمك من‬
‫العاللات مثل أكبر من أو أصغر من وتسمى بعوامل الممارنة )‪(Comparison operators‬‬
‫وترجع لنا لٌمتٌن )‪ True‬أو ‪)False‬‬
‫‪ : True ‬فى حالة تحمك الشرط‬
‫‪ : False ‬فى حالة عدم تحمك الشرط‬
‫‪Symbol‬‬ ‫‪Name‬‬ ‫‪Example‬‬ ‫‪Description‬‬
‫==‬ ‫‪Equal to‬‬ ‫‪x == y‬‬ ‫هل لٌمة ‪ x‬تساوى لٌمة ‪ y‬؟ لو متساوٌٌن‬
‫هترجع ‪true‬‬
‫=!‬ ‫‪Not equal to‬‬ ‫‪x != y‬‬ ‫هل لٌمة ‪ x‬ال تساوى لٌمة ‪ y‬؟ لو غٌر‬
‫متساوٌٌن هترجع ‪true‬‬
‫>‬ ‫‪Greater than‬‬ ‫‪x >y‬‬ ‫هل لٌمة ‪ x‬أكبر من لٌمة ‪ y‬؟ لو اكبر منها‬
‫هترجع ‪true‬‬
‫<‬ ‫‪Less than‬‬ ‫‪x < y‬‬ ‫هل لٌمة ‪ x‬ألل من لٌمة ‪ y‬؟ لو ألل منها‬
‫هترجع ‪true‬‬
‫=>‬ ‫‪Greater than or Equal to‬‬ ‫‪x >= y‬‬ ‫هل لٌمة ‪ x‬أكبر من أو تساوى لٌمة ‪ y‬؟ لو‬
‫أكبر منها أو متساوٌٌن هترجع ‪true‬‬
‫=<‬ ‫‪Less than or Equal to‬‬ ‫‪x <= y‬‬ ‫هل لٌمة ‪ x‬ألل من أو تساوى لٌمة ‪ y‬؟ لو‬
‫ألل منها منها أو متساوٌٌن هترجع ‪true‬‬
 ‫‪ -3‬النوع الثالث‪: Logical Operators :‬العوامل المنطمٌة هى عوامل تستخدم منطمٌة تستخدم لتنفٌذ‬
‫العملٌات الحسابٌة ‪ arithmetic operations‬مثل ( و – أو – النفً )‬

‫‪Symbol‬‬ ‫‪Name‬‬ ‫‪Example Description‬‬

‫&&‬ ‫‪Logical AND‬‬ ‫‪x && y‬‬ ‫بترجع ‪ True‬فى حالة تحمك الشرطٌن‬
‫||‬ ‫‪Logical OR‬‬ ‫‪x || y‬‬ ‫بترجع ‪ True‬فى حالة تحمك الشرطٌن أو احدهما‬
‫!‬ ‫‪Logical NOT‬‬ ‫)‪! (x > y‬‬ ‫بترجع ‪ True‬فى حالة تحمك عكس الشرط‬

‫‪ -4‬النوع الرابع ‪ : Membership Operators :‬العوامل العضوٌة هى عوامل تستخدم للتحمك من‬
‫لٌمة متغٌر داخل مجموعة ‪ collection‬او سلسلة من المٌم ‪string‬‬
‫‪Symbol Name‬‬ ‫‪Example‬‬ ‫‪Description‬‬
‫‪in‬‬ ‫‪in‬‬ ‫‪x in list‬‬ ‫هل لٌمة ‪ x‬موجودة فى ‪ list‬؟ لو موجودة هترجع‬
‫‪true‬‬
‫‪not in‬‬ ‫‪not in‬‬ ‫‪x not in list‬‬ ‫هل لٌمة ‪ x‬لٌست موجودة فى ‪ list‬؟ لو غٌر‬
‫موجودة هترجع ‪true‬‬

‫‪ -5‬النوع الخامس ‪ : Bitwise Operators :‬عوامل الخاصة بالبت هى عوامل تستخدم لتنفٌذ عملٌات‬
‫على التمثٌل الثنائً للبٌانات الرلمٌة أى للتعامل مع المتغٌرات لكن بطرٌمة ‪ bits‬واستخدامها غٌر‬
‫مهم ولكنها عند استخدمها ٌتم تنفٌذ العملٌات بشكل سرٌع‬
‫‪Symbol Name‬‬ ‫‪Example Description‬‬
‫&‬ ‫‪Bitwise AND‬‬ ‫‪x &y‬‬ ‫عملٌة حساب جمع ال ‪ bits‬المشتركة بٌن ‪ x‬و ‪y‬‬
‫|‬ ‫‪Bitwise OR‬‬ ‫‪x |y‬‬ ‫عملٌة جمع ال ‪ bits‬المشتركة والغٌر المشتركة‬
‫^‬ ‫‪Bitwise XOR‬‬ ‫‪x ^y‬‬ ‫عملٌة جمع ال ‪ bits‬الغٌر المشتركة بٌن ‪ x‬و ‪y‬‬
‫~‬ ‫‪Bitwise NOT‬‬ ‫‪~x‬‬ ‫عملٌة عكس ‪ bits‬ثم ٌضٌف علٌهم ‪ 1‬و ٌحسب‬
‫)‪(compliment OR‬‬ ‫ناتج جمعهم‪ ،‬بعدها ٌضرب الناتج فى سالب (‪)-‬‬
‫>>‬ ‫‪Bitwise right shift‬‬ ‫‪x >> y‬‬ ‫هى عملٌة ازاحة ‪ shift‬ألول خانتٌن ‪bits‬‬
‫ووضعهم فى اآلخر‬
‫<<‬ ‫‪Bitwise left shift‬‬ ‫‪x << y‬‬ ‫هى عملٌة ازاحة ‪ shift‬آلخر خانتٌن ‪bits‬‬
‫ووضعهم فى األول‬
‫>>>‬ ‫‪Right shift with‬‬ ‫هذا المعامل ٌشبه تما ًما المعامل >> ‪ ،‬باستثناء‬
‫‪Zero‬‬ ‫أن البتات التً تحولت على الٌسار تكون دائ ًما‬
‫صفرا‪.‬‬
‫ً‬
 ‫‪ -6‬النوع السادس‪ :Assignment Operators :‬عوامل التخصٌص هى عوامل تستخدم لتخصٌص‬
‫أو تعٌٌن لٌم المتغٌرات مثل ( ٌساوى)‬

‫‪Symbol‬‬ ‫‪Name‬‬ ‫‪Example‬‬ ‫‪Description‬‬

‫=‬ ‫‪Assignment‬‬ ‫‪x = y‬‬ ‫تخصٌص لٌمة ‪ y‬الى ‪X‬‬
‫=‪+‬‬ ‫‪Add and assign‬‬ ‫‪x += y‬‬ ‫عملٌة جمع ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=‪-‬‬ ‫‪Subtract and assign‬‬ ‫‪x -= y‬‬ ‫عملٌة طرح ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=*‬ ‫‪Multiply and assign‬‬ ‫‪x *= y‬‬ ‫عملٌة ضرب ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=‪/‬‬ ‫‪Divide and Assign‬‬ ‫‪x /= y‬‬ ‫عملٌة لسمة ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=‪%‬‬ ‫‪Modulus and assign‬‬ ‫‪x %= y‬‬ ‫عملٌة بالى المسمة ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=**‬ ‫‪Exponent and assign‬‬ ‫‪x **= y‬‬ ‫مضاعفة لٌمة ‪ X‬بمٌمة ‪ X ( y‬أُس ‪ )y‬ثم نخزن الناتج‬
‫داخل المتغٌر ‪x‬‬
‫‪//‬‬ ‫‪Floor Divide and‬‬ ‫‪x //= y‬‬ ‫عملٌة لسمة ولكن الناتج هٌتمرب أللرب عدد‬
‫‪assign‬‬ ‫صحٌح ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=<<‬ ‫‪Left shift and assign‬‬ ‫‪x <<= 2‬‬ ‫هى عملٌة ازاحة ‪ shift‬آلخر خانتٌن ‪bits‬‬
‫ووضعهم فى األول ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=>>‬ ‫‪Right shift and assign‬‬ ‫‪x >>= 2‬‬ ‫هى عملٌة ازاحة ‪ shift‬ألول خانتٌن ‪ bits‬ووضعهم‬
‫فى اآلخر ثم نخزن الناتج داخل المتغٌر ‪x‬‬
‫=&‬ ‫‪Bitwise and assign‬‬ ‫‪x &= y‬‬ ‫هو عملٌة جمع ال ‪ bits‬المشتركة ثم نخزن الناتج‬
‫داخل المتغٌر ‪x‬‬
‫=^‬ ‫‪Bitwise exclusive OR‬‬ ‫‪x ^= y‬‬ ‫هو عملٌة جمع ال ‪ bits‬الغٌر المشتركة ثم نخزن‬
‫‪and assign‬‬ ‫الناتج داخل المتغٌر ‪x‬‬
‫=|‬ ‫‪Bitwise inexclusive‬‬ ‫‪x |= y‬‬ ‫هو عملٌة جمع ال ‪ bits‬المشتركة والغٌر المشتركة‬
‫‪OR and assign‬‬ ‫ثم نخزن الناتج داخل المتغٌر ‪x‬‬
 ‫‪ : Miscellaneous Operators‬معامالت متنوعة يمكن استخدامها فى ‪javascript‬‬
‫‪ٌ ‬وجد نوعٌن آخرٌن ٌمكن استخدامهم ‪:‬‬
‫‪ : conditional operator (condition ? true : false ) -5‬معامل الشرط‬
‫‪ٌ ‬موم المعامل الشرط باختبار الشرط ‪ condition‬وفى حالة تحمك الشرط ٌنفذ الجملة األولى ‪true‬‬
‫وفى حالة عدم تحمك الشرط ٌنفذ الجملة الثانٌة ‪false‬‬
‫‪ ‬فهو ٌشبه إلى حد كبٌر ‪ if statement‬ولكن هذا العامل مختصر جدا النه ٌموم بتنفٌذ جملة ‪ if‬فى‬
‫سطر واحد فمط‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬سوف تظهر النتٌجة كاآلتى ‪:‬‬

 ‫ معامل لتحدٌد نوع البٌانات‬: typeof operator -2
‫ والذي‬single operand ‫ ٌتم وضعه لبل‬unary operator ‫ هو عامل آحادى‬typeof ‫ عامل‬
‫ تشٌر إلى نوع البٌانات الخاص‬string ‫ٌمكن أن ٌكون من أي نوع وتكون لٌمته عبارة عن‬
operand ‫بالمعامل‬
‫" ) حٌث ٌتم اختبار‬boolean" ‫" و‬string" ‫" و‬number"( ‫ مع‬operator ‫ ٌتعامل هذا‬
‫ حسب تحمك الشرط‬false ‫ أو‬true ‫ وتكون النتٌجة إما‬operand
operand ‫ التى ٌرجعها ال‬string ‫ فى الجدول التالى لائمة بأنواع المٌم‬
Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"

: ‫ مثال‬

: ‫ سوف تظهر النتٌجة كاآلتى‬

 ‫انذسس انخامس ‪ :‬اتخار انقشاس )‪(Decision making‬‬
‫اتخاذ المرار أو ما ٌسمى بجمل التحكم ‪ control statement‬هو تولع للظروف التً تحدث أثناء‬
‫تنفٌذ البرنامج وتحدٌد اإلجراءات المتخذة وفما للشروط‪.‬‬
‫أثناء كتابة أحد البرامج ‪ ،‬لد ٌكون هنان مولف تحتاج إلى اتخاذ مسار واحد من مجموعة معٌنة من‬
‫المسارات‪ .‬فً مثل هذه الحاالت ‪ ،‬تحتاج إلى استخدام العبارات الشرطٌة التً تسمح لبرنامجن‬
‫باتخاذ المرارات الصحٌحة وتنفٌذ اإلجراءات الصحٌحة‪.‬‬
‫‪ ‬كٌفٌة عمل ‪control statement‬‬
‫‪ٌ ‬تم تمٌٌم وتحلٌل تعبٌرات متعددة ‪multiple expressions‬‬
‫‪ٌ ‬كون الناتج عبارة عن لٌمتٌن إما ‪ True‬او ‪False‬‬
‫‪ ‬ثم نتخذ المرار بناءا ً على الناتج‬

‫‪ٌ ‬تم تنفٌذ الكود فى حالة تحمك الشرط ‪True‬‬

‫‪ : condition ‬هو الشرط الذى ٌتم التحمٌك علٌه‬
 (conditional statements( ‫ هنان عدة أنواع من الجمل الشرطٌة‬
‫ الخاصة بالشرط‬statement ‫ تنفذ االكواد‬condition ‫ إذا تحمك الشرط‬: if statement -5

: syntax 

if statement ‫ مثال على‬

statement ‫ ٌتم تنفٌذ الكود‬condition ‫ فى حالة تحمك الشرط‬

‫ وإذا لم ٌتحمك‬statement 1 ‫ تنفذ‬condition ‫ إذا تحمك الشرط‬: if …. else statement -2

statement 2 ‫تنفذ‬

: syntax 
 if else statement ‫ مثال على‬

statement2 ‫ نالحظ أن الشرط لم ٌتحمك لذلن ٌتم تنفٌذ‬

statement 1 ‫ تنفذ‬condition1 ‫ إذا تحمك الشرط‬: if....else if ….else statement -3

‫ تنفذ‬condition3 ‫ وإذا تحمك الشرط‬statement2 ‫ تنفذ‬condition2 ‫وإذا تحمك الشرط‬
statement4 ‫ وإذا لم ٌتحمك أى شرط تنفذ‬statement3

: syntax 
 ‫‪ ‬مثال على ‪If....elif ….else statement‬‬
‫هذا المثال من على مولع ‪tutorialspoint‬‬

‫‪ ‬نالحظ أن الشرط الثانى تتحمك لذلن ٌتم تنفٌذ ‪statement2‬‬

‫‪ٌ ‬مكنن استخدام عدد ال حصر له من هذا النوع ) ‪ ) if....else if ….else statement‬حٌث‬
‫تموم بتنفٌذ فرع متعدد المسارات ‪ multiway branch‬ولكن هذا لٌس هذا الحل األفضل ألنه لد‬
‫نجد أن جمٌع الفروع تعتمد على لٌمة متغٌر واحد ولذلن سوف نموم باستخدام طرٌمة آخرى وهى‬
‫عبارة عن ‪switch statement‬‬
 ‫‪ : switch statement -4‬إذا تحمك الشرط ‪ condition‬تنفذ االكواد ‪ statement‬الخاصة‬
‫بالشرط‬
‫‪ ‬الهدف من ‪ switch‬هو إعطاء‬
‫تعبٌر للتمٌٌم وعدة عبارات مختلفة‬
‫للتنفٌذ بنا ًء على لٌمة التعبٌر‪ٌ .‬تحمك‬
‫المترجم من كل حالة ممابل لٌمة‬
‫التعبٌر حتى ٌتم العثور على مطابمة‪.‬‬
‫إذا لم ٌتطابك شًء ‪ ،‬فسٌتم استخدام‬
‫شرط افتراضً‪.‬‬

‫‪: syntax ‬‬

‫‪ٌ ‬مكن كتابة استخدام أى عدد من الحاالت ‪cases‬‬

‫‪ ‬تشٌر ‪ break statement‬إلى نهاٌة ‪ case‬معٌنة‪ .‬وإذا تم حذفها ‪ ،‬سٌواصل المترجم تنفٌذ كل‬
‫‪ statement‬فً كل ‪ cases‬التى بعدها‬
 ‫‪ ‬مثال ‪ 5‬على ‪switch statement‬‬

‫‪ ‬نالحظ أن جمٌع ‪ cases‬لم تتحمك لذلن سوف ٌتم تنفٌذ الجملة االفتراضٌة ‪default‬‬

‫فى المثال السابك استخدمنا ‪break statement‬‬

 ‫‪ ‬مثال ‪ 2‬على ‪switch statement‬‬

‫‪ ‬نالحظ أن جمٌع ‪ cases‬لم تتحمك لذلن سوف ٌتم تنفٌذ الجملة االفتراضٌة ‪default‬‬

‫‪ ‬فى المثال السابك لم نستخدم ‪ break statement‬لذلن سوف ٌتم تنفٌذ جمٌع ‪ cases‬من بعد‬
‫‪ case‬التى تحمك فٌها الشرط )‪(case 2‬‬
‫‪ : nested if statement -5‬هى عبارة عن جمل شرطٌة متداخلة لو تحمك ‪ condition A‬هٌنفذ‬
‫الجمل الشرطٌة الثانٌة‬

‫‪: syntax ‬‬

‫‪ ‬مثال على ‪nested if statement‬‬

‫‪ ‬نالحظ أن الشرط األول ‪ conditionA‬تتحمك لذلن ٌتم الدخول الى الجمل الشرطٌة الثانٌة وٌتم‬
‫تنفٌذ الجملة ‪ statement‬الخاصة بالشرط الذى تحمك ‪condition‬‬
 ‫انذسس انسادس ‪ :‬انحهقاث انتكشاسيت )‪(loops‬‬
‫‪ ‬بشكل عام ‪ٌ ،‬تم تنفٌذ األكواد ‪ statements‬بشكل تسلسلً ‪ sequentially‬أى ٌتم تنفٌذ السطر‬
‫األول فً الدالة أوالً ‪ ،‬متبوعة بالثانٌة ‪ ،‬وهكذا‪ .‬ولكن أحٌانا ً أثناء كتابة أحد البرامج ‪ ،‬لد تواجه مولفًا‬
‫وتكرارا‪ .‬لذلن ستحتاج إلى كتابة عبارات حلمة تكرارٌة او ما ٌسمى‬ ‫ً‬ ‫مرارا‬
‫ً‬ ‫تحتاج فٌه إلى تنفٌذ إجراء‬
‫ب ‪ loops‬وتكمن أهمٌة ‪ loops‬أنها تملل عدد األسطر‪.‬‬

‫‪ ‬الحلمات التكرارٌة )‪ : (loops‬هى عبارة تكرار لجزء‬

‫من الكود )‪ (block of code‬عدة مرات بشكل تكرارى‬
‫‪ ‬توفر لغات البرمجة هٌاكل تحكم ‪control structures‬‬
‫مختلفة تسمح بممرات التنفٌذ األكثر تعمٌدًا وسوف ندرس‬
‫كل األنواع‬
 ‫‪ ‬أنواع الحلمات التكرارٌة )‪: ( types of Loops‬‬
‫‪ for loop -5‬هى اكثر الحلمات التكرارٌة أهمٌة وشهرة وتستخدم لتكرار جزء معٌن من الكود وتتكون‬
‫من ‪ 3‬أجزاء أساسٌة ‪:‬‬
‫‪ : loop initialization ‬جملة التهٌئة حٌث ٌتم تهٌئة ‪ loop‬حٌث نموم بتهٌئة العداد لمٌمة‬
‫البداٌة‪ .‬وٌتم تنفٌذ عبارة التهٌئة لبل بدء الحلمة‪.‬‬
‫‪ : test statement ‬جملة االختبار حٌث ٌتم اختبار ما إذا كان الشرط المعطى صحٌ ًحا أم ال‪.‬‬
‫إذا كان الشرط صحٌ ًحا ‪ ،‬فسٌتم تنفٌذ التعلٌمة البرمجٌة الممدمة داخل الحلمة ‪ ،‬وإال سٌخرج‬
‫عنصر التحكم من الحلمة‬
‫‪ : iteration statement ‬جملة التكرار حٌث ٌمكنن زٌادة أو تملٌل العداد الخاص بن‪.‬‬

‫‪ ‬بناء الجملة ‪:‬‬

‫‪ ‬مثال على ‪for‬‬

‫‪ ‬فى المثال السابك سوف ٌتم طباعة لٌمة ‪ 5‬ألن هنان عالمة ( = ) فى الشرط‬
‫نظرا‬
‫‪ٌ : for …. in loop -2‬تم استخدام هذا النوع لعمل ‪ loop‬داخل خصائص الكائن ‪ object‬و ً‬
‫ألننا لم ننالش الكائنات بعد ‪ ،‬فمد ال تشعر بالراحة مع هذه الحلمة‪ .‬ولكن بمجرد فهم كٌفٌة تصرف‬
‫الكائنات فً ‪ ، JavaScript‬ستجد هذه الحلمة مفٌدة للغاٌة‬

‫‪ ‬بناء الجملة ‪:‬‬

‫‪ ‬مثال على ‪for‬‬

‫‪ ‬فى هذا المثال سوف لمنا بطباعة جمٌع الخصائص ‪ properties‬الخاصة بالكائن ‪navigator‬‬
‫‪ٌ: while loop -3‬ستخدم لتكرار ‪ statement‬أو ‪ group of statements‬عندما ٌكون الشرط‬
‫المحدد هو ‪ True‬وعندما ٌصبح الشرط ‪ false‬سوف تتنتهى ‪. loop‬‬
‫‪ٌ ‬تم اختبار الشرط لبل تنفٌذ جسم الحلمة ‪loop body‬‬

‫‪ ‬بناء الجملة ‪:‬‬

‫‪ ‬مثال على ‪: while‬‬

‫‪ ‬الحظ ٌتم تنفٌذ األكواد كلما تحمك الشرط‬

‫‪ ‬الشرح ‪:‬‬
‫‪ ‬أوالً ‪ ،‬تتم تهٌئة المٌمة فً المتغٌر‪(.‬عملٌة إعالن ‪ declaration‬او تهٌئة ‪)initialization‬‬
‫‪ ‬ثانٌا ‪ٌ ،‬تم التحمك من الشرط او التعبٌر فإذا كان الشرط صحٌ ًحا ‪، True‬هٌتم تنفٌذ جمٌع‬
‫األكواد داخل ‪ body‬وإذا كان الشرط غٌر صحٌح ‪ ، False‬هٌتم تجاهل جمٌع األكواد داخل‬
‫‪ body‬وٌتم تنفٌذ األكواد التالٌة بعد ‪. body‬‬
‫‪ ‬ثالثًا ‪ ،‬فً حالة كون الشرط صحٌ ًحا بعد إكمال جمٌع العبارات ‪ٌ ،‬تغٌر المتغٌر أو ٌتنالص‪ .‬بعد‬
‫أن تغٌرت لٌمة الخطوة الثانٌة المتغٌرة ٌتم اتباعها‪ .‬تستمر هذه العملٌة حتى ٌصبح التعبٌر ‪/‬‬
‫الشرط ‪( .false‬عملٌة تغٌر لٌمة المتغٌر)‬
‫‪ ‬أخٌرا ٌتم تنفٌذ بمٌة التعلٌمات البرمجٌة خارج ‪. body‬‬
 ‫‪ٌ : do …. while loop -4‬ستخدم لتكرار ‪ statement‬أو ‪group of statements‬‬
‫‪ ‬تشبه الحلمة ‪ do ... while‬الحلمة ‪ while‬باستثناء أن تحمك الشرط ٌحدث فً نهاٌة الحلمة‪ .‬وهذا‬
‫ٌعنً أنه سٌتم تنفٌذ ‪ loop‬مرة واحدة على األلل لبل التحمك من ‪ condition‬حتى إذا كانت‬
‫‪ condition‬خاطئ‬

‫‪ ‬بناء الجملة ‪:‬‬

‫‪ ‬مثال على ‪: do… while‬‬

‫‪ ‬الحظ ٌتم تنفٌذ األكواد مروة واحدة على األلل لبل التحمك من الشرط‬

‫‪ ‬الشرح ‪:‬‬
‫‪ ‬أوالً ‪ ،‬تتم تخصٌص المٌمة فً المتغٌر‬
‫‪ ‬ثانٌا ً ‪ٌ :‬تم تنفٌذ الكود لبل التحمك من الشرط‬
‫‪ ‬ثالثا ً ‪ :‬ثالثا ً ٌتم التحمك من الشرط‬
 ‫‪ ‬أنواع جمل التحكم التكرارٌة )‪(Loop control statements‬‬
‫‪ ‬هى عبارة عن ‪ statements‬نستخدمها للتحكم فى ‪ loops‬بشكل أكثر تحكما ً ‪ ،‬فمثال عند نمطة‬
‫معٌنة ال ننفذ جزء من األكواد‬
‫‪ٌ ‬وفر ‪ JavaScript‬تحك ًما كامالً للتعامل مع الحلمات وعبارات التبدٌل‪ .‬لد ٌكون هنان مولف‬
‫ضا مولف عندما ترٌد‬ ‫عندما تحتاج إلى الخروج من حلمة دون الوصول إلى لاعها‪ .‬لد ٌكون هنان أٌ ً‬
‫تخطً جزء من كتلة التعلٌمات البرمجٌة الخاصة بن وبدء التكرار التالً للحلمة‪.‬وهنان عدة أنواع‬
‫سنتعرف علٌها اآلن‬

‫‪ : break Statement -5‬نستخدمها عندما نرٌد الخروج من ‪ loops‬او عند تجاهل مجموعة‬
‫من االكواد عند نمطة معٌنة ‪ jump statement‬وتستخدم مع ‪ for‬و ‪while‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬الحظ لم ٌتم اكتمال ‪ loop‬وتم الخروج من ‪ loop‬عندما تصبح ‪x=5‬‬

‫‪ : Continue Statement -2‬تستخدم عندما نرٌد الخروج من ‪ loops‬عند نمطة معٌنة ثم‬
‫ٌستمر فى تنفٌذ األكواد بعدها‬

‫‪ ‬الحظ عندما تصبح ‪ x=5‬فٌحدث تخطى لهذا الجزء‬

 : Labels in control
colon ( : ) ‫ متبوعا ً بعالمة‬identifier ‫ هو عبارة عن معرف‬: label 
ً‫ فً التحكم ف‬continue ‫ و‬break ‫ مع‬label ‫ ٌمكن استخدام‬JavaScript 1.2 ‫ بد ًءا من‬
.‫التدفك بشكل أكثر دلة‬
block of code ‫ أو‬statement ‫ على‬label ‫ ٌتم تطبٌك‬

:tutorialspoint ‫ مثال من على مولع‬

‫ الحظ النتٌجة‬
‫‪ ‬مثال ‪ 2‬على مولع ‪: tutorialspoint‬‬

‫‪ ‬الحظ النتٌجة‬
 ‫انذسس انسابع ‪ :‬انذوال أو انوظائف )‪(functions‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على مفهوم الدوال ‪ methods‬أو الوظٌفة ‪ function‬أو االجراءات‬
‫‪ procedures‬لها أسماء وتعرٌفات كتٌرة ولكن كلهم لهم نفس الهدف ونفس المعنى‬
‫‪ : function‬الوظٌفة أو الدالة أو االجراء هو مجموعة من التعلٌمات البرمجٌة المابلة إلعادة االستخدام‬
‫والتً ٌمكن استدعاؤها فً أي مكان فً البرنامج‪.‬‬
‫‪ ‬أهمية الدوال ‪ :‬هنان بعض النماط التى توضح لنا اهمٌة ‪: function‬‬
‫‪ ‬عدم تكرار نفس الكود مرارا وتكرارا‪.‬‬
‫‪ٌ ‬ساعد المبرمجٌن فً كتابة الرموز النمطٌة ‪.modular codes‬‬
‫‪ ‬تسمح للمبرمج بتمسٌم برنامج كبٌر إلى عدد من الوظائف الصغٌرة والمابلة لإلدارة‪.‬‬

‫انواع الدوال ‪:‬‬

‫‪ : Built-in function -5‬دوال تم تعرٌفها مسبما ً داخل لغة ‪ javascript‬مثل )(‪ write‬و )(‪alert‬‬
‫‪ : User functions -2‬دوال ٌتم تعرٌفها عن طرٌك المبرمج وبذلن ٌمكنن عمل أى دالة‬

‫‪ٌ ‬مكنن تعرٌف أى دالة خاصة بن داخل لغة ‪javascript‬‬

‫‪ ‬الدوال ‪ functions‬مثل المتغٌرات ‪ variables‬بمعنى لكى استخدم المتغٌرات ٌجب تعرٌف المتغٌر‬
‫ثم نستخدمه بعد ذلن بنفس الطرٌمة ٌمكن تعرٌف الدوال ثم استدعاء الدوال بعد ذلن‬

‫‪ : Function Definition‬تعرٌف الدالة (تعرٌف الوظٌفة)‬

‫عا لتعرٌف ‪ function‬فً‬ ‫‪ ‬لبل أن نستخدم ‪ ، function‬نحتاج إلى تعرٌفها‪ .‬الطرٌمة األكثر شٌو ً‬
‫‪ JavaScript‬هً باستخدام الكلمة المحجوزة ‪ ، function‬متبوعةً باسم للدالة لم ٌستخدم من لبل‬
‫(اسم فرٌد من نوعه) ‪ ،‬ثم ٌتبع ب بمعامالت الدالة ‪ parameters‬أو ‪( arguments‬لد تكون‬
‫فارغة) ‪ ،‬ثم نكتب االكواد ‪ statements‬بداخل ( } { ) كاآلتى ‪:‬‬

‫‪ : Calling a Function‬الستدعاء الدوال أو استخدامها نكتب االسم الذى استخدمناه سابما عند تعرٌف‬
‫الدوال فمط‬
 ‫‪ ‬مثال على تعرٌف الدوال وطرٌمة استدعاء الدوال‬

‫‪ ‬الجزء الذى ٌحاط باللون األزرق هذا ٌسمى تعرٌف الدالة ‪ defining function‬والجزء الذى تحته‬
‫خط أحمر ٌسمى استدعاء الدالة ‪calling function‬‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Click Here‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Click Here‬سوف ٌستدعى الدالة وٌظهر كلمة "! ‪"Hello world‬‬
 ‫‪ : Function Parameters‬معامالت ٌتم تمرٌرها داخل الدالة‬
‫‪ ‬حتى اآلن ‪ ،‬رأٌنا ‪ functions‬بدون معامالت ‪ parameters‬أو لٌم نمررها للدالة‪ .‬وهنان طرٌمة‬
‫بسٌطة نستخدمها لتمرٌر ‪ parameters‬مختلفة أثناء استدعاء وظٌفة‪ .‬حٌث ٌمكن التماط هذه‬
‫‪ parameters‬التً تم تمرٌرها داخل الدالة وٌمكن إجراء أي تالعب على تلن ‪.parameters‬‬
‫ٌمكن أن تأخذ الدالة ‪ parameters‬متعددة ونفصل بٌهم بفواصل ) ‪.comma ( ,‬‬
‫‪ ‬مثال ‪:‬‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Click Here‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Click Here‬سوف ٌستدعى الدالة وٌظهر الناتج التالى‬
 ‫‪ : The return Statement‬استخدام جملة ‪return‬‬
‫‪ٌ ‬مكن أن تحتوي ‪ function‬على جملة إرجاع اختٌاري ‪ . optional return statement‬هذا‬
‫مطلوب إذا كنت ترٌد إرجاع لٌمة من دالة‪ٌ .‬جب أن نكتب جملة ‪ return‬آخر سطر فى األكواد ألنها‬
‫تنهً الدالة ثم ترجع لٌمة‬
‫‪ ‬مثال ‪ :‬فى المثال التالى نموم بدمج االسم االول مع االسم الثانى ثم نرجع مجموع المٌمتٌن‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Click Here‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Click Here‬سوف ٌستدعى الدالة وٌظهر الناتج التالى‬
 ‫‪ : Nested Functions‬الدوال المتداخلة‬
‫‪ ‬لبل اصدار ‪ ، JavaScript 1.2‬تم تعرٌف ‪ Nested Functions‬داخل األكواد البرمجٌة ذات‬
‫المستوى األعلى فمط ‪ ، level global code‬ولكن ٌسمح ‪ JavaScript 1.2‬بتداخل الدالة داخل‬
‫ض ا‪.‬‬
‫دوال أخرى أٌ ً‬
‫‪ ‬ال ٌزال هنان لٌود لد ال تظهر تعرٌفات الدالة داخل ‪ loops‬أو الجمل الشرطٌة‪ .‬تنطبك هذه المٌود‬
‫على تعرٌفات الدالة فمط اى على ‪ statement‬الموجودة داخل ‪. function‬‬

‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ Math ‬هو عبارة عن ‪ object‬داخل ‪ٌ javascript‬حتوى على عدد من الدوال الرٌاضٌة‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Call Function‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Call Function‬سوف ٌستدعى الدالة وٌظهر الناتج التالى‬
 ‫‪ : The Function() Constructor‬دالة ال ُمنشئ‬
‫‪ Constructor ‬عبارة عن مصطلحات من ‪ .Object Oriented Programming‬لد ال تشعر‬
‫بعدم استٌعاب هذا النوع ‪ ،‬ولكن كل ما ٌجب معرفته فى هذا الفصل اآلتى ‪:‬‬
‫‪ : Function() Constructor ‬عبارة عن نوع من أنواع الدوال الذى نستخدمه مع الكلمة‬
‫المحجوزة ‪new operator‬‬
‫‪ٌ ‬تم تعرٌف هذا النوع عن طرٌك الكلمة ‪( Function‬لٌس ‪)function‬‬
‫‪ٌ ‬تم تمرٌر ‪ parameters‬أو ‪ arguments‬كعبارة عن ‪ string‬ولكن آخر ‪ parameter‬هو‬
‫عبارة عن جسم الدالة ‪ body‬وٌمكن كتابة أى عدد من ‪ parameters‬وال ٌمكن تمرٌر اسماء‬
‫دوال آخرى داخل هذا النوع‬
‫‪ٌ ‬مكن كتابة اكثر من جملة ‪ statement‬داخل ‪ body‬عن طرٌك الفصل بٌن الجمل بعالمة ) ; (‬

‫‪ : unnamed functions ‬هى عبارة عن دوال ‪ functions‬لٌس لها اسم وٌتم انشائها عن‬
‫طرٌك ‪ Function() constructor‬وتسمى بالدوال المجهولة ‪anonymous functions‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Call Function‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Call Function‬سوف ٌستدعى الدالة وٌظهر الناتج التالى‬
 ‫‪: Function Literals‬‬
‫هى طرٌمة آخرى لتعرٌف الدوال وهو عبارة عن تعبٌر ‪ expression‬التى تحدد الدوال التى لٌس‬
‫لها اسم ‪unnamed functions‬‬
‫الفرق بٌن ‪ function literals‬وبٌن الدوال اآلخرى‬
‫‪ functions literals -5‬تستخدم التعبٌرات ‪ expression‬بدالً من ‪statement‬‬
‫‪ functions literals -2‬لٌس من الضرورى أن ٌكون لها اسم‬

‫‪: syntax ‬‬

‫‪ٌ ‬مكن تحدٌد اسم للدالة عند التعرٌف ولكن لٌس له أى أهمٌة كاآلتى ‪:‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Call Function‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Call Function‬سوف ٌستدعى الدالة وٌظهر الناتج التالى‬
 ‫انذسس انثامن ‪ :‬األحذاث )‪(Events‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على مفهوم األحداث ‪events‬‬
‫‪ : events‬األحداث هى عبارة عن األفعال التى ٌموم بها الشخص وٌنتج عنها رد الفعل ‪ ،‬فعندما ٌزور‬
‫أحد المستخدمٌن مولعن على الوٌب ‪ ،‬فإنهم ٌفعلون أشٌاء مثل النمر على النصوص والصور والروابط‬
‫المعطاة ‪ ،‬وتحرٌن مؤشر الماوس فوق األشٌاء وما إلى ذلن‪ .‬هذا ما ٌسمى ب ‪events‬‬
‫‪ٌ ‬تم التعامل مع التفاعل لغة ‪ JavaScript‬مع لغة ‪ HTML‬من خالل األحداث التً تحدث عندما ٌعالج‬
‫المستخدم أو المستعرض صفحة‪.‬‬
‫‪ ‬عندما ٌتم تحمٌل الصفحة ‪ٌ ، page loads‬طلك علٌها اسم ‪ . event‬عندما ٌنمر المستخدم على زر‬
‫ضا عبارة عن ‪ ، event‬ومثل الضغط على أي مفتاح وإغالق نافذة وتغٌٌر‬ ‫‪ ،‬تكون هذه النمرة أٌ ً‬
‫حجم نافذة وما إلى ذلن‪.‬‬
‫‪ٌ ‬مكن للمطورٌن استخدام هذه األحداث لتنفٌذ استجابات أكواد لغة ‪ ، javascript‬ومن ضمن أمثلة‬
‫االستجابات ‪ responses‬مثل إغالق النوافذ عند الضغط على ‪ ، buttons‬والرسائل التً سٌتم‬
‫عرضها للمستخدمٌن عند الضغط على ‪ ،buttons‬والبٌانات المراد التحمك منها ‪ ،‬وأي نوع آخر‬
‫من االستجابة التً ٌمكن تخٌلها عند الضغط على ‪buttons‬‬
‫‪ Events ‬هً جزء من )‪ Document Object Model (DOM‬المستوى ‪ 3‬وكل عنصر ‪HTML‬‬
‫ٌحتوي على مجموعة من األحداث التً ٌمكن أن تؤدي إلى تنفٌذ أكواد ‪. javascript‬‬

‫‪ ‬سوف نشرح بعض ‪ events‬التى تستخدم بشكل شائع‬

‫‪ : <body> and <frameset> Level Events‬أحداث خاصة ب ‪ body‬و ‪frameset‬‬
‫‪ ‬هنان خاصٌتان أو حدثان ٌمكن استخدامهما لتشغٌل أي كود ‪ javascript‬أو ‪ vbscript‬عند حدوث‬
‫أي حدث على مستوى المستند ككل‪.‬‬
‫‪ٌ : onload Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند تحمٌل مستند ‪HTML‬‬
‫‪ٌ : onunload Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند إلغاء تحمٌل مستند ‪HTML‬‬
‫‪ o‬الحدث ‪ onunload‬عكس الحدث ‪onload‬‬

‫‪ٌ : script ‬شٌر إلى أكواد أو دوال ‪ javascript‬أو ‪VBScript‬‬

 ‫‪ : <form> Level Events‬أحداث خاصة ب ‪frame‬‬
‫‪ ‬هنان ‪ 6‬خصائص أو أحداث ٌمكن استخدامهم لتشغٌل أي ‪ javascript‬أو ‪ vbscript‬عند حدوث‬
‫أى حدث على مستوى النموذج‪.‬‬
‫‪ٌ : onchange Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عندما ٌتغٌر العنصر‬
‫‪ٌ : onsubmit Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند ارسال النموزج‬
‫‪ٌ : onreset Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند إعادة تعٌٌن النموذج‬
‫‪ٌ : onselect Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند تحدٌد العنصر‬
‫‪ٌ : onfocus Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عندما ٌتم التركٌز على العنصر‬
‫‪ٌ : onblur Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عندما ٌفمد العنصر التركٌز‬
‫‪ o‬الحدث ‪ onblur‬عكس الحدث ‪onfocus‬‬

‫‪ٌ : script ‬شٌر إلى أكواد أو دوال ‪ javascript‬أو ‪VBScript‬‬

‫‪ : <Keyboard > Level Events‬أحداث خاصة ب ‪keyboard‬‬

‫‪ ‬هنان ‪ 3‬خصائص أو أحداث ٌمكن استخدامهم لتشغٌل أي ‪ javascript‬أو ‪ vbscript‬عند حدوث‬
‫أى حدث عن طرٌك لوحة المفاتٌح ‪ keyboard‬ولكن هذه األحداث لٌست صحٌحة مع العناصر‬
‫التالٌة ‪:‬‬
‫‪ base, bdo, br, frame, frameset, head, html, iframe, meta, param, script,‬‬
‫‪style, and title‬‬

‫‪ٌ : onkeydown Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند الضغط على المفتاح‬
‫‪ٌ : onkeypress Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند الضغط على المفتاح وتحرٌره‬
‫‪ٌ : onkeyup Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند تحرٌر المفتاح (ترن المفتاح)‬
‫‪ o‬الحدث ‪ onkeydown‬عكس الحدث ‪onkeyup‬‬
‫‪ٌ : script ‬شٌر إلى أكواد أو دوال ‪ javascript‬أو ‪VBScript‬‬
 ‫‪ : Other Level Events‬أحداث شائعة ومهمة‬
‫‪ ‬هنان ‪ 7‬خصائص أو أحداث ٌمكن استخدامهم لتشغٌل أي ‪ javascript‬أو ‪ vbscript‬عند حدوث‬
‫أى حدث عن طرٌك الماوس ‪ mouse‬ولكن هذه األحداث لٌست صحٌحة مع العناصر التالٌة ‪:‬‬
‫‪ base, bdo, br, frame, frameset, head, html, iframe, meta, param, script,‬‬
‫‪style, title‬‬

‫‪ٌ : onclick Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند النمر بالماوس على العنصر‬
‫‪ٌ : ondblclick Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند النمر المزدوج على العنصر‬
‫‪ٌ : onmousedown Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند الضغط على زر الماوس‬
‫‪ٌ : onmouseup Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند تحرٌر زر الماوس‬
‫‪ٌ : onmousemove Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عند تحرٌن مؤشر الماوس‬
‫بوجه عام‬
‫‪ٌ : onmouseout Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عندما ٌتحرن مؤشر الماوس خارج‬
‫العنصر‬
‫‪ٌ : onmouseover Event ‬ستخدم هذا ‪ event‬لتنفٌذ ‪ script‬عندما ٌتحرن مؤشر الماوس فوق‬
‫العنصر‬
‫‪ o‬الحدث ‪onmousedown‬عكس الحدث ‪onmouseup‬‬
‫‪ٌ : script ‬شٌر إلى أكواد أو دوال ‪ javascript‬أو ‪VBScript‬‬

‫‪ ‬سوف نذكر فى آخر هذه الدورة جمٌع ‪ events‬التى توجد داخل لغة ‪javascript‬‬
 ‫‪ ‬أمثلة على ‪ events‬من مولع ‪tutorialspoint‬‬
‫‪ ‬مثال على ‪onclick‬‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر ‪ button‬مكتوب علٌه "‪"Click Here‬‬

‫‪ ‬وعندما نضغط على كلمة ‪ Click Here‬سوف ٌستدعى الدالة وٌظهر الناتج التالى‬
 ‫‪ ‬مثال على ‪onmouseover and onmouseout‬‬
‫ٌساعدن هذان النوعان من األحداث على إنشاء تأثٌرات لطٌفة مع الصور أو حتى مع النص‬
‫ضا‬
‫أٌ ً‬

‫‪ ‬عند تنفٌذ الكود سوف ٌظهر اآلتى ‪:‬‬

‫‪ ‬وعندما نمف بالماوس فوق الجملة الثانٌة نجد تغٌر النص وأصبح كاآلتى ‪:‬‬
 ‫انذسس انتاسع ‪ :‬مهفاث انتعشيف )‪(cookies‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على ملفات تعرٌف االرتباط ‪cookies‬‬
‫‪ : Cookies ‬معناها ملفات تعرٌف اإلرتباط أو سجل التتبع أو سجل التصفح أو الكوكٌز وهً‬
‫ملفات حجمها ٌُماس بالـ ‪ٌ ،Bit‬تم تخزٌنها بشكل تلمائً فً المتصفح‪ ،‬وبعض الموالع التً تزورها‬
‫للمرة األولى تنبهن من خالل شرٌط أعلى أو أسفل المولع بالموافمة وجود هذه الملفات فً جهازن‬
‫لتسهٌل تصفحن للمولع وهى ملفات مجرد برمجٌات نصٌة ال تنفٌذٌة‬
‫ً‬
‫بروتوكوال عدٌم‬ ‫‪ ‬تستخدم متصفحات الوٌب والخوادم بروتوكول ‪ HTTP‬للتواصل ‪ ،‬وٌعتبر ‪HTTP‬‬
‫الجنسٌة ‪ . stateless‬ولكن بالنسبة لمولع تجاري على الوٌب ‪ٌ ،‬لزم الحفاظ على معلومات الجلسة‬
‫‪ session information‬بٌن الصفحات المختلفة للمولع ‪ .‬على سبٌل المثال ‪ٌ ،‬نتهً المستخدم من‬
‫التسجٌل ‪ registration‬بعد إكمال العدٌد من الصفحات‪ .‬ولكن اذا اردنا الحفاظ على معلومات‬
‫جلسة المستخدمٌن عبر جمٌع صفحات الوٌب فماذا نفعل ‪ ،‬هنا كانت اهمٌة ‪ cookies‬فهى تموم‬
‫بالحفاظ على معلومات خاصة بالمستخدم وٌتم تخزٌنها على الجهاز الشخصً‬
‫‪ٌ ‬عد استخدام ملفات تعرٌف االرتباط الطرٌمة األكثر فاعلٌة فً تذكر وتتبع التفضٌالت والمشترٌات‬
‫والعموالت والمعلومات األخرى المطلوبة لتحسٌن تجربة الزائر أو إحصائٌات المولع‪.‬‬

‫كٌف تعمل ملفات التتبع ‪cookie‬‬

‫‪ٌ ‬رسل الخادم ‪ server‬بعض البٌانات ‪ data‬إلى متصفح الزائر ‪ visitor‬فً شكل ملف تعرٌف‬
‫ارتباط ‪ .cookie‬لد ٌمبل المتصفح ‪ browser‬ملف تعرٌف االرتباط‪ .‬إذا تم لبول هذه الملفات ‪،‬‬
‫فانه ٌتم تخزٌن هذه ‪ cookie‬كسجل نص عادي ‪ plain text record‬على محرن األلراص‬
‫الثابت ‪ hard drive‬الخاص بالزائر‪.‬‬
‫‪ ‬عندما ٌصل الزائر إلى صفحة أخرى على مولعن ‪ٌ ،‬رسل المتصفح ملف تعرٌف االرتباط نفسه‬
‫إلى الخادم السترداده‪ .‬بمجرد استرداده ‪ٌ ،‬عرف الخادم الخاص بن ‪ٌ /‬تذكر ما تم تخزٌنه فً ولت‬
‫سابك فٌسهٌل علٌه تذكر المعلومات الخاصة بن‬

‫‪ ‬تم تصمٌم ‪ cookie‬فً األصل لبرامج ‪ٌ .CGI‬تم نمل البٌانات الموجودة فً داخل ‪ cookie‬تلمائًٌا‬
‫بٌن متصفح الوٌب وخادم الوٌب ‪ ،‬بحٌث ٌمكن ‪ CGI scripts‬الموجودة على الخادم لراءة وكتابة‬
‫لٌم ‪ cookie‬المخزنة على العمٌل‪.‬‬

‫ضا معالجة ملفات تعرٌف االرتباط باستخدام خاصٌة ‪cookie property‬‬ ‫‪ٌ ‬مكن لـ ‪ JavaScript‬أٌ ً‬
‫الموجودة بعنصر المستند ‪ .Document object‬تستطٌع ‪ JavaScript‬لراءة ملفات تعرٌف‬
‫االرتباط التً تنطبك على صفحة الوٌب الحالٌة وإنشائها وتعدٌلها وحذفها‪.‬‬
 ‫‪ ‬تموم ملفات التتبع ‪ cookie‬بتسجٌل ‪ 5‬حمول متغٌرة الطول ‪variable-length fields‬‬
‫‪ٌ : Name=Value -5‬تم تعٌٌن ‪ set‬ملفات تعرٌف االرتباط واستردادها ‪ retrieve‬فً شكل‬
‫أزواج لٌم مفتاحٌة ‪key-value pairs‬‬

‫‪ : Expires -2‬معناها انتهاء الصالحٌة ومن خاللها ٌمكن تعٌٌن تارٌخ انتهاء صالحٌة ملف تعرٌف‬
‫غا ‪ ، blank‬فستنتهً صالحٌة ملف تعرٌف‬ ‫االرتباط الذى سوف ٌنتهى فٌه‪ .‬وإذا كان هذا فار ً‬
‫االرتباط عند مغادرة الزائر المتصفح‪.‬‬

‫‪ : Domain -3‬معناها المجال ومن خاللها ٌتم تحدٌد اسم المجال الخاص بمولعن‪.‬‬

‫‪ : Path -4‬معناها المسار ومن خاللها ٌتم تحدٌد المسار إلى ‪ directory‬أو صفحة الوٌب التً‬
‫تحدد ملف تعرٌف االرتباط‪.‬و لد ٌكون هذا فار ً‬
‫غا ‪ blank‬إذا كنت ترٌد استرداد ملف تعرٌف‬
‫االرتباط من أي دلٌل أو صفحة‪.‬‬

‫‪ : Secure -5‬معناها آمن فإذا كان هذا الحمل ٌحتوي على كلمة "‪ ، "secure‬فٌمكن استرداد ملف‬
‫تعرٌف االرتباط فمط من خالل خادم آمن ‪ . secure server‬وإذا كان هذا الحمل فار ً‬
‫غا ‪ ،‬فال‬
‫ٌوجد مثل هذا المٌد‪.‬‬

‫‪ : Storing Cookies‬تخزٌن ملفات تعرٌف االرتباط‬

‫إن أبسط طرٌمة إلنشاء ‪ Cookies‬هً تعٌٌن لٌم ‪ string‬إلى الكائن ‪ document.cookie‬كما ٌتظهر‬
‫فى الكود التالى ‪:‬‬

‫‪ : expires ‬هذه الخاصٌة اختٌارٌة‪ .‬فإذا لدمت بتعٌٌن بتارٌخ أو ولت صالح لهذه الخاصٌة ‪،‬‬
‫فحٌنئذ سوف تنتهً صالحٌة ‪ cookie‬فً التارٌخ أو الولت الذى تم تعٌٌنه ‪ ،‬وبعد ذلن لن ٌتم‬
‫الوصول إلى لٌمة ‪. cookie‬‬
‫‪ ‬مالحظة ‪ -‬لد ال تتضمن لٌم ‪ cookie‬الفاصالت المنموطة ‪ semicolons‬أو الفواصل ‪ commas‬أو‬
‫المسافات ‪ . whitespace‬لذلن ربما تستخدم دالة )(‪ escape‬لتشفٌر ‪ encode‬المٌم لبل تخزٌنها‬
‫ضا استخدام الدالة )(‪ unescape‬الممابلة للدالة‬‫داخل‪ .‬إذا لمت باستخدام هذه الدالة فٌجب علٌن أٌ ً‬
‫)(‪ escape‬عند لراءة لٌمة ‪. cookie‬‬
 ‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند ادخال لٌمة سوف ٌظهر لنا النتٌجة كاآلتى ‪:‬‬

‫‪ ‬عند عدم ادخال لٌمة سوف ٌظهر لنا هذه الرسالة‬

‫‪ ‬اآلن ٌحتوي جهازن على ‪ٌ cookie‬سمى ‪ٌ . name‬مكنن تعٌٌن ‪ cookies‬متعددة باستخدام أزواج‬
‫‪ key=value‬وٌفصل بٌنهم بفواصل ‪comma‬‬
 ‫‪ : Reading Cookies‬لراءة ملفات تعرٌف االرتباط‬
‫إن أبسط طرٌمة لمراءة ‪ Cookies‬هً عن طرٌك الكائن ‪ document.cookie‬ألن لٌمة هذا الكائن‬
‫هً عبارة عن ‪ cookie‬لذلن ٌمكنن استخدام هذه ‪ string‬عندما ترٌد الوصول إلى ملف تعرٌف‬
‫االرتباط‪ .‬تحتفظ ‪ string‬الخاصة ب ‪ document.cookie‬بمائمة من أزواج ‪name = value‬‬
‫مفصولة بفواصل منموطة ‪ ،‬حٌث ٌكون ‪ name‬هو اسم ‪ cookie‬وٌكون ‪ value‬هو لٌمة ‪string‬‬
‫الخاصة بها‪.‬‬
‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬تستخدم الدالة )(‪ split‬لكسر ‪ string‬إلى ‪ key‬و ‪value‬‬

‫‪ ‬تستخدم الدالة ‪ lenght‬لتحدٌد طول المصفوفة ‪array‬‬
 ‫‪ : Setting Cookies Expiry Date‬تحدٌد تارٌخ انتهاء صالحٌة ‪cookies‬‬
‫ٌمكنن إطالة تارٌخ صالحٌة ‪ cookie‬إلى ما بعد جلسة المتصفح الحالٌة عن طرٌك تعٌٌن تارٌخ انتهاء‬
‫الصالحٌة وحفظ تارٌخ انتهاء الصالحٌة داخل ‪ٌ .cookie‬مكن المٌام بذلن عن طرٌك تعٌٌن التارٌخ‬
‫والولت داخل الخاصٌة " ‪" expires‬‬
‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬تستخدم الدالة )(‪ setMonth‬لتعٌٌن لٌمة الشهر للتارٌخ‬

‫‪ ‬تستخدم الدالة )(‪ getMonth‬الٌجاد لٌمة الشهر للتارٌخ‬
‫‪ ‬تستخدم الدالة )(‪ now.toUTCString‬لتعٌٌن لٌمة الشهر بالنظام العالمى ‪UTC‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند ادخال لٌمة "‪ "mahmoud‬سوف ٌظهر لنا النتٌجة كاآلتى ‪:‬‬
 ‫‪ : Deleting a Cookie‬تحدٌد تارٌخ انتهاء صالحٌة ‪cookies‬‬
‫فً بعض األحٌان ‪ ،‬ستحتاج إلى حذف ‪ cookie‬ال ترجع لنا أى لٌمة ‪،‬وٌتم ذلن عن طرٌك تعٌٌن ولت‬
‫ماضً للخاصٌة "‪"expires‬‬
‫‪ ‬مثال ‪ :‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند ادخال لٌمة "‪ "mahmoud‬سوف ٌظهر لنا النتٌجة كاآلتى ‪:‬‬
 ‫انذسس انعاشش ‪ :‬إعادة توجيه الصفحة )‪(Page Redirection‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على كٌفٌة اعادة توجٌه الصفحة‬
‫لد تكون واجهت مولفا ً حٌث لمت بالنمر فوق عنوان ‪ URL‬للوصول إلى صفحة ‪ X‬ولكن تم توجٌهن‬
‫داخلًٌا إلى صفحة أخرى ‪ٌ .Y‬حدث ذلن بسبب إعادة توجٌه الصفحة ‪Page Redirection‬‬

‫‪ ‬لماذا نستخدم ‪ page redirection‬؟‬

‫هنان أسباب عدٌدة وراء رغبتن فً إعادة توجٌه مستخدم من الصفحة األصلٌة من ضمن هذه األسباب‪:‬‬
‫‪ ‬فى حالة تغٌر ‪ domain‬الخاص بن‬
‫أحٌانا ً ال ٌعجبن اسم ‪ domain‬وأنت تنتمل إلى اسم جدٌد‪ .‬فً مثل هذا السٌنارٌو ‪ ،‬لد ترغب فً‬
‫توجٌه جمٌع زوارن إلى المولع الجدٌد‪ .‬هنا ٌمكنن الحفاظ على مولعن المدٌم ولكن وضع صفحة‬
‫واحدة مع إعادة توجٌه الصفحة بحٌث ٌمكن لجمٌع زوار مولعن المدٌم الحضور إلى مولعن الجدٌد‪.‬‬
‫‪ ‬فى حالة عمل أكثر من صفحة معتمدا ً على البلدان المختلفة او اصدارات مختلفة للمتصفح‬
‫لمد لمت بإنشاء صفحات متعددة استنادًا إلى إصدارات المستعرض أو أسماءها أو لد تكون مستندة إلى‬
‫بلدان مختلفة ‪ ،‬بدالً من استخدام إعادة توجٌه صفحة الخادم من جانب الخادم ‪server-side page‬‬
‫‪ٌ ، redirection‬مكنن استخدام إعادة توجٌه الصفحة من جانب العمٌل ‪client-side page‬‬
‫‪ redirection‬لتوجٌه المستخدمٌن إلى الصفحة المناسبة‪.‬‬
‫‪ ‬فى حالة انن ترٌد الحفاظ على زوار مولعن المادمٌن من خالل ‪search engines‬‬
‫ربما لامت محركات البحث بفهرسة صفحاتن بالفعل‪ .‬ولكن أثناء االنتمال إلى ‪ domain‬آخر ‪ ،‬ال‬
‫ترغب فً فمد الزوار المادمٌن من خالل محركات البحث ‪ .search engines‬لذلن ٌمكنن استخدام‬
‫إعادة توجٌه الصفحة من جانب العمٌل‪ .‬ولكن ضع فً اعتبارن أنه ال ٌنبغً المٌام بذلن لخداع محرن‬
‫البحث ‪ ،‬فمد ٌؤدي ذلن إلى حظر مولعن‪.‬‬

‫كٌف ٌمكن عمل إعادة توجٌه للصفحة؟‬

‫من السهل جدًا إعادة توجٌه الصفحة باستخدام جافا سكرٌبت على جانب العمٌل ‪ .client side‬إلعادة‬
‫توجٌه زائري مولعن إلى صفحة جدٌدة ‪ ،‬تحتاج فمط إلى إضافة هذا الكود داخل ‪<head> tag‬‬

‫‪ URL ‬هنكتب بداخلها مسار المولع الذى نرٌد التوجه الٌه‬

 ‫‪ ‬مثال ‪ : 5‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند الضغط على كلمة "‪ "Redirect Me‬سوف ٌفتح ٌعٌد توجٌه الصفحة الحالٌة إلى صفحة آخرى‬
 ‫‪ ‬مثال ‪ : 2‬من على مولع ‪tutorialspoint‬‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬بعد ‪ 10‬ثوانً سوف ٌتم اعادة توجٌه الصفحة الحالٌة إلى صفحة آخرى‬

‫‪ٌ ‬مكنن عرض رسالة مناسبة لزوار مولعن لبل إعادة توجٌههم إلى صفحة جدٌدة‪ .‬لد ٌحتاج هذا إلى‬
‫تأخٌر زمنً للٌالً لتحمٌل صفحة جدٌدة‪ٌ .‬وضح المثال السابك كٌفٌة عمل اعادة توجٌه بعد فترة زمنٌة‬
‫من فتح المولع عن طرٌك الدالة )(‪setTimeout‬‬
‫‪ setTimeout() ‬هً دالة مدمجة داخل الجافا سكرٌبت والتً ٌمكن استخدامها لتنفٌذ وظٌفة او دالة‬
‫أخرى بعد فترة زمنٌة محددة‪.‬‬
 ‫‪ ‬مثال ‪ : 3‬من على مولع ‪tutorialspoint‬‬

‫‪ٌ ‬وضح المثال السابك كٌفٌة إعادة توجٌه زائري مولعن إلى صفحة مختلفة باالعتماد على متصفحات‬
‫مختلفة آخرى ‪.‬‬
 ‫انذسس انحادى عشش ‪ :‬تحديث الصفحة )‪(Page Refresh‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على كٌفٌة عمل تحدٌث للصفحة ‪refresh‬‬
‫ٌمكنن تحدٌث صفحة وٌب باستخدام الدالة )(‪ reload‬وٌمكن استدعاء هذا الرمز تلمائًٌا عند ولوع‬
‫حدث ‪ event‬أو ببساطة عندما ٌنمر المستخدم على رابط‪ .‬إذا كنت ترغب فً تحدٌث صفحة وٌب‬
‫باستخدام النمر بالماوس ‪ ،‬فالحظ المثال التالى ‪:‬‬

‫‪ ‬مثال ‪:‬‬

‫‪ ‬سوف تظهر الصفحة بهذا الشكل‬

‫‪ ‬عند الضغط على "‪ "Refresh Page‬فسوف ٌعمل تحدٌث للصفحة‬

‫‪ : reload( boolean ) ‬هذه الدالة تسمح بعمل ‪ refresh‬للصفحة عند الضغط على الرابط‬
‫وبتاخد لٌمة من نوع ‪ boolean‬اى لها حالتان‬
‫‪ ‬األول ‪ :‬تاخذ لٌمة ‪ true‬فى حالة اذا اردنا عمل تحدٌث ‪refresh‬‬
‫‪ ‬الثانى ‪ :‬تاخذ لٌمة ‪ false‬اذا اردنا لم نرٌد بعمل تحدٌث ‪refresh‬‬
 ‫‪ : Auto Refresh‬عمل تحدٌث تلمائٌا ً‬
‫ضا استخدام ‪ JavaScript‬لتحدٌث الصفحة تلمائًٌا بعد فترة زمنٌة محددة عن طرٌك استخدما‬ ‫ٌمكنن أٌ ً‬
‫الدالة )(‪setTimeout‬‬
‫‪ ‬مثال ‪:‬‬

‫‪ ‬سوف تظهر الصفحة بهذا الشكل‬

‫‪ ‬هذا الكود سوف ٌعمل تحدٌث للصفحة كل خمس ثوانى‬

‫‪ : AutoRefresh( t ) ‬هذه الدالة تسمح بعمل ‪ refresh‬للصفحة كل فترة زمنٌة ممدارها ) ‪( t‬‬
 ‫انذسس انثاني عشش ‪ :‬مشبعاث انحواس )‪(Dialog Boxes‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف على كٌفٌة استخدام المربع المحورى وسوف نتعرف على انواع مربعات‬
‫الحوار فى لغة ‪javascript‬‬
‫تدعم لغة ‪ JavaScript‬ثالثة أنواع مهمة من مربعات الحوار‪ٌ .‬مكن استخدام مربعات الحوار هذه‬
‫لعمل رسالة تنبٌه ‪ alert‬أو الحصول على تأكٌد ‪ confirmation‬على أي إدخال أو الحصول على‬
‫نوع من المدخالت ‪ inputs‬من المستخدمٌن‪.‬‬

‫النوع األول ‪: alert Dialog Box :‬‬

‫ٌتم استخدام مربع حوار التنبٌه فً الغالب إلعطاء رسالة تحذٌر للمستخدمٌن وٌمكن استخدامه فى‬
‫الظهار رسالة ودٌة (غٌر تحذٌرٌة)‬
‫ٌحتوى هذا المربع على ‪ button‬واحد ٌسمى "‪"Ok‬‬

‫‪ ‬مثال ‪ : 5‬من على مولع ‪tutorialspoint‬‬

‫‪ : alert("string") ‬هذه الدالة تظهر رسالة وبتأخذ لٌمة نصٌة ‪string‬‬

 ‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند الضغط على "‪ "Click Me‬سوف ٌظهر رسالة تحذٌرٌة كمربع محورى ‪ dialog box‬هذا‬
‫المربع مكتوب بداخله الرسالة التالٌة " !‪"This is a warning message‬‬

‫‪ ‬عند الضغط على الزرار "‪ " Ok‬سوف تظهر النتٌجة التالٌة‬
 ‫النوع الثانى ‪: confirmation Dialog Box :‬‬
‫ٌتم استخدام مربع حوار التأكٌد فً الغالب للحصول على موافمة المستخدم على أي خٌار‬
‫وٌحتوى هذا المربع على ‪2 buttons‬‬
‫‪ ‬األول ‪ Ok :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ confirm‬تموم‬
‫بإرجاع لٌمة ‪.true‬‬
‫‪ ‬الثانً ‪ Cancel :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ confirm‬تموم‬
‫بإرجاع لٌمة ‪.false‬‬

‫‪ ‬مثال ‪ : 2‬من على مولع ‪tutorialspoint‬‬

‫‪ : confirm("string") ‬هذه الدالة تظهر رسالة تأكٌد وبتأخذ لٌمة نصٌة ‪string‬‬
‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬
‫‪ ‬عند الضغط على "‪ "Click Me‬سوف ٌظهر رسالة تأكٌد كمربع محورى ‪ dialog box‬هذا المربع‬
‫مكتوب بداخله الرسالة التالٌة " ? ‪" Do you want to continue‬‬

‫‪ ‬عند الضغط على الزرار "‪ " Ok‬سوف تظهر النتٌجة التالٌة‬

‫‪ ‬عند الضغط على الزرار "‪ "Cancel‬سوف تظهر النتٌجة التالٌة‬

 ‫النوع الثالث ‪: Prompt Dialog Box :‬‬
‫ٌتم استخدام مربع حوار المنبثك فً الغالب للحصول على ادخال ‪ input‬من المستخد وبالتالً ‪ ،‬فإنه‬
‫ٌمكنن من التفاعل مع المستخدم‪ٌ .‬حتاج المستخدم الدخال لٌمة فى الحمل ثم انمر فوق موافك‬
‫وٌحتوى هذا المربع على ‪2 buttons‬‬
‫‪ ‬األول ‪ Ok :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ prompt‬تموم بإرجاع‬
‫المٌمة التً تم إدخالها‬
‫‪ ‬الثانً ‪ Cancel :‬إذا لام المستخدم بالنمر فوق هذا الزر ‪،button‬فإن الدالة )(‪ prompt‬تموم‬
‫بإرجاع لٌمة ‪. null‬‬

‫‪ ‬مثال ‪ : 3‬من على مولع ‪tutorialspoint‬‬

‫‪ : prompt("string") ‬هذه الدالة تأخذ ‪ input‬من ال ُمستخدم وبتأخذ معاملٌن‬

‫‪ ‬األول ‪ label :‬وهى التسمٌة التً ترٌد عرضها فً مربع النص‬
‫‪ ‬الثانً ‪ default string :‬وهى لٌمة ‪ string‬االفتراضٌة التى نعرضها فً مربع النص‬

‫‪ ‬سوف تظهر النتٌجة على المتصفح كاآلتى ‪:‬‬

‫‪ ‬عند الضغط على "‪ "Click Me‬سوف ٌظهر رسالة منبثمة كمربع محورى ‪ dialog box‬هذا المربع‬
‫مكتوب بداخله لٌمٌتن األول ‪ :‬اسم الرسالة وهى " ‪ " Enter your name :‬والثانى ‪ :‬لٌمة نصٌة‬
‫افتراضٌة داخل ‪ field‬وهى " ‪" your name here‬‬

‫‪ ‬عند ادخال لٌمة نصٌة مثال "‪ "Mahmoud‬ولمنا بالضغط على الزرار "‪ " Ok‬سوف تظهر‬
‫النتٌجة التالٌة‬

‫‪ ‬عند ادخال لٌمة نصٌة مثال "‪ "Mahmoud‬ولمنا بالضغط على الزرار "‪ " Cancel‬سوف تظهر‬
‫النتٌجة التالٌة‬
 ‫انذسس انثانج عشش ‪ :‬انكهمت انمحجوصة ‪(Void Keyword) void‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف كلمة رئٌسٌة محجوزة ‪ keyword‬داخل لغة ‪ javascript‬وهى كلمة‬
‫‪ void‬وسوف نتعرف على استخدامها‬
‫‪ : void ‬معناها فارغ أو كلمة محجوزة داخل لغة ‪ JavaScript‬حٌث ٌمكن استخدامها كعامل‬
‫وحٌد ‪ٌ unary operator‬ظهر لبل المعامل الخاص به ‪single operand‬‬
‫ٌستخدم هذا ‪ operator‬لتمٌٌم ‪ expression‬بدون إرجاع لٌمة ‪. return void‬‬

‫‪ : Syntax‬هنان طرٌمٌتٌن لكتابة ‪void‬‬

‫‪ ‬الطرٌمة األولى ‪void func() :‬‬

‫‪ ‬الطرٌمة الثانٌة ‪void(func((( :‬‬

‫عا لهذا المعامل ٌكون من جانب العمٌل ‪ ، client‬حٌث ٌسمح لن بتمٌٌم تعبٌر‬ ‫‪ ‬االستخدام األكثر شٌو ً‬
‫دون أن ٌعرض المتصفح لٌمة التعبٌر الذي تم تمٌٌمه‪.‬‬
 ‫‪ ‬سوف نوضح بعض األمثلة على استخدام ‪void‬‬
‫‪ ‬مثال ‪: 5‬‬

‫‪ ‬هنا ٌتم تمٌٌم التعبٌر ()'!!!‪ )alert('warning‬ولكن لم ٌتم تحمٌله مرة أخرى فً المستند الحالً‬

‫‪ ‬سوف تظهر الصفحة بهذا الشكل‬

‫‪ ‬الحظ الناتج عندما نضغط على "‪"Click Me‬‬

 ‫‪ ‬مثال ‪ : 2‬نستخدم ‪ void‬الظهار‬

‫‪ ‬سوف تظهر الصفحة بهذا الشكل‬

‫‪ ‬الحظ الناتج عندما نضغط على "‪"Click Me‬‬

‫‪ ‬نالحظ من المثال السابك أن الرابط ال ٌعمل أي شًء ألن التعبٌر "‪ "0‬لٌس له أي تأثٌر فً‬
‫‪ .JavaScript‬حٌث ٌتم تمٌٌم التعبٌر "‪ ، "0‬ولكن ال ٌتم تحمٌله مرة أخرى فً المستند الحالً‪.‬‬
‫‪ ‬مثال ‪ : 3‬نستخدم ‪ void‬الظهار لٌم ‪undefiened‬‬

‫‪ ‬سوف تظهر الصفحة بهذا الشكل‬

‫‪ ‬الحظ الناتج عندما نضغط على "‪"Click Me‬‬

 ‫انذسس انشابع عشش ‪ :‬طباعة الصفحة )‪(Page Printing‬‬
‫‪ ‬فى هذا الفصل سوف نتعرف كٌفٌة طباعة الصفحة الخاصة بن‬
‫فً كثٌر من األحٌان ترغب فً وضع ‪ button‬على صفحة الوٌب الخاصة بن لطباعة محتوى صفحة‬
‫الوٌب هذه عبر طابعة حمٌمٌة‪ٌ .‬ساعدن ‪ JavaScript‬على تطبٌك هذه الوظٌفة باستخدام دالة ‪print‬‬
‫الموجودة داخل الكائن ‪.window‬‬
‫‪ ‬تموم هذه الدالة )(‪ window.print‬بطباعة صفحة الوٌب الحالٌة عند تنفٌذها‪ .‬وٌمكنن االتصال بهذه‬
‫الدالة وتنفٌذها مباشرة باستخدام حدث ‪ onclick‬كما هو موضح فً المثال التالً‪.‬‬

‫‪ ‬مثال‬

‫‪ ‬سوف تظهر الصفحة بهذا الشكل ‪:‬‬

‫‪ ‬عند الضغط على الزرار ‪ Print‬سوف ٌظهر لنا اإلعدادات الخاصة بالطباعة كاألتى ‪:‬‬
 ‫‪ ‬على الرغم من أن الطرٌمة السابمة تخدم الغرض من الحصول على نسخة مطبوعة ‪ ،‬إال أنها لٌست‬
‫طرٌمة موصى بها‪ .‬حٌث تعد صفحة الطابعة المالئمة فً الحمٌمة مجرد صفحة تحتوي على نصوص‬
‫فمط وال تحتوى على صور ‪ images‬أو رسومات ‪ graphics‬أو إعالنات ‪.advertising‬‬

‫هنان طرٌمٌتن الستخدام الطباعة بشكل سهل ‪:‬‬

‫‪ ‬الطرٌمة األولى ‪ :‬لم بعمل نسخة من الصفحة واترن النص والرسومات غٌر المرغوب فٌها ‪ ،‬ثم‬
‫اربط تلن الصفحة للطباعة بالنسخة األصلٌة‬

‫‪ ‬الطرٌمة الثانٌة ‪ٌ :‬مكنن استخدام هذا ‪ tag‬التالى اذا كنت ال ترغب فى عمل نسخ للصفحة ومن‬
‫ثم ٌمكنن استخدام ‪ PERL‬أو أي برنامج نصً آخر فً الخلفٌة لتطهٌر النص المابل للطباعة‬
‫وعرضه للطباعة النهائٌة‬

‫كٌفٌة طباعة صفحة‬

‫إذا لم تجد المرافك المذكورة أعاله على صفحة وٌب ‪ ،‬فٌمكنن استخدام شرٌط أدوات المتصفح المٌاسً‬
‫للحصول على طباعة صفحة الوٌب‪ .‬اتبع الرابط على النحو التالً‪.‬‬
 ‫انخاتمت‬

‫ف‪ ٜ‬اىخراً أدثثد أُ أّ٘ٓ عي‪ ٚ‬تعض اىرْث‪ٖٞ‬اخ اىََٖح فٖزا اىنراب ٕ٘ ّاذج جٖذ ال ‪ٝ‬عئَ إال هللا ٍِٗ اإلّصاف أُ ‪ٝ‬عيمٌ‬
‫مو ٍِ ‪ٝ‬قشأ ٕزا اىنراب أّٔ ى‪ٞ‬ظ ٍجٖ٘د‪ ٙ‬فذغة ٗإَّا ٕ٘ ٍجٖ٘د ّقمو ٗذشجَمح ٗذصمذ‪ٞ‬خ ٍيمإ‪ٗ ٌٞ‬تذمس ٍمِ اىَ٘ا م‬
‫اىَشمممٖ٘سج فممم‪ ٜ‬عممماىٌ اى٘‪ٝ‬مممة ٍٗمممِ أ مممٖش ٕمممزٓ اىَ٘ا ممم اىرممم‪ ٜ‬ماّمممد اىَشجممم اىشك‪ٞ‬غممم‪ ٜ‬ىنراتمممح ٕمممزا اىنرممماب ٍ٘ ممم‬
‫‪ٗ https://www.tutorialspoint.com ٍ٘ٗ https://www.w3schools.com/‬تعض اىَ٘ ا‪ٟ‬خش‪. ٙ‬‬

‫مَا ‪ٝ‬جة أُ ‪ٝ‬عيٌ مو ٍِ ‪ٝ‬قشأ ٕزا اىنراب أُ ٕزا اىنراب إَّا ٕ٘ تَصاتح ٍقذٍح ىذخ٘ىل ىيغح ‪ Java script‬خاصح ٗعاىٌ‬
‫اى٘‪ٝ‬ة عاٍح ‪ٗ ،‬أال ‪ٝ‬جة أال ‪ٝ‬نُ٘ ٕزا اىنراب ٕ٘ ٍشجعل األعاع‪ ٜ‬ألُ ٍم ٍمشٗس اى٘ مد ّجمذ إّمٔ ‪ٝ‬ذمذز ذغ‪ٞ‬مشاخ فم‪ٜ‬‬
‫ىغح ‪ٗ java script‬ىزىل ‪ٝ‬جة عي‪ٞ‬ل داكَا أُ ذنُ٘ عي‪ ٚ‬عٖذ تٖزٓ اىرغ‪ٞ‬شاخ ٗاىرط٘‪ٝ‬شاخ اىر‪ ٜ‬ذرذذز تشنو ٍغرَش ‪.‬‬

‫ٗ‪ٝ‬غعذّ‪ ٜ‬أُ أخثشمٌ تأُ ٕمزا اىنرماب ٕم٘ شاىمس مرماب فم‪ ٜ‬عيغمير‪ٗ ٜ‬اىرم‪ ٜ‬عْ٘اّٖما اىطش‪ٝ‬مع إىم‪ ٚ‬عماىٌ ذصمَ‪ ٌٞ‬صميذاخ‬
‫اى٘‪ٝ‬ة ‪ٗ . The way to Web design‬اّرظشّٗ‪ ٜ‬ف‪ ٜ‬اىجضء اىصاّ‪ ٍِ ٜ‬شح عيغيح ‪. The way to Java script‬‬

‫مَممما أّصمممخ أدثمممات‪ ٜ‬داكَممما ل أُ ‪ٝ‬غمممع٘ا إىممم‪ ٚ‬اىعيمممٌ ٗاىمممرعيٌ فَٖممما اىغمممث‪ٞ‬اُ ىذ‪ٞ‬ممماج األٍمممٌ ٗىْٖقمممح اىشمممع٘ب ٗس ممم‪ٜ‬‬
‫اإلّغاُ ‪ ،‬مَا أرمشمٌ تق٘ه تعض اىعيَاء ‪" :‬صماج اىَاه أخشاجٔ ٗصماج اىعيٌ أُ ذعئَ ىغ‪ٞ‬شك"‪.‬‬

‫ٕممزا اىنرمماب ٕمم٘ صممذ ح جاس‪ٝ‬ممح عممِ ّيغمم‪ٗ ٜ‬إٔممو ت‪ٞ‬رمم‪ٗ ٜ‬أدثممات‪ٗ ، ٜ‬أعممأه هللا أُ ‪ٝ‬رقثممو ٕممزا اىعَممو ٗ‪ٝ‬جيعممٔ خاىصمما ل‬
‫ى٘جٖممٔ اىنممش‪ٗ . ٌٝ‬مَمما ٗيممعرٔ تمم‪ ِٞ‬أ‪ٝ‬ممذمٌ ىرْمماى٘ا ٍْممٔ عيَ ما ل ٗىمم٘ ممماُ ‪ٝ‬غمم‪ٞ‬شا ل ‪ ،‬ف‪َٞ‬نممْنٌ أ‪ٝ‬ق ما ل ّشممشٓ عيمم‪ ٚ‬أ‪ ٍ٘ ٛ‬م‬
‫ٗذعمممذ‪ٝ‬و ٍذرممم٘آ تَممما ‪ٝ‬خمممذً اىْممماط ٗاال رثممماط ٍْمممٔ أ‪ٝ‬قممما ل مَممما ذشممماء ُٗ تمممذُٗ اعمممروزاُ‪ٍٗ .‬مممِ ‪ٝ‬شةمممة فممم‪ّ ٜ‬غمممخح‬
‫‪ٕ ٍِ Word‬زا اىنراب ف‪َٞ‬نْٔ أُ ‪ٝ‬شاعيْ‪ ٚ‬عي‪ ٚ‬اإل‪َٞٝ‬اخ ‪.‬‬

‫سدممٌ هللا سجممال إٔممذ‪ ٙ‬ىمم‪ ٜ‬ع‪ٞ‬مم٘ ت‪ ، ٜ‬أسجمم٘ ٍممِ مممو ممخذ ‪ٝ‬قممشأ ٕممزا اىنرمماب إرا ٗ ممو عْممذ خطممأ عيَمم‪ ٚ‬أٗ خطممأ‬
‫إٍاكمممم‪ ٜ‬أٗ ٍعيٍ٘ممممح ممممذ ‪ٝ‬غمممماء فَٖٖمممما أُ ‪ٝ‬شاعمممميْ‪ ٜ‬عيمممم‪ ٚ‬اإل‪َٝ‬مممم‪ٞ‬اخ ا‪ٟ‬ذ‪ٞ‬ممممح ىنمممم‪ ٚ‬أ ممممً٘ ت صممممادٔ فمممم‪ ٜ‬اىطثعمممماخ‬
‫ا‪ٟ‬خش‪ ، ٙ‬مَا أسج٘ أال ذْغّ٘ا ٍِ صاىخ دع٘اذنٌ ‪.‬‬

‫‪E-mail : [email protected]‬‬
‫‪E-FaceBook : Mahmoud Soliman‬‬
‫‪Youtube : https://www.youtube.com/channel/UCfZvWjnYnfxI55v4LNhBekA‬‬

‫نتحميم جميع انكتب انخاصت بنا يمكن متابعت قناتي عهي انتيهيجشاو من خالل هزا انشابط ‪:‬‬
‫‪Telegram Channel: https://t.me/joinchat/-aC4Ps0pna5lY2M0‬‬

‫نتحميم جميع انكتب انخاصت بنا يمكن متابعت صفحتنا عهي انفيس بوك من خالل هزا انشابط ‪:‬‬
‫‪Public Page: Help-me-page‬‬

‫‪Mahmoud Soliman‬‬