Have an account? Sign in
Login  Register  Facebook
Web Development School
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
Quick Table of Contents
[Edit] الطريقة الأولى
سنبدأ بالطريقة البسيطة في هذا الدرس ,تقوم هذه الطريقة على أساس وجود معالج حدث (event handler) لكل حدث (event) يوضع كصفة (attribute) في تاج الهيتميل الذي تريد أن تنفذ دالة عندما يحدث له حدث . مثلا للحدث click الإيفنت هندلر له هو onClick و onClick توضع كصفة في تاج الهيتيل كما بالمثال .
مثال
<html>
  <input type="button" value='اضغط هنا' onClick="alert('تم الضغط')">
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

عندما تضغط على الزر 'اضغط هنا' سيظهر لك صندوق مكتوب فيه تم الضغط . وما يحدث هو أنه عند حدوث حدث الضغط 'click' فإن الإيفنت هندلر onClick يعمل ، ونلاحظ أننا وضعنا الجافا سكريبت داخل هيتميل مباشرة بدون إستخدام تاج <script> و هذا ممكن في بعض الحالات مثل هذه الحالة . و يمكن وضع كود جافا سكريب كبير يصل لمئات الأوامر بعد صفة الإيفنت هندلر( مثل onClick) لكن إن فعلنا هذا فإن الكود سيصبح معقد جدا ,و لذا إن أردنا إستخدام هذه الطريقة فالأفضل أن تضع الأوامر في دالة ثم تضع الدالة للإيفنت هندلر كهذا المثال:
مثال 2 
<html>
  
  <head>
    <script type='text/javascript'>
      
     function func()
      {
      var text="كيف حالك؟";
      alert(text);   
      }
      
    </script>
  </head>
  
  <body>
     <input type="button" value='اضغط هنا' onClick=" func()">
  </body>
  
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

قمنا بتعريف الدالة في جزء الـ <head> ,حيث أنه يحمل قبل الـ <body> فتكون الدالة تم تعريفها قبل أن يتم إستدعائها .و من الأفضل ليصبح الكود أكثر تنظيما أن نفصل الجافا سكريبت تماما عن الهيتميل و هذا ممكن من خلال الـ dom الذي تعلمناه في الفصل السابق .هكذا
مثال 3 
<html>
  <head>
    
  </head>
  
  <body>
     <input type="button" value='اضغط هنا'>
  </body>
  <script type='text/javascript'>
      
     var button=document.getElementsByTagName('input')[0]
     
         button.onclick= function ()
      {
      var text="كيف حالك؟"
       alert(text)    
      }
      
    </script>
  
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

في السطر الحادي عشر وصلنا إلى الزر الذي نريد ان نجعل الدالة تنفذ عندما يتم الضغط عليه.

في السطر الثالث عشر وصلنا إلى الصفة onclick وو ضعنا فيها الدالة التي نريد أن تنفذ .

ملحوظة :عند إستخدام onclick في الجافا سكريبت لابد أن تكون الحروف صغيرة كلها أما عند إستخدامها كصفة في هيتميل فلا يهم يمكن أن تكتب كل الحروف صغيرة أو تكتب الحرف الأول من الكلمة الثانية كبير أو حتى تكتب كل الحروف كبيرة لأن هيتميل لا تفرق بين الحرف الكبير و الصغير بينما هناك فرق في الجافا سكريبت.

لاحظ إنه عند وضع قيمة لصفة غير موجوده في التاج فإنها يتم إضافتها فيه . كما أن هذه الطريقة توضح أيضا أن onclcick عبارة عن دالة تنفذ عندما يحدث الحدث click .فكما يمكنك أن تلاحظ الطريقة التي عرفنا بها الدالة 
  button.onclick= function ()
      {
      var text="How are you?"
       alert(text)    
      }
تشبه تلك التي إستخدمناها عندما كنا نعرف دالة method لكائن ما . عند إستخدام هذه الطريقة هناك ميزة أخرى تضاف و هي أن الدالة تنفذ داخل الكائن الذي يمثل التاج لاحظ المثال التالي
مثال 4
<html>
  
  <head>
    
  </head>
  
  <body>
     <input type="button" value='Click here'>
  </body>
  <script type='text/javascript'>
      
     var button=document.getElementsByTagName('input')[0]
     
         button.onclick= function ()
      {
       alert(this)    
      }
      
    </script>
  
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

الكود مماثل للمثال السابق ماعدا في السطر السادس عشر ستجد alert(this) ,و كما تعرف this تمثل الكائن الذي تكون داخله و لذا ستجد أن الصندوق مكتوب فيه object HTML INPUTELEMENT.و يمكننا الإستفادة من ذلك في الوصول لمعلومات مصدر الضغطه بسهولة مثلا إن أبدلت this ب this.nodeName سيرجع لك إسم التاج INPUT .

آخر معلومة في هذا الدرس هي كيف توقف الحركة الإفتراضية للحدث بمعنى مثلا أنه إن كان هناك لينك . عندما تضغط عليه الإفتراضي أنه سينقلك للعنوان المحدد له ,يمكنك من خلال الجافا سكريبت أن تمنعه من أن ينقلك للحدث بأن تجعل دالة معالج الحدث ترجع (return) خطا (flase) كما بالمثال

مثال 5
<html>
  
  <head>
    <script type='text/javascript'>
      
     function func()
      {
        
     alert('لن ينتقل إلى جوجل')  
       
       return false
      }
      
    </script>
  </head>
  
  <body>
    <a  onClick="return func()"  href='http://www.google.com.com'>go to google </a>
  </body>
  
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

أو كما بهذا المثال
مثال 6
<html>
  
  <head>
  
  </head>
  
  <body>
    <a   href='http://www.google.com.com'>go to google </a>
  </body>
    <script type='text/javascript'>
      link=document.getElementsByTagName('a')[0]
      
     link.onclick=function ()
      {
        
     alert('لن ينتقل إلى جوجل')  
       
       return false
      }
      
    </script>
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

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