أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.
كيف الحال جميعا ً ؟! يا رب تكونوا بخير و صحة. اليوم سأتحدث عن لغة هي أساس تطوير مواقع الويب في هذه الآونة و هي لغة الجافا سكريبت JavaScript و لكن قبل أن نبدأ يجب أن نعرف بعض الأشياء الأساسية و من أهمها ” تكوين صفحات الويب ” .
الـ HTML هي لغة المحتوى : الـ HTML هي اللغة المسئولة عن عرض المحتوى و ترتيبه و نوعه سواء كان رابط تشعبي أو صورة أو نتيجة بحث إلى آخره ، و هذا العرض يتم عن طريق إستخدام وسوم لغة الـHTML المعروفة [ للمزيد إضغط هنا ] الـ CSS هي لغة العرض : الـ CSS هي لغة مساعدة! تساعدك في جعل المحتوى يظهر بشكل أفضل فيما يتعلق بالجماليات من ألوان الخطوط و حجمها و الحدود و المسافات دون المساس بهيكل المحتوى المكتوب عن طريق الـ HTML و يمكنك تطبيق أكثر من نسق على نفس العنصر. و مع تطور التكنولوجيا أصبحت زيارة المواقع ليست حكرا ً على مستخدمي الكومبيوتر فقط بل تطور الوضع إلى مستخدمي الهواتف الذكية مما دعا مطوري لغة الـ CSS إلى العمل على تقنيات جديدة لإنشاء المواقع المتجاوبة أو ما يطلق عليها Responsive Web Design [ للمزيد إضغط هنا ] الـ JavaScript هي لغة التفاعل : المقصود هنا بلغة التفاعل هي اللغة التي تتيح لك جعل صفحتك تفاعليه أي أن الزائر يقوم بفعل معين و على أساس ذلك الفعل سيظهر له نتيجة معينه. و بالطبع ذلك التفاعل يتم مع عنصر من عناصر الـ HTML فهي كما ذكرنا هي لغة المحتوى أو البنية الأساسية للصفحات. و من أهم الفوائد للصفحات التفاعلية هو كسر الملل فالزائر لا يريد أن يشعر أنه في داخل صفحات كتاب ، بل يريد أن يشعر بالتكنولوجيا البرمجية عند زيارة الموقع. يمكنك نسخ هذا الكود و قراءة التعليقات بداخله لتفهم الفكرة العامة:
<!-- CSS لغة العرض --> <style> h1 { font-size: 1em; color: red; } button { color: blue; } </style>
</head> <body> <h1>بسم الله الرحمن الرحيم</h1> <button>سبحان الله</button>
<!-- JavaScript لغة التفاعل. --> <script> // Get a handle on the first button element in the document. var button = document.querySelector( "button" );
// إذا ضغط الزائر على هذا الزر أظهر رسالة button.addEventListener( "click", function( ev ) { alert( "سبحان الله و بحمده ، سبحان الله العظيم" ); }, false); </script>
</body> </html> [/center]
نلاحظ في الكود السابق أن الـ HTML هي البنية التي توضح هيكل الصفحة سواء كان عنوان الصفحة أو الزر أو النص و قامت لغة الـ CSS بالمساعدة في طريقة عرض الصفحة فهي المتحكمة في ألوان النصوص و ذلك من خلال تضمينها في الكود بين وسوم <style> و قامت الـ JavaScript بجعل الصفحة تفاعلية فعند الضغط على الزر تظهر لنا رسالة “سبحان الله و بحمده ، سبحان الله العظيم” و ذلك بتضمين الكود بين وسوم <s c r i p t>. نوع لغة الـ JavaScript : ما المقصود بنوع لغة البرمجة ؟ هنالك نوع اسمه الـ Scripting Languages و هو النوع الذي يتضمن الجافاسكريبت و يعتبر هذا النوع من اللغات هو الأكثر فاعليه نوعا ً ما فهو ينصب على مجال معين و يتناول كل جوانبه و خفاياه و في حالة الجافاسكريبت هو متصفحات الويب. في الآونة الأخير بدأ تطوير الجافاسكريبت لتُستخدم بدلا ً من بعض لغات البرمجه من نوع الـ Server-Side مثل الـ PHP و الـ Ruby و غيرهما من اللغات. و لكن لا يمكنك القيام بذلك دون إستخدام بيئة تطويريه إسمها Node.js . النوع الثاني من لغات البرمجة هو General-Purpose Programming Language و هي اللغات التي تستخدم في البرمجة لإنشاء تطبيقات عامة أو ذات نطاق عام و ليست حصرا ً على مجال معين من مجالات الكومبيوتر و يمكنك أن ترى أن هنالك لغة تدخل طمن النوعين في نفس الوقت إن كانت تلك اللغة تتخصص في مجال معين بعينها دون غيرها و في نفس الوقت يمكنها أن تخدم المجالات العامة. هل الجافاسكريبت هل نفسها الجافا – JavaScript vs Java ؟ بالرغم من التشابه في الإسم إلى أن كل لغة منفصلة عن الأخرى تماما ً فالجافا هي لغة برمجه عامة بينما الجافاسكريبت هي لغة متخصصة تعمل طبقا ً لمعاير منظمة مصنعي الحواسيب الأوروبيه أو ما تعرف بإسم ECMAScript و تلك اللغات الخاضعه لتلك المعايير لا يعمل على تطويرها منظمه بعينها مثل الـ HTML و الـ CSS و التي يعمل عليها فريق الـW3 بل تلك اللغات يعمل المطورين على الإستفادة منها و رسم خطوط عريضه لها فأساسا ً كافة المتصفحات تستخدم الجافا سكريبت مهما كان نوع المتصفح. ما هي المتطلبات للبدء بتعلم الجافاسكريبت ؟
متصفح ( أيا ً كان نوعه ) محرر نصوص (اى كان )
أجل هذا كل ما تحتاجه لتبدأ رحلتك في الجافا سكريبت ، هنالك العديد من الأدوات التي قد تساعدك و لكن ليس من الضروري إستخدامها .
منتديات حدوتة مصرية
