introduction to Java Script (part 1)

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

ما معني جافا سكريبت ؟

 تطلق كلمة “سكريبت” على النصوص التي تصف عملا أو حدثا معينا. وتستخدم الكلمة كثيرا عند التحضير للأعمال الفنية حيث يتم تحويل الفكرة أو القصة إلى سكريبت

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

الفرق بين جافا وجافا سكريبت؟

جافا عبارة عن لغة برمجة بطريقة التوليف Compiled Programming Language وهي مشابهة للغة البرمجة C أو C++. وهي من القوة للدرجة التي يمكنك فقط أن تكتب بها وتنتج برامج تطبيقية صغيرة لعمل أو أعمال محددة. تسمى هذه البرامج التطبيقية الصغيرة باسم “أبليتس” applets. وتقوم بتأدية مهمات قليلة محددة. إن جافا تتطلب أيضا جهدا معتبرا حتى يكون باستطاعتك التمكن منها.
جافا سكريبت مبنية أيضا على لغة البرمجة جافا ولكنها تختلف عنها باساليب عديدة منها أنها أكثر بساطة من لغة البرمجة الأصيلة ، ولهذا فهي نسبيا أسهل بالتعلم. والواقع أنها تميل أكثر لميزان HTML منها عن لغات البرمجة الحقيقية مثل جافا .

تاريخ جافا سكريبت

قامت شركة نتسكيب عام 1995 بابتكار لغة تدعي “Mocha” والتي سميت بعد ذلك بـ”LiveScript” وفي النهاية استقرت علي “java script” لانها كان تشبه الي حد ما لغة الجافا واختصارها هو js .

نترك التاريخ الان ونبدأ بتعلم اسياسيات الـjs

طرق كتابة الجافا سكريبت

body أو في الـ head ويمكن كتابة هذا التاج في الـ  script ويكون داخل تاج(internal) كتابته بداخل الصفحة-

 ثم استدعائه داخل الصفحة المراد وضعه بها عن طريق هذا الكود  js وحفظه بامتداد(external) كتابته في ملف خارجي 

<script type=“text/javascript” src=“external.js”>
</script>

سنتسخدم الطريقة الاولي وسوف نتسخدم برنامج notepad لكتابة اول صفحاتنا باستخدام js , في البداية ننشئ ملف تكست جديد ونسميه اي اسم بامتداد .html ونكتب بداخله هذا الكود

<html>
       <head>
       </head> 
      <body>
            <script type=“text/javascript”>
                     document.write(‘hello world!’);
            </script>   
       </body>
</html>

اذا حفظنا الكود وفتحنا الملف باستخدام اي متصفح ستظهر لك رسالة hello world
 شرح الكود : اكواد الجافا تكتب بداخل تاج والكود الوحيد الذي كتبناه هو كود طباعة جملة hello world
 و يفضل ان ينتهي كل امر بفاصلة منقوطة(;)

————————————————————–

jsوالان نبدأ بشرح اهم نقاط اساسية في الـ

اولا : المتغيرات

var يمكنك تعريف متغير اي كان نوعه عن طريق كلمة
var x=5; : مثال

(loops)ثانيا: التكرارات 

التكرارات في الجافا سكريبت هي نفسها التي في الـc# والجافا والـ++c وسخنوض فيها سريعا

1-for

for  (var=startvalue ; var<=endvalue ; var+=increment)
{
      Code to be executed
}

2- while

while  (var<=endvalue)
{
Code to be executed
}

 do while -3

do
 {
       Code to be executed
}
while  (var<=endvalue)

 if – if else :ثالثا

ايضا هي نفسها التي في معظم لغات برمجة

if

If  (condition)
 {
       Code to be executed if the condition is true
}

If else

if  (condition)
{
code to be executed if the condition is true
}
else
{
code to be executed if the condition is not true
}

(function) رابعا : الدوال 

