شرح دورة الـ JavaScript للمبتدئين - الدرس الثانى

الدرس الثانى

 تعلم لغه JavaScript من البدايه

اتكلمنا فى السابق عن مقدمه الجافا سكربت وكيفيه كتابه كود الجافا سكربت داخل ملفhtml  والبرامج المستخدمه لكتابه هذه اللغه مثل برنامج Notepad  .
أما فى هذا الدرس سوف نتعلم بعض اوامر هذه اللغه ونرى كيفيه تطبيقها.

فى البدايه.... نفتح برنامج Notepad  

من قائمه ابدأ (start) نختار all programs  ثم نختار Accessories  ومنها نختار برنامج Notepad  وبكده اكون فتحت البرنامج اللى هنكتب فيه اكواد الجافا سكربت.
 كما تعلمنا سوف نبدأ بكتابه اكواد html  ونكتب بداخلها اكواد javascript  كالتالى

لتنفيذ الاوامر السابقه المكتوبه فى ملف Notepad .

·        يتم حفظ ملف Notepad   , نختار من file  كلمه save as  , سوف تظهر هذه النافذه

يتم كتابه اسم للملف كما هو موضح كمثال سنكتب اسم الملف lesson 1.html) ) ولابد من كتابه الامتداد وهو (.html)  أو (.htm)    ويتم كتابه هذا الامتداد لتحويل هذا الملف من ملف Notepad  إلى ملف ويب, وبعد ذلك نضغط على save  .

·        يتم فتح الملف المحفوظ باسم lesson 1  من المكان المحفوظ به وسوف نلاحظ ان شكل الملف اخد شكل المتصفح الافتراضى لجهازك.

·        بعد فتح الملف الويب سوف تظهر هذه الصفحه

ملحوظه

سوف اذكر بعض الاوامر وبعد ذلك سيتم تنفيذ هذه الاوامر مره واحده .

الان سوف نتحدث عن بعض اوامر الجافا سكربت..

أولا: أوامر الطباعه

يقصد به استخدام امر معين لكتابه او طباعه جمله او كلمه فى صفحه الويب , وهناك عده طرق لاوامر الطباعه سوف نذكرها الان.

1.     كتابه الامر بدون استخدام أى تأثيرات من html  كالتالى..

document.write("الجمله المراد طباعتها");

2.     كتابه الامر مع استخدام تأثيرات html  مثل كود (<h1>هنا تكتب الجمله</h1>) , هذا الكود يتم استخدامه لتغيير حجم الخط  والامر كالتالى...

document.write("<h1>الجمله المراد طباعتها</h1>");

 3.     كتابه الامر مع استخدام تأثير html  مع تأثير style  (بمعنى أنه سوف نستخدم تأثير html السابق لتغيير حجم الخط واستخدام تأثير style  لتغيير لو الخط ) كالتالى...

document.write("<h1 style=\"color:red\">الجمله المراد طباعتها</h1>");

4.     طباعه جمله فى سطرين وذلك باستخدام كود <br>  قبل الجمله المراد كتابتها فى سطر جديد.

document.write("الجمله الاولى <br>  الجمله الثانيه ");

هذا هو شكل الاوامر السابقه فى ملف Notepad

ملحوظه

عند كتابه أى أمر لابد من الحفظ بعده حتى نرى تأثيره فى صفحه الويبيتم حفظ هذه الاوامر من file   نضغط على save  وبعد ذلك نفتح ملف الويب كما تعلمنا فى البدايه وسوف تظهر هذه النافذه

ثانيا:عمل نافذه تخرج للمستخدم ويتم تحديد ما يكتب بها

تسمى هذه النافذه فى الجافا سكربت بـ alert   , ويكتب كودها بهذه الطريقه ...

window.alert("اهلا بكم فى موقعنا");

 وهذا هو شكل النافذه...

ملحوظه

     هناك بعض الاوامر التى تستخدم داخل كود alert

1.     أمر (\n): يستخدم لوضع كلمه او جمله فى سطر جديد

window.alert("welcome \n Mohammed");

2.      أمر (\t) :  يستخدم لترك مسافه بين كل كلمه واخرى لكى تظهر كجدول..

window.alert("welcome \t Mohammed \t in \t my site");

3.      أمر (\\)  : لكتابه الرمز(\)

window.alert("Eng \\ Mohammed");

4.      أمر (\")  : لكتابه الرمز (")

window.alert("hello \" Mohammed \" ");

5.     أمر (\') : لكتابه الرمز( ' )

window.alert("hello \' Mohammed \' ");

ثالثا:عمل نافذه تخرج للمستخدم يتم تحديد ما يكتب بها

تسمى هذه النافذه فى الجافا سكربت بـ (prompt)  , وهذه النافذه تختلف عن نافذه (alert) حيث ان هذه النافذه تسمح للمستخدم بادخال بيانات معينه , ويكتب كودها بهذه الطريقه...

window.prompt("please enter your name ","your name");

كما لاحظنا فى كود prompt  انه يأخذ قيمتين..

القيمه الاولى: يكتب بها ما سوف يظهر للمستخدم فى النافذه وهو كلام ثابت مثل
 (please enter your name)

القيمه الثانيه: يكتب بها اى قيمه ابتدائيه حيث أن هذه القيمه سوف تظهر فى صندوق الكتابه وهذه القيمه سوف تختفى بمجرد أن المستخدم يكتب مكانها أى كلام آخر هو يريده .

وهذا هو الشكل النهائى لملف Notepad  وبه كل الاوامر السابقه

فى الدرس القادم سوف نتحدث عن كيفيه استخدام القيمه التى ادخلها المستخدم فى نافذه prompt  واظهارها له مره أخرى

انتظروا الجديد فى الدرس القادم