Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Другое / Другие методич. материалы / Комплект лабораторных работ по основам HTML и Jawa Script
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Другое

Комплект лабораторных работ по основам HTML и Jawa Script

Выбранный для просмотра документ Lab1 (HTML).doc

библиотека
материалов

Лабораторная работа № 1

Основы языка HTML. Создание Web-сайта

    1. Создание простейшей Web-страницы.

  1. Запустите текстовый редактор Блокнот:

Пуск → Программы → Стандартные → Блокнот.

  1. Введите следующий текст:

Заголовок документа

Содержание

документа

  1. Сохраните этот документ под именем first.htm.

Замечание. Перед сохранением убедитесь, что сброшен флажок «Не показывать расширения» для зарегистрированных типов файлов. В про­тивном случае редактор Блокнот может автоматически добавить в конец имени рас­ширение .txt.

  1. Запустите программу Internet Explorer:

ПускПрограммы → Internet Explorer.

  1. Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.

  2. Посмотрите, как отображается этот файл - простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содер­жимое элемента BODY?

  3. Как отображаются слова «Содержание» и «документа», введенные в двух отдель­ных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.

    1. Изучение приемов форматирования абзацев.

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега .

  3. Существует шесть уровней заголовков, которые обозначаются H1..H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево (LEFT), по центру (CENTER) или вправо (RIGHT).

  4. Введите заголовок первого уровня, заключив его между тегами

    и .
  5. Введите заголовок второго уровня, заключив его между тегами

    и .
  6. Введите заголовок первого уровня, заключив его между тегами

    и .
  7. Введите заголовок первого уровня, заключив его между тегами

    и .
  8. Введите заголовок первого уровня, заключив его между тегами

    и .
  9. Введите заголовок первого уровня, заключив его между тегами

    и .
  10. Введите отдельный абзац текста, начав его с тега

    . Пробелы и символы пере­вода строки можно использовать внутри абзаца произвольно.
  11. Введите тег горизонтальной линейки .

  12. Введите еще один абзац текста, начав его с тега

    .
  13. Сохраните этот документ под именем paragraph.htm.

  14. Запустите обозреватель Internet Explorer.

  15. Дайте команду Файл →Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.htm.

  16. Посмотрите, как отображается этот файл. Установите соответствие между эле­ментами кода HTML и фрагментами документа, отображаемыми на экране.

    1. Создание гиперссылок.

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега .

  3. Введите фразу: Текст до ссылки.

  4. Введите тег: <А HREF="first.htm">.

  5. Введите фразу: Ссылка.

  6. Введите закрывающий тег А>.

  7. Введите фразу: Текст после ссылки.

  8. Сохраните документ под именем link.htm.

  9. Запустите обозреватель Internet Explorer.

  10. Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл link.htm.

  11. Убедитесь в том, что текст между тегами <А> и А> выделен как ссылка (цветом и подчеркиванием).

  12. Щелкните на ссылке и убедитесь, что при этом загружается документ, на кото­рый указывает ссылка.

  13. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к пре­дыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

  14. Снова откройте доку­мент link.htm в программе Блокнот и удалите весь текст, находящийся между тегами <BODY> и

  15. После тега введите:

Перейти в конец документа

.
  1. Начните новый абзац, вставьте фрагмент текста, а затем введите:

Перейти в начало документа.
  1. Сохраните документ под тем же именем.

  2. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов.

  3. Щелкните на каждой из ссылок и убедитесь, что при этом происходит переход в конец или начало документа соответственно.


    1. Создание изображения и использование его на Web странице

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега .

  3. В тег добавьте атрибут: bgcolor="GREEN".

  4. Введите произвольный текст (протяженностью 4-5 строк) и установите тек­стовый курсор в его начало.

  5. Введите тег treug1.gif.

  6. Сохраните документ под именем picture.htm.

  7. Запустите обозреватель Internet Explorer.

  8. Дайте команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

  9. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.

  10. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов.

  11. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.

  12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов.

  13. Вернитесь в программу Блокнот и добавьте в тег атрибуты: HSPACE=40 VSPACE=20. Сохраните файл под тем же именем.

  14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов.

  15. Вернитесь в программу Блокнот и измените имя рисунка на treug2.gif". Сохра­ните файл под тем же именем.

  16. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атри­бутов. В чем различие между двумя рисунками?


    1. Приемы форматирования текста.

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку-мент first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега .

  3. Введите тег . Он задает вывод текста по умолчанию увеличенным шрифтом типа Courier красным цветом.

  4. Введите произвольный абзац текста, который будет выводиться шрифтом, задан­ным по умолчанию. Начните этот абзац с тега <Р>.

  5. Введите теги: <Р> .

  6. Введите очередной абзац текста, закончив его тегом .

  7. В каждом следующем абзаце используйте парные теги:

  • <В> (полу­жирный шрифт);

  • (курсив);

  • (подчеркивание);

  • (вычеркивание);

  • (нижний индекс);

  • (верхний индекс);

  • Изменение направления текста ;

  • <MARQUEE behavior="alternate"> Бегущая строка (вправо-влево)marquee>;

  • Бегущая строка (вправо)

  1. Сохраните полученный документ под именем format.htm.

  2. Запустите обозреватель Internet Explorer.

  3. Дайте команду Файл → Открыть. Щелкните на кнопке Обзор и откройте файл format.htm.

  4. Изучите, как использованные элементы HTML влияют на способ отображения текста.

  5. Вернитесь в программу Блокнот и измените документ так, чтобы элементы, за­дающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

  6. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.


