Web User Interface (WUI) негізіндегі пайдаланушы интерфейсінің компоненттері

Пән: Информатика, Программалау, Мәліметтер қоры
Жұмыс түрі: Реферат
Тегін: Антиплагиат
Көлемі: 5 бет
Таңдаулыға:

ЖОСПАР
КІРІСПЕ
НЕГІЗГІ БӨЛІМ

WUI негізіндегі пайдалану интерфейсі
Программа листингі

ҚОРЫТЫНДЫ
ҚОЛДАНЫЛҒАН ӘДЕБИЕТТЕР

КІРІСПЕ

Пайдаланушының WWW-сервермен интерактивті өзара қатынас туғызуға мүмкіндік беретін, HTML-құжатында, компоненттерді құруға дағдылану. Программалық қосымшасы бар пайдаланушының интерактивті интерфейсін құратын HTML-парағының FORM тегінің барлық компоненттері қосылған кодын құрастыру. Белгілі мағыналы жүктемесі бар HTML-парағының кодын құру, кіріс ақпаратын анықтайтын түрлердің компоненттерін таңдау.

WUI негізіндегі пайдалану интерфейсі

WUI негізіндегі пайдалану интерфейсінің компоненттері, тораптық программалық қосымшадағы пайдаланушының өзара қатынасын қамтамасыз етеді. Пайдаланушыға ақпаратты көрсетуден басқа, WEB парағының негізгі функцияларының біріне (WUI объектілері бар кезде ), WEB-торапқа белгілі деректерді жіберіп, оларды серверде өңдеу мүмкіндігі жатады. Бұл мақсаттар үшін парақтың кодына, HTML-парағында арнайы түр - объектіні көрсететін, олардың көмегімен интерактивті интерфейс құруға болатын, арнайы тегтер қосылады.

HTML (Hyper Text Markup Language) - гипермәтіндік өлшеуіш тілі күрделі SGML (Standard Generalized Markup Language) өлшеуіш тілінің мүшесі болып табылады. HTML кез келген тілдер сияқты программа құрудың стандартты құрылымынан тұрады. Бұл жағдайда ол HTML - құжат. HTML - тег директивалары бұрыштама жақшаларына алынады. Бұрыштама жақшаға алынбаған барлық объектілерді интерпретатор экранда бейнеленетін мәтін ретінде қабылдайды. Тег - браузер интерпретаторына тиісті нақты әр директиваға мәнді қалай өңдеуді көрсететін HTML командасы. Бұл мән тег атрибуты деп аталады. Тегтің атрибуты болуы да, болмауы да мүмкін. Мысалы, <HTML> тегінің атрибуты болмайды.

HTML - құжаты қысқа түрде құжат тақырыбынан және құжат денесіне тұрады.

Синтаксис. HTML тегінің жалпы түрде барлық атрибуттарымен жазылу синтаксисі келесі түрде болады:

<тег атрибут аты1= “мән” атр_аты. 2 = “мән” атр_аты. N = “мән”> өңделетін мән </жабылатын тег>

Атрибут мәні тік жақшаға алынады. Тегтің барлығы жұппен болады: ашылатын және жабылатын; <тег> өңделетін мән </тег>

Форма <FORM> тегімен ашылып және </FORM> тегімен аяқталады. HTML-құжат бірнеше формадан тұруы мүмкін, бірақ формалар бірінің ішінде бірі орналаспау керек. Белгісі бар HTML-мәтін форма ішінде шексіз орналаса береді.

<FORM> тегі үш атрибуттан тұруы мүмкін, олардың біреуі міндетті. Бұл атрибуттар мыналар:

- ACTION

- Міндетті атрибут. Форма өңдеуші қайда орналасқаның анықтайды.

METHOD

Формадан деректер өңдеушіге қалай берілетіні анықталынады (басқаша айтқанда, гипермәтінді беру протоколының әдісі көмегімен) . Рұқсат етілетін мәндер: METHOD=POST және METHOD=GET. Егер атрибут мәні келтірілмесе, онда үнсіздік бойынша METHOD=GET ұсынылады.

