ماهي الجافاسكربت ؟ مقدمة شاملة - Javascript Introduction
ماهي الـ JavaScript ؟
لغة برمجية بشكل أساسي مسؤولة عن جزء الـ Client-Side بمعنى أوضح أي حاجة المستخدم اللي داخل الموقع بيتفاعل معاها بنفسه فـ ده موجودة في جزء الـ Client-Side عكس الداتا بيز مثلا!
ولكن مع تطور الزمن أصبحت الجافاسكربت داخلة في مجالات كتير منهم الداتا بيز و الألعاب و تطبيقات الموبايل وكل ده عن طريق مكتبات خاصة بيها ولكن اللغة الأم وظيفتها إحياء الموقع وإضافة التأثيرات عليه .. زي إيه مثلا؟
زي إنك لما تضغط زرار معين في الصفحة يظهرلك Alert او رسالة مربعة كدة مليانة بمعلومات وخانات, زي إنك مثلا لما تيجي تكتب اليوزر بتاعك في الفيسبوك أو أي مكان وماتكتبش الباسورد ينبهك إنك لازم تكتب الباسورد قبل ما يبعت كل البيانات دي للسيرفر, زي زرار-الترس- الإعدادات لما تضغط عليه بيظهرلك مينيو صغير .. الخ
الجافاسكربت والجافا لغتين مختلفين تماما ومفيش أي تشابه إلا المقطع الأول من الإسم
أشغل الـ JavaScript إزاي؟
قبل ما تتعلم الجافاسكربت لازم تكون على معرفة بالـ HTML و الـ CSS لإن وظيفة الجافاسكربت إنها تتعامل وتحسن من الإتنين دول وبدونهم هتبقي شغال علي الـ Console log ودي هتعرفها بعدين :D
علشان تشتغل بالـ JavaScript مش هتحتاج تحمل أي أداة أو أي برنامج لإنها مدعومة من كل أنظمة التشغيل سواء الويندوز أو لينوكس الماك .. الخ , وكمان من كل المتصفحات الموجودة أيوا وحتي الإنترنت إكسبلورر.
يعني كل اللي إنت هتشيل همة الـ Errors الي هتعك فيها حضرتك :D
الجافاسكربت بتتحدث تقريبا سنويًا بتبقي كل تحديث جديد فيه إضافات جديدة للغة بتاخد وقت لغاية ما المتصفحات دي تستقبلها وتبتدي تنزلها عنده وبيبقي غالبا أوبشنز أو إتنين فـ متشيلش هم لإنهم بيبقي غالبًا تحديثات بتسهل عليك كتابة الكود.
لو إنت عرفت Feature جديدة للغة وحبكت معاك إنك تكتبها فـ بيبقي في مكتبات بتحول الكود بتاعك من الطريقة الجديدة للطريقة القديمة الي بتدعمها المتصفحات.
وهتعرف كل ده بعدين لوحدك مع البحث أو من خلال شوية المقالات الحلوين دول مستقبلًا.
هحتاج إيه علشان أكتب كود JavaScript ؟
1. هتحتاج تكون عارف HTML و CSS علي الأقل
2. هتحتاج أخر تحديث من أي متصفح عندك
3. هتحتاج محرر أكواد وبقترحلك تحمل Visual Studio Code
كام ملحوظة كدة ع الماشي قبل ما ننهي المقال ده بأول كود جافاسكربت لينا
* تعليمك المجاني أبو ربع جنية هينفع جدا فـ ماتشيلش هم الإنجليزي وإنه عقبه قدامك هتلاقيهم شوية مصطلحات هتفهم الفايدة بتاعتهم أيه وإيدك هتتعود على كتابتهم
* بعد ما تتعلم الـ HTML فـ انت محتاج تتعلم الـ HTML5 و الـ HTML5.1 دول فايدتهم إن فيه Tags جديدة وبتسهل عليك التكويد وكمان الـ Tags دي مفيدة للـ SEO لكن مش هتحتاجها أوي في الـ JS و الـ CSS ليها CSS3 ودي لازم وش تتعلمها
انا كررت كلمة Tags مرتين علشان أعيارك بعدم معرفتك بيهم فـ روح إتعلم الـ HTML وتعال.
هنكتب أكواد الـ JavaScript إزاي بقا؟
كود الجافاسكربت زي ما قولنا بيشتغل في إي نظام تشغيل وأي متصفح بس هتكتبه فين داخل الصفحة بتاعتك؟
الجافاسكربت هتكتبها بطريقتين إتنين فقط
1. داخل صفحة الـ HTML
1.1 علشان الصفحة تقدر تعرف إن ده كود جافاسكربت وتقدر تفرقه عن باقي الـ Tags أو الوسوم بتاعتها هتحتاج تحط الكود ما بين وسم الـ < script > الـ attribute اللي اسمه الـ type بيوصف نوع الملف والي دايما بيبقي بالشكل ده .. لكن لو إنت مش عاوز تكتب الـ Type ف مش مفهم لإن في الإصدارات الحديثة او الحالية بيتعرف على وسم الـ script بدون إضافات
2.2 كود الجافاسكربت بيتكتب داخل وسم الـ script .. طيب و وسم الـ script مكانه فين في الـ HTML Document ؟
مكانه في أي مكان ولكن في مكانين مفضلين عند المبرمجين منهم واحد شائع الإستخدام
= قبل نهاية وسم الـ Head وقتها الكود بيتنفذ قبل ما كل الـ Tags بتاعت الصفحة تحمل
= قبل نهاية وسم الـ Body ووقتها الكود بيتنفذ بعد ما كل الـ Tags بتاعت الصفحة تحمل ( وده شائع الاستخدام والمفضل )
ليه مش مفضل قبل الـ Head ? علشان بيبقى في ضغط في الصفحة وبيتضطر يستني الكود بتاعك يحمل ويتنفذ الأول وبعدها الصفحة تحمل وده بياخد وقت حتي لو كانت ثواني فـ هو بيبطئ تحميل الصفحة .. بتستخدمه في حاجات بسيطة جدا أوقات ولكن مش بشكل دائم زي إيه مثلا؟
لو الموقع بتاعك مدعوم بلغتين الـ EN و الـ AR وقتها بتشوف لغة الجهاز او البلد بتاع اليوزر وبتخلي اللغة بتاعت الموقع علي اساسها فـ ماينفعش تحمل كل وسوم الصفحة وبعد كده تغير لغتها !!
2. في ملف خارجي
في طريقة تانية لكتابة أكواد الجافاسكربت وهي إنك تكتبها في ملف خارجي صيغته أو منتهي بـ .js وده الي دايما بإذن الله هتستخدمه لإن هيبقي عندك كمية أكواد كتير ممك توصل لـ 200 سطر مثلا فـ مينفعش تضيق أو عندك أكتر من ملف JS كل واحد ليه وظيفة محددة.
طيب الصفحة بتاعتي هتعرف الملف ده إزاي ؟؟ ماهو إنت بتنادي علي الملف بالـ Script Tag بـ attribute اسمه src والي هو إختصار لكلمة source واللي الليلة دي كلها معناها إنت يا عم وسم الإسكربت هاتلي السورس بتاع الملف ده وشغلة عندك
لو إنت هتنادي على الملف فـ مش هينفع نهائي إنك تكتب مابين وسم الـ script!
ولنا لقاء في بتاع تاني إن شاء الله ..
لغة برمجية بشكل أساسي مسؤولة عن جزء الـ Client-Side بمعنى أوضح أي حاجة المستخدم اللي داخل الموقع بيتفاعل معاها بنفسه فـ ده موجودة في جزء الـ Client-Side عكس الداتا بيز مثلا!
ولكن مع تطور الزمن أصبحت الجافاسكربت داخلة في مجالات كتير منهم الداتا بيز و الألعاب و تطبيقات الموبايل وكل ده عن طريق مكتبات خاصة بيها ولكن اللغة الأم وظيفتها إحياء الموقع وإضافة التأثيرات عليه .. زي إيه مثلا؟
زي إنك لما تضغط زرار معين في الصفحة يظهرلك Alert او رسالة مربعة كدة مليانة بمعلومات وخانات, زي إنك مثلا لما تيجي تكتب اليوزر بتاعك في الفيسبوك أو أي مكان وماتكتبش الباسورد ينبهك إنك لازم تكتب الباسورد قبل ما يبعت كل البيانات دي للسيرفر, زي زرار-الترس- الإعدادات لما تضغط عليه بيظهرلك مينيو صغير .. الخ
الجافاسكربت والجافا لغتين مختلفين تماما ومفيش أي تشابه إلا المقطع الأول من الإسم
أشغل الـ JavaScript إزاي؟
قبل ما تتعلم الجافاسكربت لازم تكون على معرفة بالـ HTML و الـ CSS لإن وظيفة الجافاسكربت إنها تتعامل وتحسن من الإتنين دول وبدونهم هتبقي شغال علي الـ Console log ودي هتعرفها بعدين :D
علشان تشتغل بالـ JavaScript مش هتحتاج تحمل أي أداة أو أي برنامج لإنها مدعومة من كل أنظمة التشغيل سواء الويندوز أو لينوكس الماك .. الخ , وكمان من كل المتصفحات الموجودة أيوا وحتي الإنترنت إكسبلورر.
يعني كل اللي إنت هتشيل همة الـ Errors الي هتعك فيها حضرتك :D
الجافاسكربت بتتحدث تقريبا سنويًا بتبقي كل تحديث جديد فيه إضافات جديدة للغة بتاخد وقت لغاية ما المتصفحات دي تستقبلها وتبتدي تنزلها عنده وبيبقي غالبا أوبشنز أو إتنين فـ متشيلش هم لإنهم بيبقي غالبًا تحديثات بتسهل عليك كتابة الكود.
لو إنت عرفت Feature جديدة للغة وحبكت معاك إنك تكتبها فـ بيبقي في مكتبات بتحول الكود بتاعك من الطريقة الجديدة للطريقة القديمة الي بتدعمها المتصفحات.
وهتعرف كل ده بعدين لوحدك مع البحث أو من خلال شوية المقالات الحلوين دول مستقبلًا.
هحتاج إيه علشان أكتب كود JavaScript ؟
1. هتحتاج تكون عارف HTML و CSS علي الأقل
2. هتحتاج أخر تحديث من أي متصفح عندك
3. هتحتاج محرر أكواد وبقترحلك تحمل Visual Studio Code
كام ملحوظة كدة ع الماشي قبل ما ننهي المقال ده بأول كود جافاسكربت لينا
* تعليمك المجاني أبو ربع جنية هينفع جدا فـ ماتشيلش هم الإنجليزي وإنه عقبه قدامك هتلاقيهم شوية مصطلحات هتفهم الفايدة بتاعتهم أيه وإيدك هتتعود على كتابتهم
* بعد ما تتعلم الـ HTML فـ انت محتاج تتعلم الـ HTML5 و الـ HTML5.1 دول فايدتهم إن فيه Tags جديدة وبتسهل عليك التكويد وكمان الـ Tags دي مفيدة للـ SEO لكن مش هتحتاجها أوي في الـ JS و الـ CSS ليها CSS3 ودي لازم وش تتعلمها
انا كررت كلمة Tags مرتين علشان أعيارك بعدم معرفتك بيهم فـ روح إتعلم الـ HTML وتعال.
هنكتب أكواد الـ JavaScript إزاي بقا؟
كود الجافاسكربت زي ما قولنا بيشتغل في إي نظام تشغيل وأي متصفح بس هتكتبه فين داخل الصفحة بتاعتك؟
الجافاسكربت هتكتبها بطريقتين إتنين فقط
1. داخل صفحة الـ HTML
1.1 علشان الصفحة تقدر تعرف إن ده كود جافاسكربت وتقدر تفرقه عن باقي الـ Tags أو الوسوم بتاعتها هتحتاج تحط الكود ما بين وسم الـ < script > الـ attribute اللي اسمه الـ type بيوصف نوع الملف والي دايما بيبقي بالشكل ده .. لكن لو إنت مش عاوز تكتب الـ Type ف مش مفهم لإن في الإصدارات الحديثة او الحالية بيتعرف على وسم الـ script بدون إضافات
2.2 كود الجافاسكربت بيتكتب داخل وسم الـ script .. طيب و وسم الـ script مكانه فين في الـ HTML Document ؟
مكانه في أي مكان ولكن في مكانين مفضلين عند المبرمجين منهم واحد شائع الإستخدام
= قبل نهاية وسم الـ Head وقتها الكود بيتنفذ قبل ما كل الـ Tags بتاعت الصفحة تحمل
= قبل نهاية وسم الـ Body ووقتها الكود بيتنفذ بعد ما كل الـ Tags بتاعت الصفحة تحمل ( وده شائع الاستخدام والمفضل )
ليه مش مفضل قبل الـ Head ? علشان بيبقى في ضغط في الصفحة وبيتضطر يستني الكود بتاعك يحمل ويتنفذ الأول وبعدها الصفحة تحمل وده بياخد وقت حتي لو كانت ثواني فـ هو بيبطئ تحميل الصفحة .. بتستخدمه في حاجات بسيطة جدا أوقات ولكن مش بشكل دائم زي إيه مثلا؟
لو الموقع بتاعك مدعوم بلغتين الـ EN و الـ AR وقتها بتشوف لغة الجهاز او البلد بتاع اليوزر وبتخلي اللغة بتاعت الموقع علي اساسها فـ ماينفعش تحمل كل وسوم الصفحة وبعد كده تغير لغتها !!
2. في ملف خارجي
في طريقة تانية لكتابة أكواد الجافاسكربت وهي إنك تكتبها في ملف خارجي صيغته أو منتهي بـ .js وده الي دايما بإذن الله هتستخدمه لإن هيبقي عندك كمية أكواد كتير ممك توصل لـ 200 سطر مثلا فـ مينفعش تضيق أو عندك أكتر من ملف JS كل واحد ليه وظيفة محددة.
طيب الصفحة بتاعتي هتعرف الملف ده إزاي ؟؟ ماهو إنت بتنادي علي الملف بالـ Script Tag بـ attribute اسمه src والي هو إختصار لكلمة source واللي الليلة دي كلها معناها إنت يا عم وسم الإسكربت هاتلي السورس بتاع الملف ده وشغلة عندك
لو إنت هتنادي على الملف فـ مش هينفع نهائي إنك تكتب مابين وسم الـ script!
ولنا لقاء في بتاع تاني إن شاء الله ..
تعليقات
إرسال تعليق