الدوال تقوم باداء وظيفة معينة عن استدعائها في الصفحة وتبقي خاملة بدون وظيفة اذا لما لم تستدعي و لعمل دالة لاداء وظيفة معينة نكتب الكود التالي

Function functionName ( )
{
       Code to be executed
}

( POPUP boxes) خامسا : النوافذ الاضافية

وهي شاشات اضافية تظهر للسمتخدم للتنبية او لطلب ادخال قيمة معينة وسنتعلم اليوم ثلاث انواع من النوافذ

Alert Box :اولا

وهي شاشة تظهر للتنبيه بشئ ما و يتم كتابتها كالأتي
Alert();
: مثال

<html> 
      <body>      
            <script type=“text/javascript”>         
                  Alert(“hello user”);
            </script>   
      </body>
</html>

Confirm Box :ثانيا

وهي نافذة مثل نافذة alert ولكن مضاف اليها زر ok و زر cancel
و يتكتب كودها هكذا :
;(“confirm (“welcome
هذا الامر يأخذ قيمة true اذا ضغط المستخدم علي زر ok و false اذا ضغط علي cancel

مثال يوضح ذلك

<html>
      <body>
              <script type=“text/javascript”>           
                    var x=confirm(“how are you ?”);           
                   if (x==true)
                   {
                         document.write(“good”);
                   }
                  else  
                   {
                         document.write(“why?”);
                  }
           </script>
   </body>
 </html>

شرح الكود : عرفنا متغير x علي انه القيمة الناتجة من نافذة confirm اي انها ستصبح true اذا ضغط اليوزر علي ok وfalse اذا ضغط علي cancel بعد ذلك كتبنا اذا كانت قيمة x بتساوي true اطبع كلمة good و اذا كانت غير ذلك “اي false” اطبع why ؟

 Prompt Box :ثالثا

و هي نافذة تأخذ input من المستخدم وطريقة كتابة الكود كالأتي
;(“الرسالة التي ستظهر في النافذة” ,”القيمة الافتراضية التي ستظهر في البداية”)Prompt
سنوضح ذلك بمثال

<html>
    <body>
           <scripttype=“text/javascript”>
                   var x =prompt(“x=??”,”0″);
                   document.write(x);
           </script>
   </body>
</html>

شرح الكود : عرفنا متغير سيأخذ القيمة التي سيدخلها المستخدم من نافذة prompt وبداخل propmt كتبنا الرسالة التي ستظهر في النافذة والقيمة الابتدائية للx وفي النهاية طبعنا قيمة الx

انتهي الجزء الاول من مقدمة الجافا سكريبت .. اتمني ان تكونوا استفدتم من هذه المقدم وشكرا لكم علي المتابعه والسلام عليكم ورحمه الله وبركاته

Mohamed Fouad

,

  1. #1 by mgshahawy on January 4, 2012 - 6:16 pm

    gOOd

    🙂

  2. #3 by AhmedYousef on January 4, 2012 - 6:29 pm

    good article go on and wait advanced topics 😀

  3. #5 by Symbian SyMoh on January 4, 2012 - 6:36 pm

    Nice Article 🙂

  4. #7 by Emad Shaaban on January 4, 2012 - 8:07 pm

    مقال متميز و رائع و في انتظار باقي الاجزاء

    و ان كان ليا تعقيب صغير ربما يفيد في تحسين المقال
    من الافضل ان يتضمن الجزء الخاص بالمتغيرات بعض الحديث عن
    Data types
    و ايضا التنويه علي ان
    prompt() returns a string value

    • #8 by Mohamed Fouad on January 4, 2012 - 10:50 pm

      حاضر ان شاء الله نضيف الحاجات دي في الاجزاء القادمة

  5. #9 by Amar Ashour on January 5, 2012 - 3:22 pm

    i really like this article
    great work man

  6. #11 by Zekus on January 6, 2012 - 8:00 pm

    good topic thanks 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: