recent
أخبار ساخنة

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

الصفحة الرئيسية
photo java script

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

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

إستخدام screen width

إذا قمنا بعرض بيانات العنصر screen width على جهازنا.
  alert(screen.wedth);

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


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

إستخدام screen height

  alert(screen.height);
نتيجة الأمر


لقد اعطانا الإرتفاع وهو 590 بكسل.
تذكر جيداً أنه عند إستخدام هذين الأمرين سوف يعطينا قيمة نوع البيانات من نوع ارقام وليس من النوع النصي و للتأكد من هذا سنستخدم هذا الأمر
alert(screen.height - 150);
و نستعرض النتيجه في المتصفح و نرى إن كان هذا صحيحاً ام لا 


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

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

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


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


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


مثلما نرى انه اخترنا Galaxy S5 الأرتفاع يكون 640 بكسل و العرض 360 بكسل, مثلاً نريد تنفيذ الأوامر فقط على الاجهزة الذي تكون 640*360, للقيام بذلك نقوم بكتابة جملة شرطية كالتالي.
alert(screen.wedth);
if (screen.width == 360 && screen.height == 640){
document.body.style .background = "red";
}

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


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

اذا نريد تنفيذ الأوامر على جميع الأجهزة الذي تمتلك عرض اقل من 640 بكسل
alert(screen.height);
if (screen.width < 640){
document.body.style .background = "red";
}
 

شرح هذا كما في السابق لكن قلنا له يحب أن يتنفذ الأوامر على جميع الاحجام التي تكون اقل من 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
google-playkhamsatmostaqltradent