التحكم بأحجام عرض و ارتفاع الشاشة في جافاسكربت JavaScript الدرس|32| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الثلاثاء، 30 يونيو 2020

التحكم بأحجام عرض و ارتفاع الشاشة في جافاسكربت JavaScript الدرس|32|

photo java script

العناصر  screen.width screen.height

سنتحدث اليوم عن عنصرين مهمين جداً سوف نستفيد منهم كثيراً في الجافاسكربت وهما العنصرين screen width && screen height حيث يقوم العنصر screen width بجلب حجم عرض الشاشة أما العنصر screen.height فيجلب لنا حجم ارتفاع الشاشة و يمكنك إنشاء مواقع متجاوبة أو تنفيذ الأوامر حسب شاشات الهواتف او شاشات الكمبيوتر المختلفة.

إستخدام screen width

إذا قمنا بعرض بيانات العنصر screen width على جهازنا


وعند فتح هذا الأمر ستكون النتيجة هي


لقد اعطانا عرض الشاشة لدي وهو 1366 بكسل.

إستخدام screen height


نتيجة الأمر


لقد اعطانا الإرتفاع وهو 590 بكسل.

تذكر جيداً أنه عند إستخدام هذين الأمرين سوف يعطينا قيمة نوع البيانات من نوع ارقام وليس من النوع النصي و للتأكد من هذا سنستخدم هذا الأمر

و نستعرض النتيجه في المتصفح و نرى إن كان هذا صحيحاً ام لا 


كتبنا في الامر اطرح لنا 150 بكسل من عرض الشاشة و طرحه لنا بالفعل و بقي 440 بكسل, هذا يدل بأن نوع البيانات هو ارقام و ليس نصي.

لنأخذ مثال فعلي لكي نفهم الأمر اكثر و كيف نقوم بإستخدام هذه الأمور, اولأ إذا كنت تستجدم متصفح google chroom اتبع الخطوات الآتية الموضحه بالصور.

نقوم بالضغط على الزر الأيمن من الماوس في الصفحة و إختيار Inspect.


ثم بعد ذلك نقوم بإختيار الخيار المتضح بالصورة Elements و ثم الضغط على إشارة الشاشة بجانبه


ثم نتوجه إلى المكان الذي ترونه أمامكم و اختيار حجم الشاشة الذي تريدونها, فأنا أخترت Galaxy S5 .


مثلما نرى انه اخترنا Galaxy S5 الأرتفاع يكون 640 بكسل و العرض 360 بكسل, مثلاً نريد تنفيذ الأوامر فقط على الاجهزة الذي تكون 640*360, للقيام بذلك نقوم بكتابة جملة شرطية كالتالي.


وضعنا alert لأجل ظهور ديالوك منبثق يعطينا عرض الشاشة ثم وضعنا جملة شرطية تقول إذا كان العرض 360 بكسل و الإرتفاع 640 بكسل نفذ لي أمر تغيير خلفية الشاشة إلى اللون الأحمر و إذا تحقق الشرط ستتغير الخلفية فوراً للون الأحمر.
ستكون النتيجة


بهذه الطريقة يمكن تحديد الأحجام الذي نريدها, و إذا غيرنا نوع الجهاز فلن يتم تنفيذ الأوامر ابداً لأن المحدد هو 640*360 بكسل.

اذا نريد تنفيذ الأوامر على جميع الأجهزة الذي تمتلك عرض اقل من 640 بكسل

 

شرح هذا كما في السابق لكن قلنا له يحب أن يتنفذ الأوامر على جميع الاحجام التي تكون اقل من 640 بكسل.

قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام