موس و صفحه كليد

سلام

تغييرات:
- در جلسه 16، بخش «معرفي نرم‌افزار» اضافه شد. (دوشنبه 30 خرداد)

موس و صفحه كليد، به عنوان گيرندههاي رايانه هستند كه به وسيله آنها مطالب را وارد مي‌كنيم. مثلا براي نوشتن اين متن، از صفحه كليد استفاده كرده‌ام. حرف ت را فشردم، تا در اين صفحه، نوشته شد. البته ميان فشردن كليد و نوشته شدن در صفحه - كه بلافاصله انجام مي‌شود - عملياتي انجام مي‌گردد كه از ديد ما پنهان است.

هر كليد، يك كد عددي دارد كه با فشرده شدن، از صفحه كليد به بخش مربوطه در رايانه، فرستاده مي‌شود. آنجا بعد از پردازش، تبديل به حرف معادل آن كد شده، و در متن، نمايش داده مي‌شود. اگر اين روند را خوب درك كنيم، مي‌توانيم بدون استفاده از صفحه كليد، تايپ كنيم؛ فقط كافي است بدانيم كه دستورات لازم آن چيست.
 

استخراج كُد كليد (Key Code)

 • صفحه كليد

استخراج كُد كليد (Key Code)، كار راحتي است. در زبان جاوا اسكريپت، براي به دست آوردن آن، از اين دستور استفاده مي‌شود: «window.event.keyCode»

تمرين

برنامه‌اي بنويسيم كه كد هر كليد را در يك جعبه متن، نشان دهد.

//***صفحه كليد
function funKeyCode(){
    var key = window.event.keyCode;
    inCode.value = key;
}
document.onkeypress=funKeyCode; // تنظيم رويداد

در قسمت بدنه، جعبه متني قرار دهيد كه محل نمايش كد باشد.

<input name="inCode" type="text" value="" size="5" readonly>

كد هر كليدي را كه فشار دهيد، اينجا نوشته مي‌شود:


 • موس

موس نيز مانند صفحه كليد عمل مي‌كند؛ منتها داراي كليدهاي كمتري است. از اين كد «window.event.button» مي‌توانيد براي استخراج كد كليد موس، استفاده كنيد.

تمرين

برنامه‌اي بنويسيم كه كد هر كليد را در يك جعبه متن، نشان دهد.

//***كليك موس
function funClick()
{
    if (document.all)
    {
        if (window.event.button)
        {
            inButton.value = window.event.button;
        return false;
        }
    }
}
document.onmousedown=funClick; // تنظيم رويداد

در قسمت بدنه، جعبه متني قرار دهيد كه محل نمايش كد باشد.

<input name="inButton" type="text" value="" size="5" readonly>

كُد كليك موس :

 • اشاره‌گر

اشاره‌گر (Cursor) - كه كاربران معمولا و به اشتباه، به آن موس هم مي‌گويند - همان شكلي است كه با حركت موس، در مانيتور، حركت مي‌كند و نمادي از انگشت و دست شماست براي اشاره به اشياء داخل صفحه.

تاريخ تولد اشاره‌گر و و موس، به ابتدايي‌ترين سيستم عامل ويندوز برمي‌گردد. قبل از آن، سيستم عامل داس بود و آن محيط سياه و مَخوف. نه اثري از رنگ بود، نه صوت و نه موس.

اشاره‌گر، داراي شكلهاي مختلفي است، و در حالات گوناگون، تغيير شكل مي‌دهد. مثلا گاهي به شكل ساعت شني، و گاهي به صورت يك فلش دو سر يا چهار سر، يا علامت سوال، تبديل مي‌شود.

اين تغيير شكلها، همه به دست تواناي شماي برنامه‌نويس، ميسّر مي‌شود و بس. خوشبختانه در وب نيز مي‌شود شكل دلخواه و مورد نياز به اشاره‌گر داد؛ ‌كافي است كه كد هر شكل را بنويسيد.

كـُد

قبل از نوشتن كد، توضيحي بايد عرض كنم، و آن اين است كه تغيير شكل اشاره‌گر، به صورت مستقيم به جاوا اسكريپت مربوط نمي‌شود؛ بلكه مربوط به مبحث استايل (Style) است؛ اما مي‌شود در جاوا از آن به دلخواه استفاده نمود.

استايل

استايل(Style)، تگي است مانند اسكريپيت (Script) كه درون سر (Head) نوشته مي‌شود. همانند جاوا، دو قسمت دارد: 1- نوشتن كد 2- فراخواني كد.

1- نوشتن كد. كد را داخل تگ استايل و درون سر، مي‌نويسيم.

<html>
<head>
<style>
#Auto {Cursor: auto}
#Crosshair {Cursor: crosshair}
#Default {Cursor: default}
#Pointer {Cursor: pointer}
#Hand {Cursor: hand}
#Move {Cursor: move}
#e-resize {Cursor: e-resize}
#ne-resize {Cursor: ne-resize}
#nw-resize {Cursor: nw-resize}
#n-resize {Cursor: n-resize}
#se-resize {Cursor: se-resize}
#sw-resize {Cursor: sw-resize}
#s-resize {Cursor: s-resize}
#w-resize {Cursor: }
#text {Cursor: text}
#wait {Cursor: wait}
#help {Cursor: help}
</style>
</head>

تحليل كد: #Hand = نام كد، كه به دلخواه شماست. { } = كد، داخل اين علامت، نوشته مي‌شود. Cursor: hand = كد شكل اشاره‌گر، كه در اينجا به صورت دست است.

2- فراخواني كد. شي مورد نظر را، كه قرار است اشاره‌گر، به محض رفتن بر روي آن، تغيير شكل دهد، داخل بدنه مي‌نويسيم. آن شي، ممكن است يك عكس باشد يا يك متن يا چيز ديگر. در اين مثال، متني را در نظر گرفته‌ام كه درون تگ (Span) نوشته‌ام.

<BODY>

<SPAN ID="Auto">Auto</SPAN><BR>
<SPAN ID="Crosshair">Crosshair</SPAN><BR>
<SPAN ID="Default">Default</SPAN><BR>
<SPAN ID="Pointer">Pointer</SPAN><BR>
<SPAN ID="Hand">Hand</SPAN><BR>
<SPAN ID="Move">Move</SPAN><BR>
<SPAN ID="e-resize">e-resize</SPAN><BR>
<SPAN ID="ne-resize">ne-resize</SPAN><BR>
<SPAN ID="nw-resize">nw-resize</SPAN><BR>
<SPAN ID="n-resize">n-resize</SPAN><BR>
<SPAN ID="se-resize">se-resize</SPAN><BR>
<SPAN ID="sw-resize">sw-resize</SPAN><BR>
<SPAN ID="s-resize">s-resize</SPAN><BR>
<SPAN ID="w-resize">w-resize</SPAN><BR>
<SPAN ID="text">text</SPAN><BR>
<SPAN ID="wait">wait</SPAN><BR>
<SPAN ID="help">help</SPAN><BR>

</BODY>
</HTML>

ID = آي‌دي، همان نامي است كه در بالا نوشتيم؛ مانند (Hand).

نمونه عملي: اشاره‌گر خود را بر روي نوشته‌ها ببريد.

Auto
Crosshair
Default
Pointer
Hand
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

اسم هر كد، نمايانگر حالت و نوع آن است.

اشاره‌گر دست‌ساز

اينها، شكلهاي پيش فرض و موجود در ويندوز است. اما آيا مي‌شود شكل اشاره‌گر را آنگونه كه خودمان مي‌خواهيم، تغيير دهيم؛ يعني به شكلي كه خودمان طراحي كرديم؟ جواب اين سوال، مثبت است. كافي است يك اشاره‌گر - كه با پسوند cur. است - انتخاب كرده و آدرس آنرا بنويسيد. به اين صورت:

#Test {Cursor: url (test.cur); }

داخل پرانتز:
هر تغيير شكلي، بايد به خاطر نياز و مناسب با زمان و مكان باشد؛ وگرنه كار شايسته‌اي نيست.

به اميد ديدار
خدانگهدار