لديك حساب بالفعل؟ دخول
دخول  سجل الأن 
مدرسة تطوير المواقع
جدول المحتويات
ابدأ الآن .
من خلال تعلم هذا الدرس ستبدأ في كتابة أول كود لك بالجافا سكريبت .
[تحسين] إدخال سكريبت في هيتمل
ذكرت في المقدمه أن الجافا سكريبت تستخدم في جعل صفحات ال html أكثر ديناميكية ,السؤال الآن كيف سنربط الإسكريبت مع ال html لكي تعمل ؟و كيف سنعلمه أن الكود الذي و ضعناه هذا كود جافا سكريبت؟
بالتأكيد لن تعمل الجافا سكريبت بمجرد وضع الكود عشوائيا في أي مكان .لكي تعمل الجافا سكريبت هناك عدة طرق لربطها بالhtml و هي

  • دمج الكود داخل الـhtml.
  • وضعه بملف خارجي مستقل.


[تحسين] دمج الكود داخل هيتمل .


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


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

و المثال التالي يوضع كيفية عمل ذلك .
<script language="javascript">
    /*  هنا يوضع كود الجافا سكريبت */
</script>

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

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

[تحسين] من ملف خارجي

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

أكود الجافا سكريبت قد تصبح معقدة إلى حد ما ,فتخيل كيف سيكون الكود الكلي لصفحة الويب عندما تضع الهيتمل مع الجافا سكريبت في نفس الصفحة التي قد تحتوى على بعض الـ البي إتش بي (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>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة



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


[تحسين] الكود الأول بالجافا سكريبت
لنترك الكلام النظري قليلا و نبدأ معا في تجربة كتابة كود جافا سكريبت بسيط و هو ببساطه عبارة عن صندوق سيخرج للزائر يطلب منه إدخالإسمه ثم بعد ذلك يرحب به, سأضع الكود أولا قم بتجربته ثم سأشرح لك محتوياته ثم بعد ذلك اكتبه بنفسك باستخدام النوت باد مثلا و احفظه بإمتداد HTML ثم جربه , و هكذا يجب أن يكون تعاملك على في الدروس القادمة حيث أنه لابد أن تكتب الكود بيدك و تجرب و تبحث عن الأخطاءوإصلاحها و سأشرح لك بعد هذا الدرس كيفية إيجادها و إصلاحها .

الكود الأول
<html>
    <head>
        <script language="javascript">
            name = prompt("أهلا بك,من فضلك ادخل إسمك.");
            alert(" أسعدنا حضورك "+name);
        </script>
    </head>
<body>

</body>
</html>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

الآن ,انظر إلى الكود في البداية ستجد بعد أكواد الهيتمل المعتاده ستجد التاج الذي تحدثت عنه في الدرس السابقة تاج SCRIPT و ما بين بداية و نهاية هذا التاج يوجد كود الجافا سكريبت.و الآن لنقم بتفسيره : أول سطر في كود الجافا سكريبت الموجود هنا هو 
name=prompt("أهلا بك,من فضلك ادخل إسمك.");
و هذ السطر هو المسؤول عن الصندوق الأول الذي رأيته و الذي طلب منك أن تدخل إسمك في المربع ,حيث أن كلمة prompt عبارة عن دالة" function", و الدالة يمكنك تصورها الآن كأنها أمر للمتصفح تخيل مثلا أن المتصفح شخص و أنت تخبره بأمر ما الأمر هذا هو في هذه الحالة أن يظهر صندوقا ,و كما يفهم الشخص أنك تريد منه أن يتكلم مثلا عندما تقول له تكلم ,سيفهم المتصفح أنك تريده أن يظهر صندوقا يطلب فيه نصا عندما تكتب له prompt ولكن كما رأيت في المثال لم يظهر لك الصندوق و كفى لكن كان مكتوبا به نصا هو "أهلا بك من فضلك ادخل إسمك" و إذا نظرت إلى الكود ستجد نفس العبارة مكتوبه بين قوسين موجود بعد كلمة prompt و بشكل عام ,ما يوجد بين القوسين التاليين لأي دالة يسمى بالـ Parameters و لكن ما هي البرامترز؟ ذكرت سلفا أنه لكي تفهم ما هي الدالة تخيل ان البرنامج شخص و أنت تقول له أوامر فينفذها ,فتخيل أنك تقول لهذا الشخص تكلم ثم حددت بالضبط تكلم و قل إسمك فإن تحديدك بالضبط لما يجب أن يقوله يشبه لما يفعله البرامتر حيث أن كل دالة تفعل وظيفة معينه بينما البرامتر هي أن تحدد بالضبط ما يجب أن تنفذ عليه هذه الوظيفة ,بالضبط كما تقول لشخص اعطني _اعطني مثال الدالة _ثم تحدد له بعد ذلك الزجاجه أو الكتاب قائلا اعطنى (الكتاب) أو اعطنى الزجاجة _الزجاجة و الكتاب كالبرامتر _. و سنتحدث بشكل تقني أكتر عن ما هي الدالة في الدرس الخاص بها .أما الآن فلنعد لتفسير الكود ستجد أن دالة prompt بما فيها من برامتر وضعت بعد علامة "=" و قبل علامة الـ "=" و ضعت كلمة name و هذا معناه أنك تطلب من البرنامج أن يضع ناتج الدالة في الذاكرة و أن يسمى مكانه بإسم name فعندما ستحتاج لناتج الدالة و الذي هو عبارة عن النص الذي سيكتبه المستخدم في المربع الذي ظهر له ستستخدم كلمة name ليحضر لك الناتج الذي و ضع فيها من خلال علامة الـ"=" ,و الدور الذي تمثله كلمة name هو دور المتغير Variable و الذي هو من المكونات الأساسية لأي لغة برمجه و يمكنك تصوره على أنه صندوق يتم وضع فيه البيانات ثم يتم تسميته بإسم هو إسم المتغير كـ name هنا و عندما تريد البينات الموضوعه فيه فأنت تقول للبرنامج إسمه فيأتي لك بالبيانات الموجوده فيه .و هذا ما حدث في السطر التالي 
alert(" أسعدنا حضورك "+name);

حيث إستخدمنا دالة alert و التي وظيفتها أنها تظهر صندوقا مكتوب فيه النص الذي تضعه بين قوسيها (البرامتر ) و هنا و ضعنا بين
قوسيها المتغير name و الذي يحتوى على إسم المستخدم الذي وضعه في الصندوق الأول الذي ظهر له و نجد بعده علامة + و هي معناها أنك تريدأن تضيف عليه شيء و أضفنا هنا جملة "أسعدنا حضورك" و كما تلاحظ فإنها موضوعه بين علامتي تنصيص بينما المتغير غير موضوع بين علامتي
تنصيص ، وذلك حيث أنه في لكي دائما في لغة الجافا سكريبت و في لغات عديدة غيرها يجب أن يوضع النص بين علامتي تنصيص ليعرف البرنامج
أنه نص كتابي و ليس متغير .


الآن أتمنى أن يكون قد تكون في ذهنك فكرة جيدة عما هي الجافا سكريبت نظريا من حيث مفهومها و وظائفها و ما هي من حيث كيف يتم كتابتها
عمليا .فمن الآن سنبدأ فعليا في تعلم الجافا سكريبت و بعد درس سيتم فيه شرح مكوناتها بالتفصيل و أساسياتها ,
سيكون الأمر كله عبارة عن كتابة أكواد و تجربتها و لذا أحب قبل الدخول في تلك المرحلة أن أشرح كيف نكتشف الأخطاء و نصلحها
لأن بالطبع تحدث أخطاء عديده في كتابة الأكواد لا تجعل الإسكريبتات تعمل و خاصة بالنسبة للمبتدئين.

[تحسين] العثور على الأخطاء
ربما قد يبدو غريبا أن يسبق الحديث عن إصلاح الأخطاء في الأكواد مرحلة كتابة الأكواد ,فحتى الآن لم نبدأ بشكل فعلي في كتابة برامج بالجافا سكريبت ,لكن السبب الذي جعلني أقدم هذا الدرس هو أن الأخطاء في الجافا سكريبت تتسبب في أن الإسكريبت يتوقف و لا يكتب في صفحة المتصفح مكان الخطأ او نوعه على عكس ما يحدث مثلا في البي إتش بي .و لذا إن لم تكن على علم بالأدوات التي سأشرحها حاليا لإكتشاف الأخطاء ستعاني جدا عند حدوث أي خطأ يمنع الكود من أن يعمل .
في أي متصفح يوجد مجموعة من الأدوات الخاصة بالمبرمجين تصل لها بالضغط على f12 أهم هذه الأدوات بالنسبة لنا هي الـ console .
إذا كنت تستخدم متصفح فاير فوكس و أنا أنصح به فأنت تحتاج لتحميل plugin تسمى firebug لكي تعمل لديك أدوات مبرمجي المواقع يمكنك تحميلها من هنا

و بعد تثبيتها و الضغط على f12 سيظهر لك مثل ما في هذه الصورة

تختار console كما بالصورة و في هذا الجزء ستظهر لك الأخطاء باللون الأحمر و سيحدد لك في أي سطر حدثت. كما أن الكنسول أيضايمكنك من كتابة أكواد جافا سكريبت و تنفيذها فورا بدلا من أن تكتبها في محرر أكواد ثم تحفظها و تفتح الملف المحفوظ .
هذه الصورة توضح كيف تكتب الأوامر في الكنسول

بعد كتابة الأمر في هذا المكان تضغط enter لينفذ.

العودة الى القائمة