تطبيقات و امثلة عملية علي لغة جافا سكريبت للمبتدئين

تدور فكرة التطبيق حول عمل زرار اسفل صفحة الموقع بالضغط عليه تصعد صفحة الموقع الي أعلي

• اضغط هنا لتحميل كود التطبيق code javascript

هو عبارة عن عمل شاشة او صفحة تظهر قبل ظهور الموقع بشكل كامل لحين تحميل و ظهور جميع عناصر الموقع .

• اضغط هنا لتحميل كود التطبيق code javascript

تدور فكرة التطبيق حول عمل الناف بار / القائمة بشكل ثابت في الموقع مع حركة النزول بالموس لاسفل و كذلك تحديد عناصر محتوي الصفحة وفقا لاقسام الصفحة

• اضغط هنا لتحميل كود التطبيق code javascript

معرض صور / سلايدر به زرار التالي و السابق و اجراء مصغرات للصور

• اضغط هنا لتحميل كود التطبيق code javascript

عمل اظهار لقسم معين / موديل بوكس modal box مع عمل overlay لباقي الصفحة

• اضغط هنا لتحميل كود التطبيق code javascript

عمل عداد ارقام سواء عد تصاعدي او تنازلي للارقام مع التحكم الكامل في سرعة عد الارقام

• اضغط هنا لتحميل كود التطبيق code javascript

عرض المزيد من العناصر ، مثلا لو موضوع التصميم عن التجارة الالكترونية فسوف تكون فكرة التطبيق عرض المزيد من المنتجات الي ان يتم عرض جميع كل المنتجات

• اضغط هنا لتحميل كود التطبيق code javascript

عرض الجملة حرف تلو الاخر مع وجود كلمة ثابتة حيث يعرض مجموعة من الجمل ثم يحذف الجملة حرف بعد الاخر ثم يعرض الجملة التالية و هكذا

• اضغط هنا لتحميل كود التطبيق code javascript

عمل اشعار notification بحث يتم استخدامه مع جملة alert وتم عمل تصميم مخصص بشكل جميل و اضافة فكرة حذف الاشعار بشكل تلقائي بعد مرور 5 ثواني مع اضافة امكانية الضغط علي علامة الاغلاق لحذف الاشعار

• اضغط هنا لتحميل كود التطبيق code javascript

عمل سلايدر بالمس touch slider و عند الضغط علي الصورة يتم تكبير الصورة مع امكانية الضغط علي علامة الاغلاق او في اي مكان فارغ لاغلاق الصورة الكبيرة ، بحيث في شاشة الكمبيوتر و اللاب توب يتم تحريك السلايدر يمين او يسار بالموس و في شاشة الموبايل يتم تحريك السلايدر بالمس

• اضغط هنا لتحميل كود التطبيق code javascript

عمل تضمين لفيديوهات اليوتيوب بشكل احترافي youtube video embed حيث يمكن التحكم في تشغيل الفيديو بشكل كامل و ايضا عمل سلايدر لمجموعة فيديوهات اليوتيوب

• اضغط هنا لتحميل كود التطبيق code javascript

عمل tooltip بشكل جميل مع اضافة لها حركة و لون بدون اضافة اي مكتبات خارجية و بشكل سهل حيث تم بناء الفكرة علي خاصية title في الـ html

• اضغط هنا لتحميل كود التطبيق code javascript

تحريك عناصر و اقسام الموقع بشكل جميل مع بداية ظهور الموقع او مع حركة اسكرول الموس و تصفح الموقع و مع اكتمال تصفح الموقع و تصفح الموقع من جديد يستمر ظهور عناصر الموقع بحركة جميلة

• اضغط هنا لتحميل كود التطبيق code javascript

عمل شريط تقدم متحرك animated progress bar بأشكال مختلفة شكل شريط افقي و دائرة مفرغة و دائرة ملونة circle progress bar بشكل بسيط و سهل التنفيذ

• اضغط هنا لتحميل كود التطبيق code javascript

