§ 23. Элементы JavaScript для стварэння вэб-старонак
23.1. Апрацоўка падзей
Галоўная задача пры стварэнні дынамічных вэб-старонак у асноўным зводзіцца да выбару аб'ектаў і выканання розных дзеянняў над імі. У сцэнарыях JavaScript выкарыстоўваюцца аб'екты браўзера, з дапамогай якіх можна ўзаемадзейнічаць з элементамі вэб-старонкі і самім браўзерам. Асноўныя з аб'ектаў браўзера:
Сродкі для працы са змесцівам вэб-старонак прадастаўляе аб'ектная мадэль дакумента (DOM). Усе элементы, якія складаюць вэб-старонку, разглядаюцца ў гэтай мадэлі, як іерархічна арганізаваныя. Кожны элемент старонкі ўяўляе сабой аб'ект. Кожны аб'ект валодае пэўнымі ўласцівасцямі і валодае сваімі метадамі. Каранёвым складальнікам аб'ектнай мадэлі дакумента з'яўляецца аб'ект document. Менавіта аб'ект document выкарыстоўваецца для атрымання, змены або дадання змесціва ў html-дакумент, а гэтак жа для апрацоўкі падзей у гэтым дакуменце. Да элементаў html-дакумента можна атрымаць доступ як да ўласцівасцей аб'екта document (прыклад 23.1). З прызначэннем метадаў аб'екта document можна азнаёміцца ў Дадатку. Пры дынамічным фарміраванні кантэнту вэб-старонкі неабходна вырашаць задачы дадання розных вэб-элементаў на старонку. Пры стварэнні html-элемента сродкамі JavaScript элемент ствараецца толькі ў памяці камп'ютара і не адлюстроўваецца на старонцы, пакуль не будуць ужытыя метады, апісаныя ў скрыпце. У прыкладзе 23.2 разглядаецца выкарыстанне метаду, які дазваляе размясціць на вэб-старонцы якой-небудзь кантэнт. У працэсе дадання элементаў на вэб-старонку можна вылучыць тры этапы: стварэнне элемента, даданне кантэнту ў элемент і размяшчэнне элемента на старонцы (прыклад 23.3). Падзеі адлюстроўваюць узаемадзеянне карыстальніка з інтэрфейсам (клік, навядзенне мышы, увод тэксту і г. д.). Некаторыя вэб-падзеі, якія часта выкарыстоўваюцца:
У любой падзеі ёсць яе мэта. Мэта падзеі — гэта аб'ект, у якім узнікла падзея або з якім гэта падзея звязана. З любой падзеяй можна звязаць функцыю (адну або больш), якая будзе аўтаматычна выклікацца браўзерам пры ўзнікненні падзеі. Функцыя, якая выкарыстоўваецца для апрацоўкі падзеі, называецца апрацоўшчык падзеі. Агульны выгляд запісу апрацоўшчыка падзеі: <элемент падзея = "код JS"> Прызначыць апрацоўшчык падзей прасцей за ўсё ў выглядзе атрыбута html-элемента (прыклады 23.4—23.6). Пры прызначэнні апрацоўшчыка падзеі ў выглядзе атрыбута html-элемента можа быць выкарыстана ключавое слова this, якое паказвае на гэты элемент ( прыклады 23.4 і 23.5). У прыкладзе 23.6 у запісу апрацоўшчыкаў падзеі onclick выкарыстоўваецца спасылка на функцыю getElementById(), якая вяртае спасылку на html-элемент па яго ідэнтыфікатары — значэнню атрыбута id. |
Прыклад 23.1. Уласцівасці аб'екта document, адпаведныя элементам html-дакумента.
Прыклад 23.2. Вывад на вэб-старонку метадам document.write(). 1. Вывад тэксту з выкарыстаннем укаранення. Скрыпт:
Дыялогавае акно: Вэб-старонка: 2. Вывад тэксту ў цыкле Скрыпт:
Вэб-старонка: Прыклад 23.3. Даданне на старонку блока з тэкстам. Скрыпт (павінен размяшчацца ў целе html-дакумента):
Вынік працы скрыпту аналагічны працы наступнага html-кода:
Прыклад 23.4. Выкарыстанне ключавога слова this у апрацоўшчыку падзей для змены колеру тэксту.
Прыклад 23.5. Выкарыстанне ключавога слова this у апрацоўшчыку падзей для замены аднаго малюнка іншым. Html-код:
Рэалізацыя падзей: а) паказальнік мышы па-за малюнка б) паказальнік мышы на малюнку Прыклад 23.6. Выкарыстанне функцыі getElementById() і падзеі onclick. Скрыпт:
Html-код:
Старонка пасля загрузкі: Рэалізацыя падзей: |