- •Лабораторный практикум
- •Лабораторная работа №1 Основы разметки гипертекста html
- •Введение
- •Заголовки
- •Оформление текста
- •Создание списков
- •Гиперссылки
- •Задание2.
- •Задание 3
- •Изображения в html-документе
- •Задание 1.
- •Лабораторная работа №2 Создание таблиц в html-документах
- •Создание таблицы
- •Задание
- •Контрольные вопросы.
- •Лабораторная работа №3 Каскадные таблицы стилей
- •Введение
- •Внутренние таблицы стилей.
- •Встроенные таблицы стилей.
- •Структура правила.
- •Селекторы классов.
- •Универсальные селекторы.
- •Комментарии css.
- •Объединение css и html.
- •Элемент style.
- •Директива @import.
- •Задание 1.
- •Задание 2.
- •Задание 3.
- •Стандартные имена для фреймов
- •Специальные эффекты, получаемые с помощью атрибута target
- •Задание
- •Контрольные вопросы
- •Лабораторная работа №5 Формы
- •Введение
- •Элементы ввода данных
- •Многострочный текст, атрибуты текстовых элементов
- •Альтернативная кнопка, перегрузка атрибутов формы
- •Выбор из списка
- •Генерирование открытого и секретного ключей
- •Другие элементы форм
- •Атрибуты элементов ввода
- •Задание.
- •Контрольные вопросы.
- •Лабораторная работа №6 Объектно Ориентированное Программирование в JavaScript.
- •Основные понятия:
- •Объект.Метод("параметры метода")
- •Значение по умолчанию
- •Применяется к тегам
- •Событие onchange
- •Событие onclick
- •Событие ondblclick
- •Задание №1
- •Размещение JavaScript на html-странице
- •Типы данных
- •Объявления переменных
- •Переменные
- •Типы переменных
- •Массивы
- •Объекты JavaScript
- •Объект Array
- •Оператор цикла
- •Условные операторы
- •Объектная модель JavaScript
- •Объекты и Свойства
- •Функции и Методы
- •Определение Методов
- •Создание Новых Объектов
- •Использование this для Ссылок Объекта
- •Объектная модель браузера
- •Объект window
- •Лабораторная работа № 8 Изучение языка php
- •Общие правила построения php-программы
- •Задание
- •1. Вывод на экран и переменные в рнр.
- •2. Передача параметров по ссылке, передача параметров из формы (get и post -- запросы).
- •3. Динамическое формирование страницы.
- •4. Работа с файлами.
- •Лабораторная работа № 10 Работа вебсайта
- •Как еще можно прописать сайт в Денвере?
- •Лабораторная работа № 11 Файловый ввод/вывод
- •1) Классическая модель веб-приложения
- •2) Модель ajax
- •Лабораторная работа №12 Внедрение рисунков
- •1. Основные положения
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •С помощью свойства lineCap можно оформлять кончики линии
- •Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Пример 3 использования изображения
- •Пример галереи
- •Разрезание изображений
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в JavaScript. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Javascript графика: Объект Image.
Пожалуй, одной из самых интерестных и зрелищных сфер использования языка JavaScript является работа с графикой. Использование JS позволяет добиться действительно красивых эффектов и некоторые из них мы рассмотрим с вами в этом уроке:
Вся работа с графикой в JavaScript опирается на объект image, который обладает следующими свойствами:
border
complete
height
hspace
name
src
vspace
width
lowsrc
Для начала, рассмотрим пример:
<HTML>
<HEAD>
<title>Scroll text</title>
</HEAD>
<BODY>
<center>
<A HREF="javascript:void(0);" onClick="window.alert('картинка называется:'+ document.arbuz.name)">
<IMG SRC=Arbuz-100x100.jpg NAME=arbuz width="100" height="100" BORDER=0>
</A>
</BODY>
</HTML>
В данном примере мы создаем простую картинку средствами HTML и присваиваем ей некоторое имя. Далее делаем ее ссылкой, при нажатии на которую JS выдаст окно предупреждения с именем этой картинки.
Тоже самое только с использованием функции
<HTML>
<HEAD>
<title>Scroll text</title>
<script>
function namePicture(){
alert('картинка называется:'+ document.arbuz.name)
}
</script>
</HEAD>
<BODY>
<center>
<img onclick="namePicture()" src="Arbuz-100x100.jpg" NAME=arbuz width="100" height="100" BORDER=0>
</BODY>
</HTML>
Javascript графика: src и lowsrc.
Свойства src и lowsrc позволяют определить адреса изображений, используемых на странице, причем src отвечает за адрес картинки, которая будет использованна после полной загрузки, а lowsrc – за адрес картинки, которая будет показанна во время загрузки основной.
Програмист в любой момент может изменить адрес картинки используя следующий JavaScript код:
document.i2.src="new_image.gif";
где i2 – идентификатор изображения на странице, а "new_image.gif" – url адрес нового изображения
Изменение картинки.
Мы можем в реальном времени изменять картинки на странице путем присваивания атрибуту src различных значений.
Одним из наиболее распространенных способов использования этого приема является замена картинки при наведении курсора мыши:
<A HREF="javascript:void(0)"; onMouseover="document.im0.src='../img/DELENIE.png'; return true;" onMouseout="document.im0.src='../img/POLOSA_1.png'; return true;">
<IMG NAME=im0 SRC="../img/POLOSA_1.png" border=0>
</A>
Теперь при наведении мыши на изображение, оно в реальном времени будет заменено на другое и наоборот. Подобный прием используется для создания объемных эффектов, динамических интерфейсов и дружелюбных меню навигации средствами JS.
Мультипликация в JavaScript. Мультипликация.
Мультипликация JS позволяет создавать достаточно интерестные эффекты. Для мультипликации нам потребуется уже хорошо нам знакомый метод Window — setTimeout().
Теперь нам осталось определиться только со способом запуска мультипликации. Запустить мультипликацию можно любым из известных нам обработчиков событий (onLoad(); onClick();), перехватом URL и многими другими способами.
Запуск мультипликации
Сама по себе мультипликация является простой заменой картинок, происходящей по определенному условию.
Как всегда небольшой пример:
<script> i=1;
function run1(){
eval("document.i2.src='
../img/run"+i+".gif'");
i++;
if(i>3) i=1;
setTimeout("run1();",500);
}
</script> <a href="
javascript:run1();void(0);">
<img name="i2" src="
../img/run1.gif">
</a>
В нашем примере используется небольшой скрипт с условием, который при вызове начинает динамически заменять одно изображение другим с задержкой в 500 мс. Когда происходит 3я замена счетчик замен обнуляется и устанавливается изначальное изображение и т.д. до бесконечности.