Microsoft Word - Ù–Ù—Ø®Øµ Ù…Ù‹Ø±Ø³ JavaScript

النسخ

1 للبشمهندس أسامة الزيرو وترجمة من موقع w3schools

2 مقدمة: لغة JavaScript من ابتكرها هو Brendan Each وكان يعمل في شركة Netscape وابتكر اللغة كإضافة للغة html وكانت تعمل في متصفح Netscape Navigator الا صدار الثاني وكان الاسم الخاص بالجافا سكربت في البداية هو اسم mocha ومع صدور الا صدارات الا ولية للجافا السكربت حصلت على اسم Live Script ثم أخيرا حصلت على اسم JavaScript وهناك فرق شاسع بين لغة Java ولغة JavaScript لغة JavaScript من لغات interpreted Language interpreted يعني لغة بتحتاج لمترجم علشان يترجم أكواد اللغه علشان تتعامل مع الكمبيوتر والمترجم هو Browser أي المتصفح أي كان نوعه. ولغة JavaScript تدعم البرمجة الكائنية وهي Object Oriented Programming وهي OOP معظم استخدام لغه JavaScript بيكون مع الكلاين سايت مع المتصفح يعني بعيد عن السيرفر يعني تقوم بتغيير محتوى المتصفح يتجعلك تتحكم في المتصفح وحاليا الجافا تتعامل مع السيرفر سايت عن طريقة لغه النود وتم دعم لغه الجافا سكريبت من قبل شركة مايكروسوفت في عام ٩٦ في متصفح انترنت إكسبلورر الا صدار الثالثة 2

3 كود الجافا اسكربت يتم وضع كود الجافا اسكربت <script> في أخر مكان في ال head ويمكن وضع كود الجافا سكربت في أي مكان في ال body كذلك والصحيح وكما يفضل المبرمجون هو وضع كود الجافا سكربت في ملف خارجي ملف html وليس داخل ويضاف بهذه الطريقة وأمتداده js وينصح كافة المبرمجين بوضع ملف الجافا اسكربت في أخر مكان في body ملف الجافا سكربيت <script></script> ويمكن كتابته في <body> يكتب في <head> بعد ال <style> 3

4 والصحيح والا فضل هو وضع أكواد JavaScript في ملف منفصل خارجي كي تكون مفصوله عن أكواد html وكذلك يكون سهل للقرأة وسهل في استخراج المشكلات والشئ الثالث موضوع الكاش يسرع من تصفح الموقع عندما يكون في ملف خارجي كود الجافا السكربت الذي يكتب خارج صفحة html ( js ننشئ ملف جديد بإمتداد ) ونكتب في ال <head> <script scr="test.js"></script> وأفضل مكان لوضع ملف JavaScript والذي ينصح به المبرمجين هو قبل قفلة وسم body لل closetag body مثال/ <script scr="test.js"></script> 4

5 JavaScript Syntax بناء الجافا سكريبت JavaScript Comments لكتابة comment في الجافا اسكربت نضيف // Slashes double // يوجد لكتابة comment single line comment وهذا في حالة كان الكومنت سطر واحد نكتب ##### #### ويوجد Multi line comment وهذا في حالة أن comment أكثر من سطر فنكتب /* ### */ JavaScript is Case Sensitive جافا سكريبت حساس لحالة الا حرف جميع معرفات جافا سكريبت حساسة لحالة الا حرف. 5

