Правила игры

Разделы:

  1. Базовые знания JavaScript.

    Задачи:

    1. Создать документ с программным кодом, реализующим поворот матрицы произвольной размерности MxN по часовой стрелке. Параметры размерности матрицы M и N должны задаваться через форму. Исходное напонение ячеек матрицы - строки, вида "#столбца,#строки".
      Решение задачи включает вывод в составе документа исходной и повернутой матриц.

  2. Доступ/модификация CSS таблиц.

    Задачи:

    1. Создать документ в контексте которого найдется фрагмент, удовлетворяющий селектору синего цвета:
      H1.spec#sp EM B.ru {color:blue}

    2. Реализовать два стилевых класса отличающихся цветом шрифта. Написать скрипт реакции на события мыши mouseover, mouseout так, чтобы при пролете над контейнером с идентификатором первого класса этот контейнер и только он менял свой класс на второй на все время нахождения указателя мыши над контейнером.

    3. Написать скрипт, который для данного HTML документа выводит на экран все активные правила CSS таблиц для контекста экрана.
      Например для указанного документа

      <html> <head> <style MEDIA="screen"> h1 {color:blue; font-size:10pt; background-color:cyan} </style> <style MEDIA="screen" DISABLED> h4 {color:blue; font-size:10pt; background-color:cyan} </style> <style MEDIA="print"> h1 {color:gray; font-size:12pt; font-weight: bold} h2 {font-style:italic} </style> <style DISABLED> h2 {color:green; font-size:12pt} </style> <style> h3 {font-style:italic} </style> </head> <body> <h1>раз</h1> <h2>два</h2> <h3>три</h3> <hr> <script language="Javascript"> // ваш текст </script> </html> должно получиться следующее:

  3. Динамическое позиционирование

    Задачи:

    1. Написать скрипт, который меняет одну абсолютно позиционированную картинку другой с применением видио-эффектов замещения. Картинки сменяют одна другую через частичное перекрытие полей видимости. Для выполнения занания необходило использовать свойство CSS таблицы clip и события таймера. Должно получиться следующее:

  4. Динамическое изменение содержания документа.

    Задачи:

    1. Написать скрипт, который для данного HTML документа добавляет ссылки-сноски для тектовых контейнеров заданного класса на блок поясняющего текста в конце документа.
      Из вашего документа вида

      <html><head> <style> .ref {color:blue} </style> <script language="JScript"> XXXX </script> </head><body class="txt"> text text text text text text text text text text <span class="ref"> text text text </span> text text text text text text text text text text <em class="ref"> text text text </em> text text text text text text text text text text text text text text text text text text text text ........ <p><a name="ref" style="color:red"> It is the reference! </a></p> </body></html>

      Должно получиться следующее:

      text text text text text text text text text text
      text text text *
      text text text text text text text text text text
      text text text *
      text text text text text text text text text text
      text text text text text text text text text text

      It is the reference!

    2. Создать документ с программным кодом, реализующим функциональность редактора HTML документа с возможностью извлечения кода редактируемого документа с тегами разметки HTML.
      Редактируемыми параметрами гипертекста долны быть атрибуты жирности, курсива и подчеркивания.
      Изменение свойств выделенного текста должно задаваться нажатием кнопок , , с сихронным изменением их состояния в зависимости от текущего выделения в составе редактируемого текста.
      Реализуется только на IE через объект TextRange и атрибут ContentEditable.

  5. XSLT преобразования XML документов.

    Задачи:

    1. Написать XSLT преобразование XML документа вида:

      <bookstore> <author fn="Иван" ln="Иванов" > <books> <book title="Путешествия по стране дураков"/> <book title="Починка печи в домашних условиях"/> <book title="Перепрошивка скатерти-самобранки"/> ... </books> </author> <author fn="Семен" ln="Дивов" > <books> <book title="Смерть на взлете"/> ... </books> </author> ... </bookstore> HTML таблицу результата:
      AuthorsBooks
      Иван Иванов Путешествия по стране дураков
      Починка печи в домашних условиях
      Перепрошивка скатерти-самобранки
      Семен Дивов Смерть на взлете

    2. Для хорошо отформатированного XHTML документа написать XSLT преобразование, которое извлекает все теги img и проводит их обработку, собирая данные атрибутов в упорядоченную по алфавиту таблицу:
      Source(SRC) Alternative text (ALT) Reference to
      /pic/astro.jpg Flower
      /pic/beta.jpg Greek
      /pic/zero.gif Zero http://zero.com
      последний столбец заполняется лишь для случая, когда тег img находится внутри тега a.
      Возможный исходный файл:

      <html> <body> text <a href="http://zero.com"> text <img alt="Zero" src="/pic/zero.gif" /> text</a> text text text <img alt="Flower" src="/pic/astro.jpg" /> text text text text <img alt="Greek" src="/pic/astro.jpg" /> text text </html>

    3. Делает то же, что в п.a, но пустое поле в последнем столбце заполняется константным значением и окрашивается:
      Source (SRC) Alternative text (ALT) Reference to
      /pic/astro.jpg Flower not a reference
      /pic/beta.jpg Greek not a reference
      /pic/zero.gif Zero http://zero.com

    4. Преобразует последовательности вложений

      <ul> ... <li></li> <li>text1 <div>text2</div></li> <li>text3 <div>text4</div> text5 </li> <li>text6 <ul><li>text7</li></ul> </li> <li><div>text8 <ul><li>text9</li></ul></div></li> <li> ... <ol>...</ol> ... </li> ... </ul> в <ul> ... <li></li> <li>text1 <div>text2</div></li> <li>text3 <div>text4</div> text5 </li> <li><div>text6 <ul><li>text7</li></ul></div></li> <li><div>text8 <ul><li>text9</li></ul></div></li> <li><div> ... <ol>...</ol> ... </div></li> ... </ul> Иными словами, если внутри пункта упорядоченного или неупорядоченного списка встречается вложенный список любой природы (ul или ol), то весь контекст пункта должен быть заключен внутрь контейнера div. При этом повторное применение преобразования не должно приводить к двойной упаковке в li в div.

    5. Отобразить график котировок акций в HTML документе в векторной (SVG) и растровой(CANVAS) форме по данным из XML файла:

      <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="transform.xsl"?> <corporations> <corp color="black" name="Growing Business"> <month order="1" income="10"></month> <month order="2" income="20"></month> <month order="3" income="39"></month> <month order="4" income="42"></month> <month order="5" income="55"></month> <month order="6" income="60"></month> </corp> <corp color="blue" name="Stable Income"> <month order="1" income="25"></month> <month order="2" income="30"></month> <month order="3" income="18"></month> <month order="4" income="24"></month> <month order="5" income="32"></month> <month order="6" income="29"></month> </corp> <corp color="red" name="Miserable Corporation"> <month order="1" income="37"></month> <month order="2" income="28"></month> <month order="3" income="20"></month> <month order="4" income="14"></month> <month order="5" income="7"></month> <month order="6" income="1"></month> </corp> </corporations>

  6. Javascript objects.

    Задачи:

    1. Реализовать полнофункциональный JS объект двусвязного cписка с методами

      • добавления
      • удаления
      • поиска по обазцу
      • перебора

    2. Опционально: Реализовать JS объект красно-черного дерева (red-black tree) с методами

      • сбаллансированного добавления
      • поиска по обазцу
      • дампа содержимого дерева с визуализацией струкруры

Хороший справочник по XML: http://www.w3schools.com/

Сайт управляется системой uCoz