ENCTYPE

Формадан деректер өңдеушіге беру үшін қандай жағдайда код жасау анықталынады. Егер атрибут мәні келтірілмесе, онда үнсіздік бойынша ENCTYPE=application/x-www-form-urlencoded ұсынылады.

Формадан өңдеушіге қандай да бір дерек беру процесін жіберу үшін қандай да бір басқару органы қажет. Мұндай басқару органын құру өте қарапайым: <INPUT TYPE=submit> Браузер форма ішінде мұндай жолды кездестіріп, экранда Submit жазбасы бар батырманы салады ("сабмит" деп оқылады, ағылшынан "беріп тұру"), оны басқан кезде формадағы деректер өңдеушіге беріледі <FORM> тегіндегі. Батырмадағы жазбаны сізге қалай ұнаса солай жазуға болады.

Формада бірнеше submit типіндегі батырма әртүрлі есіммен және/немесе мәнмен болады. Мұндай жағдайда пайдаланушы submit қандай батырмасын басқанына қарай, өңдеуші әртүрлі әрекет жасауы мүмкін.

<INPUT> элементінің әртүрлі типі бар. <INPUT> әр элементі элемент есімін анықтайтын NAME=[есім] атрибутынан тұруы мүмкін (және өңдеушіге берілетін айнымалы есіміне сәйкес) . Есім тек латын әрпімен берілуі керек. <INPUT> элементінің көбісі осы есіммен өңдеушіге берілетін мәнді анықтайтын VALUE="[мән] " атрибутынан тұрады. <INPUT TYPE=text> және <INPUT TYPE=password> элементтері үшін, бірақ бұл атрибут міндетті емес, сонымен қатар тиісті айнымалы мәні пайдаланушымен пернетақтадан енгізіледі. <INPUT> элементінің негізгі типтері:

TYPE=text

Мәтін жолын енгізу үшін терезені анықтайды. Қосымша атрибуттардан тұруы мүмкін SIZE=[сан] (символды енгізу терезесінің ені) және MAXLENGTH=[сан] (символды сан енгізу жолының максимальды рұқсат ұзындығы) . Мысалы:

Мәтін енгізу үшін 20 символды терезе енін анықтайды. Үнсіздік бойынша терезеде пайдаланушы редактірлейтін Иван мәтіні болады. Редактірленген (немесе редактірленбеген) мәтін өңдеушіге user айнымалысымен беріледі.

TYPE=password

Пароль енгізу үшін терезе анықтайды. text типіне сәйкес, бірақ мәтін енгізу символдарының орнына экранда жұлдызша көрсетіледі (*) . Мысалы:

Пароль енгізу үшін ені 20 символды терезе анықталынады. Парольдың максимальды рұқсат ұзындығы - 10 символ. Енгізілген пароль өңдеушіге pw айнымалысы арқылы беріледі.

TYPE=radio

Радиобатырманы анықтайды. checked қосымша атрибутынан тұрады (батырма белгіленгенді көрсетеді) . Радиобатырма тобында бірдей есіммен тек белгіленген радиобатырма ғана болуы мүмкін. Мысалы:

<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с <INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с <INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с

9600 бит/с, 14400 бит/с және 28800 бит/с деп жазылған үш радиобатырма тобын анықтайды. Алғашқыда батырмалардың біреуі белгіленеді. Егер пайдаланушы басқа батырманы белгілемесе, онда өңдеушіге modem айнымалысы 9600 мәнімен беріледі. Егер пайдаланушы басқа батырманы белгілесе, онда өңдеушіге modem айнымалысы 14400 немесе 28800 мәнімен беріледі.

TYPE=checkbox