6 حروف ال JavaScript حساسة فالحروف الكابتل لا تساوي الحروف الصمول JavaScript and Camel Case جافا سكريبت وحالة الجمل حالة العلبة العلوية حالة باسكال Case): Upper Camel Case (Pascal FirstName, LastName, MasterCard, InterCity. وفيها يتم كتابة أول حرف من الكلمة الا ولى وأول حرف من الكلمة الثانية وهكذا كابتل انخفاض حالة الجمل : Case Lower Camel وفيها يتم كتابة أو حرف من الكلمة كابتل كل كلمة يبدأ الحرف الا ول منها بكابتل firstname, lastname, mastercard, intercity 6

7 : المتغيرات Variables يعرفها موقع w3 ب: هي حاويات لتخزين قيم البيانات و يجب تحديد جميع متغيرات جافا سكريبت بأسماء فريدة. هذه الا سماء الفريدة تسمى المعرفات القواعد العامة لا نشاء أسماء للمتغيرات : ١ يمكن أن تحتوي الا سماء على أحرف وأرقام وشرطات سفلية وعلامات دولار$ : ٢ يجب أن تبدأ الا سماء بحرف و يمكن أن تبدأ الا سماء أيض ا ب $ كابتل ليس هو حرف y صمول : ٣ الا سماء حساسة لحالة الا حرف ف حرف Y : ٤ الكلمات المحجوزة مثل ) كلمات JavaScript الا ساسية ( لا يمكن استخدامها كأسماء The Assignment Operator مشغل الا حالة في JavaScript تعد علامة المساواة ) = ( عامل تشغيل "التعيين" وليس عامل التشغيل "مساو." تتم كتابة عامل التشغيل "مساو " مثل == في. JavaScript : أنواع البيانات Data Type أنواع بيانات الجافا سكربت : ١ يمكن لمتغيرات جافا سكريبت الاحتفاظ بأرقام مثل ١٠٠ والقيم النصية مثل "John Doe". : ٢ في البرمجة ت عرف القيم النصية بالسلاسل النصية : ٣ تتم كتابة السلاسل داخل علامات اقتباس مزدوجة " " أو مفردة ' '. تتم كتابة الا رقام بدون علامات اقتباس. : ٤ إذا وضعت رقم ا بين علامتي اقتباس فسيتم التعامل معه كسلسلة نصية. مثال : 7

8 Example var pi = 3.14; var person = "John Doe"; var answer = 'Yes I am!'; Declaring (Creating) JavaScript Variables التصريح (انشاء) متغيرات جافا سكربت يأخذ متغير جافا اسكربت هذه الكلمة المحجوزه له وهي Var var كي نعرفه أننا سوف نكتب متغير نكتب في JavaScript Value = undefined.المتغير الم عل ن بدون قيمة سيكون له قيمة غير محددة Undefined يعني مالهوش قيمة لا يصح بدء المتغير برقم ولكن ممكن بدء المتغير ب start with letters, underscore, $ ومعناها أننا نستطيع كتابة المتغيير يبدأ بحرف Letters أو يبدأ ب Underscore وشرطات سفلية أو بعلامة $ دولار سايز خطأ : ولكن لا يصح بداية المتغير برقم فهذا خطأ مثال Var myprice = 100; 8

9 : Var = JavaScript Variable Keyword كلمة مفتاحية محجوزه للمتغير في الجافا سكربت : اسم المتغير Mayprice = Variable Name = ) = ( لتعيين قيمة للمتغير Assignment Operator : قيمة المتغير 100 = Varible Value ومعناها اطبع لي ولابد من تواجد id في html فعلا حتى يقوم بطباعته id مثال على المتغير واستخدام العمليات الحسابيه فيه ونلاحظ: يمكنك الا علان عن العديد من المتغيرات في بيان واحد. ويمكن للا علان أن يمتد على عدة أسطر ولكن نفصل بين المتغيرات ب comma مثال أخر 9

10 JavaScript Data Types أنواع بيانات جافا اسكربت يمكن لمتغيرات جافا سكريبت الاحتفاظ بالعديد من أنواع البيانات: الا رقام والسلاسل والكائنات والمزيد مثال الزيرو Booleans : القيم المنطقية Booleans can only have two values: true or false. يمكن أن يكون Booleans قيمتين فقط : صواب أو خطأ مثال var x = 5; var y = 5; var z = 6; document.getelementbyid("demo").innerhtml = (x === y) + ففي حالة أن وفي حالة أن "<br>" + (x === z); true فسوف يقوم المتصفح بطباعة القيمة y z x يساوي x لا يساوي فسوف يقوم المتصفح بطباعة القيمة false 10

11 var :Arrays المصفوفات المصفوفات arrays تكتب بأقواس مربعة ] [ cars = ["Saab", "Volvo", "BMW"]; يتم فصل عناصر المصفوفة بفواصل commas مثال / ترتب عناصر arrays من الصفر بحيث يمكن اختيار عنصر واحد فقط منهم مثال/ document.getelementbyid("demo").innerhtml = cars[2] في هذا المثال نلاحظ أن المتصفح سيقوم بطباعة العنصر BMW طريق اسم المتغير cars[2] مثال الزيرو لا ننا قمنا بتحديده عن : Objects تتم كتابة كائنات جافا سكريبت باستخدام أقواس معقوفة {} curly braces تتم كتابة خصائص الكائن مثل name:value مفصولة بفواصل مثال/ 11

12 Strings هو عبارة عن text ويمكن كتابته ب " double quotes " مثال / "; XC60 var carname = " Volvo ويمكن كتابته ب ' single quotes ' مثال / '; XC60 var carname = ' Volvo ويمكن استخدام single quotes داخل double quotes var answer = "He is called 'Johnny' "; أو العكس استخدام double quotes داخل single quotes var answer = 'He is called "Johnny" '; أو استخدام double quotes مرتين مع استخدام السلاش معهم Numbers الا رقام وتتم كتابتها مباشرة بدون " double quotes " var Myage = 34; الفرق بين كتابة الا رقام بدون double quotes و مع كتابتها ب double quotes إذا كتبنا الا رقام بquotes double فإنها تكون string نص وليست أرقام var Myage = "34"; فعند القيام بأي عمليه حسابيه فلن يقوم بها لا نه لم يعد رقم بل نص 12

13 القيمة غير معر Undefined وهو متغير بدون قيمة var car; وفة النوع غير معروف Typeof إذا كتبنا في [typsof + Variable Name] console فإنه سوف يخرج لنا نوع البيانات الخاصه بالجافا سكربت + : Concatenation هو ربط الحروف جمبا إلى جمب فهو يقوم بربط الحروف وليس اجراء العملية الحسابية فيكون الناتج هو [3210] فعلامة الجمع عندما تدخل مع strings فإنها تقوم بربط الحروف concatenation ملاحظة لا يصح جمع strings] [number + 13

14 " Osama " var myage = النتيجة / 9Osama نلاحظ / عند جمع الا رقام مع strings وتكون الا رقام في البداية فإن المتصفح يجمعها ويربط معها strings + ٤ ٥ + "Osama" var myage = النتيجة / Osama54 نلاحظ / أما عند جمع الا رقام مع strings وتكون strings في البداية فإن المتصفح يربط strings مع الا رقام دون جمع الا رقام مثال أخر "Osama" var myage = النتيجة / 15Osama54 نلاحظ / أن المتصفح قم بجمع الا رقام لا نهم في البداية ثم ربط معهم strings الا رقام التي بعد string أما إذا تم وضع الا رقام بين أقواس فسوف يتم جمع الا رقام وربط باقي 15Osama9 النتيجة / نقوم بإضافة " double quotes " عندما نريد عمل مسافة وممكن فقط نقوم بعمل مسافة بإبعاد double quotes 14

15 إذا قمنا بإضافة <br> فإنهم سوف يكون كل عنصر في سطر منفصل فنلاحظ أن النتيجة هي هي ولكن بدلا من وضع اسم المتغير قمنا بوضع قيمة المتغير مباشرة. ولكننا نستخدم اسم المتغير لا نه يتعامل مع databas مع قاعدة البيانات فإنه عندما يتم تغييره فسوف تتغير نتائجة على صفحة html عكس ما إن تمت كتابه قيمه مباشرة. ومن الممكن عمل تنسيق للنصوص داخل الجافا سكربت 15

16 Output وهي أخراج الجافا اسكربت أو طريقة اظهار أوامر الجافا سكربت تستطيع جافا سكريبت "عرض" البيانات بطرق مختلفة : باستخدام. innerhtml ١ : باستخدام.() document.write ٢ : باستخدام.() window.alert ٣ : باستخدام console.log(). ٤ Alert هو صندوق تنبيه لعرض البيانات فهو عبارة عن صندوق يظهر فيه أو يقوم بطباعة مخرجات أوامر الجافا سكربت بداخله ويمكن كتابت الا مر مباشرة في المتصفح (" browser JavaScript:alert("hello java script from ويمكن كتابتها في concoel أيضا 16

17 document.write وتستخدم لا غراض تجريبية ولا تستخدم في العمل الفعلي " Work " Real باستخدام () document.write بعد تحميل مستند HTML بالكامل سيتم حذف كل HTML الموجود مثال/ <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <p>my first paragraph.</p> <button type="button" onclick="document.write(5 + 6)">Try it</button> </body> </html> فيجب استخدام الطريقة () document.write للاختبار فقط 17

18 innerhtml للوصول إلى عنصر HTML يمكن لجافا سكريبت استخدام طريقة document.getelementbyid (id) تحدد السمة id تحدد الخاصية innerhtml محتوىHTML عنصر HTML <!DOCTYPE html> <html> <body> فيتم عرض المخرجات داخل صفحة Html <h1>my First Web Page</h1> <p>my First Paragraph</p> <p id="demo"></p> <script> document.getelementbyid("demo").innerhtml = 5 + 6; </script> </body> </html> 18

19 console.log() وحدة التحكم لا غراض تصحيح الا خطاء يمكنك استخدام الا سلوب () console.log البيانات. لعرض <!DOCTYPE html> <html> <body> كترك رسالة لما فيها للمطور <script> console.log(5 + 6); </script> </body> </html> فإذا قمت بفتح console داخل المتصفح فسوف تجد حاصل جمع ٥+٦ 19

20 Operators علامات الجمع أو العمليات الحسابية + الجمع Addition مثال var x = 5; var y = 2; var z = x + y; // z = = 7 document.getelementbyid("test").innerhtml = z; الطرح - subtraction مثال var x = 5; var y = 2; var z = x - y; // z = 5-2 = 3 document.getelementbyid("test").innerhtml = z; فسوف يخرج لنا هذه الرسالة NAN من number إذا قمنا بعمل طرح لstaring ومعناها هذا ليس رقم number] [ not a var x = "osama"; var y = 2; var z = x y; / Division القسمة var x = 100; var y = 2; var z = x / y; // z = 100 / 2 = 50 document.getelementbyid("test").innerhtml = z; 20

21 * multiplication الضرب var x = 5; var y = 2; var z = x * y; // z = 5 * 2 = 10 document.getelementbyid("test").innerhtml = z; (remainder) % modulus المتبقي وهي تعمل على تقريب العمليات الحسابية أو المتبقي var z = 21 % 2; سيكون الناتج ١ لا ن ال ٢ تقبل القسمة على ٢٠ ويتبقى ١ أما إن كانت ٢٠%٢ فستكون النتيجة ٠ Increment ++ زيادة الراتب وهي تستخدم كعداد زيارة للمواقع -- Decrement انقاص وممكن استخدامها في مواقع التجارة في حالة الشراء يقل عدد المنتجات حتى يصل إلى الصفر فتظهر رسالة بانتهاء المنتج 21

22 If...Else يتم استخدام العبارات الشرطية لتنفيذ إجراءات مختلفة بناء على ظروف مختلفة. في كثير من الا حيان عند كتابة التعليمات البرمجية تحتاج إلى تنفيذ إجراءات مختلفة لقرارات مختلفة. يمكنك استخدام العبارات الشرطية في التعليمات البرمجية للقيام بذلك. If ) < ( أصغر من ) > ( أكبر من استخدم العبارة if لتحديد كتلة من تعليمات JavaScript البرمجية ليتم تنفيذها إذا كان الشرط صحيح ا. else استخدم عبارة else لتحديد كتلة من التعليمات البرمجية ليتم تنفيذها إذا كان الشرط غير صحيح. شرح المثال/ ticketprice yes its cheap " اظهر في ال console من ١٥٠٠ عبارة " إذا كان أقل." no its expensive Else غير ذلك اظهر عبارة " استخدم العبارة " else if " else if لتحديد شرط جديد إذا كان الشرط الا ول خاطئ ا 22

23 مثال أخر وفي هذا المثال نقوم بعمل prompt لتحديد عمر الزائر فإن كان أقل من ١٨ سنة تظهر له العبارة sorry وإن كان ١٨ فأكثر تظهر له عبارة hello consel تسخدم() clear لحذفما تم كتابته في ال 23

24 Assignment Operators = يعين قيمة للمتغير Var myprice = 50 د هنا أننا مهما قمنا بإضافة أرقام فتظر رسالة ال alert دائما دون تغيير وهذا يعود إلى أن علامة ) = ( الواحدة لا تصلح للمقارنات نلاحظ : Comparison Operator (==) وهو يقوم بعمل مقارنات من حيث ] value [ فقط فنلاحظ هنا : أن ال bad مختلف لهذا ظهرت رسالة ال value 24

25 Identical Operator ( === ) وهو يقوم بعمل مقارنات من حيث value] [data type + أن نوع ال string < == data type والا خرى numper وال value واحده 50 فظهر الا ختلاف المثال فنلاحظ : var myprice = "50"; //Data Type <= string if (myprice === 50){//Data Type <= Nummer alert("good")} else { alert("bad");} 25

26 Logical Operators العلامات المنطقية (! ) لا يساوي Not Equal (!= )! Not = Equal ( Not Equal) وهو يعني لا يساوي ال value مثال / أننا نخبره أن ال age لو هو لا يساوي 50 فأخرج لي رسالة Good فقام المتصفح بإخراج رسالة Bad لا نه فعلا يساوي 50 نلاحظ : (!== ) Not Identical وهو بمعنى لا يساوي ] Value [ Data Type + فإذا تحقق شرط ولم يتحقق الا خر فإن الا مر ينفذ 26

27 نلاحظ هنا / أن age تساوي قيمة المتغير ومشتركه معاه في نوعة فلهذا أخرج المتصفح الرسالة Bad لكن عندما اختلفت في data type اختلف الا مر ) And && ( و وتستخدم في حالة دمج الشروط بمعنى ] أنه يجب أن تتحقق جميع الشروط لينفذ الا مر اللذي تريده [ وهو يركز على value في حالة استخدام == مثال / نلاحظ / تحقق الشرطين حيث أن الا سم متحقق وال value متحقق أما في المثال الا تي فنلاحظ أختلاف date type الثانية Nambur فالعمر في الا ولى string وفي 27

28 ) or ( أو وتستخدم في حالة التخيير بين الشروط بمعنى ] أنه إذا تحقق شرط من مجموعة هذه الشروط نفذ لي هذا الا مر [ نلاحظ في هذا المثال تحقق شرط واختلف شرط ومع هذا فقد نفذ الا مر وأظهر رسالة Good : 28

29 Function المهام أو الوظائف هي مجموعة من الا كواد المصممة لتنفيذ مهمة معينة. لماذا وظائف يمكنك إعادة استخدام الرمز: حدد الرمز مرة واحدة واستخدمه عدة مرات. يمكنك استخدام نفس الرمز عدة مرات باستخدام وسيطات مختلفة لا نتاج نتائج مختلفة. Function Syntax بناء الوظيفة الكلمة المفتاحية أو keyword الخاصة بها في الكود.Function يتم تعريف function باستخدام الكلمة الدالة متبوعة باسم متبوعة بأقواس(). () sayhi function : Function names اسم الوظيفة يمكن أن تحتوي أسماء الدوال على أحرف وأرقام وشرطات سفلية وعلامات دولار (نفس القواعد مثل المتغيرات). قد تتضمن الا قواس أسماء المعاملات مفصولة بفواصل: Function name(parameter1, parameter2, parameter3) : { يتم وضع الشفرة المطلوب تنفيذها بواسطة الدالة داخل أقواس معقوفة } 29

30 Function Invocation استدعاء الوظيفة أو تنفيذها يمكن تنفيذ ال الوظيفة باستدعائها بكتابة function Name اسم الوظيفة كما في المثال html ويمكن استدعائها بإضافة button في صفحة Function Return وظيفة العودة عندما تصل JavaScript إلى عبارة return ستتوقف الدالة عن التنفيذ. إذا تم استدعاء الدالة من عبارة فستقوم جافا سكريبت "بإرجاع" لتنفيذ التعليمات البرمجية بعد العبارة الاستدعاء. غالب ا ما تقوم الدوال بحساب قيمة الا رجاع. يتم إرجاع "إرجاع" القيمة إلى "المتصل:" 30

31 نلاحظ في المثال طباعة رقم 7 وهذا لا نه عند طباعة x فهو يجد أمر إدخاله على ال myfunction فيدخل عليه فيجد أمر return بجمع parameter داخل الا قواس فيقوم return بإرجاع القيم الا صلية وجمعها. مثال أخر ومن الممكن داخ ال return أن نقوم بعمل عملية حسابيه وممكن عمل عملية حسابيه ليس لها علاقة بال function 31

32 Function Parameters معاملات الوظائف يتم سرد معلمات الدالة داخل الا قواس ) ( في تعريف الدالة. وسيطات الدالة هي القيم التي تتلقاها الدالة عند استدعائها. داخل الدالة تتصرف الوسائط (المعلمات) كمتغيرات محلية. الوظيفة هي نفسها مثل إجراء أو روتين في لغات البرمجة الا خرى. Parameter نلاحظ في هذا المثال / أنه تم تحديد parameter مسبقا لsayHello وهي " Hassan" فعند طباعتها يدخل على الfunction يجد return يخبره بأن يرجع parameter الا صلي له وليس thename بالا ضافة لطباعة عبارة الترحي مثال أخر/ 32

33 مثال أخر لحساب العمر بالا يام الترتيب في الجافا سكربت غير معتمد على بعضه بمعنى ممكن أكتب الجافا اسكربت وبعدين استدعيها / مثال Self invoke وهي أن يعمل ال function بمجرد فتح الصفحة بدون استدعاء ونقوم بإضافه قوس قبل ال function وقوس بعدها ثم نضيف قوسين ال function وعلامة ; لغلق ال function يفيد ال self invoke في مواقع البيع والشراء عند وجود سلعة ما فيعمل على تحويل السعر حسب دولة الزبون المستخدم للموقع 33

34 مثال أخر div في ال html ثم في JavaScript قمنا بعمل function سوف من قاعدة البيانات ويضربها في ٣ ٧٥ وقمنا باستدعاء للfunction قمنا بعمل يأخذ ١٠٠ سنقوم بعمل حقل أدخال مثال أخر Html داخل صفحة ال input 34

35 valuo إذن ال amount هي ال التي سوف نقوم بإدخالها في حقل الا خال ٣ ٧٥ والresult هي ال value التي سوف نقوم بإدخالها مضروبة في سوف if في المثال نخبره هنا بأنه value لو كانت if فارغة empty وقام بالضغط على الزر اخرج له رساله " أدخل رقم صحيح " else غير ذلك أخرج الرسالة الا خرى. if (amount === "") هنا نضيف شرط أخر لو كانت amount ليس رقم يعني ال valuo المكتوبة في حقل الا دخال ليست رقم أخرج هذه الرسالة ونضيف لل () if else عبارة isnan وهي تعني ليس رقم. في هذا المثال أردنا أن لا يتم استخدام صفر في حقول الا دخال فائدة / نلاحظ أننا كتبنا الصفر ك string وليس number وهذا الا دخال text لا ن حقل 35

36 نلاحظ : هنا أننا قمنا بإضافة شرط أخر وهو أن يكون بالسالب. الرقم أكبر من الصفر وليبس المثال كامل / JavaScript Switch يستخدم بيان التبديل لتنفيذ إجراءات مختلفة بناء على ظروف مختلفة. استخدم العبارة switch لتحديد أحد كتل عديدة من التعليمات البرمجية ليتم تنفيذها. يحتوي المحول على مجموعة أو أكثر من قوالب الحالة وعلامة اختيارية اختيارية. يعني هو شبيه بالا ختيار من متعدد أو وضع أجابه صحيح وفي حالة وضع اجابه خطأ تظهر رساله ما كيف يعمل - يتم تقييم تعبير التبديل مرة واحدة 36

37 تتم مقارنة قيمة التعبير مع قيم كل حالة. في حالة وجود تطابق يتم تنفيذ كتلة التعليمات البرمجية المقترنة. - - مثال / 37

38 JavaScript Scope نطاق جافا سكريبت يحدد النطاق إمكانية الوصول (الرؤية) للمتغيرات. يعني نطاق عمل الجافا اسكربت وتنفيذ الا وامر هناك نوعان من نطاق الجافا سكربت : نطاق داخلي.. Local scope المتغيرات المحددة داخل وظيفة لا يمكن الوصول إليها من خارج الوظيفة. مثال / ال console.log(calc) لا يمكن أن تعمل إن كتبناها خارج ال function لا نها Local نطاق عملها محلي أي داخل ال function فقط ولا يمكن استدعائها من الخارج. نطاق عام Global scope ويمكن استدعائه من أي مكان حتى داخل الfunction نلاحظ / في هذا المثال أن ال var متغير global يمكن استدعائه من أي مكان حتى من داخل ال function وبعد كتابة ال Function كذلك. 38

39 مثال نلاحظ أننا لا نستطيع الدخول لل function الا بن مباشرة function إلا بعد أن استخدمنا أمر return لا ستدعاء function الا بن داخل الا ب لا نه Local أما ال الا ب فهو Global فأي function إليه مباشرة وال داخل function يعتبر Local أي فرعي لا تستطيع الدخول Global الا ب له يعتبر function 39

40 JavaScript Events الحدث عند استخدام JavaScript في صفحات HTML يمكن ل" JavaScript التفاعل" في هذه الا حداث. يمكن أن يكون حدث HTML شيئ ا يفعله المتصفح أو شيء يفعله المستخدم. وهي تساعدك في حدوث تغير في صفحة Html كا عمل دونلود لحين تحميل Window.onload معناها بعد تحميل الصفحة طبق لي هذا الحدث فسوف يقوم بتحميل كل عناصر الصفحة ثم بعد ذلك سوف يقوم بتطبيق الكلام أو الحدث اللذي كتبته له Window.onclick ومعناها طبق لي هذا الحدث عندما أقوم بالضغط على الصفحة ضغطة واحده فقط Window.ondblclick ومعناها طبق لي هذا الحدث عندما أقوم بالضغط على الصفحة ضغتتين أي مرتيين 40

41 مثال لا ستخدام onclick & ondblclick مع button فهنا قمنا بإنشاء زرار وجعلنا بالضغط عليه مرة واحده يتحقق الحدث وEvents وممكن تغير onclick لي ondblclick ٢ حدث فيه ومثال أخر لا ستغلال button لتحقيق 41

42 Onkeydown وهي بمجرد لمس الزرار والمرور عليه يحدث الevents Onkeypress وهي بعد الضغط على الزرار يحدث ال events Onkeyup وهي بعد الضغط على الزرار ورفع اليد عنه يحدث ال events مثال عن طريقتين لكتابة bottun الطريقة الا ولى : كتابة function في html نلاحظ / في هذا المثال نكتب اسم ال function في html <button onclick="calcusd()">calculate</button> 42

43 JavaScript الطريقة الثانية : الكتابة مباشرة في ملف نلاحظ / قمنا بإعطاء id فقط لل button وكتبنا الا وامر مباشرة في ملف الجافا سكربت ولم نكتب اسم لل function لا ننا لم نعد بحاجة إليه وأخبرناه كما في المثال الا ول يطبع ال value التي نكتبها مضروبة في 3.75 ويخرج لنا الناتج في div : events Syntax بناء الحدث Element.Event = function () { code } وتعد هذه الطريقة أفضل لا نها تجمع كل ما يخص الجافا اسكربت في ملف منفصل لا علاقة لملف html بها 43

44 مثال على onkeydown & onkeyup & onkeypress Onmouseover وهي م لث hover في Css مثال 44

45 Onmouseout وهي بعد مرور الماوس عليها والا بتعاد عنها يحدث الحدث events Onchange \ تم استخدام select مع ال onchange لا ظهار المثال ومعنا هذا السطر اطبع لي داخل ال div ال value التي أقوم بإدخالها مضروبه في ال mycurrency الموجودة مسبقا value Array الدرس رقم ٢٥ انتهى الجزء الا ول الجزء الثاني بداية من 45