Таблица 1.1. Стандартные цвета

hello_html_1f3269f4.png


Тhello_html_m53163cf.pngаблица 1.2. Градации красного цвета










Тhello_html_m150d09e5.pngаблица 1.3. Градации зеленого цвета










Тhello_html_m6da69eb1.pngаблица 1.4. Градации красного цвета











    1. Приемы создания списков.

  1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега .

  3. Вставьте в документ тег

    , который создает упорядоченный (нуме­рованный) список.
  4. Вставьте в документ элементы списка, предваряя каждый из них тегом

  5. .
  6. В первый тег

  7. вставьте атрибут
VALUE=2.

Завершите список при помощи тега

.

Сохраните полученный документ под именем list.htm.

Запустите обозреватель Internet Explorer .

Дайте команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл list.htm.

Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE. Что определяет атрибут VALUE?

Вернитесь в программу Блокнот и установите текстовый курсор после оконча­ния введенного списка.

Вставьте в документ тег

, который начинает неупорядо­ченный (маркированный) список.

Вставьте в документ элементы списка, предваряя каждый из них тегом

.

Завершите список при помощи тега . Сохраните документ под тем же именем.

Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE.

Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

Вставьте в документ тег

, который начинает список определений.

Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом .

Вставьте в список соответствующие определения, предваряя их тегом .

Завершите список при помощи тега . Сохраните документ под тем же именем.

Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.


    1. Создание таблиц.

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега . В данном упражнении используется список номеров телефонов.

  3. Введите тег

    .
  4. Введите строку: <CAPTION АLIGN="ТОР">Список телефоновСАРТION>.

  5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

    <TR BGCOLOR="YELLOW" ALIGN="CENTER"> <ТН>Фамилия<ТН>Номер телефона

    1. Определите последующие строки таблицы, предваряя каждую из их тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.

    2. Введите строку: <TR><TD ALIGN="CENTER" COLSPAN="2"> Ha 1-м этаже есть телефон-автомат.

    3. Завершите таблицу тегом

    .

Сохраните документ под именем table.htm.

Запустите обозреватель Internet Explorer.

Дайте команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл table.htm.

Изучите, как созданная таблица отображается в программе Internet Explorer. Что определяют атрибуты BORDER, WIDTH, COLSPAN (или ROWSPAN)?

Измените ширину окна обозревателя и установите, как при этом изменяется таблица.


    1. Создание описания фреймов.

  1. Запустите текстовый редактор Блокнот.

  2. Введите следующий текст:

Описание фреймов

  1. Сохраните этот документ под именем frames.htm.

  2. Запустите обозреватель Internet Explorer.

  3. Дайте команду Файл Открыть. Щелкните на кнопке Обзор и откройте файл frames.htm.

  4. Изучите представление нескольких созданных ранее документов, в отдельных фреймах.

  5. Посмотрите, что происходит при изменении ширины окна обозревателя.

  6. Проверьте, можно ли изменить положение границ фреймов методом перетас­кивания при помощи мыши.

  7. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

  8. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу на нарушает структуру фреймов.

  9. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

  10. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.


Исследовательская работа

Задание 1. Исследование методов создания абзацного отступа в документах HTML. Язык HTML не содержит «официальных» средств для создания абзацных отступов. Все браузеры, предназначенные для вывода текста на экран компьютера, выводят текст без отступа, вставляя пустую строку между отдельными абзацами. Создание абзацного отступа, таким образом, требует использования специальных приемов.

  1. Запустите текстовый редактор (например, Блокнот) и начните создание доку­мента HTML. Введите теги структурных элементов и дайте документу заголовок, например Имитация абзацных отступов.

  2. Введите небольшой абзац текста, который будет использоваться как эталон. Сохраните документ.

  3. Откройте обозреватель Internet Explorer и откройте в нем созданный документ. Отрегулируйте ширину окна программы так, чтобы исследуемый абзац занимал несколько строк. Убедитесь, что он выводится без отступа.

  4. Добавление пробелов. Вернитесь к редактированию документа. Разместите после эталонного абзаца горизонтальную линейку (тег <HR>). Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца несколько пробелов. Сохраните документ.

  5. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмотри­те на добавленный абзац. Объясните, почему создать абзацный отступ таким образом не удается.

  6. Метод элемента списка. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопи­рованного абзаца тег <DD>. Сохраните документ.

  7. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ. Правильно ли используется код HTML в полученном документе? Можно ли рекомендовать такой метод создания абзацного отступа? Почему?

  8. Метод неразрывных пробелов. Вернитесь к редактированию документа. Размес­тите после последнего абзаца горизонтальную линейку (тег <HR>). Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца несколько раз комбинацию символов &nbsp;. Сохраните документ.

