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] إدخال سكريبت في هيتمل
ذكرت في المقدمه أن الجافا سكريبت تستخدم في جعل صفحات ال html أكثر ديناميكية ,السؤال الآن كيف سنربط الإسكريبت مع ال html لكي تعمل ؟و كيف سنعلمه أن الكود الذي و ضعناه هذا كود جافا سكريبت؟ بالتأكيد لن تعمل الجافا سكريبت بمجرد وضع الكود عشوائيا في أي مكان .لكي تعمل الجافا سكريبت هناك عدة طرق لربطها بالhtml و هي
  • دمج الكود داخل الـhtml.
  • وضعه بملف خارجي مستقل.
[Edit] دمج الكود داخل هيتمل .

أولا : دمج الكود داخل الـhtml.

يتم ذلك من خلال إستخدام تاج(tag) في لغة الhtml يسمى <script> نضع ما بينه بدايته <script> و نهايته <script/>كود الجافا سكريبت, لكن لابد من تحديد عدة قيم لعدد من الخواص ( attribute) الخاصة بالتاج <script> فيجب أن نضع LANGUAGE=JavaScript لكي يعرف المتصفح أن نوع الإسكريبت جافا سكريبت و يمكنه تفسيرها بشكل صحيح. و المثال التالي يوضع كيفية عمل ذلك . 
<script language="javascript">
    /*  هنا يوضع كود الجافا سكريبت */
</script>

و هنا قد يتبادر إلى ذهنك سؤال هام ,أين سأضع كود الجافا سكريبت بالتاج الذي يحيطه ,هل في آخر الصفحة أم في أولها؟في الـ body أم في الhead؟

الإجابة على هذا السؤال تكمن في معرفة أن المتصفح يقرأ كود ال html من أعلى إلى أسفل فلا يبدأ في تحميل جسم الصفحة أي ما بين <body> و <body> إلا بعد أن يكون قد أكمل تحميل كل ما بالرأس أي ما بين <head>و <head/> ,و عليه فإن و ضع الجافا سكريبت بأعلى الصفحة في الرأس سيؤدي إلى تأخير في تحميل الصفحة فلن تظهر محتويات الhtml إلا بعد أن يكون تم تحميل الجافا سكريبت ,و لن يبدو لذلك أثر كبير إن كانت سرعة النت جيده ,لكن عامة يفضل إضافة كود الجافا سكريبت في آخر الصفحة لكي تظهر محتويات الhtml كلها أولا مما يعطى للمستخدم إحساس بأن الموقع اخف ,إلا في حالة إن كنت تريد أن يتم تنفيذ الجافا سكريبت أولا قبل تحميل مكونات الصفحة و قد تحتاج لذلك في بعض الأوقات .

[Edit] من ملف خارجي

ثانيا : وضع الكود بملف خارجي مستقل.

أكود الجافا سكريبت قد تصبح معقدة إلى حد ما ,فتخيل كيف سيكون الكود الكلي لصفحة الويب عندما تضع الهيتمل مع الجافا سكريبت في نفس الصفحة التي قد تحتوى على بعض الـ البي إتش بي (php(و أيضا الـإستايل شيت css.بالتأكيد سيكون الكود معقد جدا و يصعب فهمه أو تنسيقه,كما أنه أيضا في المواقع الكبيرة يقوم ببرمجة و تصميم الموقع فريق عمل لكل فرد فيه دور محدد فمنهم من يعمل على الإستايل شيت و الهيتمل و منهم من يعمل على الجافا سكريبت ومنهم من يعمل على بي اتش بي و هكذا. و لذلك يبدو فصل الجافا سكريبت ووضع الكود الخاص بها في ملف مستقل كذلك مع البي إتش بي و الإستايل شيت فكرة جيدة ,لكي تكون الأكواد منسقة و يسهل فهمها و التعامل مع الأخطاء الموجوده بها , وكذلك يسهل الأمر عندما يعمل فريق عمل على إنجاز موقع . و في لغة الجافا سكريبت يمكننا وضع كود الجافا سكريبت في ملف مستقل ثم نعلم المتصفح بمكانه من خلال هيتمل كالتالي:

    <script language="javascript" src="yourfile.js"></script>
كما ترى في الكود بالأعلى فإننا استخدمنا التاج script ثم حددنا كما بالسابق نوع اللغة JavaScript من خلال الخاصية LANGUAGE و ظهر بالإضافة لذلك خاصية جديدة و هي SRC و كما ترى حددنا لها قيمة هي yourFile.js و هذه القيمة هي عبارة عن إسم الملف الذي يفترض أنه سيوجد فيه كود الجافا سكريبت الخارجي و كما ترى فإنه له امتداد js و هذا الإمتداد هو الإمتداد الذي لابد أن نحدده للملفات التي سنضع فيها أكواد الجافا سكريبت .و ملحوظة آخيره أن هذا الملف yourFile.js موضوع في نفس المجلد(الفولدر)الذي يوجد به ملف كود الهيتمل و إن تم وضعه في مكان آخر فيجب أن نضع بعد الخاصية SRC مسار الملف أي وصف مكانه وليس اسمه فقط . لنفترض الآن أن الملف yourFile.js فيه هذا الكود 
 alert("message");
و أنه موضوع في ملف واحد مع صفحة html محتواها هذا الكود 
<html>
    <head>
        <title>using external files</title>
        <script language="javascript" src="abc1.js"></script>
    </head>
</html>
فإنه المفترض عند فتح صفحة الhtml سيظهر لك صندوق مكتوب فيه message و الذي هو عبارة عن تنفيذ كود الجافا سكريبت الموجود في الملف yourFile.js حيث أنه كما ستعلم فيما بعد alert عبارة عن دالة خاصة بالجافا سكريبت تقوم بإظهار ما يكتب فيما بين قوسيها على هيئة نص في صندوق و هي نفس النتيجة التي ستراها في المثال التالي إضغط على حاول بنفسك لتراها
مثال 
<html>
    <head>
        <title>Internal</title>
        <script language="javascript">
        alert("message");
        </script>
    </head>
</html>

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

و ملحوظة أخيرة هي أن إضافة الجافا سكريبت من ملفات خارجية له بعض التأثير السلبي على الأداء في بعض الحالات لعدة أسباب ربما سنتحدث فيها فيما بعد,لكن بشكل عام التأثير في الغالب لا يكون تأثيرا ملحوظا.

December 18, 2011