Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

java script course دورة جافا سكربت باللغة العربية

15,887 views

Published on

دورة جافا سكربت باللغة العربية ..
مع العديد من الامثلة والتطبيق العملي ..
يمكنك تحميل الملف بأكمله من موقع
2nees.com

Published in: Education
  • Be the first to comment

java script course دورة جافا سكربت باللغة العربية

  1. 1. بسم الله الرحمن الرحيم دورة مطوري الويب تقديم: أنيس حكمت أبوحميد الموقع الالكتروني: 2nees.com aneeshikmat@gmail.com أنيس حكمت أبوحميد
  2. 2. 3 aneeshikmat@gmail.com أنيس حكمت أبوحميد
  3. 3. الحمد لله الذي بنعمته تتم الصالحات ، الحمد لله الذي خلق الأرض والسموات ، الحمدد لله الذي علم العثرات ، فسترها على اهلها وانزل الرحمات ، ثم غفرها لهم ومحا السيئات ، فله الحمد ملئ خزائن البركات ، وله الحمد ما تتابعت بالقلد النبادات ، ولده الحمدد ماتعاقبت الخطوات ، وله الحمد عدد حبات الرمال فد الفلدوات ، وعددد ترات الهدوا فددددددددددددددددد الأرض والسدددددددددددددددددماوات ، وعددددددددددددددددددد الحركدددددددددددددددددات والسدددددددددددددددددكنات ، سددددددددددددددددددددددددددددددددددددددددددددددددددددددبحانه سددددددددددددددددددددددددددددددددددددددددددددددددددددددبحانه سددددددددددددددددددددددددددددددددددددددددددددددددددددددبحانه الطير سبحه والوحش مجده والموج كبره والحوت ناجاه والنمل تحت الصخور الصدم قدسه والنحل يهتف حمدآ ف خلاياه سبحان الله وبحمده ..سبحان الله العظيم ... الحمد لله رب العالمين.. الآن لننطلق معا على بركة الله تعالى ف الجز الثالث من الدورة وهو ال JavaScript aneeshikmat@gmail.com أنيس حكمت أبوحميد دورة مجانية
  4. 4. عليك أن تعلم صديق أن جميع ما سيتم تكره مدن أمثلدة ومواعديع لدن تعطد عدالم الوي بشدكل كامدل، ولدن تعطد جميدع الخصدائل لكدل عنصدر، وتأكدد أن دور أي شرح/دورة/كتاب هو أن ياعك على الطريق وأنت عليك أن تكمدل، واجعدل من Google هو صديقك الأول ..ولا تبتعد عنده نهائيدا، واجعدل صدديقك الثدان التطبيق العمل لكل أمر تتعلمه، إياك أن تقول سدهل، وتتجداو ..إتا فعلدت تلدك، تأكد أنك لن تستطيع كتابة شيفرة برمجية صعيرة ... !! طبيعددة هددذه الدددورة.. طبيعددة برمجيددة قددد تختلددف عددن سددابقاتها باسددلوب أو طريقددة التفكير ... ^_^.. الأمر سهل أكثر مما تتصور .. لكن مدار ..تعلدم .. واكتد .. وابحث.. واسعى للأفال aneeshikmat@gmail.com أنيس حكمت أبوحميد
  5. 5. **( أي عمل يخالف الشريعة الاسلامية بأي وسيلة كانت فأنت مسؤول عن تلك أمام الله تعالى، وهذه الدورة مجانية لكل من لن يخالف الشريعة الاسلامية ف عمله ... **( متطلبات الدورة: •HTML •CSS aneeshikmat@gmail.com أنيس حكمت أبوحميد
  6. 6. بسم الله الرحمن الرحيم }فقُلْتُ اسْتعْفِرُوا ربّكُمْ إِنّهُ كان غفّارا ) 10 ( يُرْسِلِ السّما عليْكُمْ مِدْرارا ) 11 ( ويُمْدِدْكُمْ بِأمْوالٍ وبنِين ويجْعلْ لكُمْ جنّاتٍ ويجْعلْ لكُمْ أنْهارا ) 12 ) aneeshikmat@gmail.com أنيس حكمت أبوحميد سورة نوح
  7. 7. ال جافا سكربت ه لعة برمجة صممت خصيصا للتعامل مع صفحات الوي ، والجافا سكربت ه ليست JAVA .. وتعد الجافا سكربت لعة برمجة سهلة التعلم، ولا يوجد موقع الآن الى ويستخدم الجافا سكربت ف صفحاته أو المكتبات المبنية عليها .. لعة البرمجة هذه تعد إحدى 3 لعات يجب تعلمها لأي مطور ومصمم مواقع انترنت ..وه أول لعة برمجة فعلية يج تعلمها باعتبار أن ال html ه markup language ..وال css ه styling sheet ... aneeshikmat@gmail.com أنيس حكمت أبوحميد
  8. 8. والآن لماتا تعد الجافا سكربت، من أكثر اللعات انتشارا؟، لأنها سهلة ويتم استخدامها ف جميع الأجهزة تقريبا، ويمكن استخدامها داخل الوي ، أو الحواسي ، أو الأجهزة المحمولة والهواتف الذكية .. والسؤال الآن .. ما هو الش الذي يمكننا من خلال تعلمنا للجافا سكربت من فعله ؟ الإجابة بكل بساطة ^_^ ..أمووووووووور كثيرة ^_^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  9. 9. أريدك أولا أن تتعرف الى مصطلح مهم وهو Document Object Model ويختصر ب DOM ... ماتا يعن DOM : هذا هو المعيار الرسم والمعتمد من ال W3C للتعامل أو الوصول الى html ...وهذا يعن التحكم بالعمليات المرتبطة بأي عنصر html من اعافة وحذف وتعديل.. وأي أمر آخر يمكن فعله ^_^. الجافا سكربت رائعة جدا ..فه بوصولها الى ال html ..تصنع نوع من التفاعلية بين المستخدمين والصفحات .. ولذلك فالجافا سكربت تقوم بالتعديل والحذف والإعافة بالإعافة الى امكانية التعامل مع ال css وتعيير الخصائل، والتعامل مع السمات ..الكثير من الأمور والت سنتحدث عنها بإتن الله تعالى ^_^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  10. 10. يج دائما قبل البد بشرح الجافا سكربت ..توعيح أمر مهم جدا .. JAVASCRIPT NOT JAVA ... أي أن الجافا سكربت ليست جافا، وكل منهما لعة منفصلة عن الأخرى مستقلة بمفاهيمها وبنيتها التركيبية... ال JAVA ه لعة برمجة كائنية التوجه OOP صممت من قبل James من شركة Sun . أما ال جافا سكربت: فهو سكربت تم انتاجه من قبل Netscape .. هناك ملاحظة مهمة: وه مع انهما لعتان منفصلتان، الا أنه قد يوجد هناك بعض التشابه وهناك بعض الاختلاف ..وتلك حس اوية النظر الى وظيفة أو طبيعة المهمة المراد انجا ها .. لذلك ستجد عبارة ف الانترنت .. They are both similar and quite هذه المعلومات الت تم تكرها..ه معلومات لك ..لك تكون ملما بما هو أمامك ..وبما ستعمل عليه بإتن الله تعالى ^_* aneeshikmat@gmail.com أنيس حكمت أبوحميد
  11. 11. يمكنن كتابة الجافا سكربت ب 3 أماكن مختلفة ^_^... الأول داخل ال head tag وتلك عن طريق استخدام ال <script></script> ... الثان داخل ال body tag وتلك عن طريق استخدام ال <script></script> .. الثالث داخل ملف بامتداد js خارج صفحة ال html يستدعى بالطريقة التال : <script src=”ScriptFileName.js"></script> .. والآن لنبد بشرح كل مكان من هذه الأماكن ^_* ملاحظات: (1 كود الجافا سكربت يقع داخل ال <script></script> )بالنسبة للمكان الأول والثان (. (2 type="text/javascript“ كانت تستخدم قديما أو ف المتصفحات القديمة لتعريف أن نوع السكربت هو جافا سكربت، لكن الآن لا داع لذلك ( 3 يمكنك كتابة أي عدد من السكربت..^_^، وف أي مكان كان..داخل ال body or head (4 يتم وعع السكربت ف نهاية ال body لتسريع الصفحة لأنه ينفذ بعد تحميل ال body ، ويتم وعع السكربت ف ال head لك ينفذ أو يستدعى قبل ال body ... aneeshikmat@gmail.com أنيس حكمت أبوحميد
  12. 12. ( 1 كتابة ال script داخل ال head : ( 2 كتابة ال script داخل ال body : aneeshikmat@gmail.com أنيس حكمت أبوحميد
  13. 13. (3 لا ةباتك Script داخل ملف خارج : الآن ..كما رأينا فإنه يمكننا كتابة ال script داخل ملف خارج يستدعى عن طريق ال <script src=“”></script> ..وهذا الاستدعا أياا يمكن أن يكون داخل ال head أو داخل ال body ^_^. شاهد مثالا: aneeshikmat@gmail.com أنيس حكمت أبوحميد
  14. 14. بما أننا نتعامل مع لعة برمجة، فإنه من المهم أن نعرف كيف يمكننا طباعة النتائج، وفحل القيم أثنا وقبل وبعد التنفيذ .. ولذلك يج أن نتطرق الى طرق طباعة أو اظهار البيانات أو القيم عن طريق الجافا سكربت.. أولا: يمكننا اظهار النتائج من خلال تعديل احدى محتويات ال html الموجودة وتلك يكون باتباع خطوتين ..أ( document.getElementById(id) و ب( استخدام innerHTML ال document.getElementId(id) وهنا يتم تحديد عنصر ال html بنائا على ال id الذي تم وععه ... أما ال innerHtml فهذه تقوم بالتأشير على محتوى هذا العنصر ^_* aneeshikmat@gmail.com أنيس حكمت أبوحميد
  15. 15. ملاحظة: سيتم وعع الشيفرة البرمجية الخاصة بالأمثلة بنفس صفحة ال html .. الا اتا كان السكربت ..طويل أو به فكرة معينة، علما أنن أستخدم هذا الأسلوب الآن لعايات تنظيف وسهولة قرائة وتنفيذ الأمثلة ..والعمل الحقيق يكون غالبا باستخدام ال js external file .. الا ف بعض الأكواد السريعة أو الخفيفة أو الاستدعا أو الحالات الخاصة .. وجميع هذه الأمور ستتعلمها لوحدك ..ويكفيك أن تعرف الآن كيف تستخدم الجافا سكربت ..^_* الآن لنعود ونشاهد مثالا على استخدام الطريقة الأولى لطباعة القيم وه عن طريق تعديل محتوى أحد عناصر ال html .. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  16. 16. اتا انتبهت الى التعليق الموجود ف الصورة السابقة ..فستجد أنن كتبت body script ..لماتا .. لأنه اتا قمت باستدعا هذا ال script قبل انشا عناصر ال html .. فلن أستفيد شيئا ... aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن أريدك أن تنتبه للشريحة التالية^^
  17. 17. بما أننا قمنا باستدعا أو طل تعيير لعنصر مش موجود أو غير معرف بعد ..فإن النتيجو هو ظهور خطأ ... لكن كيف يمكنن رؤية الأخطا الناتجة من السكربت ..لاحظ الصورة .. الآن شاهد المثال ... وأرجو أن تنظر الى الخطأ... ^_^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  18. 18. ثانيا: استخدام ال document.write() .. هذه الدالة تقوم على اعافة أو كتابة محتوى الى صفحة ال html .. )اختصار ال document يرمز الى ما يتعلق بملف أو صفحة الوي ( ، ولكن لا تستخدم هذه الدالة الى اتا بدك تعمل فحل لعنصر أو خاصية معينة ...والسب ف تلك أنها تقوم باعادة تحميل أو كتابة عناصر ال html الموجودة داخل الصفحة ...طبعا يمكننا استخدام ال html tag داخل ال innerHtml وال write *_^ .. شاهد المثال: aneeshikmat@gmail.com أنيس حكمت أبوحميد
  19. 19. ثالثا: باستخدام ال :console.log هذه الطريقة أهم طريقة من بين الطرق.. وأروعها وأفالها ^_^..على الأقل بالنسبة ل : Pp ... تظهر النتائج باستخدام ال debug الموجود داخل أي متصفح )عن طريق الاعط ب F12 ( ومن ثم نختار ال console ^_^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  20. 20. سقوط الإنسان ليس فشلا ولكن الفشل أن يبقى حيث سقط !! aneeshikmat@gmail.com أنيس حكمت أبوحميد توما آديسون
  21. 21. لكل لعة برمجة بالعالم، قواعد يج الالتزام بها لكتابة أي شيفرة برمجية ..ومن هذه اللعات الجافا سكربت بكل تأكيد ..ويقصد بال syntax هو المبادئ أو القواعد الت من خلالها يمكننا كتابة الأوامر البرمجية، وهذه المبادئ أو القواعد تكون محددة مسبقا، ويج معرفتها قبل البد ببرمجة أي لعة ... *( ملاحظة: الجافا سكربت لعة برمجية خفيفة، مقارنة مع لعات البرمجة الأخرى، لكنها قوية ^_* *( ملاحظة 2 : إن الشيفرة البرمجية الناتجة من ال syntax ه عبارة عن جملة برمجية، هذه الجملة تسمى statements ومجموعة الجمل تسمى code *( ملاحظة 3 : الجافا سكربت حساسة لحالة الأحرف ) case sensitive ( مثلا Var لا تساوي var ... aneeshikmat@gmail.com أنيس حكمت أبوحميد
  22. 22. قواعد أو هجائيات اللعة للأنواع المختلفة: (1 الأرقام: تكت الأرقام بالجافا سكربت بثلاثة صيغ رئيسية وه : أ( أرقام صحيحة مثل 5782 ب( أرقام عشرية مثل 5.3 وانتبه أن الفاصلة العشرية ه ) . نقطة ( ^_* ج( باستخدام الرمز e مثل 155e5 هذه الكتابة ه الأسلوب العلم لتمثيل الأرقام بالحاسوب’ خصوصا للأرقام الكبيرة والمرفوعة للقوة العاشرة وأكثر.. لذلك تجدها كثيرا ف الآلات الحاسبة والحواسي ... ( 2 النصوص: يقصد بالنصوص هو أي حرف أو رقم أو نل داخل ” أو ‘ (double quote, quote) مثل: “anees 91 ^_^” (3 التعابيير الحسابية : يقصد بالتعاببير الحسابية ه العمليات الحسابية مثل الطرح والجمع والارب والقسمة ..مثال: 5*5 ^_______^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  23. 23. (4 تافوفصملا (array) : ه مجموعة من الأرقام أو النصوص الت تخزن داخل متعير واحد. مثل [“anees”,”taher”,”saed”] ... ( 5Object )الكائنات(: أريدك أن تعرف أن المصفوفات أو ال function أو الأرقام حتى داخل الجافا سكربت ه object ...ويمكن تعريفها على أنها البيانات فقط، ماافا اليها ال method والخصائل ) properties ( مثل {Age:“24", Name:“Anees^_*”} (6 ال function : هو نطاق أو حيز تم حجزه لتنفيذ وظيفة محددة أو معينة، ويتم تنفيذ هذه الوظيفة من خلال استدعا هذا ال function ... (7 المتعيرات variables : وه حرف أو مجموعة من الحروف الت يتم حجزها كإسم برمج يدل على أمر ما، ليتم استخدامه لحفظ قيمة معينة متعيرة غالبا للقيام بوظيفة معينة مثل var age = 24; السنة القادمة يكون age = age + 1 وهو 25 aneeshikmat@gmail.com أنيس حكمت أبوحميد
  24. 24. (8 تايعايرلا لثم ةيقطنملا تايلمعلاو ةيباسحلا تايلمعلا مادختسا نكمي ، ةفاعلإاب الى تلك يمكن اسناد أو ارجاع القيمة مثل استخدام ال = ^_* أمثلة: sq = 5 * 5 أياا flag = 5 < 3 أو x = 4 ... ( 9 ال statements : وه مجموعة الجمل البرمجية )هل تذكر تلك( مثل x =5 * 5; y= 6 * 6; .... هذه المعادلتين أو الجملتين هما JavaScript statments ملاحظة: يرمز للجافا سكربت ب JS ^_^ (01 ال keywords : ه الكلمات الخاصة باللعة، والت لا يمكن استخدامها الى لهدف معين داخل اللعة .. مثل var هذا keyword يستخدم لتعريف متعير .. مثل var age = 24 aneeshikmat@gmail.com أنيس حكمت أبوحميد
  25. 25. ( 11Identifiers )المعرفات(: وه أي اسم اطلق على , object function, variable ويج أن يكون فريد) unique ( أي غير مكرر ، وهذا يعن أن اي Identifiers يج أن يكون unique .. من قواعد التعريف للمتعيرات أو ال function أو ال object )أو بصيعة أخرى قواعد أي Identifiers ( ه أن يسمى بحروف، ويمكن أن يحتوي أرقام ولكن يج أن لا يبدأ برقم، ويمكن استخدام ال underscore ( _ ) أو dollar ($) ( 21 المتعيرات داخل الجافا سكربت يمكن أن تحتوي أكثر من نوع من البيانات مثل var x= 5 أو var y = “anees” ...الخ (31 أي شيفرة برمجية يتم كتابتها داخل function يمكن استخدماها أكثر من مرة وبدون تقييد بعدد محدد من المرات ^_^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  26. 26. (41 تافاسملا وأ تاغارفلا ( white space (: الجافا سكربت يتجاهل الفراغات الاعافية بالشيفرة البرمجية، وهذا الأمر جميل جدا.. بحيث يفيدك هذا الأمر بتنسيق الشيفرة البرمجية بطريقة أكثر سهولة بالقرائة مثل var x=5 و var x = 5 ... الطريقة الثانية أسهل أو أريح بالنظر.. وخصوصا عند وجود شفيرة برمجية كبيرة أو متعددة ... (51 عند كتابتك أي سطر برمج ف الجافا سكربت أو بعيرها .. لا تزد حجم السطر الواحد عن 80 خانة محجو ة) 80 حرف أو رقم أو مسافات ..الخ( (61 ف حال وجود أسطر برمجية طويلة تفوق بحجمها ال 80 حرف نقوم بفصل السطر البرمج الى جزئين، هذا الفصل إما أن يكون بعد اشارة ال ) = ( أو الفصل ف حالة وجود جملة نصية )أي جملة تقع بين ” أو ‘ (..شاهد المثال بالصفحة التالية ^_* aneeshikmat@gmail.com أنيس حكمت أبوحميد
  27. 27. aneeshikmat@gmail.com أنيس حكمت أبوحميد 1 (هل لاحظت كيف يتم فصل الأسطر... الأولى لقد استتخدمنا ال backslash ( ( بينما في الثانية قمنا مباشرة بعد المساواة بفصل الجملة ^_^
  28. 28. الآن أنت قد تقول ... لماتا كل هذا الكلام.. ولماتا تكرته هنا على شكل نقاط .. ولماتا لم أتجاو ه وأبد بالبرمجة مباشرة ... والجواب بكل تأكيد ...أنن لن أستطيع أن أقوم ببرمجة أو قرائة أو تعلم أي لعة برمجة بدون تعلم قواعد وهجائيات التفكير لكل لعة..والبنية التركيبية لها .. هل يمكنك أن تبدأ بصناعة الطائرة الورقية دون معرفتك بما تحتاجه من خش ولاصق وورق ؟! ..طبعا لا ..)كان نفس من مان أعمل طائرة ورقية ..بس ولا مرة ساويت وحدة و بطت : P (.. وهكذا ه البرمجة ... الكلام الذي سبق مهم جدا الآن ..اتا لم تركز بما قلت ولم تركز على الأمثلة المختصرة الت وععتها ..أرجوا أن تعود وتعيد القرائة .. أريدك أن تبد بقوة ^_^.. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  29. 29. هل تذكر الأمثلة الاولى الت طرخناها بهذه الدورة ..هل تذكر ال innerHtml ؟! هذه جميعها JS statements ^_^ والآن السؤال القوي.. ما هو الأسلوب الذي يمكن أن يفصل بين كل statements و statements أخرى ؟ الجواب هو )الفاصلة المقوطة ; (... والسؤال الآن هل هذه الفائدة الوحيدة للفاصلة المنقوطة ؟! ... أياا الجواب لا ^_* ... فه تمكننا أياا من كتابة أكثر من statements على سطر واحد مثل age = 24; name=“anees”;year=“1991” ملاحظة: الأسلوب الصحيح أو الدارج لكتابة الجافا سكربت هو بوعع الفاصلة المنقوطة بنهاية كل statements لكنها بالحقيقة ..ليست الزامية ... aneeshikmat@gmail.com أنيس حكمت أبوحميد
  30. 30. الآن ماتا نسم مجموعة ال Statements ؟ مجموعة الجمل البرمجية تسمى code أياا تسمى مجموعة الشيفرة البرمجية الموجودة داخل ال block مثل ال function ب Code Block . هناك الكثير من ال identifier والت تعتبر statements مثل ال for loop أو while أو switch ... الخ ..)سيتم تكرهم ف الشرح بإتن الله تعالى ..( والآن لنتابع ^_^ aneeshikmat@gmail.com أنيس حكمت أبوحميد
  31. 31. يج أن تكون عندنا مقبرة جاهزة لندفن فيها أخطا الأصدقا aneeshikmat@gmail.com أنيس حكمت أبوحميد
  32. 32. هذا الموعوع المهم والرائع والبسيط ^_^... تكلمنا عنه ف ال html وف ال css وحان دوره الآن ..لنتحدث عنه داخل الجافا سكربت.. بنفس الوظائف وبنفس الهدف من استخدام ال comment داخل ال css أو ال html ..نستخدمه داخل الجافا سكربت.. فهو يقوم بشرح وتوعيح الكثير من الجمل والأسطر البرمجية، بالإعافة الى الوظائف المتعيرات أو functions ..أول أي code أو code block ... ف الجافا سكربت ...هناك اسلوبين لكتابة ال comment ..وهما: 1 (ال Single Line comment : ويكت إما على شكل inline-comment أو oneline-comment ويكون هذا الأسلوب باستخدام ال (//) مثل --- < aneeshikmat@gmail.com أنيس حكمت أبوحميد
  33. 33. aneeshikmat@gmail.com أنيس حكمت أبوحميد أما الطريقة الثانية فه multi-line comment : ونستخدم هذا الأسلوب لكتابة أكثر من تعليق، وهذا الأسلوب غالبا ما يستخدم لشرح لوظيفة Code block أو شرح document ..ويستخدم بكثرة مع ال API .. والآن لنرى كيف يمكننا استخدامها ..
  34. 34. aneeshikmat@gmail.com أنيس حكمت أبوحميد أثنا تطوير المواقع أو البرامج فإن التوثيق يلع دورا مهما جدا، وهو دور آخر نستخدمه كمطورين ..وهو تعطيل الشفيرة البرمجية وتفعيلها ... ^_^ وتلك لعايات فحل النتائج ... هذا الأسلوب يتاح أثره وأهميته أثنا كتابتك للشيفرة البرمجية، وخصوصا ف المراحل القادمة ..مثل تعاملك مع ال loop أو جمل الشرط ...الخ
  35. 35. aneeshikmat@gmail.com أنيس حكمت أبوحميد المتعيرات .. الآن لنبد فعلا وبقوة ..بالدخول الى لعة البرمجة بشكل أكبر، وخصوصا أننا الآن أصبحت لدينا معرفة حول التفاصيل أو القواعد الخاصة بهذه اللعة بشكل عام.. والآن ننتقل للجز الثان والعمل ف الدورة ... هيا بنا أيها المبرمج العظيم ^_* المتعيرات هو اسم رمزي يحتوي على عدد معلوم أو غير معلوم من المعلومات، هذه المعلومات يطلق عليها اسم ال ”قيمة value “، ويتم حجز مساحة داخل الذاكرة مخصصة لهذا المتعير. يقل بالإسم الرمزي الاسم الذي يمكن أن يتكون من حرف أو مجموعة حروف بالإعافة الى الأرقام أو _ أو $ عمن قواعد محددة، وعادة يدل اسم المتعير على وظيفته ..مثال var age = 24; ...
  36. 36. aneeshikmat@gmail.com أنيس حكمت أبوحميد ويقصد بالقيم أو المعلومات هو ما سيتم حفظه داخل المتعير مثل var age = 24; ... فكرة المتعيرات ف فكرة رياعية )رياعيات( ..فكما نعلم وكما تعلمنا جميعا ف المراحل الدراسية وخصوصا ف حل المعادات ..أن نستخدم و ص كمتعيرات لحل أي معادلة .. مثل + ص = 25 .. ف الجافا script بنفس الطريقة x + y = 25 ^_^ تذكير: انتبه للقواعد الت تم تكرها سابقا حول شروط كتابة المتعير .
  37. 37. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن كيف يمكننا تعريف أو انشا متعير؟ أولا ..عملية انشا المتعير تسمى declaring ثانيا.. لانشا متعير نستخدم كلمة محجو ة من كلمات اللعة وه var ثالثا.. عند تعريف المتعير ومن ثم اسناد القيمه له )الطريقة الأولى( فإن القيمة تكون undefined . ملاحظة: undefined يعن متعير لا يوجد له قيمة .. Null : يعن معير لا يوجد له قيمة ...)هناك فرق بينهم طبعا اتا أحببت .. ابحث عن الموعوع تحت عنوان difference between null and undefined in JavaScript )
  38. 38. aneeshikmat@gmail.com أنيس حكمت أبوحميد *( يفال أن تقوم بانشا المتعيرات جميعها ف أعلى السكربت... يمكن يتم تعريف أو كتابة المتعيرات كل متعير على حدى كالمثال السابق، ويمكن كتابتها على شكل جمل ..شاهد هذا المثال:
  39. 39. aneeshikmat@gmail.com أنيس حكمت أبوحميد يرجى الانتباه جيدا للمثال, والنظر الى الشيفرة البرمجية بعناية وتمهل... ويرجى القيام بكتابة متغيرات بجميع الطرق التي ذكرت ..
  40. 40. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن بعد مشاهدتنا للمثال السابق... هل خطر ببالك سؤال؟ماتا لو قمنا بإنشا المتعير مجددا ؟ الآن لو قمت باعادة انشا المتعير.. فستكتشف ..أنه لن يعطيك أي خطأ.. بالإعافة الى تلك ..فإن القيمة المخزنة داخل المتعير لن تفقد .. قم بتطبيق المثال ^_^
  41. 41. الوقت كالسيف إن لم تقطعه قطعك aneeshikmat@gmail.com أنيس حكمت أبوحميد
  42. 42. aneeshikmat@gmail.com أنيس حكمت أبوحميد يوجد أنواع مختلفة من البيانات لكل لعة برمجة ... أنواع البيانات هذه مهمة جدا ف البرمجة، وخصوصا ف تحديد النوع المناس لكل متعير، وهذا يتاح ف اللعات الت يج أن تحدد بها النوع .. الجافا سكربت لا تشترط منك تحديد نوع البيانات ) Dynamic Types (.. لذلك فالأمر قد يكون أسهل نوعا ما، ولكن تبقى ملزما بمعرفة الأنواع والفروق أو الاستخدامات لكل من هذه الأنوع .. أنواع البيانات الموجودة داخل الجافا سكربت ه )تكرت اسم التصنيف للمعرفة(: 1 ( ال primary (primitive) data types : وه ال String, Boolean, Number 2 ( اال composite (reference) data types : وه ال array, object 3 ( ال special data type : وه ال Null, undefined ..
  43. 43. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن سنتلكم بإتن الله تعالى عن هذه الأنواع بالترتي التال : String, Number, Boolean, Array, Object, Null, Undefined 1 ( ال String : هذا النوع يقوم بحفظ مجموعة أو سلسلة من الحروف أو الأرقام أو الرمو الخاصة، ويتم تامين هذه السلسلة داخل ‘ or “ ... مثال: الآن ماتا يمكننا أن نستفيد من استخدام ال ‘ أو ” ..ولماتا وجد خياران وليس خيار واحد ... الجواب ..أن هذا الأمر الجميل يسمح لك باستخدام ال “ أو ‘ داخل نفس النل، وف اللعات الأخرى مثل ال php ممكن أن تفيد بأخذ القيم من المتعيرات من عدمه ... أمر بسيط لكن مهم .. لنشاهد أمثلة على تلك
  44. 44. aneeshikmat@gmail.com أنيس حكمت أبوحميد قم بتطبيق الأمثلة ..^_^..)ملاحظة ..فيما يتعلق بالمعلومات حول انواع البيانات هذه، فإننا نقوم الآن بذكر فكرة بسيطة عن كل نوع، لكن عندما نتقدم بالمستوى قليلا ..سنتلكم عن هذه الأنواع ..بمستوى أعلى نوعا ما ...( 2 (ال Number : الأرقام اتا كنت تذكر ..فه يمكن أن تكون صحيحة، أو يمكن أن تقبل على شكل عشري باستخدام ال ) . ( بدلا من الفاصلة.. أو يمكننا استخدام ال ) e ( كرمز حاسوب للقوى ...شاهد المثال:
  45. 45. aneeshikmat@gmail.com أنيس حكمت أبوحميد لا تنسى تطبيق المثال ^_^... ملاحظة: جرب القيام بعملية طرح لل varNumber = 2 – 2e10; ^_^..وانظر الناتج _* 3 ) Boolean : هذا النوع رائع ..وسهل جدا ..فهو يحتوي قيمتان فقط ..إما ture )صح( أو false )خطأ ( ، ويستخدم هذا النوع من البيانات غالبا للتحقق من شرط معين ^_^
  46. 46. aneeshikmat@gmail.com أنيس حكمت أبوحميد 4 ) array : المصفوفات ه نوع من أنواع البيانات الت يمكن استخدامها داخل الجافا سكربت، وه مهمة جدا.. وتعرف على أنها طريقة أو وسيلة لتنظيم مجموعة من البيانات مثل الأرقام والأحروف..الخ، وترتبط دائما بمفهوم موقع وقيمة key/value ... ويتم استخدام ال [square brackets] كأداة احتوا للمصفوفة .. شاهد المثال: لانشا مصفوفة فإننا نعتمد الطريقة الأولى، فه أفال وسلبياتها أقل...
  47. 47. aneeshikmat@gmail.com أنيس حكمت أبوحميد 5 ) object : ويمكن تعريفها على أنها البيانات فقط، ماافا اليها ال method والخصائل ) properties ) .. هل تذكرت أين قمنا بذكر هذا التعريف.؟! نعم ..تكرناها ف js syntax ..لاحظ كيف أن المعلومات الت تكرت وقتها مهمة للتقدم ..وسنحتاج هذه المفاهيم أكثر فأكثر.. فأبق نفسك متابعا أول بأول.. لأننا كلما سرنا الى الأمام، احتجنا أن يدفعنا ما تعلمنا من الخلف... مثال:
  48. 48. aneeshikmat@gmail.com أنيس حكمت أبوحميد 6 ) Undefined & Null : هل تذكر عندما تكلمنا عن ال Null وال Undefined ..؟ لقد قلنا أن المعنى للكلمتين هو لا يوجد قيمة ...وهذا لا يعن صفر.. لأن الصفر هو قيمة لا يوجد قيمة ..يعن لم يسند لها قيمة ... )فارغة( إن هذان يمثلان نوعان من أنواع البيانات، نوعين مختلفين ولكن مع وجود بعض الفروقات ... هل بحثت عن الفروقات ؟!... حقيقة احترت هل أتكر الفروقات أو ما ه النقاط لذلك قررت أن أعع لك رابطا لموقع ..هذا الموقع ابقه ف قلبك فهو من أروع المواقع الت يمكن أن تتعلم منها كمبرمج ... من نقاط الاختلاف هو أن ال undefined تعطى مباشرة الى المتعيرات الت لم يتم تعريفها ... بينما ال null لأي قيمة اعتمدت وتم تصفيرها .. والتمييز يكون باستخدام ال == أو ال === ... لأن = = = تعن مقارنة للقيمة والنوع معا .. بينما ال = = مقارنة للقيمة بدون النوع.
  49. 49. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن ... هل الطريقة الوحيدة لمعرفة نوع البيانات هو عن طريق الخبرة البرمجية أو معرفة الأنواع من خلال النظر ؟! ..الجواب طبعا لا .. هناك وسيلة يمكن استخدامها لمعرفة أنواع البيانات للمتعيرات .. مثال: هذا المثال مهم جدا جدا جدا ... انظر الى نتائج تطبيق هذا المثال وانظر الى console عن طريق F12 ... بعد ذلك افتح على الشيفرة البرمجية لهذه الصفحة واقرأ الأوامر وطرق كتابة الكود..وانتبه للتعليقات ...
  50. 50. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن ..بعد انتهائنا من الحديث عن المتعيرات وأنواع البيانات.. لنأت بنوع من التفصيل حول كل نوع .. خصائصه ..استخدامته .الخ وأول ما نبد به هو ال Object .. لقد قمنا بتعريف ال Object ..وتكرنا كيف يمكن أن نستخدم هذا ال object .. والآن لماتا يمكن أن نستخدم ال Object ؟؟؟ .. اتا جئنا للحياة الواقعية .. فإن هذه الحياة ه class فيه جميع الخصائل والدوال الت يحتاجها من يعيش ومخلوق ف هذه الحياة .. ال object يمثل أي كائن أو مخلوق يرث أو يحتاج الى هذه الدوال أو الخصائل، وقد يشترك ف هذه الخصائل أكثر من شخل ولكن بقيم مختلفة وهذا يعن خصائل واحدة بقيم مختلفة ...
  51. 51. aneeshikmat@gmail.com أنيس حكمت أبوحميد ومن الأمثلة المشهورة والت تارب بكثرة هو الإنسان .. الإنسان يمثل object ، له خصائل ودوال، والانسان ليس شخل واحد، بل هم كثر –يستثنى من تلك بن صهيون وأبنا اليهودية ومن معهم ووالاهم-، ومع تلك تجد أن لكل منهم اسم مختلف، وعمر مختلف، وهناك لون للبشرة، وهناك خصائل الشعر...الخ ..-هذه الخصائل- أما الدوال فالإنسان ليس ثابت فيتحرك.. ويمكن أن يقف ..ويمكن أن يجلس.. ويمكن أن يسرع ...الخ هذه النقاط وهذا المثال الذي تكرته... الآن بنفس الأسلوب الذي رأينا به هذا الانسان .. فإنه يج أن نرى غيره .. ما رأيك أن تقوم بصنع مثال يتحدث عن السيارة ..)السيارة تمثل object )
  52. 52. aneeshikmat@gmail.com أنيس حكمت أبوحميد يمكننا تعريف ال Object بأكثر من طريقة .. ولقد قمنا بذكر الطريقة الت سنستخدمها .. والأفال وه عن طريق استخدام ال . {curly braces.} وهناك طريقة أخرى عن طريق استخدام ال new ... أياا يوجد هناك أكثر من طريقة لاسترجاع القيم من ال Object ..الطريقة الت قمنا باستخدامها ه عن طريق اسم ال object ومن ثم نقطة ومن ثم ال key ..مثال: varObject.keyName )هذه الطريقة التى أفال استخدامها...أما الطريقة الثانية فه :
  53. 53. aneeshikmat@gmail.com أنيس حكمت أبوحميد جميع الذي تم تكره .. كان يخل الخصائل.. لكن ماتا عن الدوال؟ ..هل يمكن الوصول اليها من خلال ال object ؟ الجواب هو نعم ^_^.. وتلك من خلال اسم ال obj ثم نقطة ثم اسم الدالة ثم )( شاهد هذا المثال: بخصوص ال function سيتم شرحها في الدروس القادمة بإذن الله تعالى لاكن الآن ..انظر الى طريقة الاستدعاء عن طريق ال object ..وقم بنسخ نفس المثال وتطبيقه عندك ..وانظر النتائج ^_^
  54. 54. aneeshikmat@gmail.com أنيس حكمت أبوحميد أتوقع أنه لديك سؤال مهم.. لماتا كنت أقول دالة ) method ( ولم أقل function ؟ .. والجواب هو أن ال function يطلق عليه function خارج اطار ال object .. أما اتا كان ال object هو بنفسه يحتوي على function . فيصبح ال function هذا كأنه خاصية وهذا يسمى دالة ) method ) وبهذا نستطيع بالبرمجة اتا قيل لك أن هذه دالة ) method ( مباشرة أنك لن تستطيع استخدام هذا ال method )ال function داخل ال obj ( الا عن طريق object .. أما ال Function لوحده ..فيمكن استدعائه عن طريق اسم ال function *_^
  55. 55. قد أخرج البخاري، والترمذي وغيرهما عن جابر بن عبد الله رع الله عنهما قال: كان رسول الله صلى الله عليه وسلم يعلمنا الاستخارة ف الأمور كلها، كما يعلمنا السورة من القرآن يقول: إتا هم أحدكم بالأمر فليركع ركعتين من غير الفرياة، ثم ليقل: اللهم إن استخيرك بعلمك، وأستقدرك بقدرتك، وأسالك من فالك العظيم، فإنك تقدر ولا أقدر، وتعلم ولا أعلم، وأنت علام العيوب، اللهم إن كنت تعلم أن هذا الأمر خير ل ف دين ومعاش وعاقبة أمري، أو قال: عاجل أمري وأجله، فاقدره ل ويسره ل ثم بارك ل فيه، وإن كنت تعلم أن هذا الأمر شر ل ف دين ومعاش وعاقبة أمري، )أو قال: عاجل أمري وآجله( فاصرفه عن ، واصرفن عنه، واقدر ل الخير حيث كان ثم رعن به. ، قال: ويسمى حاجته، أي يذكر حاجته عند قوله: اللهم إن كنت تعلم أن هذا الأمر، فيقول مثلا: اللهم إن كنت تعلم أن سفري أو واج من فلانة.... إلخ خير ل ف دين ... وإن كنت تعلم أن سفري.... إلخ شر ل ف دين .... aneeshikmat@gmail.com أنيس حكمت أبوحميد
  56. 56. aneeshikmat@gmail.com أنيس حكمت أبوحميد ال Code Block ^_* ... هل تذكر عندما تكلمنا عن ال syntax وال statements وال code ومن ثم وصلنا الى code block .. نحن الآن بصدد الحديث عن ال code block ... ال function هو code block وهو وسيلة صممت لإدا وظيفة محددة، ويتم تنفيذ هذه الوظيفة لحظت الاستدعا ...لاحظ المثال ومن ثم قم بتطبيقه *_^
  57. 57. aneeshikmat@gmail.com أنيس حكمت أبوحميد اتا لاحظت فإن الصيعة العامة لكتابة ال Function ه : function (keyword) ثم اسم ال function ثم )( أما قواعد كتابة اسم ال function فه : نفس القواعد الخاصة بكتابة أسما المتعيرات *_*.... راجع القواعد ..اتا كنت قد نسيتها ^_*)ارجع للنقطة رقم 11 ف الجافا سكربت syntax أو اته الى در المتعيرات( الآن سأتحدث عن مصطلحين مهمين جدا وهما ال parameter & arguments
  58. 58. aneeshikmat@gmail.com أنيس حكمت أبوحميد ال parameter ه المتعيرات الت يتم وععها داخل ال (parentheses ) الخاصة بال function .. أما ال Arguments فه المتعيرات أو القيم الت يتم ارسالها الى function أثنا الاستدعا . مثال:
  59. 59. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن ..كيف يمكننا استخدام ال function ؟ أو بمعنى آخر كيف يمكننا استدعا ال function ؟ الجواب، هناك 3 طرق وه : (1 عن طريق ال (call) مثل الأمثلة الت تكرناها ... فكان يوجد هناك شيفرة برمجية تقوم على استدعا ال function .. (2 عن طريق ال user event ، فيكون ال function مرتبط بحدث أو فعل يقوم به المستخدم مثل ال click .. ( 3 أن يستدعى ال function بشكل تلقائ ^_^
  60. 60. aneeshikmat@gmail.com أنيس حكمت أبوحميد بالنسبة للطريقة الأولى ..فقد رأينا عليها أمثلة كثيرة ..)هناك أكثر من أسلوب داخل هذا الشكل، لكننا نكتف بالشكل الرئيس global ..وبخصوص ما تبقى ..يمكنك أن تتطلع عليها بعد انهائك للمستويات الأولى ^_*( أما بالنسبة للطريقة الثانية، فسأتكر مثالا بسيطا عن طريق button click لأنه أسهل event ..ثم سنعاود الحديث عن الموعوع بإتن الله تعالى ف موعوع ال javascritp event .... شاهد هذا المثال:
  61. 61. aneeshikmat@gmail.com أنيس حكمت أبوحميد أما الطريقة الثالثة وه Self-Invoking تقوم على استدعا نفسها بشكل تلقائ ..شاهد المثال: الآن .. ما رأيك ؟...هل أصبحت قادرا على كتابة أي function واستدعائه؟ إننا كثيرا ما نستخدم ال function وهذا الأمر سهل جدا.. والآن بق أمر آخير لم نتحدث عنه هو استخدام ال return داخل ال function ..
  62. 62. aneeshikmat@gmail.com أنيس حكمت أبوحميد ف العديد من الأمثلة استخدمت return وف بعض الأمثلة الأخرى لم أستخدمها... هذه الكلمة ه من الكلمات المحجو ة باللعة، وتستخدم لإرجاع قيمة معينة ..وتوعع دائما ف نهاية ال function لأنها سوف تقوم بانها عمل هذا ال function بارجاع قيمة معينة للشيفرة البرمجية الت استدعت هذا ال function مثال:
  63. 63. aneeshikmat@gmail.com أنيس حكمت أبوحميد وف حال لم نستخدم ال return .. فإننا لا نقوم بارجاع قيمة ..لذلك فإننا ناع الاستدعا لل function بدون أن نرجعه لقيمة أخرى ..مثل: من بعض استخدامات ال return أياا ليس ارجاع القيمة فقط.. وكن ايقاف تنفيذ function معين .. مثلا عندما يوعع بال function كلمة return; ..فإنه سيخرج من هذا ال function وغالبا ما نستخدمها مع جمل الشرط ف حال وقوع خطأ ولم بتم ارجاع قيمة ..والكثير..
  64. 64. aneeshikmat@gmail.com أنيس حكمت أبوحميد شاهد هذه الأمثلة: قم بتجربة ارجاع هذه القيم .. وانظر النتائج ^_* ... الآن سأقوم بإتن الله تعالى بعرض بعض الأمثلة أياا ..حتى نخرج من هذا الموعوع ... متقنين له .. لكن أريدك أن تقوم بتطبيق الأمثلة.. وكل ما تكرناه أرجو أن تكون قد طبقته .. لإنك إن تقم بالتطبيق بشكل عمل ... فأنت لم تتعلم شيئا ...
  65. 65. aneeshikmat@gmail.com أنيس حكمت أبوحميد ما هي النتيجة هنا ؟
  66. 66. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن مع المثال الآخير.. والذي يقوم بتنفيذ المثال السابق بطريقة ال Self Invoke والآن حان الوقت لرؤية ناتج تطبيق الأمثلة، ولرؤية الشيفرة البرمجية الخاصة بهذه الأمثلة ... )يج أن تكون قد قمت بتطبيق الأمثلة .. والآن ستجدها هنا..اتا حصل أي خطأ لديك .. فلديك الاجابة هنا ثم عد واكت ما أخطأت به( ^_*
  67. 67. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  68. 68. aneeshikmat@gmail.com أنيس حكمت أبوحميد ال Scope ..لو قمت بترجمة هذه الكلمة لوجدت أن معناها هو نطاق.. وهنا ف البرمجة تعن مجموعة المتعيرات وال function وال object الت يمكننا الوصول اليها من نقطة برمجية معينة .. ولتبسيط الموعوع سأتكر مثالا وهو لو افترعنا أن هنالك غرفة محاطة ب 4 واجهات من الطوب..ويوجد شخل بداخلها يشاهد التلفا وشخل بالخارج ولا يوجد أي نافذة لرؤة الداخل أو لرؤية الخارج، فهل يستطيع الذي بالخارج مشاهدة التلفا مع الذي بالداخل الاجابة طبعا لا، لإن نطاق الوصول لهذا الرجل لا يستطيع اختراق الجدران، وكذلك الأمر للشخل الذي بالداخل، فلا يستطيع معرفة ما يحدث بالخارج...الآن ماتا لو قمنا بوعع نافذة مظللة، بحيث يستطيع الذي بالخارج رؤية ما ف الداخل؟، حينها سيستطيع الذي بالخارج مشاهدة التلفا وبذات الوقت الذي بالداخل لن يستطيع مشاهدة الخارج ... وهكذا
  69. 69. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن يج أن تعلم أن الجافا سكربت تملك scope ..هذا ال scope هو function scope ..وبهذا يكون المتعير أو ال scope إما ( 1Local variable ( 2Global variable ( 3Auto Global والآن لنبد معا بهذا الموعوع السهل والمهم ^_* 1 ( ال local variable : ف هذا النوع يتم انشا المتعير داخل نطاق ال function وبهذا يكون ال local variable يملك local scope وهذا يترت عليه .. أ( لا يستطيع أحد الوصول الى هذا المتعير واستخدامه الى ال function الذي يحتوي هذا المتعير
  70. 70. aneeshikmat@gmail.com أنيس حكمت أبوحميد ب( يمكن انشا هذا المتعير بنفس الإسم ف أكثر من function دون أن يأثر كل منهم على الآخر..لأنه لا يستطيع أحد بالخارج رؤية التلفا الذي بالداحل ^_* ج( مجرد استدعا ال function فإنه يتم انشا هذه المتعيرات..وبمجرد انتها هذا ال function يتم حذف المعير ^_*...شاهد المثال 1 )
  71. 71. aneeshikmat@gmail.com أنيس حكمت أبوحميد المثال 2 ) ملاحظة: ف حالة حصول مثل هذا الخطأ ..فإن أي سكربت سيأت بعده لن يعمل .. شاهد المثال: )مهم جدا أن تقوم بكتابة الأمثلة وتطبيقها( ..هذه الأمثلة مهم أن ترى الشيفرة البرمجية وال console ..مهم جدا ..ومهم أن تقرأ التعليقات..
  72. 72. aneeshikmat@gmail.com أنيس حكمت أبوحميد 2 ( ال Global variable : يتم تعريف هذا النوع من المتعيرات خارج ال function ، وبهذه الحالة يمكن أن يستخدم ف جميع الأماكن ^_^ داخل السكربت، ويمكن أن يستخدم داخل ال function ...وهذا يعن أن المتعير يمتلك Global Scope ... شاهد مثالا:
  73. 73. aneeshikmat@gmail.com أنيس حكمت أبوحميد مثال 2 : لاحظ هنا باستخدام ال Global ..استطعنا أن نستخدم المتعيرات داخل وخارج ال function بدون أي خطأ... ^_*
  74. 74. aneeshikmat@gmail.com أنيس حكمت أبوحميد 3 ) Auto Global : ف هذا النوع ..نكون قد أسندنا قيمة الى المتعير، دون تعريفه باستخدام ال var ...وهنا بطريقة تلقائية..يقوم باعتبار هذا المتعير هو Global ..شاهد المثال:
  75. 75. aneeshikmat@gmail.com أنيس حكمت أبوحميد ملاحظات على ال Scope : (1 يمجرد انشا متعير الجافا سكربت فإنه يبدأ دورته ف العمل...)يقصد بالانشا لحظة الوصول الى المتعير وحجز مساحه له ف الذاكرة ( (2 ال local variable ينته ويحذف من الذاكرة بمجرد انتها عمل ال function ..واتا قمنا بعمل استدعا مجددا لل function ..فإنه يقوم بانشا المتعير مجددا ..ويحجز له المساحة مجددا... ( 3 ال Global variable ينته اتا قمت باغلاق الصفحة ^_^ (4 النقاط من 1 الى 3 يطلق عليها دورة حياة المتعيرات بالجافا سكربت وه (Java Script Variable Life Time) (5 اتا قمت بعريف متعير على شكل parameters .. فإن هذه المتعيرات تعتبر local ..)راجع در ال function اتا كنت لا تعرف ال parameters )
  76. 76. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن لنشاهد بعض الأمثلة
  77. 77. aneeshikmat@gmail.com أنيس حكمت أبوحميد ملاحظة: أثنا تطويرك للمواقع الالكترونية، وخصوصا أثنا تعاملك مع الجافا سكربت، أو أيا من المكات الخاصة بها ... أبق ال console ظاهرا أمامك ..لتبقى على اطلاع ان حصل هناك أي خطا.. هذا أمر يسهل عليك العمل كثير.. اياا ..لمعلوماتك ..فإنه يمكنك أثنا العمل..تطبيق السكربت مباشرة داخل ال console ... شاهد هذا الفيديو البسيط ^_^... إنه لأمر رائع ^_^..مهم جدا للمشاهدة، وكثير من المطورين لا يعرفون عن هذه الخاصية ..وحتى بعد تجاو هم لمستوى معين...وأنا منهم طبعا..فعرفت هذه المعلومات بعد أكثر من عام على دراست للجافا سكربت .. ..^_*
  78. 78. فإن عبت قومــــــاً بالذي فيك مثلــــه فكيف يعي النا من هو أعور وان عبت قوماً بالذي ليس فيهم فذلك عند الله والنـــــــا أكبــــر aneeshikmat@gmail.com أنيس حكمت أبوحميد
  79. 79. aneeshikmat@gmail.com أنيس حكمت أبوحميد ال events .. ^_^...يقصد بال events أي حدث يمكن أن يقوم به المستخدم أو المتصفح على أي عنصر من عناصر ال html .. وبوجود الجافا سكربت، فإنه يمكن أن تحدث استجابة معينة من خلال السكربت لهذا ال event ^_^، مثال: ال hover ^_^..هل تذكرها ..ال click .... هل تذكرها ...الخ **( مثال على event للمتصفح: عند تحميل الصفحة ..قم بتنفيذ أمر معين. الصيعة العامة لاستخدام ال event : جميع الخصائل الت ف هذا العنصر تم شرحها سابقا.. لكن الآن نأت الى ال event وهو هنا onclick ..أي عند قيام بالنقر على الزر ..ماتا سيحدث..ف هذه الصورة ..الناتج سيكون مربع نل مكتوب فيه ev click
  80. 80. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن بالصيعة العامة ..يمكن استبدال ال onclick ب أي event آخر.. أما بخصوص ما سيحصل عند حدوث الحدث ..فإنه يعود اليك .. ويمكنك استخدام أكثر من أسلوب لتنفيذ كود معين عند حدوث حدث .. ( 1 عن طريق تنفيذ كود الجافا سكربت مباشرة ( 2 عن طريق عمل call ل function مكتوب داخل السكربت ( 3 ويمكنك أياا تنفيذ الجافا سكربت وجعل التأثير يعمل مباشرة على العنصر باستخدام ال this والآن ..بالنسبة للنقطة واحد ..فهذا المثال الموجود بالصيعة العامة ..والآن 2 و 3 لنرى أمثلة ^_*
  81. 81. aneeshikmat@gmail.com أنيس حكمت أبوحميد بخصوص الطريقة الثانية:
  82. 82. aneeshikmat@gmail.com أنيس حكمت أبوحميد هل قمت بتنفيذ الأمثلة السابقة ؟.. قم بتجربة تلك .. ثم شاهد هذا المثال: رجائا ركز بهذه الأمثلة..أعلم أنها سهلة وبسيطة .. لكن فكر ف فكرة كل مثال منهم ^_^
  83. 83. aneeshikmat@gmail.com أنيس حكمت أبوحميد أهمية ال events : لل events استخدامات كثيرة جدا وأهمها: ( 1 التحكم بمدخلات المستخدمين handle user input ( 2 التفاعل مع المستخدمين بحيث يتم التعامل بشكل سريع مع أي اجرا يقوم به المستخدم user action ( 3 التفاعل مع المتصفح والقيام بالإجرا المطلوب بكل سهولة وسرعة browser action ..
  84. 84. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن لنتحدث عن ال events الت يمكنن استخدامها: ( 1click : وهذا الحدث ينطلق عند النقر ( 2onchange : هذا الحدث ينطلق بمجرد خروجك من العنصر ال html الخاص به، لكن بشرط أن يكون قد حصل تعيير معين ...على هذا العنصر ( 3onmouseover : وهذا الحدث ينطلق عند دخولك الى العنصر (4 onmouseout : هذا الحدث ينطلق بمجرد خروجك من نطاق العنصر (5 onmousedown : ينطلق هذا الحدث بمجرد النقر على ر الفأرة (6 onmouseup : وهذا الحدث ينطلق بمجرد رقع أصبع عن ر الفأرة ( 7onload : هذا الحدث ينطلق بمجرد أن العنصر تم تحميله. (8 onfocus : هذا الحدث بمجرد ما تم تحديد العنصر.. وهذا الحدث يعمل مع <a>, <input>, select
  85. 85. aneeshikmat@gmail.com أنيس حكمت أبوحميد (9 onblur : هذا الحدث ينطلق بمجرد خروج التحديد عن العنصر، وهو بنفس مواصفات ال onfocus ولكن هذا خروج للتحديد، وتاك دخول التحديد (01 ondblclick : هذا الحدث ينطلق عند قيامنا بالنقر نقرا مزدوجا )الاعط على ر الفأرة مرتين متتابعتين( (11 onmousemove : ينطلق هذا الحدث طالما موشر الفأرة يتحرك فوق العنصر. (21 onkeydown : ينطلق هذا الحدث بمجرد الاعط على أي ر من أ رار لوحة المفاتيح. (31 onkeypress : بنفس فكرة ال onkeydown لكن هذا الحدث لا يعتبر ال shift وال ctrl وال alt ..الخ من الأ رار..وينطلق فقط للأرقام والحروف والرمو الخاصة .. (41 onkeyup : بمجرد رفع اصبع عن أي من أ رار لوحة المفاتيح ..ينطلق.
  86. 86. aneeshikmat@gmail.com أنيس حكمت أبوحميد والسؤال ..هل يوجد المزيد..نعم يوجد ..لكن هذه أهم ال event الموجودة والمدعومة من جميع المتصفحات الرئيسية ..والآن .. عليك أن تقوم بتطبيق مثال على كل خاصبة ..وهذا أمر مهم .. وقبل أن تنطلق للشريحة التالية.. لأنه لا يمكنك تجاهل هذا الموعوع المهم... ستقول ..كيف سأطبق ولم أشاهد أمثلة عليها ؟!. . سأقول لك أنت مبرمج محترف الآن.. لديك الصيعة العامة ..وتستطيع كتابة أي سكربت بسيط .. ولديل ال events ..كل ما تبقى عليك هو التجربية ^_^
  87. 87. aneeshikmat@gmail.com أنيس حكمت أبوحميد هل قمت بتنفيذ الأسئلة السابقة ؟! اتا قمت بذلك ..وحدثت معك أخطا ..أو تريد ان ترى جميع هذه ال events تعال مع لنرى هذا المثال ^_^ ملاحظة: بعض الخصائل الجديدة ف المثال: Placeholder : خاصية يمكن استخدامها لعمل watermark ..)شاهدها بالمثال( لتعيير الخصائل ل css عن طريق الجافا سكربت يمكننا استخدام العنصر ال بدنا نعيرلو الخصائل ثم style ثم background ثم = ثم القيمة ..^_^والآن لنفرح معا بالمثال ..يج أن تستطيع القيام به ..سهل ^_^
  88. 88. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن ..أخر نقطة حول هذا الموعوع وه ..هل كتابة ال event تكون دائما داخل ال html ..ونستدع من خلاله الجافا سكربت ؟... الجواب بكل تأكيد ..لا ^_^..يمكنك كتابة السكربت وال event داخل ال script tag ... شاهد الصيعة العامة: مثال على الصيعة العامة:
  89. 89. aneeshikmat@gmail.com أنيس حكمت أبوحميد شاهد المثال التال :
  90. 90. أعوت بالله من الشيطان الرجيم "هاللهُ الا إِلَٰاها إِهلا هُاو الْاح الْقايُّومُ الا تاأْخُذُهُ سِناةٌ اوالا ناوْمٌ لاهُ اما فِ الهسامااواتِ اواما فِ الْأارْضِ امنْ اتا الهذِي ياشْفاعُ عِنْادهُ إِهلا بِإِتْنِهِ ياعْلامُ اما بايْان أايْدِيهِمْ اواما اخلْفاهُمْ اوالا يُحِيطُوان بِاش مِنْ عِلْمِهِ إِهلا بِاما اشاا اوسِاع كُرْسِيُّهُ الهسامااواتِ اوالْأارْاض اوالا يائُودُهُ حِفْظُهُاما اوهُاو الْاعلِ الْاعظِيمُ ” آية الكرسى )البقرة 255 ) aneeshikmat@gmail.com أنيس حكمت أبوحميد
  91. 91. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن ..سنعود مجددا للحديث عن الأنواع الت تكرناها من قبل ..لكن بش فيه تفصيل نوعا ما ...بالإعافة تكر بعض الدوال الت يمكن استخدامها مع كل نوع من أنواع البيانات .. أول هذه الأنواع هو ال String )النص ( ويستخدم هذا النوع لحفظ مجموعة من الحروف أو الأرقام أو الرمو الخاصة والتعديل عليها ...وقد شرحنا تلك سابقا ف أنواع البيانات .. والآن سننطلق معا بإتن الله تعالى ... الى عالم جديد ..يملأه المعامرة والأفكار *_^
  92. 92. aneeshikmat@gmail.com أنيس حكمت أبوحميد ( 1 يمكن كتابة النصوص) String ( داخل quote (‘) أو double quote(“) مثل “anees” أو ‘anees’ ... ( 2 يمكن كتابة ال ‘ داخل ال ” ويمكن كتابة ” داخل ال ‘ ... شاهد المثال: “anees ‘test’” أو ‘anees “test” ‘ .... ( 3 يمكننا استخدام ال backslash () ..لكتابة ‘ داخل “ أو ” داخل ‘ ...شاهد المثال: “anees ’hikmat’ “ أو ‘anees ”hikmat” ‘ أو حتى يمكنك كتابة “anees ” hikmat ” “ قد تتعج ..لماتا تكرت هذه النقاط؟..الجواب بكل بساطة ..عشان ما يفقع معاك الكود ^_* ..مصطلح ينح استخدامه ...*_*...أريدك أن تشاهد المثال بالصفحة التالية لتعلم لماتا تطرقنا الى مثل هذه المواعيع
  93. 93. aneeshikmat@gmail.com أنيس حكمت أبوحميد لاحظ شكل الشيفرة البرمجية بالصورة.. حس النقاط الت تكرناها ..ما رأيك أن تقوم بحل هذا الشكل ليصبح صحيحا ب 3 طرق ^_^..)الطرق تم تكرها بالشريحة السابقة( *( الرمو الخاصة وال backslash : لقد لاحظت ف الشريحة السابقة كيف أن ال backslash () كان لها دور كبير ف حل مشكلة ال ‘ أو “ ... ال ‘ وال “ هذه تسمى رمو خاصة ..الآن يوجد أياا العديد من الأمور الت يمكن استخدام ال backslash لها ..شاهد الجدول بالشريحة التالية ..
  94. 94. aneeshikmat@gmail.com أنيس حكمت أبوحميد كما تلاحظ .. فإنك تشاهد مجموعة من الخصائص التي يمكن صنعها باستخدام ال backslash ..شاهد مثلا كيف يمكننا طباعة سطر جديد لنص .. n ... هذه مهمة..جربها داخل alert وانظر النتائج..وجرب ال <br /> وشوف أيتهما التي ستعمل ...^_^
  95. 95. aneeshikmat@gmail.com أنيس حكمت أبوحميد والسؤال القوي ...هل ينته ال string هنا .. الجواب طبعا لا ..فنحن لم نبدأ بعد ..ما تكرناه أمور تخل نفس النل ..والآن نريد أن نصل الى خصائل أو معلومات حول هذا النل مثل معرفة عدد الحروف..تعيير أو استبدال كلمة معينة ...الخ .. * ) length : هذه الخاصية تعد من خصائل ال string وه تسمح لنا بمعرفة طول نل معين ..من بدايته حتى نهايته ... مثلا anees اتا استخدمت هذه الخاصية فالناتج هو 5 ..شاهد المثال: الآن ف هذا المثال الناتج سيكون هو 12 ...
  96. 96. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن سأبد من هنا بالتحدث عن الدوال ) method ( الت سنقوم باستخدامها مع ال string بإتن الله تعالى.. ( 1charAt() ( 2charCodeAt() ( 3concat() ( 4fromCharCode() ( 5indexOf() ( 6lastIndexOf() ( 7replace() ( 8search()
  97. 97. aneeshikmat@gmail.com أنيس حكمت أبوحميد ( 9slice() ( 10split() ( 11substr() ( 12substring() ( 13toLowerCase() ( 14toUpperCase() ( 15trim() هذه الدوال ..حس اعتقادي أهم الدوال الموجودة ..وهناك غيرها بكل تأكيد ويمكنك البحث عنها .. هذه الدوال قد تكون ه أكثر الدوال المستخدمة أثنا المشاريع ..ولذلك فه تي الأهمية بمكان ... والآن لنبدأ على بركة الله ..
  98. 98. aneeshikmat@gmail.com أنيس حكمت أبوحميد 1 ) charAt() : تستخدم هذه الدالة لارجاع حرف معين ..أو char معين موجود داخل هذا النل بنائا على موقعه داخل النل مثل: لاحظ ..أن ال charAt لا يقبل الى أعداد صحيحة ..مثل 0 .. 1 .. 2 الخ وهو اجباري.. والملاحظة الثانية أن العد يبدأ من صفر ..وهذا يعن ..لو أردت طباعة الحرف الأخير باستخدام ال length ..فسيكون الموقع هو length – 1 .. شاهد هذا المثال: بعد تلك قم بتطبيق المثال الأول والثان )عروري( ^_*
  99. 99. aneeshikmat@gmail.com أنيس حكمت أبوحميد 2 ) charCodeAt() : ف دورة ال html ..إن كنت تذكر فقد تطرقندا الدى موعدوع ال Charest وتكلمنا عن ال Unicode ..وغيرها ..وقلنا أن لكل char حس نظددام ال Unicode الددذي يسددتخدمه رقددم يمثلدده ..الآن بإمكاننددا معرفددة رقددم ال Unicode لهدددددددددددددددددددددددددددددددددددددددددددددددددددددددذا ال char ... فمدددددددددددددددددددددددددددددددددددددددددددددددددددددددثلا ال A رقمها هو 65 بالجدول ورقم ال a هو 97 *_^ .. شاهد هذا المثال: أيادا هنددا ..تسددتقبل هددذه الدالدة رقددم صددحيح فقددط، وهددو الزامد ، ويبدددأ العددد مددن صددفر وصولا الى ال length – 1 .. ^_*.. الآن قم بتطبيق المثال هذا .. أياا أريدك أن تقوم بطباعة ال Unicode للحرف قبل الأخير دون كتابدة رقدم ثابدت لهدددددذا العنصدددددر..يعنددددد اتا جائدددددت الكلمدددددة 5 أو 10 أو 20 حدددددرف..بطبدددددع ال Unicode للحرف القبل الأخير مباشرة ^_*
  100. 100. aneeshikmat@gmail.com أنيس حكمت أبوحميد 3 ) concat() : تستخدم هذه الدالة للدمج بين النصوص ..بحيث يمكن الدمج بين نصين أو أكثر باستخدام هذه الدالة ... الصيعة العامة ه : ال str يرمز الى متعير من نوع string وال StringNameVar.. ترمز الى اسم المتعير الذي نريد عم النصوص الموجودة داخل ال concat اليه..لنشاهد المثال معا ثم قم بتنفيذ المثال ..)عدد المتعيرات من 1 الى x )
  101. 101. aneeshikmat@gmail.com أنيس حكمت أبوحميد 4 ) fromCharCode() : هذه الدالة تقوم بعملية عكسية لل charCodeAt بحيث تقوم بأخذ رقم ال Unicode وتحويله الى ال char *_^.. الصيعة العامة )طبعا عدد الأرقام ألمراد تحويلها من 1 الى n :) شاهد الأمثلة: )وقم بتطبيقها(.
  102. 102. aneeshikmat@gmail.com أنيس حكمت أبوحميد 5 ) indexOf() : هذه الدالة الرائعة ..تخبرنا بموقع أول نل تم العثور عليه عمن سلسلة الحروف..بمعنى آخر لوقمت باستخدام هذه الدالة مع حرف ال e ف كلمة anees ...فإنه سيرجع موقع أول حرف e بلاقيه ..وهنا 2 الآن ..لنرى الصيعة العامة: اتا أرجعت الدالة - 1 .فهذا يعن أن العنصر المراد البحث عنه ..غير موجود ..أياا هناك ملاحظة مهمة..أن هذه الدالة حساسة لحالة الأحرف بخصوص البحث ..فالبحث عن A لا يساوي البحث عن a ...
  103. 103. aneeshikmat@gmail.com أنيس حكمت أبوحميد 6 ) lastIndexOf() : هذه الدالة عكس السابقة، فه ترجع آخر عنصر مراد البحث عنه ..بدلا من أول عنصر...ويبدأ البحث ف هذه الدالة من آخر حرف موجود رجوعا الى أول حرف..ويرجع الموقع الفعل لهذا الحرف ف حال وجد ..مثل أريد أن أبحث عن حرف e ف كلمة anees ..باستخدام هذه الدالة ..فيكون الناتج هو 3 .. ما ينطبق على indexOf ينطبق على هذه الدالة ..فه حساسة لحالة الأحرف..والقيمة صفر تدل على عدم وجود قيمة ..
  104. 104. aneeshikmat@gmail.com أنيس حكمت أبوحميد 7 ) replace() : هذه الدالة الجميلة ..تقوم على البحث عن نل معين موجود داخل string ...ومن ثم استبداله بنل جديد، النل المراد البحث عنه وتبديله إما أن يكت مباشرة، وإما أن يكت بصيعة |RegExp .. هذا الموعوع سنتطرق اليه الحقا ان شا الله ..والآن سنكتف بالنل المباشر.. الصيعة العامة: X : هو ال string الذي سنبحث فيه عن كلمة anees ونقوم باستبدالها بكلمة taher ... مكان كلمة anees يمكنك وعع regExp ..لكن لن أتطرق لهذا الموعوع... شاهد المثال التال :
  105. 105. aneeshikmat@gmail.com أنيس حكمت أبوحميد هل لاحظت الناتج ..نعم ..فقط أول كلمة من ال x ه الت تعيرت فقط.. ولك نستطيع تعيير كامل الكلمات داخل النل يمكننا اعاف / قبل وبعد النل وبدون وعع ” مع اعافة حرف ال g ..شاهد المثال الثان : هل لاحظت كيف هو شكل البحث الآن ..اللون الأصفر الآن يمثل regExp بسيط وال g وهناك ال i ه flag ..وتعن ال g كل العناصر..وال i تجاهل حالة الأحرف... )طبق الأمثلة ^_*(
  106. 106. aneeshikmat@gmail.com أنيس حكمت أبوحميد 8 ) search() : هذه الدالة تستخدم للبحث عن نل معين داخل ال string ..ويقوم على ارجاع موقع النل هذا ... ويرجع - 1 ف حال لم يكن النل موجودا .. يكون هنا البحث عن طريق string أو regExp ..وفعليا ف هذه الدالة ..يتم تحويل النل الى regExp ... الصيعة العامة: ال x ترمز الى النل المراد البحث فيه عن كلمة Anees ... ف هذه الحالة يج أن يكون متطابق، ويمكننا استخدام ال i لتجاهل حالة الأحرف.. لكن عملية جل الموقع ..تكون لأول قيمة تم ايجادها ...
  107. 107. aneeshikmat@gmail.com أنيس حكمت أبوحميد 9 ) slice() : هذه الدالة الجميلة تقوم على أخذ جز من النل ..وارجاعه .. الصيعة العامة: ف الصيعة العامة ..البداية الزامية والنهاية اختيارية ..ف حال أنك اكتفيت بالدباية فإنه سيقوم بأخذ الجز من البداية الت قمت بتحديدها ..وصولا لنهاية النل ...لنشاهد أمثلة على تلك ..
  108. 108. aneeshikmat@gmail.com أنيس حكمت أبوحميد شرح المثال مع النتائج: لاحظ المثال رقم 16 : الناتج كان anees والسب أنن قلت له ..قم بأخذ من الموقدع 0 بطول 5 فكان هذا الناتج المثال 17 : حددت البداية من الموقع الخامس فكدان النداتج مدن الموقدع الخدامس وحتدى نهاية النل )لإنه لم تحدد النهاية( المثال 18 : قلت له - 1 وهذا يعن قم بالبدأ من العنصر الآخير.. ولدم أحددد نهايدة فطبدع الحرف d وهو أصلا آخر حرف... المثال 19 : قلت له قم بالقطع من 19 الى - 10 وهذا يعن خذ النل من الموقع ال 19 والنهايددة تكددون قبددل نهايددة الددنل بعشددرة أحددرف..بمعتددى آخددر قمنددا باسددتثنا آخددر عشرة حروق وأول 19 حرف ...وأخذنا ال بيناتهم ^_*
  109. 109. aneeshikmat@gmail.com أنيس حكمت أبوحميد 10 ) split() : تستخدم هذه الدالة على تقسيم النل الى أجزا بحيث تصبح مصفوفة من الأجزا بدلا من أن تكون مصفوفة من الحروف.. ليتاح الفرق بشكل بسيط ...شاهد هذا المثال: ناتج المثال 21 : هو حرف ال n .. أما ناتج المثال 22 سيكون hikmat .. الآن نعود ..الصيعة العامة لهذه الدالة:
  110. 110. aneeshikmat@gmail.com أنيس حكمت أبوحميد يقصد بال separator الجز الذي سنعتبره فاصلا لك يقسم هذا النل الى مصفوفة بنائا عليه .. فمثلا يمكن أن يكون حرف معين..أو رقم معين ..أو regExp أو مسافة أو حتى ”“ ..بدون أي ش وبهذه الحالة يتم فصل الحروف .. أما ال limit فهو يحدد كم عنصر على الأكثر يمكن أن يتحول الى مصفوفة ..فيمكنن أن أحدد 5 عناصر فقط ..الخ هذان الخياران اختياريان...شاهد هذا المثال)أرجو أن تقوم بالتطبيق مهم جدا(:
  111. 111. aneeshikmat@gmail.com أنيس حكمت أبوحميد نتائج تطبيق المثال السابق.. اتا لم تقم بحل أو تتبع نتائج المثال السابق ..عد قبل أن تقر هذه النتائج .. هذه ه نتائج الأمثلة السابقة.. تأكد منها بدقة .. ^__^ أووووووووووووووه .....هانت يا شباب ..وصلنا الدالة رقم 11 *_^
  112. 112. aneeshikmat@gmail.com أنيس حكمت أبوحميد 11 ) substr() : هذه الدالة مهمة جدا .. تقوم هذه الدالة على اقتطاع جز من النل ..وه تشبه ال slice ..لكن الاختلاف ف هذه الدالة ..بأنك تقوم بتحديد عدد الحروف المراد اقتطاعها ..ونقطة البداية ..ونقطة البداية ممكن أن تكون موجبة.. ويمكن أن تكون سالبة ... لاكن القيمة الثانية وه عدد الحروف المراد اقتطاعها ..فه موجبة اجباريا.. الصيعة العامة: ف حال كانت بداية القطع ..أكبر من عدد الحروف .. فإن الناتج هو Null ..
  113. 113. aneeshikmat@gmail.com أنيس حكمت أبوحميد شاهد المثال: النتائج)تتبع المثال..وحاول توقع النتائج(:
  114. 114. aneeshikmat@gmail.com أنيس حكمت أبوحميد 12 ) substring() : هذه الدالة صورة مصعرة عن ال slice ..بحيث تقوم باقتطاع جز معين من النل بنائا على البداية والنهاية الت تم تحديدها ..والنهاية الت توعع لا تكون عمن القطع ..والفرق بين هذه الدالة وال slice هو أنه لا يمكنك استخدام قيم سالبة هنا .. بالإعافة الى أنه يوجد خاصية ف هذه الدالة swapping بحيث لو قمت بوعع الرقم الأول أكبر من الثان ..فإنه سيتم تبديل الرقمين ... والقيمة السالبة ف هذه الدالة يتم تحويلها الى صفر... الصيعة العامة: المتعير x هو string ... وال 0 ه البداية وال 5 ه آخر موقع ..هذا الموقع لن يتم اقتطاعه ...وسيتم قطع 0 و 1 و 2 و 3 و 4 ...بدون الموقع 5
  115. 115. aneeshikmat@gmail.com أنيس حكمت أبوحميد شاهد المثال: لاحظ النتائج بدقة: )وكل مثال موجود أمامك ..قم باستبداله بالدالة slice وقارن بين النتائج ...الاختلافات الت تكرتها بالشريحة السابقة مهمة ^__*(:
  116. 116. aneeshikmat@gmail.com أنيس حكمت أبوحميد 13 ) toLowerCase () : هذه الدالة البسيطة والرائعة ..مهمتها بكل بساطة هو تحويل حالة الأحرف الى lower case *_^ ... الاستخدام: يرمز ال x الى النل ... شاهد المثال:
  117. 117. aneeshikmat@gmail.com أنيس حكمت أبوحميد 14 ) toUpperCase () : هذه الدالة عكس الدالة السابقة ..فه تقوم على تحويل حالة الأحرف الى Upper Case *____^ .. الاستخدام: شاهد النتائج:
  118. 118. aneeshikmat@gmail.com أنيس حكمت أبوحميد 15 ) trim() : والآن ..آخر خاصية والحمد لله ^_* ف موعوعنا عن ال string ..وه خاصية ال trim *_^ هذه الدالة تقوم بحذف الفراغات أو المسافات قبل وبعد النل ... الاستخدام: مثال:
  119. 119. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن.. بحمد الله تعالى ..نكون انتهينا من الحديث عن أهم الدوال الخاصة بالنصوص داخل الجافا سكربت .. والآن ما رأيك أن نرى ..هل درست جيدا المواعيع السابقة أم لا .. انظر الشكل: هل يمكنك باستخدام الجافا سكربت ..عمل مثل هذا الشكل للنل التال Anees Hikmat Anees Abu-hmaid ..بحيث تستخدم الدوال الت تحدثنا عنها ..مساعدة للحل: الأولى استخدمت replace والثانية split
  120. 120. aneeshikmat@gmail.com أنيس حكمت أبوحميد هل قمت بحل السؤال ..^_*.. فكرة الحل بسيطة جدا ..وبسطر واحد جافا سكربت ..^_* لكل شكل... هل خطر ببالك استخدام ال html مثل ال mark tag ..*_^ شاهد الحل ..مع أمثلة على جميع الدوال السابقة ..تتبع الحل والنتائج والشيفرة البرمجية ... ^_*
  121. 121. قال صل الله عليه وسلم : الشهدا الذين يقاتلون ف سبيل الله ف الصف الأول ولا يلتفتون بوجوههم حتى يقتلوا فأولئك يلقون ف العرف العلا من الجنة ياحك إليهم ربك، إن الله تعالى إتا عحك إلى عبده المؤمن فلا حساب عليه. صححه الشيخ الألبان فى صحيح الجامع. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  122. 122. aneeshikmat@gmail.com أنيس حكمت أبوحميد تحدثنا عن الأرقام ف موعوع أنواع البيانات وال syntax ^_*..والآن لنستزيد من الشعر بيت ...ولنتابع التقدم ^_* الآن أول معلومة على الريق ^_*.. الجافا سكربت بتعتمد نظام ال 64bit للبيانات من نوع رقم .. وهذا الأمر معتمد من ال IEEE ..وبهذا ف تختلف عن لعات البرمجة الأخرى من حيث الحاجة لتعريف متعيرات مثل integer )عدد صحيح( أو float )عدد عشري( أو long )عدد صحيح كبير( ...الخ الجافا سكربت ..تعطيك نوعا من الراحة ف التعامل..بحيث يمكنك فقط تعريف متعير ووعع الرقم بداخله ..
  123. 123. aneeshikmat@gmail.com أنيس حكمت أبوحميد 1 ( أول ما سنتحدث عنه ..هو القسمة على صفر... ف الرياعيات هل يمكنك القسمة على صفر؟ ...الجواب بالطبع لا ..اتا اتا واجهت هذه المشكلة البرنامج الذي أنت به ..ماتا سيكون الحل بوجهة نظرك ؟ لكل لعة برمجة أسلوب خاص للتعامل مع هذا الخطأ، بالإعافة الى تلك هناك أسالي يتبعها المبرمجون لتلاف هذا الخطأ .. والآن وما يهمنا هنا هو تعامل الجافا سكربت..^_^.، هناك قيمة مخزنة داخل الجافا سكربت تسمى Infinity هذه القيمة ه الت ستنتج ف حال القسمة على صفر... واتا قمت بالقسمة على سال صفر فإن الناتج سال Infinity ....
  124. 124. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن لنشاهد المثال معا ^_^: 2 ) NaN : هذه كلمة يتم استرجاعها من قبل الجافا سكربت لتدل على القيم / القيمة الموجودة ليست برقم.. Not a Number .. مثل القسمة على حرف .. 54/”anees” ... الناتج هو NaN ...
  125. 125. aneeshikmat@gmail.com أنيس حكمت أبوحميد شاهد مثالا على NaN : ملاحظة: لو قمت بتجربة استخدام typeof مع ال NaN وال infinity .. سيكون الناتج ...)--------أنت عع الناتج----------(..ملاحظة النوع لن يكون نل ...لذلك ..طبق وانظر النوع ..*_^
  126. 126. aneeshikmat@gmail.com أنيس حكمت أبوحميد الآن..هل هناك حد أعلى للرقم الذي يمكن ادخاله ؟!..وهل هناك حد أدنى ؟ الجواب ببساطة ..نعم ..هناك حد أعلى وحد أدنى لكل رقم ..ولمعرفة تلك يمكنك استخدام بعض من خصائل ال Number كنوع مثل ال MAX_VALUE ... شاهد المثال:
  127. 127. aneeshikmat@gmail.com أنيس حكمت أبوحميد أياا هناك ال Number.MIN_VALUE .. جربها بنفسك ^_* ملاحظة: هناك ما يسمى بال global method وال method ..عندما نتكلم عن دالة على أنها global method فهذا يعن أنه يمكن تطبيقها على جميع أنواع البيانات ...والآن بحس طبيعة عملنا مع ال Number فإنن سأتكر 3 دوال مهمة وه (1 parseInt : هذه الدالة تقوم على تحويل النل الى رقم صحيح، والذي يسترجع هو أول رقم والمسافات ه المسموحة _* (2 parseFloat : هذه الدالة تقوم على تحويل النصر الى رقم عشري (3 Number : تستخدم هذه الدالة لتحويل متعير الجافا سكربت الى رقم
  128. 128. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  129. 129. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن سنتكلم بإتن الله تعالى عن بعض الدوال الت يمكن استخدامها مع ال Number type .. ( 1toString : تقوم هذه الدالة على ارجاع الرقم على شكل نل.. (2 toExponential : تستخدم هذه الدالة لتحويل الرقم الى شكل أس بعد تقريبه، يتم ارجاع هذا الرقم على شكل نص ) string ...) (3 toFixed() : هذه الدالة تقوم على تحديد عدد الخانات العشرية الت أريدها أن تبقى.. وهذه مفيدة جدا ف التعامل مع الأمور النقدية والت بها أعشار... ^_*..الناتج يعود على شكل نص أياا.. (4 toPrecision() : هذه الدالة تقوم على تحديد طول الرقم الذي سيظهر مع تقري ..وترجع الناتج على شكل نص ....الآن لنشاهد أمثلة على الموعوع ^_* *( ملاحظة التعيير بالستخدام الدوال الت تكرنها والخاصة بالأرقام تكون على مستوى الناتج)قيمة مرجعة جديدة( ولا يعير هذا على القيمة المتعير الأصل ...
  130. 130. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  131. 131. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن ..لنشاهد مثالا عن جميع المواعيع الت تكلمنا عنها بإتن الله تعالى ... )أرجو أن تكون قد طبقت الأمثلة السابقة..وحاول الآن تعيير الأرقام والقيم ..وتوقع الناتج..(
  132. 132. العلم يبن بيوتا لا عماد لها .. والجهل يهدم بيت العز والكرم aneeshikmat@gmail.com أنيس حكمت أبوحميد
  133. 133. aneeshikmat@gmail.com أنيس حكمت أبوحميد ال Operators ه مجموعة العمليات الت يمكن القيام بها بين المتعيرات أو القيم المختلفة ولإدا وظائف مختلفة، هذه العمليات تختلف بطبيعتها بحس طبيعة المتعيرات أو القيم المراد التعامل معها ..أو الهدف منها .. أنواع ال Operator : ( 1Arithmetic Operator ( 2Assignment Operator ( 3String Operator ( 4Bitwise Operator ( 5Unary Operator ( 6Comparison Operator ( 7Logical Operator ( 8Conditional Operator
  134. 134. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن لنبد على بركة الله تعالى ..بشرح أنواع ال Operator *_^ 1 ) Arithmetic Operator : وه العمليات الرياعية والت يمكن اجرائها بوساطة الجافا سكربت..وتكون هذه العمليات بين متعيرات أو قيم.. العمليات الت يمكن استخدامها ف هذا النوع ه : + و – و * و / و % و ++ و – والآن لنرى معا أمثلة وشرح لكل من هذه العمليات ^_*
  135. 135. aneeshikmat@gmail.com أنيس حكمت أبوحميد التفاصبل بالشريحة التالية لكن انتبه جيدا للنتائج ؟
  136. 136. aneeshikmat@gmail.com أنيس حكمت أبوحميد عمليات الجمع والطرح والارب والقسمة ..لن أقوم بشرحها ^_* ... اشارة ال %تعن باقي القسمة ..فلذالك باق قسمة 10 على 6 هو 4 .. والآن نذه الى x++ و ++x !!؟؟.. الجملتان تعن اعافة رقم واحد للمتعير x .. بشكل آخر x = x + 1; *_^.. لكن الفرق أن الأولى تعن x ثم يادة واحد .. أما الثانية فتعن يادة 1 ثم x .. ولهذا اتا لاحظت النتائج ..فإنه عندما قمنا بطباعة x++ ..قام بطباعة 10 .. لكن بعد هذه الحركة قام بزيادة ال x فأصبح 11 .. وف الحالة الثانية ..فإنه قام بزيادة 1 أولا ..فأصبحت 11 + 1 ومن ثم طبعها فكان الناتج 12 ... وهذا الكلام ينطبق على ) -- (..شاهد الأمثلة بالشرحة التالية ^_*
  137. 137. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  138. 138. aneeshikmat@gmail.com أنيس حكمت أبوحميد بهذا نكون انتهينا بإتن الله تعالى من موعوع ال Arithmetic Operator شاهد الأمثلة من هنا ..ولا تنسى تتبع النتائج والنظر الى ال console ... هذه هي النتائح الخاصة بال Console
  139. 139. aneeshikmat@gmail.com أنيس حكمت أبوحميد 2 ) Assignment Operator : وهذه العمليات تستخدم لاسناد القيم / حفظ القيم داخل متعيرات.. وقد استخدمنا اشارة ال ) = ( للاسناد ف أحد الأمثلة السابقة ^_*.. العمليات الت يمكن استخدامها ف هذا النوع ه : = و =+ و =- و =* و =/ و =% والآن ..لنرى مثال على هذه العمليات ^____________*
  140. 140. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  141. 141. aneeshikmat@gmail.com أنيس حكمت أبوحميد انظر الى المثال ..عدل عليه ..قارن النتائج ..هل كانت كما توقعت ؟
  142. 142. aneeshikmat@gmail.com أنيس حكمت أبوحميد 3 ) String Operator : العمليات على النصوص.. بكل بساطة يمكنك استخدام عملية واحدة فقط على النصوص..وه عملية ال الجمع ) + ( ..وقد استخدمناها بكثرة ف الأمثلة السابقة ...وهذه العملية تعن concatenation ... بالإعافة الى تلك يمكنك استخدام ال ) += ... ) ملاحظة: اتا تمت عملية الجميع بين رقم ونل .. فإن الناتج هو نل..ولا يكون الناتج رقما ف الجمع الى بين رقمين ... ملاحظة: ف حال أردنا أن نجعل رقمين يتعاملان مع عملية الجمع مثل النل ..يمكننا أن نستخدم ال ”“ بينهما ..^_* ..أو بوعع أحد الأرقام أو جميعهما داخل “ “... شاهد المثال ف الصفحة التالية:
  143. 143. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  144. 144. رب اغفر لى وت على إنك أنت التواب الرحيم . رب اغفر لى وت على إنك أنت التواب العفور . اللهم إنك عفو تح العفو فاعف عنى . aneeshikmat@gmail.com أنيس حكمت أبوحميد
  145. 145. aneeshikmat@gmail.com أنيس حكمت أبوحميد 4 ) Bitwise Operator : العمليات الت تتعلق بهذا الأسلوب لن أطيل بها..لإنك يج أن تعرف موعا ما ف ال logic ..لكن ما سأقوله أن هذا النوع يقوم التعامل مع الأرقام من خلال ال bit .. كل تمثيل ثنائ بجها الحاسوب.. هذا التمثيل له قواعد معينة ..مثل تحديد السال والموج .. الآن ما يهمن ف الموعوع هو أن تعرف أن الجافا سكربت ..تحجز 32 خانة للتعامل بال bitwise .. العمليات ال يمكن استخدامها بال bitwise ه & و | و ~ و ^ و >> و << الآن ..كيف مبدأ العمل... ؟؟ ال & هذه تعن bitwise and ..وه تختلف عن ال && .. بحيث تقوم على تحويل الرقم الى bitwise ومن ثم عمل & بين ال bit الخاصة بالرقم الأول وال bit الخاصة بالرقم الثان ..والناتج الذي يعود يكون bit يحول الى رقم عادي ..
  146. 146. aneeshikmat@gmail.com أنيس حكمت أبوحميد والآن شاهد المثال التال : And Bitwise Operator الآن ..اذا قمت بتنفيذ الأمثلة التي تشاهدها..جميعها ستعمل بشكل الصحيح..والذي يظهر أمامك ..باستثناء ) ~ . )
  147. 147. aneeshikmat@gmail.com أنيس حكمت أبوحميد هل قمت بتطبيق الأمثلة السابقة ؟ ماتا كان النتاج للصورة الرابعة؟ هل كان 10 ؟ الجواب لا ..كان الجواب - 6 .. والسب ف تلك أن الجافا سكربت تحجز 32 خانة لك تتعامل مع الرقم ..وليس 4 فقط .. وبهذا فالشكل يكون وكأنه التال : 00000(32 time)0101 ومع استخدام عملية ال not تصبح الأصفار 1 ويصبح ال 1 صفر.. s 11111(32 time)1010 )افصد ب 32 هو عدد خانات الرقم كامل(...والآن كما لاحظت ..فإن الناتج الجديد يختلف لهذا السب .. ^_*... شاهد المثال ^_*
  148. 148. aneeshikmat@gmail.com أنيس حكمت أبوحميد 5 ) Unary Operator : وه العمليات الت يمكن تنفيذها على معامل واحد ، وهذا الأمر يذكرنا بدالة استخدمناها كثيرا جدا وه من هذا النوع ؟..وه ال typeof .. هذه الدالة احدى ال operator Unary .. من أشهر الأمثلة على هذا النوع من العمليات .. ال typeof وال delete وال void وال ) + ( ...الخ ال typeof تم شرحها سابقا.. ال delete تستخدم لحذف object معين.. ال void تستخدم لتتجاهل القيمة المرجعة من ال return وتجعل قيمة ال return تساوي undefined *_^.. ال ) + ( وتكت على الشكل التال : x = +y; وتستخدم لتحويل نل الى رقم ^_*..والآن لنشاهد مثالا ^_*
  149. 149. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  150. 150. aneeshikmat@gmail.com أنيس حكمت أبوحميد 6 ) Comparison Operator : هذا النوع من العمليات بختل أو يتعلق بعمليات المقارنة بين القيم المختلفة أو المتعيرات .. للمقارنة بين المتعيرات ..يمكننا استخدام: == و === و =! و ==! و > و < و >= و <= .. (1 ال == وال === تستخدم عند المقارنة لفحل عنصرين ..هل هما متساويين أم لا .. والفرق بينهم أن ال === تقارن المساوة مع نوع المتعير (2 ال !== وال != عكس النقطة واحد ..وال !== تفارن هل القيم غير مستاوية بالنوع والقيمة ( 3 < : مقارنة ..هل العنصر الأول أكبر من الثان ( 4 >: مقارنة : هل العنصر الأول أقل من العنصر الثان . ( 5 <= و => : مقارنة العنصر أكبر أو يساوي أو أقل أو يساوي ...
  151. 151. aneeshikmat@gmail.com أنيس حكمت أبوحميد
  152. 152. aneeshikmat@gmail.com أنيس حكمت أبوحميد ^_^..ال Math Object .. ال Math ه دالة رائعة جدا تستخدم مع الأرقام للقيام بوظائف رياعية محددة ..مثل اختيار الأرقام العشوائية وتحديد أصعر قيمة ..والتقري ..الخ من هذه الأمور الرياعية ^_^ لاستخدام ال Math كل ما يلزمنا هو كتابة Math ومن ثم نقطة ومن ثم اسم العملية الرياعية المراد تنفيذها ... مثل Math.min(10, 15, 12) ... لهذه الدالة الكثير من العمليات الرياعية الت يمكننا استخدامها .. لذلك سنتلكم عن أكثر هذه العمليات استخداما .. ^_^
  153. 153. aneeshikmat@gmail.com أنيس حكمت أبوحميد ( 1Random : وتستخدم هذه الدالة لإرجاع رقم عشوائ . ( 2Max : تستخدم هذه الدالة لإرجاع أكبر رقم. ( 3Min : تستخدم هذه الدالة لإرجاع أصعر رقم. ( 4Round : تستخدم هذه الدالة لتقري الرقم لعدد صحيح. ( 5Ceil : تستخدم هذه الدالة لتقري الرقم لأكبر عدد صحيح. ( 6Floor : تستخدم هذه الدالة لتقري الرقم لإقل عدد صحيح. ( 7Constants مثل ال ) PI وال SQRT2 )... (8 Abs : لارجاع القيمة المطلقة للرقم )تحويل من سال الى موج (. ( 9sin, cos, tan : لإرجاع الجا أو الجتا أو الظا ( 10Pow : تستخدم لرفع الرقم لقيمة اسية معينة ..مثل 2 مرفوعة للقوة 3 = 8
  154. 154. aneeshikmat@gmail.com أنيس حكمت أبوحميد أمثلة على الخصائل المختلفة: )الأمثلة ليست مكتوبة ..ووععت صور لتقوم بتنفيذ الأمثلة مباشرة ورؤية النتائج( 1 ) random :شاهد المثال ثم انظر الى الملاحظات ف الشريحة التالية: وبعد تلك طبق المثال ..وانظر النتائج ...^_^

×