10. Подключение JavaScript к гипертекстовой странице

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

  1. Испытательный стенд Написать функцию putTable для построения HTML-кода таблицы (элемента TABLE), заданной двухмерным массивом. Использовать функцию putTable для построения приведённого ниже документа в окне браузера.

    Файл 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>

    <H2>Первая таблица</H2>

    <SCRIPT type="text/javascript">
      document.write(putTable(
                               [
                                 ["Страна","Площадь (в тыс. кв. км)"],
                                 ["Франция", 551],
                                 ["Испания", 503.5],
                                 ["Швеция", 450],
                                 ["Италия", 301],
                                 ["Греция", 131.9]
                               ]
                              ));
    </SCRIPT>

    <H2>Вторая таблица</H2>

    <SCRIPT type="text/javascript">
      document.write(putTable(
                               [
                                 ["Число","Квадрат", "Корень квадратный"],
                                 [0, 0, 0],
                                 [1, 1, 1],
                                 [2, 2*2, Math.sqrt(2)],
                                 [3, 3*3, Math.sqrt(3)],
                                 [4, 4*4, Math.sqrt(4)],
                                 [5, 5*5, Math.sqrt(5)]
                               ]
                              ));
    </SCRIPT>
  </BODY>
</HTML>

    Файл main.js 

    
// Построение кода таблицы  
// Функция возвращает строку, содержащую HTML-код таблицы
// m -- двухмерный массив -- содержимое ячеек таблицы по строкам
// Первая строка задает заголовки столбцов 
function putTable(m)
{
 ...
}
    Решение

    praxis/10/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>

    <H2>Первая таблица</H2>

    <SCRIPT type="text/javascript">
      document.write(putTable(
                               [
                                 ["Страна","Площадь (в тыс. кв. км)"],
                                 ["Франция", 551],
                                 ["Испания", 503.5],
                                 ["Швеция", 450],
                                 ["Италия", 301],
                                 ["Греция", 131.9]
                               ]
                              ));
    </SCRIPT>

    <H2>Вторая таблица</H2>

    <SCRIPT type="text/javascript">
      document.write(putTable(
                               [
                                 ["Число","Квадрат", "Корень квадратный"],
                                 [0, 0, 0],
                                 [1, 1, 1],
                                 [2, 2*2, Math.sqrt(2)],
                                 [3, 3*3, Math.sqrt(3)],
                                 [4, 4*4, Math.sqrt(4)],
                                 [5, 5*5, Math.sqrt(5)]
                               ]
                              ));
    </SCRIPT>
  </BODY>
</HTML>

    Файл main.js 

    
// Построение кода таблицы  
// Функция возвращает строку, содержащую HTML-код таблицы
// m -- двухмерный массив -- содержимое ячеек таблицы по строкам
// Первая строка задает заголовки столбцов 
function putTable(m)
{
  var str = "<TABLE border=1 cellspacing=0 cellpadding=10>";
  var numRow = m.length;
  var numColumn = m[0].length;
  for(var i=0; i<numRow; i++)
  {
    str += "<TR>";
    for(var j=0; j<numColumn; j++)
    {
      str += i ? "<TD>" : "<TH>";
      str += m[i][j];
      str += i ? "</TD>" : "</TH>";
    }
    str += "</TR>";
  }
  str += "</TABLE>";
  return str;
}

  2. Испытательный стенд Построить вариант примера 6 (добавление нумерованных абзацев в конец документа), реализуя обработчик события (щелчок на кнопке) при помощи замыкания. Замыкание вводится ради сохранения локальной переменной counter (счётчик абзацев) в объекте вызова функционального литерала, возвращающего обработчик события onclick. Ниже приводятся HTML-файл и заготовка JavaScript-файла.

    Файл 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>
    <BUTTON id="button">Добавить абзац к документу</BUTTON>
  </BODY>
</HTML>

    Файл main.js 

    
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  // Назначить обработчик события onclick элементу с id="button"
  document.getElementById("button").onclick = addP;
}
// Обработчик события onclick на элементе id="button"
var addP = ...
    Решение

    praxis/10/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">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Пример</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример</H1>
    <BUTTON id="button">Добавить абзац к документу</BUTTON>
  </BODY>
</HTML>

    Файл main.js 

    
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
// и построения его объектной модели 
window.onload = function ()
{
  // Назначить обработчик события onclick элементу с id="button"
  document.getElementById("button").onclick = addP;
}
// Обработчик события onclick на элементе id="button"
// Функция addP задается вычислением функционального литерала
var addP = function ()
{
  var counter = 1; // Счетчик абзацев 
  // Возвращаем функцию, которая будет служить обработчиком события onclick
  return function ()
  {
    // Создадим элемент "абзац"
    var el = document.createElement("p");
    // Добавим к созданному элементу потомка -- текстовый элемент 
    el.appendChild(document.createTextNode("Абзац номер "+(counter++)+"."));
    // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
    document.body.appendChild(el);
  }  // Выполним литерал, и он вернет обработчик, который
}(); // образует замыкание (вместе с локальной переменной counter)

  3. Испытательный стенд Ниже приводятся коды приложения, в котором картинка «выплывает» из-под левой границы окна при попадании указателя мыши на видимую часть картинки. Как только курсор уходит с картинки, она возвращается на прежнее место.

    Приложение состоит из 4 файлов:

    • index.htm — содержание
    • main.css — представление
    • main.js — поведение
    • pic.jpg — картинка

    praxis/10/jobs/03/01/index.htm

    Упражнение 1

    Проверьте работу приложения и разберитесь в кодах, которые его реализуют.

    Файл 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">
    <META http-equiv="imagetoolbar" content="no">
    <LINK rel="stylesheet" type="text/css" href="main.css">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Живая картинка</TITLE>
  </HEAD>
  <BODY>
    <H1>Живая картинка</H1>

    <P>
