تعديل إشارة المرور بلغة الجفا سكريبت و html وcss
السلام عليكم اليوم ساقوم بشرح طريقة تعديل إشارة المرور بلغة الجفا سكريبت (javascript)و (html) و (Css)
- إشارة ضوء أحمر للوقوف الإجباري.
- ضوء أصفر للإستعداد للوقوف.
- ضوء أخضر للإنطلاقة
فالضوء الأحمر يشير إلى التوقف الإجباري عند ممر الراجلين، والضوء الأخضر يشير الوجوب بالسماح للسيارات بالمرور وإعطائهم حق الأسبقية لسيارات و إعطاء المجال المرور للسيارات الموجودة في الإتجاه المعاكس بالمرور،أما بالنسبة للضوء الأصفر يشير إلى الإستعداد بالتوقف بعد إشارة الضوء الأحمر.
في البداية سنقوم بوضع الأوسمة الخاصة بلغة html، و نضع لكل إشارة مرور وسم الخاص بها وتصممها بلغة css كما قدمناه في الفيديو، بعد ذلك سنقوم ببرمجة إشارة المرور المصممة بلغة الجفا سكريبت لتتم تغير الألوان في إشارة المرور بشكل جيد كما أنك أمام اشارة مرور حقيقية في الشارع،
وضعت لكم الجزء الأول لتصميم المضهر فقط بشكل جميل كما أنكم يمكنكم تغير في أكواد css للحصول على أشكال أخرى حسب مزاجك و تعبيرك وفهمك اكتر في البرمجة.
الدرس الأول: فقط لتصميم شكل ومظهر إشارة المرور ب html و css
كما أنه يمكنك تصميم الشكل بطريقتك الخاصة ووضع اشكال مختلفة كما يمكنك استعمال الصور مكان الاضواء بدل اوسمة html فالأمر يتعلق بمدى قدراتك ومهارتك في لغة html و css.
الهدف من هذا الدرس هو معرفة كيفية التلاعب بكل الأوسمة وجعل منهم ما تريد رسوم صور حركات.
مشاهدة الدرس الأول من هنا
لتحميل كود سورس إشارة مرور ستجدونه في الروابط أخر التدوينة.
قبل البدأ في تصميم وبرمجة إشارة المرور بلغة الجفا سكريبت لابد من معرفة مكوناتها و ألوان تشكلها والحركات التي تقوم بها أتناء إشتغالها، إن إشارة المرور تتكون من :- إشارة ضوء أحمر للوقوف الإجباري.
- ضوء أصفر للإستعداد للوقوف.
- ضوء أخضر للإنطلاقة
فالضوء الأحمر يشير إلى التوقف الإجباري عند ممر الراجلين، والضوء الأخضر يشير الوجوب بالسماح للسيارات بالمرور وإعطائهم حق الأسبقية لسيارات و إعطاء المجال المرور للسيارات الموجودة في الإتجاه المعاكس بالمرور،أما بالنسبة للضوء الأصفر يشير إلى الإستعداد بالتوقف بعد إشارة الضوء الأحمر.
في البداية سنقوم بوضع الأوسمة الخاصة بلغة html، و نضع لكل إشارة مرور وسم الخاص بها وتصممها بلغة css كما قدمناه في الفيديو، بعد ذلك سنقوم ببرمجة إشارة المرور المصممة بلغة الجفا سكريبت لتتم تغير الألوان في إشارة المرور بشكل جيد كما أنك أمام اشارة مرور حقيقية في الشارع،
وضعت لكم الجزء الأول لتصميم المضهر فقط بشكل جميل كما أنكم يمكنكم تغير في أكواد css للحصول على أشكال أخرى حسب مزاجك و تعبيرك وفهمك اكتر في البرمجة.
الدرس الأول: فقط لتصميم شكل ومظهر إشارة المرور ب html و css
كما أنه يمكنك تصميم الشكل بطريقتك الخاصة ووضع اشكال مختلفة كما يمكنك استعمال الصور مكان الاضواء بدل اوسمة html فالأمر يتعلق بمدى قدراتك ومهارتك في لغة html و css.
الهدف من هذا الدرس هو معرفة كيفية التلاعب بكل الأوسمة وجعل منهم ما تريد رسوم صور حركات.
فيديو طريقة تعديل إشارة المرور الجزء الأول
مشاهدة الدرس الأول من هنا
كما شاهدتم قمنا بتصميم الجزء الخاص بشكل إشارة المرور و إختيار الألوان المناسبة لذلك .
الدرس التاني:
هو استكمال برمجة إشارة المرور بلغة الجفا سكريبت javascripte في البداية سنقوم بالإتصال مع كل لون إشارة المرور ب ID الخاص بها، وإستعمال وسيلتين أو خاصيتين (سأشرح لكم هذه الخاصيتين أسفل الموضوع) لتغير التوقيت بينهما.
فيديو طريقة تعديل إشارة المرور الجزء التاني
مشاهدة الدرس التاني من هنا
الان سأقوم بشرح الخصيات المستعملة في الجافا سكريبت
-setTimeout : تقوم بتأخير التنفيد للاوامر المستعملة وهي عادة ما تقوم بإرجاع احد المتغرات
وتكتب على هدا الشكل
function mafonction() { ... } setTimeout(mafonction, 5000);
-setInterval : هي تقوم بمنع اي عملية تنفيد محصورة
setInterval("instructions", délai)
وتكتب على هدا الشكل
لتحميل كود سورس الفيديو من هنا http://exe.io/9SGILBRs
أتمنى ان يعجبكم الشرح و ان يستفيد الجميع لا تنسى الاشتراك في قناتنا وترك تعليق
حول الموضوع تشجيعا لنا
الدرس التاني:
هو استكمال برمجة إشارة المرور بلغة الجفا سكريبت javascripte في البداية سنقوم بالإتصال مع كل لون إشارة المرور ب ID الخاص بها، وإستعمال وسيلتين أو خاصيتين (سأشرح لكم هذه الخاصيتين أسفل الموضوع) لتغير التوقيت بينهما.
فيديو طريقة تعديل إشارة المرور الجزء التاني
مشاهدة الدرس التاني من هنا
الان سأقوم بشرح الخصيات المستعملة في الجافا سكريبت
-setTimeout : تقوم بتأخير التنفيد للاوامر المستعملة وهي عادة ما تقوم بإرجاع احد المتغرات
وتكتب على هدا الشكل
function mafonction() { ... } setTimeout(mafonction, 5000);
-setInterval : هي تقوم بمنع اي عملية تنفيد محصورة
setInterval("instructions", délai)
وتكتب على هدا الشكل
لتحميل كود سورس الفيديو من هنا http://exe.io/9SGILBRs
أتمنى ان يعجبكم الشرح و ان يستفيد الجميع لا تنسى الاشتراك في قناتنا وترك تعليق
حول الموضوع تشجيعا لنا
جميل
ردحذف