Белгі жасауға болатын квадратты анықтайды. checked деген қосымша атрибуты болуы мүмкін (квадрат белгілен екенін көрсетеді) . Радиобатырмадан ерекшелігі бірдей есімді квадраттар тобында бірнеше белгіленген квадраттар болады.

TYPE=hidden

Форманы толтыру кезінде пайдаланушыға көрінбейтін жасырын деректер элементін анықтайды және өңдеушіге өзгеріссіз беріледі. Мұндай элемент қайта өңдеуге жататын формада болғаны жақсы, себебі өңдеуші форманың қандай нұсқасымен жұмыс істеп тұрғанын білу үшін. Басқа вариантарды өзіңіз құрастыруыңызға болады. Мысалы:

Өңдеушіге 1. 1. мәнімен берілетін, жасырын version айнымалысын анықтайды.

TYPE=reset

Басқан кезде форма бастапқы күйіне қайтып келетін батырманы анықтайды. Бірақ бұл батырманы қолдану кезінде деректер өңдеушіге берілмейді, reset типіндегі батырмада name атрибуты болмайды. Мысалы:

Басқан кезде форма бастапқы күйіне қайтып келетін “Форма жолын тазарту” батырмасын анықтайды.

Меню <SELECT> тегімен басталып және </SELECT> тегімен аяқталады. <SELECT> тегіс менюді генерациялайтын айнымалы есімін анықтайтын міндетті NAME атрибутынан тұрады.

<SELECT> тегі менюден бірнеше элементті таңдайтын MULTIPLE атрибутынан тұрады. Браузерлердің көбісі <SELECT MULTIPLE> менюін меню элементтері орналасқан терезе түрінде көрсетеді (жолдағы терезе биіктігін SIZE=[сан] атрибутымен беруге болады) . Көп жағдайда <SELECT> тегі түсетін меню ретінде көрсетіледі.

<OPTION> тегі меню элементтің анықтайды. Егер өңдеушіге берілетін меню элементі таңдалса, онда VALUE міндетті атрибуты мәнді тағайындайды. Берліген элемент үнсіздікпен белгіленген екенін көрсету үшін <OPTION> тегі checked атрибутынан тұруы мүмкін.

<TEXTAREA> элементі қарапайым түрде көрсетіледі. Мысалы:

Ал мұнда - Сіздің адрес . . .

<TEXTAREA> элементі қарапайым түрде көрсетіледі. Мысалы:

Барлық атрибуттар міндетті. NAME атрибуты терезедегі деректере өңдеушіге қандай есіммен берілетінін анықтайды. (мысалды - address) . ROWS атрибуты жолдағы терезе биіктігін келтіреді (мысалда - 5) . COLS атрибуты терезе енін символмен келтіреді (мысалда - 50) .

<TEXTAREA> және </TEXTAREA> тегтері арасында үнсіздік бойынша орналасқан мәтін терездегі мәліметтерді білдіреді. Пайдаланушы оны редактірлейді және өшіре алады. <TEXTAREA> терезесіндегі орыс әріптері өңдеушіге берілу кезінде тиісті символдық объектілерге реттеледі.

Программаның орындалу барысы:

Программа листингі

<html>

<head>

<title>registr</title>

function doit()

{

alert("Мен студент" + " "+document. akonaikaform. aty. value

+" "+ document. enlikform. tegi. value +" "+ document. akonaikaform. akeaty. value +" "+document. akonaikaform. nomer. value+" "+"университетте окимын")

}

</SCRIPT>

</head>

<br>

<tr><td><FONT size="4" color="#">Логин:</font></td>

<tr><td><FONT size="4" color="#">Пароль енгиз:</font></td>

<tr><td><FONT size="4" color="#">Пароль кайтала:</font></td>

Сиздин почта адресиниз</td>

<OPTION VALUE="option_1" selected>mail. ru

<OPTION VALUE="option_2">inbox. ru

<OPTION VALUE="option_n">nur. kz

<OPTION VALUE="option_n">mail. kz