<IMG class="pic" id="pic1" 
     src="pic.jpg" width=269 height=270 border=0
     alt="Портрет с высунутым языком" 
     title="Портрет с высунутым языком">
    </P>
  </BODY>
</HTML>

    Файл main.css 

    
.pic
{
  position: relative; 
  left:-200px;
}

    Файл main.js 

    
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
window.onload = function ()
{
  // Назначить обработчики событий для onmouseover и onmouseout 
  document.getElementById("pic1").onmouseover = setEH.show;
  document.getElementById("pic1").onmouseout = setEH.hide;
}

// Определяем единственное глобальное имя кода
var setEH = 
{
  left:-200,             // Смещение "задвинутой" картинки
  timer:null,            // Таймер
  showPic: function (id) // Установить смещение left картинки id
           {             // Картинка отображается в новых координатах
             document.getElementById(id).style.left=setEH.left+"px";
           }
};

// Обработчик события onmouseover (указатель мыши находится на элементе)
setEH.show = function ()
{
  setEH.id = this.id; // В обработчике события ключевое слово this 
                      // указывает на элемент, который вызвал событие.
                      // Сохранили идентификатор элемента, который вызвал
                      // событие. 

  if (!setEH.timer)   // Если таймера еще нет, создать таймер
    setEH.timer = setInterval( 
      function () // Функция будет запускаться каждые 10 миллисекунд
      {
        if (setEH.left < 0)  // Если смещение еще не достигло нуля
        {                    // увеличить его на 10 и показать 
          setEH.left += 10;  // картинку в новом положении
          setEH.showPic(setEH.id);
        }  
      }, 10); 
}

// Обработчик события onmouseout (указатель мыши выходит за элемент)
setEH.hide = function ()
{
  if (setEH.timer) // Если таймер есть, уничтожить его 
  {                // и задвинуть картинку за границу окна
    clearInterval(setEH.timer);
    setEH.timer = null;
    setEH.left  = -200;
    setEH.showPic(setEH.id);
  }
}

    Упражнение 2

    Построить приложение, в котором задано несколько картинок с аналогичным поведением. Картинки в HTML-коде погружены в абзацы, которые следуют друг за другом: 

    
    <P>
<IMG class="pic" id="pic0" 
     src="pic.jpg" width=269 height=270 border=0
     alt="Портрет с высунутым языком" 
     title="Портрет с высунутым языком">
    </P>
    <P>
<IMG class="pic" id="pic1" 
     src="pic.jpg" width=269 height=270 border=0
     alt="Портрет с высунутым языком" 
     title="Портрет с высунутым языком">
    </P>
    ...

    Абзацы с картинками должна строить функция setEH.putPics(n). Аргумент n задает число картинок. Таким образом, HTML-код должен иметь вид:

    Файл 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">
    <META http-equiv="imagetoolbar" content="no">
    <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">
      document.write(setEH.putPics(5)); // Показ 5 картинок на странице
    </SCRIPT>
  </BODY>
</HTML>
    Решение

    praxis/10/jobs/03/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">
    <META http-equiv="imagetoolbar" content="no">
    <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">
      document.write(setEH.putPics(5)); // Показ 5 картинок на странице
    </SCRIPT>
  </BODY>
</HTML>

    Файл main.css 

    
.pic
{
  position: relative; 
  left:-200px;
}

    Файл main.js 

    
// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки документа 
window.onload = function ()
{
  // Назначить обработчики событий для onmouseover и onmouseout 
  for(var i=0; i<setEH.n; i++)
  {
    document.getElementById("pic"+i).onmouseover = setEH.show;
    document.getElementById("pic"+i).onmouseout = setEH.hide;
  }
}

// Определяем единственное глобальное имя кода
var setEH = 
{
  left:-200,             // Смещение "задвинутой" картинки
  timer:null,            // Таймер
  showPic: function (id) // Установить смещение left картинки id
           {             // Картинка отображается в новых координатах
             document.getElementById(id).style.left=setEH.left+"px";
           }
};

// Построение кода с n-картинками
setEH.putPics = function (n)
{
  setEH.n = n; // Запомним число картинок 
  var str = "";
  for(var i=0; i<n; i++)
     str += '<P><IMG class="pic" id="pic'+i+ '"' +
                    ' src="pic.jpg" width=269 height=270 border=0'+
                    ' alt="Портрет с высунутым языком"'+ 
                    ' title="Портрет с высунутым языком"></P>';
  return str;
}

// Обработчик события onmouseover
setEH.show = function ()
{
  setEH.id = this.id; // В обработчике события ключевое слово this 
                      // указывает на элемент, который вызвал событие.
                      // Сохранили идентификатор элемента, который вызвал
                      // событие. 

  if (!setEH.timer)   // Если таймера еще нет, создать таймер
    setEH.timer = setInterval( 
       function () // Функция будет запускаться каждые 10 миллисекунд
       {
         if (setEH.left < 0)  // Если смещение еще не достигло нуля
         {                    // увеличить его на 10 и показать 
           setEH.left += 10;  // картинку в новом положении
           setEH.showPic(setEH.id);
         }  
       }, 10); 
}

// Обработчик события onmouseout
setEH.hide = function ()
{
  if (setEH.timer) // Если таймер есть уничтожить его 
  {                // и задвинуть картинку
    clearInterval(setEH.timer);
    setEH.timer = null;
    setEH.left  = -200;
    setEH.showPic(setEH.id);
  }
}