Комбинации символов, начинающиеся со знака «&» (амперсанд) и заканчивающиеся точкой с запятой, служат в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML (например, «<»). Комбинация  ; задает неразбивающий пробел.

  1. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ. Можно ли рекомендовать такой метод создания абзацного отступа? Почему?

  2. Метод предварительно отформатированного текста. Вернитесь к редактирова­нию документа. Разместите после последнего абзаца горизонтальную линейку. Скопируйте эталонный абзац через буфер обмена, поместив копию ниже линей­ки. Добавьте в начало скопированного абзаца тег <PRE>, задающий предвари­тельно отформатированный текст, и несколько пробелов. В конце абзаца добавьте тег . Сохраните документ.

  3. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ. Обратите внимание на способ обработки пробелов и символов конца строки в предвари­тельно отформатированном тексте. В чем особенность используемого метода? Выскажите свое мнение об использовании этого метода создания абзацного отступа.

  4. Метод невидимого изображения. Вернитесь к редактированию документа. Раз­местите после последнего абзаца горизонтальную линейку. Скопируйте эталон­ный абзац через буфер обмена, поместив копию ниже линейки. Добавьте в начало скопированного абзаца тег <IMG>, укажите используемый файл изображения и задайте отступ по горизонтали в 10 пикселов (HSPACE="10"). Файл изображе­ния должен представлять собой картинку в формате GIF, состоящую из одного пиксела (1х1), заданного прозрачным цветом. Сохраните документ.

  5. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить. Посмот­рите на добавленный абзац. Убедитесь, что появился абзацный отступ.

  6. Проанализируйте все использованные методы и выскажите свое мнение о прин­ципиальной целесообразности их использования и о том, какой из них наиболее удобен.

14


Выбранный для просмотра документ Lab2 (JS).doc

библиотека
материалов

Лабораторная работа № 2

Знакомство с языком JAVA SCRIPT.

Программирование линейных и ветвящихся алгоритмов

    1. Составить и отладить программу для вычисления по указанной формуле. Значения переменных, указанных в правой части, ввести с клавиатуры, результат вывести на экран. Выполнить проверку правильности.


Math. Значения переменных, указанных в правой части, ввести с клавиатуры, результат вывести на экран.


Math. Исходные данные вводятся с клавиатуры.


Выбранный для просмотра документ Lab3 (JS).doc

библиотека
материалов

Лабораторная работа № 3

Циклы в языке JAVA SCRIPT.

Операторы FOR и WHILE

    1. С помощью оператора цикла for напишите скрипты для решения следующих задач:

  1. Найти сумму hello_html_72b39181.gif.

  2. Найти hello_html_6094cdba.gif.

  3. Найти сумму первых 100 натуральных чисел, кратных 5.

  4. Найти сумму 10 случайных чисел из диапазона hello_html_15374b85.gif.

  5. Найти сумму 10 случайных четных чисел из диапазона hello_html_15374b85.gif.

  6. Найти пятый член последовательности: hello_html_m8266354.gif, hello_html_4f25202d.gif.

  7. Перевести двоичное число из 8 единиц в десятичную систему.

  8. Перевести шестнадцатеричное число из 8 единиц в десятичную систему.

  9. Перевести троичное число из 8 двоек в десятичную систему.

  10. Построить hello_html_m389b75b2.gif – значное число, в котором цифра на hello_html_16f3004b.gif месте определяется как последняя цифра число hello_html_baa90c0.gif.

  11. Построить hello_html_m389b75b2.gif – значное число, в котором цифра на hello_html_16f3004b.gif месте определяется как последняя цифра член последовательности hello_html_m2b291680.gif.

  12. Вывести число, все цифры которого удвоены по отношению к данному.

  13. Вывести число, цифры которого следуют в обратном порядке по отношению к данному.

    1. Выполнить задание 3.1. с помощью оператора while.

Выбранный для просмотра документ Lab4 (JS).doc

библиотека
материалов

Лабораторная работа № 4

Массивы в языке JAVA SCRIPT

Для работы с массивами в языке Java Script используется объект Array.

Создание экземпляра объекта:

  1. <Имя массива>=new Array () – пустой массив;

  2. <Имя массива>=new Array (element 1, element 2,..., element N) – массив, состоящий из элементов element 1, element 2, ..., element N.

Экземпляр также создается по умолчанию при таком описании переменной:

var WorkWeek = ["Понедельник", "Вторник", "Среда", "Четверг", "Пятница"];

Эта запись эквивалентна следующей:

var WorkWeek = new Array ("Понедельник", "Вторник", "Среда", "Четверг", "Пятница");

Нумерация элементов массива начинается с нуля. Для доступа к отдельным элементам массива используют конструкцию:

<Имя массива>[индекс]

Свойства объекта Array

Cвойство

Описание

length

Длина массива (число элементов в массиве).

var set=new Array(0,1,2,3,4,5,6,7,8,9,10);

alert(set.length);

Методы объекта Array

concat(array)

Возвращает массив, полученный добавлением массива array. Исходный массив не меняется.

Пример:

var set1 = new Array (1,2);

var set2 = new Array (3,4);

var set = set1.concat(set2);

alert(set1+"\n"+set2+"\n"+set);

Метод concat работает только в браузерах, версия которых выше 3.

reverse()

