Контрольные задания

11. Объектная модель документа. Ранняя упрощенная модель

Контрольные задания

Создать скрипт в файле main.js, который выводил бы в многострочное поле TEXTAREA пронумерованный список всех ссылок текущего документа. Файл index.htm менять не разрешается.

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Список всех ссылок документа</TITLE>
  </HEAD>
  <BODY>
    <H1>Список всех ссылок документа</H1>
    
    <FORM name=forma>
      <TEXTAREA name=list rows=8 cols=72 readonly></TEXTAREA>
    </FORM>

    <P>
<A href="01.htm">Первая ссылка</A> 
    </P>
    
    <UL>
      <LI>
<A href="http://www.w3.org/TR/2007/CR-CSS21-20070719/">CSS2.1</A>
      <LI>
<A href="http://www.w3.org/TR/html401/">HTML 4.01</A>
      <LI>
<A href="http://www.htmlhelp.com/reference/html40/block.html"
   >Блочные элементы</A>
      <LI>
<A href="http://www.htmlhelp.com/reference/html40/inline.html"
   >Строчные элементы</A>
    </UL>

    <P>
<A href="02.htm">Последняя ссылка</A> 
    </P>

  </BODY>
</HTML>

Файл main.js


... Решение записывать здесь ...

Решение

praxis/11/jobs/01/index.htm

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Список всех ссылок документа</TITLE>
  </HEAD>
  <BODY>
    <H1>Список всех ссылок документа</H1>
    
    <FORM name=forma>
      <TEXTAREA name=list rows=8 cols=72 readonly></TEXTAREA>
    </FORM>

    <P>
<A href="01.htm">Первая ссылка</A> 
    </P>
    
    <UL>
      <LI>
<A href="http://www.w3.org/TR/2007/CR-CSS21-20070719/">CSS2.1</A>
      <LI>
<A href="http://www.w3.org/TR/html401/">HTML 4.01</A>
      <LI>
<A href="http://www.htmlhelp.com/reference/html40/block.html"
   >Блочные элементы</A>
      <LI>
<A href="http://www.htmlhelp.com/reference/html40/inline.html"
   >Строчные элементы</A>
    </UL>

    <P>
<A href="02.htm">Последняя ссылка</A> 
    </P>

  </BODY>
</HTML>

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  var str = "";
  for (var i=0; i<document.links.length; i++)
    str += Number(i+1)+ ". " + document.links[i].href + "\r\n";
  document.forma.list.value = str;
};

Электронный магазин представлен тремя файлами: index.htm, main.css и main.js. Допишите скрипт так, чтобы щелчок на флажке приводил к пересчету суммы в строке и пересчету итога в конце таблицы.

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <LINK rel="stylesheet" type="text/css" href="main.css">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Электронный магазин</TITLE>
  </HEAD>
  <BODY>
    <H1>Электронный магазин</H1>
    
    <SCRIPT  type="text/javascript">
      shop.showForma(); 
    </SCRIPT>

  </BODY>
</HTML>

Файл main.css


TABLE
{
  border-collapse:collapse;
  font-family: Arial,sans-serif;
  font-size:80%;
}
TABLE TH, TABLE .total
{
  border: 1px solid black;
  background:#ffffcc;
  text-align:left;
  vertical-align:top;
} 
.total {font-weight:bold;}
TABLE TD
{
  border: 1px solid black;
  text-align:left;
  vertical-align:top;
}

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  // Зарегистрируем обработчики событий (щелчок "в корзину")
  for(var i=0; i<shop.article.length; i++)
    document[shop.nameForm][shop.nameCheck+i].onclick = shop.changeTable;

  // Очистка формы при перезагрузке 
  document[shop.nameForm].reset();
};

/*.....................................................*/
var shop = {};  // Единственное глобальное имя скрипта
/*.....................................................*/

// Конструктор одной позиции товара
shop.item = function (title, price)
{
  this.title = title;
  this.price = price;
}; 

// Товары и цены
shop.article = [
  new shop.item("Важная птица",165),
  new shop.item("Выеденное яйцо",15),
  new shop.item("Гад ползучий",115),
  new shop.item("Жареный петух",671),
  new shop.item("Заблудшая овца",21),
  new shop.item("Лакомый кусок",55),
  new shop.item("Маковая росинка",46),
  new shop.item("Малая толика",3862),
  new shop.item("Саврас без узды",251),
  new shop.item("Фига с маслом",75),
  new shop.item("Яблоко раздора",62),
  new shop.item("Язык без костей",2)
               ];
// Имена: формы и ее элементов                    
shop.nameForm   = "forma";  // имя формы
shop.nameCheck  = "check";  // базовое имя для "в корзину" в строке
shop.nameSum    = "sum";    // базовое имя для суммы в строке
shop.nameTotal  = "total";  // имя для "итого"

