Печатать книгуПечатать книгу

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

Сайт: Профильное обучение
Курс: Інфарматыка. 11 клас (Павышаны ўзровень)
Книга: § 23. Элементы JavaScript для стварэння вэб-старонак
Напечатано:: Гость
Дата: Воскресенье, 28 Апрель 2024, 22:04

Оглавление

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>

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

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

23.2. Форма. Элементы кіравання

Адзін з асноўных элементаў ўзаемадзеяння паміж карыстальнікам і вэб-старонкай — форма.

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

Складаюцца формы з аднаго або некалькіх элементаў кіравання і некаторых дадатковых элементаў для структуравання формы. Элементамі формы могуць быць аднарадковыя або шматрадковыя тэкставыя палі, выпадаючыя спісы, кнопкі, флажкі, пераключальнікі:

  1. Аднарадковае тэкставае поле(text).
    Валодаюць уласцівасцямі: name (імя аб'екта); value (уведзены тэкст); defaultValue (тэкставы радок, зададзены па змоўчанні). Адразу пасля адлюстравання поля рэдагавання ўласцівасці defaultValue і value захоўваюць аднолькавыя радкі.
    Метады: focus() — перадае фокус уводу полі рэдагавання (поле становіцца актыўным, уключаецца тэкставы курсор, чакаецца ўвод тэксту); blur() — выключае фокус; select() —  вылучае змесціва поля.
  2. Кнопкі (button, reset, submit).
    Валодаюць уласцівасцямі: name (імя аб'екта); value (надпіс на кнопцы). Метад: click() — выклік гэтага метаду тоесны пстрычцы мышшу па кнопцы.
  3. Флажок (checkbox).
    Акрамя ўласцівасцей name і value, валодае ўласцівасцю checked (стан сцяжка: true — флажок устаноўлены, false — флажок не ўстаноўлены).
    Метад: click() — выклік гэтага метаду змяняе стан флажка.
  4. Пераключальнік (radio).
    Валодае ўласцівасцямі name, value і checked, а таксама ўласцівасцю length (колькасць пераключальнікаў у групе).
    Метад: click() — выклік метаду ўключае пераключальнік.
  5. Выпадальны спіс(select).

Большасць элементаў формы ствараюцца тэгам <input>. Выгляд элемента вызначае значэнне асноўнага атрыбута type тэга <input> . Разгледзьце прыклады 23.7 — 23.9.

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

Праверка даных формы (валідацыя формы) дазваляе пераканацца ў тым, што форма запоўнена правільна. У прыкладзе 23.10 па націску на кнопку «Проверить» у дыялогавае акно выводзіцца паведамленне аб стане флажка.

Прыклад 23.7. Заданне элементаў кіравання з дапамогай тэга <input>.

1) Тэкставае поле:

<input type = "text"

       size = "40">

2) Кнопка:

<input type = "button">

3) Пераключальнікі:

<input type = "radio">

4) Флажкі:

<input type = "checkbox">
Прыклад 23.8. Стварэнне формы з тэкставым полем і кнопкай.

1) Html-код:

<form name = "calc">

<p>Колькі будзе 97 + 16?</p>

  <input type = "text"

         name = "rez">

  <input type = "button"

         value = "Готово"

         onClick = "check();">

</form>

2) Скрыпт:

function check(){

 if (calc.rez.value == "113")

      alert("Правільна!");

 else alert("Няправільна!");

}

3) Старонка з варыянтамі запаўнення тэкставага поля і дыялогавыя вокны з адпаведным вынікам:

Прыклад 23.9. Стварэнне формы з флажком і кнопкай.

1) Html-код:

<form name = "f">

  Флажок

  <input type = "checkbox"

         name = "c">

  <p>

  Стан флажка можна<br>

 змяніць і гэтай кнопкай

  </p>

  <input

   type = "button"

   value = "Змена стану"

   onclick =

     "document.f.c.click();">

</form>

2) Старонкі з флажком у розных станах:

Прыклад 23.10. Праверка стану флажка.

1) Скрыпт:

function click() {

 if(document.f.ch.checked==false)

   alert("Калі ласка, адзначце

                    згоду");

 else

   alert("Ваша згода

                     прынята");

2) Html-код:

<form name = "f">

  <div>

    Валідацыя формы дазваляе

    пераканацца ў тым, што

    форма запоўнена правільна!

  </div>

  Согласен

  <input type = "checkbox"

         name = "ch">

  <br>

  <input type = "button"

         value = "Проверить"

         onclick = "click();">

</form></form>

23.3. Выкарыстанне элементаў кіравання на вэб-старонках

Пры распрацоўцы дынамічных старонак досыць часта ўзнікае неабходнасць хаваць і паказваць розныя элементы. Рабіць гэта даводзіцца па самых розных прычынах. Напрыклад, ёсць кнопка, якая павінна быць бачнай пры праглядзе сайта на мабільным устройстве і схаванай пры выкарыстанні камп'ютара.

Пераключэнне паміж утойваннем і адлюстраваннем можна ўстанавіць для любога блокавага элемента (<div>, <h1>-<h6>, <p>, <form> і інш.). Дасягаецца змена бачнасці элемента за кошт змены css-уласцівасці display. Калі display = "block", то элемент будзе бачным, калі display = 'none', — скрыты.

Разгледзьце прыклад 23.11.

Вызначэнне каардынат паказальніка мышы адносна акна браўзера надзвычай запатрабавана пры стварэнні дынамічных вэб-старонак. Каардынаты паказальніка патрэбныя ў праграміраванні гульняў, пры маштабаванні элемента ўнутры зададзенай вобласці і г. д.

Пры апрацоўцы такіх падзей, як перасоўванне паказальніка мышы, могуць спатрэбіцца дэталі таго, што адбылося (напрыклад, каардынаты паказальніка). У гэтым выпадку, калі адбываецца падзея, браўзер стварае аб'ект падзеі (event), запісвае ў яго дэталі і перадае яго ў якасці аргумента функцыі-апрацоўшчыка.

Прыклад 23.12 дэманструе атрыманне каардынат мышы з аб'екта падзеі.

Прыклад 23.11. Змена бачнасці блока па кліку на кнопку.

1) Html-код:

<button onclick =                     "myFunction()">

 Націсніце

</button>

<div id = "my">

 Тут можа быць любы кантэнт

</div>

2) Скрыпт:

function myFunction() {

var x =

document.getElementById ("my");

if (x.style.display === "none") {

/* параўнанне без пераўтварэння тыпаў */

  x.style.display = "block"; }

else {

  x.style.display = "none";  }

}

3) Вынік:

Прыклад 23.12. Вызначэнне перамяшчэння курсора.

1) Стылёвае апісанне:

html, body {

  margin: 0;

/*Прыбіраем водступы на старонцы*/

}

#crd {

  background: #333;

  color: #fff;

  padding: 8px;

}

2) Скрыпт (у загалоўку html-дакумента):

function m_Crd(e) {

 x = e.pageX;

 y = e.pageY;

 document.getElementById("crd")

               .innerHTML =

   "X : " + x + ", Y : " + y;

}

3) Html-код:

<body onmousemove =

               "m_Crd(event)">

  <div id = "crd">&nbsp;</div>

</body>

Пытанні да параграфа

1. Якія аб'екты браўзера выкарыстоўваюцца ў скрыптах?

2. Метады якога аб'екта дазваляюць ствараць і змяняць элементы вэб-старонак?

3. Што называецца падзеяй? Прывядзіце прыклады падзей.

4. Што такое апрацоўшчык падзей?

5. Якое ключавое слова паказвае на аб'ект, да якога ўжываецца падзея?

6. Функцыя якога аб'екта вяртае спасылку на элемент па яго ідэнтыфікатары? Назавіце гэтую функцыю.

7. Што такое форма на вэб-старонцы?

8. Якія аб'екты могуць быць элементамі формы?

9. З дапамогай якога тэга ствараецца большасць элементаў формы?

10. Як можна рэалізаваць змену бачнасці элемента на вэб-старонцы?

Практыкаванні

 

1. Стварыце вэб-старонку, на якой рэалізуйце праверку ведання геральдычных сімвалаў Беларусі (напрыклад, малюнкаў гербаў абласных цэнтраў). Аформіце старонку так, як паказана ва ўзоры. Змясціце на старонку малюнак і форму з тэстам, тэкставым полем і кнопкай. Пры ўводзе ў тэкставае поле адказу на пытанне, пацверджанне яго правільнасці павінна з'яўляцца ў дыялогавым акне. Выканаць заданне вам дапамогуць фрагменты кода, у якіх трэба запоўніць пропускі ў адпаведнасці з каментарыямі (пазначаныя чырвоным).

HTML:

<body>

  <div   >

    <form  >

      <p>У якога абласнога цэнтра Беларусі такі герб?

      </p>

      <input >

      <!-- тэкставае поле -->

      <input   >

      <!-- кнопка з апрацоўшчыкам падзеі -->

    </form>

  </div>

</body>

JS:

// аб'явіце масіў з назвамі абласных цэнтраў             

var numb = Math.floor(Math.random() * 6 + 1);

/* numb захоўвае нумар малюнка, які адпавядае часткі імені файла */

      var im =  ;

// сфарміруйце імя файла малюнка (нумар + пашырэнне)

var insert = "<img class = \"pic\" src = \"" + im + "\">";

document.write(insert);

function  імя функцыі {

        if (умова супадзення адказу з назвай горада)

          // вывад у дыялогавае акно

      }

CSS: размясціце малюнак і форму па цэнтры старонкі.

Узор:

2. Стварыце вэб-старонку, якая апісвае адну са славутасцей Беларусі. Аформіце вэб-старонку так, як паказана ва ўзоры. На старонцы павінен быць адзін схаваны блок. Для афармлення выкарыстоўвайце адпаведныя малюнкі. Для гэтага:

  1. Дадайце тэгі, неабходныя для карэктнага адлюстравання вэб-старонкі ў браўзеры. Дадайце загаловак старонкі (тэг <title>), у якім пакажыце назву дакумента і прозвішча аўтара, напрыклад:
    Гервяты: работа Янкоўскага Яна.
  2. Прымяніце стылёвае апісанне для загалоўка дакумента (тэг <h1>). Справа ад загалоўка дадайце малюнак gray.gif, які будзе спасылкай на сайт vandrouka.by. Пры навядзенні мышы малюнак павінен мяняцца на active.gif.
  3. Вылучыце абзацы ў тэксце з дапамогай тэга <p>.
  4. Усё афармленне павінна быць зроблена з дапамогай стылявых апісанняў у файле z2.css, а скрыпты захаваны ў файле z2.js.
  5. Замяніце верхнія двукоссі на «ёлочки» (выкарыстоўвайце спецзнакі).
  6. Замяніце ўсюды, дзе трэба, звычайныя прабелы на непарыўныя, і знакі «мінус» — на працяжнік; зрабіце так, каб працяжнікі не адрываліся ад папярэдніх слоў (выкарыстоўвайце спецзнакі працяжніка і непарыўнага прабелу).
  7. Зрабіце блок, які плавае і змяшчае фота з подпісам. Подпіс павінна быць набрана шрыфтам без засечак (sans-serif), курсівам, памер 80 % ад памеру шрыфта асноўнага тэксту, знешніх водступаў (margin) няма.
  8. Аформіце схаваны блок, які ўключае тэкст, які апісвае якой-небудзь фрагмент славутасці. Прысвойце гэтаму блоку імя (id), устанавіце наступнае афармленне: колер фону #eeeeff; рамка сіняя, суцэльная, таўшчынёй 1px; водступы па баках 10px.
  9. У схаваны блок дадайце укладзены блок, які плавае і змяшчае фота фрагмента славутасці з подпісам. Афармленне подпісу павінна быць такое ж, як і для блока, які плавае, у бачным блоку (пункт 7).
  10. Стварыце апрацоўшчык падзей да тэксту «каталіцкая царква Святой Тройцы», які рэалізуе адлюстраванне схаванага блока на старонцы па пстрычцы па гэтым тэксце.
  11. Змясціце ў схаваны блок тэкставую спасылку (або кнопку) з тэкстам «Згарнуць», якая пры пстрычцы хавае блок.
  12. Унізе старонкі дадайце форму з тэкстам (пытаннем аб славутасці), тэкставым полем для ўводу адказу і кнопкай Адказаць. Вылучыце пытанне тлустым, ужыўшы стылёвае апісанне. Зрабіце так, каб пасля пстрычкі па кнопцы ў дыялогавым акне ў залежнасці ад адказу выводзілася паведамленне Правільна ці Няправільна.
  13. *Прымяніце да блокавых элементаў тэхналогіі Flexbox. (Вывучыце самастойна — https://tproger.ru/translations/how-css-flexbox-works/ .) Змяніце памеры акна браўзера. Пераканайцеся, што вёрстка адаптыўная.

3. 

Поўная версія (разгорнуты выгляд):