Изменяет порядок следования элементов массива.

var set = new Array (1,2,3);

set.reverse();

slice(ind1,ind2)
slice(ind1)

Возвращает массив, полученный «вырезанием» из исходного массива части с позиции ind1 по позицию ind2-1, т.е. вырезаются элементы с set[ind1] по set[ind2-1]. Исходный массив не меняется.

  • Если ind2 меньше нуля, то отсчет последнего участника выделения ведется с конца массива. Вырезаются элементы с set[ind1] по set[set.length-ind2-1].

  • Если ind2 опущен, выделение продолжается до конца массива, т.е. вырезаются элементы с set[ind1] по set[set.length-1].

Метод slice работает только в браузерах, версия которых выше 3.

sort(function)

sort()

Сортировка массива. Параметром является имя функции, которая задает правила сравнения двух элементов. Если параметр опущен, элементы сортируются в лексикографическом порядке.

Функция function должна содержать два аргумента и возвращать:

  • отрицательное число, когда первый аргумент считается расположенным левее второго в смысле определяемого порядка;

  • 0, когда аргументы считаются равнозначными в смысле определяемого порядка;

  • положительное число, когда первый аргумент считается правее второго в смысле определяемого порядка.

Пример.

var set = new Array (26,71,9,1);

function Compare(a,b)

{

return a-b;

}

set.sort(Compare);

alert(set);

Пример. Составить программу для нахождения максимального элемента.

var num = 10;

var a = 1;

var b = 100;

var set = new Array();

for (i=0;i<=num;i++)

set[i]=Math.round(a+(b-a)*Math.random())-50;

var max = a;

for (i=0;i<=num;i++)

if (set[i]>max) max=set[i];

alert ("Массив: "+set+"\n"+" Max="+max);

Задания для выполнения по вариантам:

  1. Создать массив, содержащий фамилии студентов подгруппы. Удалить из него фамилии студентов, стоящие на нечетных вариантах, подсчитать размер полученного массива и отсортировать его по возрастанию.

  2. Создать массив, содержащий фамилии студентов подгруппы. Удалить из него фамилии студентов, стоящие на четных вариантах, подсчитать размер полученного массива и отсортировать его по убыванию.

  3. Создать массив, содержащий названия факультетов университета, находящихся в главном корпусе. Добавить к нему элементы, содержащие названия факультетов, находящихся в других корпусах. Отсортировать массив по возрастанию.

  4. Создать массив из строк, содержащий названия факультетов университета, исключить из него факультеты, расположенные в главном корпусе. Определить размер полученного массива и отсортировать его по убыванию.

  5. Создать массив, состоящий из названий предметов на 4 курсе. Исключить из него предметы, связанные с кафедрой ИПМ. Найти размер полученного массива и отсортировать его по возрастанию.

  6. Создать массив, состоящий из названий предметов, сдаваемых в зимнюю сессию на 4 курсе. Добавить к нему названия предметов, сдаваемых в летнюю сессию. Определить размер полученного массива и отсортировать его по убыванию.

  7. Создать массив, содержащий названия элементов, находящихся в системном блоке компьютера. Добавить к нему массив, содержащий названия периферийных устройств. Определить размер полученного массива и отсортировать его по убыванию.

  8. Создать массив, содержащий названия рек Европейской части России. Исключить из него реки, текущие на север. Определить размер полученного массива и отсортировать его по убыванию.

  9. Создать массив, содержащий фамилии преподавателей кафедры математического анализа. Добавить к нему фамилии преподавателей кафедры ИПМ. Определить размер полученного массива и отсортировать его по убыванию.

  10. Создать массив, содержащий фамилии преподавателей кафедры ИПМ. Исключить из списка ассистентов. Определить размер полученного массива и отсортировать его по возрастанию.

  11. Создать массив, содержащий название столиц Европы. Исключить названия столиц Западной Европы. Определить размер полученного массива и отсортировать его по убыванию.

  12. Создать массив, содержащий фамилии студентов группы. Исключить из него студентов, не получающих стипендию. Определить размер полученного массива и отсортировать его по возрастанию.

  13. Создать массив, содержащий названия языков программирования. Исключить объектно-ориентированные языки. Определить размер полученного массива и отсортировать его по убыванию.

4


Выбранный для просмотра документ Lab5 (JS).doc

библиотека
материалов

Лабораторная работа № 5

Создание объектов в Java Script

Способы создания объектов в Java Script

  1. Объект определяется функцией (функция-конструктор объекта), в теле которой описываются все свойства и методы создаваемого объекта. Имя функции-конструктора является одновременно и именем создаваемого объекта. Свойства и методы объекта задаются с помощью операторов присваивания. При этом имена переменных-свойств записываются с ключевым словом this.

Описание функции в Java Script имеет следующий синтаксис:

Function имя функции (параметры)

{

команды

}

Если требуется, чтобы функция возвращала некоторое значение, то в ее теле используется оператор возврата return.

Пример создания функции:

// Вывод случайного целого числа x из диапазона [a,b]

Function rnd(a,b)

{

return Math.round(a + (b-a)*Math.random());

}

var x = rnd(1,2);

alert(x);

Пример создания объекта с помощью функции:

Function car (name, model, color)

{

this.name = name

this.model = model

this.color = color

}

Создание конкретного экземпляра объекта:

Mycar = new car(Ока, ВАЗ1111, white)


  1. Объекты можно создавать с помощью конструктора new Object().

Пример создания объекта:

Mycar = new Object()

Mycar.name= Ока

Mycar.model = ВАЗ1111

Mycar.color = white

Задания для выполнения по вариантам:

Создать объект с заданными свойствами и определить методы:

  1. Объект – обыкновенная дробь.

Свойства: числитель, знаменатель.

Методы:

  1. сокращение дроби;

  2. перевод дроби в десятичную дробь;

  3. выделение целой части.

  1. Объект – вектор.

Свойства: координаты начала, координаты конца.

Методы:

  1. нахождение проекции вектора на ось hello_html_fbf90c6.gif;

  2. нахождение длины вектора;

  3. нахождение модуля вектора.

  1. Объект – комплексное число.

Свойства: действительная и мнимая части.

Методы:

  1. нахождение модуля числа;

  2. нахождение комплексно-сопряженного числа;

  3. запись числа в тригонометрической форме.

  1. Объект – цилиндр.

Свойства: радиус основания, высота.

Методы:

  1. нахождение объема цилиндра;

  2. нахождение площади основания цилиндра;

  3. нахождение площади боковой поверхности цилиндра.

  1. Объект – калькулятор.

Свойства: цифра 0, цифра 1,.., цифра 9.

Методы:

  1. сложить;

  2. вычесть;

  3. умножить;

  4. разделить.

  1. Объект – трапеция.

Свойства: основание 1, основание 2, высота.

Методы:

  1. нахождение средней линии трапеции;

  2. нахождение площади трапеции.

  1. Объект – окружность.

Свойства: координаты центра, радиус.

Методы:

  1. нахождение длины окружности;

  2. нахождение площади круга;

  3. определение положения точки с координатами hello_html_39bd0abf.gif и hello_html_4afad5f8.gif относительно окружности.

  1. Объект – параллелепипед.

Свойства: сторона 1, сторона 2, сторона 3.

Методы:

  1. нахождение длины диагонали параллелепипеда;

  2. нахождение площади основания;

  3. нахождение объема параллелепипеда.

  1. Объект – треугольник.

Свойства: стороны треугольника.

Методы:

    1. периметр треугольника;

    2. площадь треугольника;

    3. радиус вписанной окружности.

  1. Объект – двузначное число.

Свойства: число десятков, число единиц.

Методы:

  1. нахождение числа по его модулю;

  2. разложение числа на простые множители.

  1. Объект – целое число из интервала hello_html_m4722978c.gif.

Свойства: значение, знак.

Методы:

  1. нахождение модуля числа;

  2. вычисление факториала от модуля числа;

  3. разложение числа на простые множители.

  1. Объект – многочлен.

Свойства: коэффициенты hello_html_6edb6be1.gif, hello_html_50cbc880.gif, hello_html_m4ebd63c.gif.

Методы:

  1. нахождение корней многочлена;

  2. разложение многочлена на множители.

Пример (Вариант 12, Primer5 (Object).htm):

<script language=JavaScript>

function polinom(a,b,c)

{

this.x=a;

this.y=b;

this.z=c;

D=this.y*this.y-4*this.x*this.z;

if (D>0)

{

this.koren1=((-1)*this.y+Math.sqrt(D))/(2*this.x);

this.koren2=((-1)*this.y-Math.sqrt(D))/(2*this.x);

this.razl=this.x+"*(x-"+this.koren1+")(x-"+this.koren2+")";

}

else

{

this.koren1=(-1)*this.y/(2*this.x);

this.koren2=this.koren1;

this.razl=this.x+"*(x-"+this.koren1+")^2"

}

}

var a2=1*prompt("Введите коэффициент при 2-й степени x", "1");

var a1=1*prompt("Введите коэффициент при x", "1");

var a0=1*prompt("Введите свободный член", "1");

if ((a1*a1-4*a2*a0)<0) alert("Многочлен не имеет действительных корней");

else

{

var P = new polinom(a2,a1,a0);

alert("Корни многочлена:"+"\n"+"x1="+P.koren1+"\n"+"x2="+P.koren2+"\n"+"Разложение многочлена:"+"\n"+P.razl);

}

5


Выбранный для просмотра документ Lab6 (Date).doc

библиотека
материалов

Лабораторная работа № 6

Объект Date

Объект Date используется для работы с датой и временем. Для создания экземпляров в языке Java Script используется ключевое слово new:

  1. var переменная = new Date();

  2. var переменная = new Date(year, month, day);

  3. var переменная = new Date(year, month, day, hours, minutes, seconds);

Экземпляр, созданный без использования параметров, содержит текущую дату и время. Параметры year, month, day, hours, minutes, seconds являются целыми числами и задают соответствующие части даты и времени. Если часы, минуты и секунды не заданы, то они устанавливаются в ноль.

Методы объекта Date Возвращает год. До 2000 года возвращает только две последние цифры.

var data = new Date();

var y = data.getYear();

alert(y);

setYear(year)

Устанавливает год

var data = new Date();

data.setYear(2000);

var y = data.getYear();

alert(y);

getMonth()

var data = new Date();

var m = data.getMonth();

alert(m);

getMonth(month)

Устанавливает месяц

var data = new Date();

data.setMonth(2);

var m = data.getMonth();

alert(m);

getDate()

Возвращает день месяца

var data = new Date();

var d = data.getDate();

alert(d);

setDate(day)

Устанавливает день месяца

var data = new Date();

data.setDate(5);

var d = data.getDate();

alert(d);

getDay()

Возвращает день недели (0 – воскресенье. 1 – понедельник,…, 6 - суббота)

var data = new Date();

var dn = data.getDay();

alert(dn);

getHours()

Возвращает час

var data = new Date();

var h = data.getHours();

alert(h);

setHours(hours)

Устанавливает час

var data = new Date();

data.setHours(20);

var h = data.getHours();

alert(h);

getMinutes()

Возвращает минуты

var data = new Date();

var mi = data.getMinutes();

alert(mi);

setMinutes(minutes)

Устанавливает минуты

var data = new Date();

data.setMinures(30);

var mi = data.getMinutes();

alert(mi);



Рассмотрим несколько простых скриптов с объектом Date.

Пример 1. Текущая дата и время

var now = new Date();

alert("Сегодн\я:"+now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getYear()+"\n"+"Сейчас:"+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds());

Пример 2. Число дней с начала года

//Текущая дата

var now = new Date();

//Начало текущего года

var begin = new Date(now.getYear(),0,1);

//Число миллисекунд от начала года

var d=now.getTime()-begin.getTime();

//Число миллисекунд в дне

var msDay=24*60*60*1000;

//Поделим на число миллисекунд в сутках

d/=msDay;

//Показать реультат

alert("Количество дней, пройденных с начала года:

"+Math.round(d));

Задания для выполнения по вариантам:

Используя методы объекта Date вычислить:

  1. Количество дней до следующего дня рождения;

  2. Количество дней от прошедшего дня рождения;

  3. Ближайший год, в котором день рождения приходится на воскресенье;

  4. Количество прожитых человеком дней;

  5. Количество дней, оставшихся до пенсии;

  6. Количество дней до нового года;

  7. Количество дней, оставшихся до окончания университета;

  8. Дату Пасхи в текущем году;

  9. Количество дней между двумя датами;

  10. Количество дней до ближайшего юбилея.

Приложение

Алгоритм расчёта даты Пасхи для любого года

В качестве исходных данных используем единственное значение
Year
- год от Рождества Христова

Результатом получим число
Day
и номер месяца
Month (целые числа)

Введем функцию
mod(X, Y)
- остаток от целочисленного деления
X на Y (результат - целое число)

Рассчитаем вспомогательные значения:
A=mod(Year, 19)
B=mod(Year, 4)
С=mod(Year, 7)
D=mod((19*A+15), 30)
E=mod((2*B+4*C+6*D+6), 7)

Если
(D+E) <= 9
то
Month=3 и Day=22+D+E
иначе
Month=4 и Day=D+E-9

Если
Month=4 и Day=26
то
Day=19

Если
E=6 и Day=28
то
Day=18

Дата Пасхи (по старому стилю): Day, Month, Year.

5


Выбранный для просмотра документ Lab7 (CSS).doc

библиотека
материалов

Лабораторная работа № 7

Каскадные таблицы стилей

Стили можно определять тремя способами:

  1. Как свойство Style отдельного тега (Стиль для отдельного тега, Teg.htm).

  2. В тегах (Стиль для отдельного файла, File.htm).

  3. В отдельном файле (Стиль для нескольких файлов, Files.htm):

Пример 1. Создаем файл prim.css:

H1,H2,H3,H4,H5,H6

{

text-align:right;

color:green;

font-family:"Arial Cyr",Geneva,Helvetica,sans-serif;

}

В HTML-документе прописываем:

Задания (Комбинирование стилей):

  1. Создайте документ без css указаний.

  2. Сss указания в отдельном теге: первые два заголовка черным, 3-й красным.

  3. Css указания в head: первые два заголовка синим, 3-й красным.

  4. Css указания в css файле prim.css: первые два заголовка синим, 3-й красным.

  5. Измените код prim.css: первые два заголовка зеленые, 3-й красным.

Классы

Стилевые определения можно записывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами.

Пример 2 (Class.htm).

Классы

<H2>Классы (обычный заголовок)H2>

<P class=def>

Класс - стилевое определение без привязи к тегу.

<P>

Вместо указания тега записывается имя класса.

<P class=def>

Перед именем класса ставится точка.

BODY>

HTML>

Теги DIV и SPAN

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

Пример 3 (Div.htm).

Тег DIV

J26.jpg Где

<DIV class=area2>начало того конца,DIV>

<DIV class=area3>которым оканчивается начало?DIV>

Пример 4 (Span.htm).

Тег SPAN

J26.jpgГде

начало того конца,

которым оканчивается начало?

Позиционирование

Пример 5 (AbsPos.htm).

Абсолютное позиционирование

Абсолютное позиционирование

В этом примере картинка абсолютно позиционирована.

Она располагается в 100 пикселях по горизонтали и в 50 пикселях

по вертикали от начала документа.

Измените размеры окна и убедитесь, что картинка всегда остается

на прежнем месте.

nwe317.jpg

alt="Фламинго"

Courier New, monospace"> absolute;

;">

Пример 6 (SmeshPos.htm).

<HEAD>Смешанное позиционирование

Смешанное позиционирование

Таблица относительно позиционирована вправо

на 50 пикселей.

Внутри кода таблицы расположена картинка с относительным

позиционированием вниз на 100 пикселей.

width=80% bgcolor=#EEE5DB

>

nwe317.jpg

alt="Котята" align=left hspace=10

STYLE="

;">

Тег IMG размещается внутри таблицы.

Для картинки записано относительное позиционирование

вниз на 100 пикселей.

Z-индекс

Использование Z-индекса позволяет указывать в каком слое на экране находится элемент.

Пример 7 (Z-index.htm).

Z-index

Z-index

Этот текст основной. К нему не приписано никаких стилевых воздействий. Значит, этот текст лежит в нулевой плоскости.

Cats.jpg

alt="Котята" align= hspace=10

STYLE="

;z-index:-1;">

Dog.jpg

alt="Собака" align=left hspace=10

STYLE="

;z-index:-2;">

Выбранный для просмотра документ Lab8 (Forms).doc

библиотека
материалов

Лабораторная работа 8

Объекты браузера языка JAVA SCRIPT. Формы

Иерархия объектов в JavaScript

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна мы можем разместить документ HTML. Такая страница является объектом document. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На следующем рисунке иллюстрируется иерархия объектов, создаваемая некоторой HTML-страницей.

hello_html_4c672a4a.gif

Мы должны иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого мы должны знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Вы можете сами присваивать различным объектам уникальные имена. Как это делается:



Сообщение:

soob" value="привет">

...

Если, например, Вы хотите знать, какой текст ввел читатель в первый элемент формы, то получить доступ к этому объекту можно так:

document.myForm.soob.value (значение =”привет”)

Доступ к объектам

Объект Checkbox

Отмеченный элемент: Formname. Checkboxname.checked

Пример:

физика с1 checked>

математика с2 >

k=myForm.c1.checked (значение k= true)

Объект Select

Номер выбранного элемента списка (начиная с 0):

Formname.selectname.selectedindex

Пример:

Овощи:

редис

морковь

р=myForm.ovo.selectindex(значение р= 0)

g=myForm.ovo.[myForm.ovo.selectindex].text

(значение g=“редис”)

Объект Textarea

Значение в поле: Formname.Textareaname.Value

Пример:

О себе

q=myForm.ta.value (значение q= “О себе”)

Объект Radio

Отмеченный элемент:

Formname.Radioname[index].checked (index=0,1,…)

Пример:

Вариант I

Вариант II

s=myForm.r1(1).checked (значение s= true)

Формы

Формы применяются для опроса посетителей, покупки чего-либо, отправки электронной почты. Принцип работы форм следующий: посетитель, зашедший к вам на страничку, заполняет форму, а после нажатия определенной кнопки форма берет данные из заполненных полей и отправляет их в назначенное место.

Формы размещаются между тегами . HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег может содержать следующие атрибуты:

ACTION

Обязательный атрибут. Определяет, где находится обработчик формы.

METHOD

Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE

Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Для внесения информации пользователем в форму используется элемент . Это и есть поля, в которые пользователь вводит информацию. Каждый элемент включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы, применяемых элементов :

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах):

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст LENIN INC, который пользователь может изменить.

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов.

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:

Да
Нет
Возможно

hello_html_m2210de5d.gifДа
hello_html_m2210de5d.gifНет
hello_html_m71ac06c2.gifВозможно

Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible.

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

Процессоры
Видеоадаптеры
Сканеры
Модемы

hello_html_m4ca99315.gifПроцессоры
hello_html_m4ca99315.gifВидеоадаптеры
hello_html_m64fa00c7.gifСканеры
hello_html_m4ca99315.gifМодемы

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem.

TYPE=hidden

Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело.

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=submit

Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:

Отправить">

hello_html_m79cf62cb.gif

TYPE=reset

Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:

Сброс ">

hello_html_m15d22af6.gif


Зhello_html_4416e0cb.pngадание 1. Создайте форму следующего вида:











Текст документа:

Форма

Понравился ли вам этод Web-узел?

Да!!!

Нет...

Пожалуйста, опишите свои впечатления

Я хочу получать

Немедленно

Спустя трое суток

Через 20 минут

Никогда

уведомления об изменениях на Web-узле

Адрес моей электронной почты

Очистить форму">

Задание для выполнения по вариантам:

Создать форму, содержащую:

  • текстовое поле;

  • кнопку (CommandButton);

  • радиокнопку (OptionButton);

  • флажок (CheckBox);

  • список;

  • рисунок.

на тему:

  1. Объявление в газете;

  2. Контрольная работа по предмету;

  3. Прайс-лист торговой точки;

  4. Объявление о знакомстве;

  5. Расписание поездов (билет);

  6. Листовка предвыборной компании;

  7. Писатель репортажей;

  8. План урока;

  9. Теле(радио)передача;

  10. Денежная купюра;

  11. Рецензия на дипломную работу;

  12. Рекламный листок;

  13. Регистрационная карточка.

Примечание: При нажатии кнопки «ГОТОВО», программа должна выдать Web-страницу, содержащую информацию, которую пользователь ввел при заполнении формы.

8


Выбранный для просмотра документ Lab9 (Filter).doc

библиотека
материалов

Лабораторная работа № 9

Фильтры

Некоторые авторы выделяют фильтры в отдельный класс инструментов оформления HTML-страниц и это, в общем-то, правильно.

Фильтр – это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим и динамическим.

Статический фильтр преобразует элемент и после этого он отображается.

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

Фильтры применяются не ко всем элементам, а только к тем, которые определяют прямоугольный блок и не являются окнами.

Перечень элементов, к которым применяются фильтры

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

Формула записи кода при применении визуальных фильтров выглядит следующим образом:

STYLE="filter: Имя_Фильтра(параметр_1=значение_1,

...

параметр_N=значение_N)"

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

Если к элементу применяется несколько фильтров, они задаются в виде списка с пробелом в качестве разделителя.

Список фильтров

Размытие объекта. Возможные параметры:

- Add (добавить размытие со значениями 1 – да и 0 – нет):

- Direction (угол направления размытия со значением от 0 до 315, где шаг равен 45;

- Strength (назначение числа пикселей на квадратный дюйм).

Chroma

Прозрачность для конкретного цвета RGB, где в параметре указывается такой цвет.

DropShadow

Эффект сложной тени для элемента. Параметры:

- Color (цвет в RGB);

- OffX (смещение в px по оси X);

- OffY (смещение по оси Y);

- Positive - создание тени по характеру пикселей (значение 1 – для видимых и 0 – для невидимых).

FlipH

Разворачивание элемента по горизонтальной оси.

FlipV

Разворачивание элемента по вертикальной оси.

Glow

Сияющий эффект. Параметры:

- Color (цвет сияния в RGB);

- Strength (концентрация от 0 до 100).

Gray

Перевод элемента в черно-белый цвет.

Invert

Отображение элемента в негативе (инверсия цветов).

Light

Осветление элемента.

Mask

Назначение цвета для выделяемого объекта пользователем, где параметр Color – цвет в RGB.

Shadow

Простая тень для элемента. Параметры:

- Color (цвет в RGB);

- Direction (угол направления тени от 0 до 315 с шагом 45).

Redirect

Преобразует объект в объект DAImage, к которому можно применить все возможности технологии MS DirectAnimation.

RevealTrans

Показывает или скрывает объекты, используя 23 определенных в фильтре перехода

Xrey

Изменяет глубину цвета объекта и после этого отображает его в черно-белых тонах, имитируя рентгеновский снимок объекта

Wave

Эффект волны, можно присваивать следующие параметры:

- Add – добавлять (значение 1) или нет (0);

- Freq - число волн (знач. – целое число);

- LightStrength – амплитуда волн (знач. – от 0 до 100);

- Phase – угловое смещение волн (в %, где 100% = 360 град.);

- Strength – числовое значение интенсивности эффекта.

Общие свойства некоторых фильтров

  1. Каждый фильтр имеет свойство enabled, которое разрешает (значение true) или запрещает (значение false) применение присоединенного к обьекту фильтра.

  2. Свойство strenght фильтров blur, glow и wave определяет интенсивность применения соответствующего фильтра. Оно может принимать значения в пределах от 0 до 255.

  3. Свойство direction фильтров blur и shadow определяет направление, в котором размывается объект или падает тень. Значение этого свойства может задаваться любым числом, как положительным, так и отрицательным и определяет угол, отсчитываемый от вертикали объекта по часовой стрелке с шагом 45 градусов.

  4. Свойство color имеют фильтры, которые воздействуют на цветовую гамму элемента. Это фильтры chroma, dropShadow, glow, mask, shadow. Значение этого свойства задается шестнадцатиричным числом вида #RRGGBB или словом, например red, green и т.д.

Рассмотрим примеры использования фильтра BlendTrans.

Пример 1.

function startTrans()

{

if (SampleID.filters.blendTrans.status == 0){

SampleID.filters.blendTrans.Apply();

SampleID.style.visibility =

(SampleID.style.visibility == "hidden")?"visible":"hidden";

SampleID.filters.blendTrans.Play()

}

}

onclick="startTrans()">

Щелкните на изображении

background-color:blue; color:yellow; text-align:center; filter:blendTrans(duration=1);

visibility:visible"

onclick="startTrans()">

Щелкните на изображении

div>

<BR>

<body>

html>


Пример 2.

var fRunning = 0

function startTrans()

{

if (fRunning == 0)

{

fRunning = 1

img.filters.blendTrans.Apply();

img.src = "1.jpg";

img.filters.blendTrans.Play()

}

}

2.jpg

style="filter:blendTrans(duration=8); width: 400; height: 250;"

onclick="startTrans()">

Задание

Возьмите картинку и примените к ней все возможные фильтры.

Автор
Дата добавления 24.11.2016
Раздел Другое
Подраздел Другие методич. материалы
Просмотров60
Номер материала ДБ-388122
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх