2. Завдання до лабораторної роботи.

Виконати одне з наступних завдань згідно варіанту:

1. Побудувати веб-сторінку з кнопками для знищення та додавання вузлів DOM.

2. Побудувати веб-сторінку з кнопками для модифікації існуючих вузлів DOM.

3. Побудувати веб-сторінку з кнопками для модифікації вузлів DOM введеним, отриманим чи згенерованим текстом.

4. Побудувати веб-сторінку з кнопками для модифікації таблиць даних додавання полів.

5. Побудувати веб-сторінку з кнопками для модифікації таблиць даних знищення полів.

6. Побудувати веб-сторінку з кнопками для модифікації типів шрифтів.

7. Побудувати веб-сторінку з кнопками для оновлення поля новин.

8. Побудувати алгоритм обходу дерева DOM і виведення ідентифікаторів вузлів.

9. Побудувати веб-сторінку з кнопками для модифікації гами кольорів фону.

10. Побудувати веб-сторінку з кнопками для модифікації гами кольорів тексту

3. Контрольні запитання.

1. Які стандартні глобальні об’єкти містить модель DOM?

2. Які є методи об’єкту window?

3. На які типи за змістом поділяють вузли дерева?

4. Які операції має можливість виконувати програміст на моделі DOM?

5. Які є методи для зміни структури дерева?

6. Якими методами здійснюється доступ до вузлів DOM за тегами чи ідентифікаторами?

Лабораторна робота № 2 Тема: Форма як елемент зв’язку з сервером Мета: Оволодіти засобами керування формами, внесення інформації для сервера на динамічній web-сторінці

1. Внесення та опрацювання даних на формі

Форма HTML містить групу елементів для приймання від користувача та пересилання даних у рядку запиту на Web-сервер. Ними є buttons, checkboxes, text fields, input etc.).

Важливий атрибут action вказує на URL сервера та програму на ньому для опрацювання даних запиту. Атрибут method вказує на вибір метода кодування даних : get чи post. Наведемо приклад тегу форми,

<form action="http://www.facerec.com/app.php" method="get">

<fieldset>

<label>Name: <input type="text" name="name" /></label>

<label>sex: <input type="text" name="sex" /></label>

<label>country?

<input type="checkbox" name="country" />

</label>

<input id="sbutton" type="submit" value="Send me your picture!"/>

<fieldset>

</form>

Для перевірки правильності внесених на форму даних використовуються скрипти JavaScript.

Наприклад, якщо при натисканні кнопки відсилання даних певне поле даних не заповнене, то запит не надсилається. Фрагмент коду для реалізації даного сценарію наведено нижче:

. . . . .

var submit = document.getElementById("sbutton");

submit.onclick = submitClick;

. . . . .

function submitClick(event) {

if (document.getElementById("name").value == "") {

event.preventDefault(); // відмінити submit

}

}

Кодом передбачається зупинка пересилання даних – preventDefault. (IE6 використовує return false; замість preventDefault).

Розглянемо приклад перевірки відсутності незаповненого поля, правильності формату електронної адреси.

У прикладі використано два поля для імені та адреси:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">

First name: <input type="text" name="fname">

Email: <input type="text" name="email">

<input type="submit" value="Submit">

</form>

Наступний код функції перевіряє правильність заповнення полів параметрами для передачі. Функція викликається при натисканні кнопки submit:

function validateForm()

{

var x=document.forms["myForm"]["fname"].value;

if (x==null || x=="")

  {

  alert("First name must be filled out");

  return false;

  }

var x=document.forms["myForm"]["email"].value;

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

  {

  alert("Not a valid e-mail address");

  return false;

  }

}

Для перевірки співпадіння введених значень паролю використовується наступна функція:

function PwdValidation()

{

  var frm = document.forms["myform"];

  if(frm.pwd1.value != frm.pwd2.value)

  {

    sfm_show_error_msg('The Password and verified password does not match!',frm.pwd1);

    return false;

  }

  else

  {

    return true;

  }

}