// Функция, которая строит форму в окне браузера
shop.showForma = function ()
{
  var str = '<FORM name="'+shop.nameForm+'">';
  str +=      '<TABLE border=0 cellspacing=0 cellpadding=10>';   
  str +=        '<TR>';   
  str +=          '<TH>Наименование товара</TH>';   
  str +=          '<TH>Цена</TH>';   
  str +=          '<TH>В корзину</TH>';   
  str +=          '<TH>Сумма</TH>';   
  str +=        '</TR>';   
  for(var i=0; i<shop.article.length; i++) 
  {
    str +=      '<TR>';   
    str +=        '<TD>'+ shop.article[i].title +'</TD>';   
    str +=        '<TD><INPUT type=text size=5 readonly ' + 
                              'value="'+shop.article[i].price+'"></TD>';
    str +=        '<TD><INPUT type=checkbox ' + 
                              'name="'+shop.nameCheck+i+'"></TD>';
    str +=        '<TD><INPUT type=text size=7 value="0" readonly ' + 
                              'name="'+shop.nameSum+i+'"></TD>';
    str +=      '</TR>';   
  }
  str +=        '<TR class="total">';   
  str +=          '<TD colspan=3>Итого:</TD>';   
  str +=          '<TD><INPUT type=text size=7 value="0" readonly ' + 
                              'name="'+shop.nameTotal+'"></TD>';
  str +=        '</TR>';   
  str +=      '</TABLE>';   
  str +=    '</FORM>'; 
  document.write(str);
}; 
// Обработка изменений в таблице покупок
shop.changeTable = function ()
{
   // Решение записывается здесь
};

Решение

praxis/11/jobs/02/index.htm

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <LINK rel="stylesheet" type="text/css" href="main.css">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Электронный магазин</TITLE>
  </HEAD>
  <BODY>
    <H1>Электронный магазин</H1>
    
    <SCRIPT  type="text/javascript">
      shop.showForma(); 
    </SCRIPT>

  </BODY>
</HTML>

Файл main.css


TABLE
{
  border-collapse:collapse;
  font-family: Arial,sans-serif;
  font-size:80%;
}
TABLE TH, TABLE .total
{
  border: 1px solid black;
  background:#ffffcc;
  text-align:left;
  vertical-align:top;
} 
.total {font-weight:bold;}
TABLE TD
{
  border: 1px solid black;
  text-align:left;
  vertical-align:top;
}

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  // Зарегистрируем обработчики событий (щелчок "в корзину")
  for(var i=0; i<shop.article.length; i++)
    document[shop.nameForm][shop.nameCheck+i].onclick = shop.changeTable;

  // Очистка формы при перезагрузке 
  document[shop.nameForm].reset();
};

/*.....................................................*/
var shop = {};  // Единственное глобальное имя скрипта
/*.....................................................*/

// Конструктор одной позиции товара
shop.item = function (title, price)
{
  this.title = title;
  this.price = price;
}; 

// Товары и цены
shop.article = [
  new shop.item("Важная птица",165),
  new shop.item("Выеденное яйцо",15),
  new shop.item("Гад ползучий",115),
  new shop.item("Жареный петух",671),
  new shop.item("Заблудшая овца",21),
  new shop.item("Лакомый кусок",55),
  new shop.item("Маковая росинка",46),
  new shop.item("Малая толика",3862),
  new shop.item("Саврас без узды",251),
  new shop.item("Фига с маслом",75),
  new shop.item("Яблоко раздора",62),
  new shop.item("Язык без костей",2)
               ];
// Имена: формы и ее элементов                    
shop.nameForm   = "forma";  // имя формы
shop.nameCheck  = "check";  // базовое имя для "в корзину" в строке
shop.nameSum    = "sum";    // базовое имя для суммы в строке
shop.nameTotal  = "total";  // имя для "итого"

// Функция, которая строит форму в окне браузера
shop.showForma = function ()
{
  var str = '<FORM name="'+shop.nameForm+'">';
  str +=      '<TABLE border=0 cellspacing=0 cellpadding=10>';   
  str +=        '<TR>';   
  str +=          '<TH>Наименование товара</TH>';   
  str +=          '<TH>Цена</TH>';   
  str +=          '<TH>В корзину</TH>';   
  str +=          '<TH>Сумма</TH>';   
  str +=        '</TR>';   
  for(var i=0; i<shop.article.length; i++) 
  {
    str +=      '<TR>';   
    str +=        '<TD>'+ shop.article[i].title +'</TD>';   
    str +=        '<TD><INPUT type=text size=5 readonly ' + 
                              'value="'+shop.article[i].price+'"></TD>';
    str +=        '<TD><INPUT type=checkbox ' + 
                              'name="'+shop.nameCheck+i+'"></TD>';
    str +=        '<TD><INPUT type=text size=7 value="0" readonly ' + 
                              'name="'+shop.nameSum+i+'"></TD>';
    str +=      '</TR>';   
  }
  str +=        '<TR class="total">';   
  str +=          '<TD colspan=3>Итого:</TD>';   
  str +=          '<TD><INPUT type=text size=7 value="0" readonly ' + 
                              'name="'+shop.nameTotal+'"></TD>';
  str +=        '</TR>';   
  str +=      '</TABLE>';   
  str +=    '</FORM>'; 
  document.write(str);
}; 
// Обработка изменений в таблице покупок
shop.changeTable = function ()
{
  var total = 0;
  var form = document[shop.nameForm];
  for(var i=0; i<shop.article.length; i++) 
  {
    var s = form[shop.nameSum+i];
    s.value = form[shop.nameCheck+i].checked ? shop.article[i].price : 0;
    total += Number(s.value);
  }
  form[shop.nameTotal].value = total;
};