§ 23. Элементы JavaScript для стварэння вэб-старонак

23.1. Апрацоўка падзей

Галоўная задача пры стварэнні дынамічных вэб-старонак у асноўным зводзіцца да выбару аб'ектаў і выканання розных дзеянняў над імі.

У сцэнарыях JavaScript выкарыстоўваюцца аб'екты браўзера, з дапамогай якіх можна ўзаемадзейнічаць з элементамі вэб-старонкі і самім браўзерам. Асноўныя з аб'ектаў браўзера:

  • window — самы галоўны аб'ект у браўзеры, які адказвае за адно з вокнаў (укладак) браўзера.
  • screen — аб'ект, які дае інфармацыю аб экране карыстальніка.
  • navigator — інфармацыйны аб'ект, з дапамогай якога можна атрымаць розныя даныя, якія змяшчаюцца ў браўзеры.
  • location — аб'ект, які адказвае за адрасны радок браўзера (напрыклад, дазваляе атрымаць бягучы адрас старонкі).
  • document — загружаная старонка са сваёй структурай элементаў.

Сродкі для працы са змесцівам вэб-старонак прадастаўляе аб'ектная мадэль дакумента (DOM). Усе элементы, якія складаюць вэб-старонку, разглядаюцца ў гэтай мадэлі, як іерархічна арганізаваныя. Кожны элемент старонкі ўяўляе сабой аб'ект. Кожны аб'ект валодае пэўнымі ўласцівасцямі і валодае сваімі метадамі.

Каранёвым складальнікам аб'ектнай мадэлі дакумента з'яўляецца аб'ект document. Менавіта аб'ект document выкарыстоўваецца для атрымання, змены або дадання змесціва ў html-дакумент, а гэтак жа для апрацоўкі падзей у гэтым дакуменце. Да элементаў html-дакумента можна атрымаць доступ як да ўласцівасцей аб'екта document (прыклад 23.1). З прызначэннем метадаў аб'екта document можна азнаёміцца ў Дадатку.

Пры дынамічным фарміраванні кантэнту вэб-старонкі неабходна вырашаць задачы дадання розных вэб-элементаў на старонку. Пры стварэнні html-элемента сродкамі JavaScript элемент ствараецца толькі ў памяці камп'ютара і не адлюстроўваецца на старонцы, пакуль не будуць ужытыя метады, апісаныя ў скрыпце.

У прыкладзе 23.2 разглядаецца выкарыстанне метаду, які дазваляе размясціць на вэб-старонцы якой-небудзь кантэнт.

У працэсе дадання элементаў на вэб-старонку можна вылучыць тры этапы: стварэнне элемента, даданне кантэнту ў элемент і размяшчэнне элемента на старонцы (прыклад 23.3).

Падзеі адлюстроўваюць узаемадзеянне карыстальніка з інтэрфейсам (клік, навядзенне мышы, увод тэксту і г. д.).

Некаторыя вэб-падзеі, якія часта выкарыстоўваюцца:

  • onchange — элемент на вэб-старонцы быў зменены.
  • onclick — пстрычка мышы па элеменце.
  • ondbclick —двайная пстрычка мышшу па элеменце.
  • onmousemove — паказальнік мышы перамяшчаецца над аб'ектам.
  • onmouseover — навядзенне паказальніка мышы на элемент.
  • onmouseout — паказальнік мышы выведзены за межы элемента.
  • onkeydown — націск клавішы клавіятуры.
  • onload — завяршэнне загрузкі старонкі.

У любой падзеі ёсць яе мэта. Мэта падзеі — гэта аб'ект, у якім узнікла падзея або з якім гэта падзея звязана. З любой падзеяй можна звязаць функцыю (адну або больш), якая будзе аўтаматычна выклікацца браўзерам пры ўзнікненні падзеі. Функцыя, якая выкарыстоўваецца для апрацоўкі падзеі, называецца апрацоўшчык падзеі.

Агульны выгляд запісу апрацоўшчыка падзеі:

<элемент падзея = "код JS">

Прызначыць апрацоўшчык падзей прасцей за ўсё ў выглядзе атрыбута html-элемента (прыклады 23.4—23.6).

Пры прызначэнні апрацоўшчыка падзеі ў выглядзе атрыбута html-элемента можа быць выкарыстана ключавое слова this, якое паказвае на гэты элемент ( прыклады 23.4 і 23.5).

У прыкладзе 23.6 у запісу апрацоўшчыкаў падзеі onclick выкарыстоўваецца спасылка на функцыю getElementById(), якая вяртае спасылку на html-элемент па яго ідэнтыфікатары — значэнню атрыбута id.

Прыклад 23.1. Уласцівасці аб'екта document, адпаведныя элементам html-дакумента.

  1. document.documentElement — адпавядае тэгу <html>
  2. document.body — адпавядае тэгу <body>
  3. document.head — адпавядае тэгу <head>

Прыклад 23.2. Вывад на вэб-старонку метадам document.write().

1. Вывад тэксту з выкарыстаннем укаранення.

Скрыпт:

var name =

    prompt('Ваша iмя?', '');

document.write

    (`Прывітанне, ${name}!`);

Дыялогавае акно:

Вэб-старонка:

2. Вывад тэксту ў цыкле

Скрыпт:

for (var i = 0; i < 5; ++i)  {

  document.write

        ('Прывітанне, свет! <br>');}

Вэб-старонка:

Прыклад 23.3. Даданне на старонку блока з тэкстам.

Скрыпт (павінен размяшчацца ў целе html-дакумента):

const div = document.createElement('div');

// стварэнне блока

div.innerText = 'Hello, world!';

// даданне тэксту ў блок

document.body.append(div);

// размяшчэнне блока ў целе

Вынік працы скрыпту аналагічны працы наступнага html-кода:

<div>Hello, world!</div>

Прыклад 23.4. Выкарыстанне ключавога слова this у апрацоўшчыку падзей для змены колеру тэксту.

<p style = "font-size: 16pt"

  onmouseover =

      "this.style.color='red'"

  onmouseout =

      "this.style.color = ''">

 Тэкст становіцца чырвоным <br>

 пры навядзенні паказальніка мышы <br>

 і чорным пры вывядзенні <br>

  паказальніка за межы тэксту

</p>

Прыклад 23.5. Выкарыстанне ключавога слова this у апрацоўшчыку падзей для замены аднаго малюнка іншым.

Html-код:

<img src = "cat_l.jpg"

  onmouseover =

       "this.src = 'cat.jpg'"

  onmouseout =

    "this.src = 'cat_l.jpg'">

Рэалізацыя падзей:

а) паказальнік мышы па-за малюнка

б) паказальнік мышы на малюнку

Прыклад 23.6. Выкарыстанне функцыі getElementById() і падзеі onclick.

Скрыпт:

function ch_Clr(newColor)    {

 var m =

 document.getElementById("z1");

 m.style.color = newColor;   }

Html-код:

<h1 id = "z1">Я мяняю колер</h1>

<button onclick =

            "ch_Clr('blue');">

  Сіні

</button>

<button onclick =

             "ch_Clr('red');">

 Чырвоны

</button>

Старонка пасля загрузкі:

Рэалізацыя падзей: