البيكسل في جافا سكريبت

البيكسل هو الوصول إلى أبعاد الشاشة الحالية وعرض المحتوى بناء عليها. بالتالي تمنحك JavaScript بعض الخصائص للتحكم في خاصية الإطارات. ويمكنك الوصول إلى خصائص البيكسل في شاشة العرض عند فتح المتصفح تمامًا مثل هذه الشاشة التي نعرض فيها الآن. بالتالي توفر لك JavaScript بعض الخصائص الأساسية في التحكم في عرض وارتفاع العلامات الداخلية وهي قيم فعلية من البيكسل.

نعتبر بأن محاذاة النصوص أمر مهم للغاية. ولم يكن موجودًا بكثرة في الماضي ، وإذا قمت بالدخول إلى أحد المواقع القديمة. ستجد العديد من الصفحات  التي كان تصميمها رديئًا من الداخل.  

على سبيل المثال , كانت الفترة ما بين 1990 و 2000 محدودة المصادر. حيث لم تكن هناك تطورات في المواقع بشكل جيد ولا نلقي باللوم على لغات البرمجة في ذلك الوقت. لأن فكرة تصميمها كانت جديدة. بالتالي كان التركيز على أمور أكثر أهمية مثل ضمان عدم توقف الخادم وحجز استضافة جيدة.

وقد كان هدف المبرمجين في ذلك الوقت هو الحصول على خادم لا يتوقف عن العمل. الآن ، مع ثورة المعلومات ، ازدادت الحاجة إلى موارد البرامج لتمكننا من بناء صفحتنا بشكل جيد والتفاعل معها دون أي عقبات.

أحد هذه المصادر هو خاصية الإطارات أو البيكسل في العديد من لغات البرمجة ، وتحديداً تلك التي تهتم بالرسومات مثل Java و C ، لكن في هذه المقالة سنركز على Java language Script فقط.  

قيم البيكسل

كان بناء المواقع الإلكترونية يستخدم للعرض على شاشات عرض الكمبيوتر ، والتي لم تكن أبعادها بين 13-19 بوصة ، ولم يكن هناك الكثير من الاهتمامات في السيطرة على قيم البيكسل من قبل المبرمجين. حيث اقتصرت أهدافهم على التدوين والكتابة فقط دون مراعاة قواعد وطريقة عرض المقال.

ولكن الآن ، مع انتشار العديد من الشاشات المختلفة مثل الأجهزة اللوحية وشاشات الهاتف المحمول والشاشات الكبيرة. فإن هناك مشاكل كبيرة في طريقة عرض النص.

حيث تراها إما في أقصى اليمين أو تجدها غير مستجيبة لأبعاد بيكسل القياسية. ، لذلك كان من الضروري إعادة ضبط علامات HTML بشكل صحيح. وعرض الصفحة بطريقة مناسبة وسريعة الاستجابة.

على الرغم من أن الوصول إلى أبعاد العرض أصبح متاحًا في CSS ، فمن الضروري الاعتماد على بعض الأساليب الأساسية في لغة JavaScript. والتي تمكننا من التحكم في المتصفح من خلال التعليمات البرمجية ، وليس بعض الأوامر المحدودة التي توفرها CSS في بعض الحالات ، وهذا لا يقلل من إمكانيات CSS في البيكسل ، لكننا سنقوم باستخدامها بلغة JavaScript.  

البيكسل في أبعاد العرض

تعبر خاصية الإطارات عن مصفوفة تمتلك كل بكسل في منطقة العرض. يتم التعبير عن كل بكسل بقيمة محددة. يتم استخدامه للوصول إلى جميع الإطارات الموجودة على الصفحة. بالتالي يمكنك الوصول إلى إطارات Windows من خلال وظيفة مخصصة من JavaScript window.frames.length. وهي وظيفة ضرورية للتحكم في المهام وعرض العلامات على الصفحة. هناك وظيفتان أساسيتان لمعرفة أبعاد الصفحة بمزيد من التفصيل:

• الارتفاع.
• العرض.

يتم استخدام العنصرين السابقين لتحميل جميع قيم الشاشة (قيم الطول والعرض) ليتم وضعها في متغيرات JS ، والتي بدورها تحسب كمية البكسل التي تحتويها الشاشة بالارتفاع والعرض ، وهذه طريقة يمكنك أيضًا استخدامها في معلمات التحويل المادية في عرض الرسومات المتقدم.

تعمل خاصية الإطارات بالتوافق مع Mozilla Firefox والأوبرا ، لكنني أشرح لك كتاب JavaScript قديم ولا أعرف ما إذا كانت هذه الخصائص متوافقة مع جميع الإصدارات الجديدة من Chrome ولكنني أعتقد ذلك.

حسنًا ، سأضع الآن رمزًا بسيطًا يوضح لك عرض شاشة الكمبيوتر وارتفاعها ، والتي يمكن وصفها على النحو التالي:

<script>

var myWidth = window.innerWidth;

var myHeight = window.innerHeight;

document.write("<p>My width is : "+myWidth+"</p>");

document.write("<p>My height is : "+myHeight+"</p>");

</script>  

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

أبعاد HTML كقيمة

سنقوم بتضمين علامات HTML داخل وظيفة JavaScript. بالتالي كل ما ستراه الآن هو مجرد علامة HTML ذات خلفية زرقاء. وداخل هذه العلامة سنعطيها تنسيقًا يمكّنها من التوسع وفقًا لأبعاد الشاشة:

<script>

var width = 450; 

if (window.innerWidth || document.body.clientWidth) {

width = (window.innerWidth) ? window.innerWidth :

document.body.clientWidth;

}

var divWidth = (width  >= 200) ? width /2 : windowWidth/4;

document.write('<div style="width:'+divWidth+'; background-color:#D0E EFF;">');

document.write('This is text of our edited DIV.');

document.write('</div>');

</script>

      تم استخدام هذا المثال من الإصدار الثالث من JavaScript Book. وكما تلاحظ هنا يمكننا إرفاق بيان شرطي قصير أثناء تحديد المتغير في JavaScript ، وهذه إحدى الخصائص الرائعة التي تبني متغيرات على الاحتمالات المختلفة لجميع المتصفحات. المثال السابق يتحدث بإيجاز عن الأبعاد التي سيتم أخذها وفقًا لحجم متصفحك ويبني إمكانية قادمة لكيفية عرض علامة HTML وفقًا لعرض الصفحة.    

تمت الكتابة بواسطة : محمد

آخر تحديث : لم تخضع لتحديثات بعد