التعامل مع الجداول الخاصة بالـ html باحتراف : انشاء جدول من خلال الجافا سكريبت اضافة مميزات جديدة للجدول مثل عمل تحديد للصفوف من خلال الضغط كليك او مرور الموس علي الصفوف عمل تحديد لجميع الصفوف من خلال الضغط علي اول خلية في رأس الجدول تقسيم بيانات الجدول الي صفحات و التحكم بها من خلال عرض عدد معين في كل صفحة و عرض الصفحة التالية و السابقة و اول صفحة و اخر صفحة و مؤشر للصفحة الحالية من اجمالي عدد الصفحات

• اضغط هنا لتحميل كود التطبيق code javascript

عمل موقع متعدد اللغات : عربي و انجليزي بشكل احترافي باستخدام الجافا سكريبت multi language website using javascript وذلك من حيث شكل الموقع و اتجاه الكلام و ايضا من حيث محتوي الموقع و الترجمة من العربي الي الانجليزي مثلا التعامل مع الفورم و مربع النصوص input text بشكل احترافي لعرض محتوي النص من حيث العربي و الانجليزي

• اضغط هنا لتحميل كود التطبيق code javascript

برمجة موقع اخباري في ضوء Youtube Data API و تم شرح ما يلي : عمل موقع متابعة لمجموعة من القنوات علي اليوتيوب و عرض الفيديوهات لتاريخ معين اي جلب الفيديوهات للموقع التعامل مع فيديوهات اليوتيوب في الموقع بشكل احترافي مثل ايقاف جميع الفيديوهات مع حركة اسكرول الموس

• اضغط هنا لتحميل كود التطبيق code javascript

اضافة فيديوهات اليوتيوب الي الموقع / التصميم html بثلاث طرق مختلفة : 1 - بطريقة مباشرة في ملف الـ html و هذه الطريقة سهلة الاستخدام لكن لا يمكن التحكم في الفيديو و عمل برمجة خاصة به 2 - اضافة فيديو واحد فقط للموقع و التحكم فيه من خلال برمجة خاصة مثل ايقاف الفيديو من حركة اسكرول الموس 3 - اضافة اكثر من فيديو للموقع و التحكم بهم من خلال برمجة خاصة

• اضغط هنا لتحميل كود التطبيق code javascript

تعتمد اللعبة علي اجراء سحب و افلات drag & drop للعناصر حيث هناك مجموعة من الارقام المتسلسلة ذات منطق معين يعتمد علي ذكاء الارقام و يتم سحب اختيارات الارقام للجزء الخاص بالارقام المتسلسلة بشكل افق ورأسي متسلسل خلال دقيقتين و تظهر النتيجة سواء تم اجتياز المستوي او لم يتم اجتيازه و في النهاية يتم عرض درجة للمستخدم

• اضغط هنا لتحميل كود التطبيق code javascript

تسجيل البيانات بشكل سليم في قاعدة البيانات من اهم وظائف مطور نظم المعلومات ، في هذا الفيديو نعرض اهم القيود علي البيانات : عمل اجراء كتابة حروف لغة عربية فقط عمل اجراء كتابة حروف لغة انجليزية فقط عمل اجراء كتابة ارقام فقط عمل اجراء كتابة البريد الالكتروني بشكل صحيح عمل حقول اجبارية للمستخدم سواء كان : input text input radio select قائمة منسدلة عمل قيود علي اختيارات قائمة منسدلة select عمل قيود علي اختيارات نعم / لا

• اضغط هنا لتحميل كود التطبيق code javascript

عمل اداة جميلة من ادوات الفورم form و هي قائمة اختيارات متعددة Checkbox inside Select بشكل بسيط و سهل من خلال input type text و label وبداخله checkbox و عمل اخري متعددة الاختيارات مع اضافة خاصية الكتابة في النص input type index و ايضا اظهار و اخفاء الجزء الخاص بعنصر اخري تذكر

• اضغط هنا لتحميل كود التطبيق code javascript