Function butStopTimer_onclick()
{
clearTimeout(timerID);
alert("Таймер сброшен");
}
</script>
</head>
<body onload="window_onload()">
<form name=form1>
<input type="button" value="Остановка таймера" name=butStopTimer onclick="return butStopTimer_onclick()">
</form>
</body>
</html>
Многоразовый таймер
Для установки многоразового таймера используют метод – setInterval(), для его сброса clearInterval(). Метод setInterval() принимает те же параметры, что и setTimeout(), только второй параметр теперь определяет интервал в миллисекундах между каждым сбрасыванием таймера. Например, чтобы установить таймер, который запускает функцию myFunction() каждые пять секунд, код должен быть следующим:
var myTimerID = setInterval (“ myFunction ()”, 5000);
Как и setTimeout(), метод setInterval() возвращает уникальный идентификатор таймера, который понадобиться, если вы хотите очистить таймер с помощью clearInterval():
clearInterval ( myTimerID );
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №11
НАИМЕНОВАНИЕ: Создание приложения с блоком тестирования
1. ЦЕЛЬ: Создание тестирующей программы средствами HTML и JavaScript, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6
2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Использование HTML – форм» и ответить на следующие вопросы:
2.1 Назначение элементов формы на веб - странице?
2.2 Какие элементы формы вам известны?
2.3 Обязательные теги для создания формы?
3. ЛИТЕРАТУРА:
3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.
|
|
|
3.2 https://learn.javascript.ru/form-elements - Работа с формами в JavaScript
4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Текстовый редактор
5. ЗАДАНИЕ:
5.1 Разработать веб – приложение по определенной тематике (тема выдается преподавателем), где должен быть размещен материал и вставлен блок тестирования. Тест состоит минимум из 10 вопросов, которые рассматриваются в представленном теоретическом материале.
5.2 Подключите таймер, чтобы на обдумывания над ответом отводилось секунд 30;
5.3. Результат выводился в виде оценки и надписи, количества не верных ответов.
61% правильных ответов – оценка «3»;
81% - оценка «4»;
100% - оценка «5»;
6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия и проверить соответствие с критериями оценивания, которые представлены в Приложении;
6.4 Дать ответы на контрольные вопросы.
7. СОДЕРЖАНИЕ ОТЧЕТА:
7.1 Наименование и цель работы
7.2 Готовое веб - приложение
7.3 Ответы на контрольные вопросы
7.5 Вывод о проделанной работе
8. КОНТРОЛЬНЫЕ ВОПРОСЫ:
|
|
|
8.1 Обязательные атрибуты элементов формы, чтобы осуществить связь с кодом JavaScript?
8.2 Каким образом подключается таймер к скрипту?
ПРИЛОЖЕНИЕ:
Критерии оценки:
Дизайн: (максимально 15 баллов)
| Аспект | Вес аспекта, балл | Начисляемый балл |
| Страницы приложения имеют одинаковый графический интерфейс (шапка, меню, контент, подвал) | 2 | |
| Общее впечатление о дизайне приложения | до 5 | |
| Оптимальное соотношение яркости (контраст) между текстом и фоном | до 4 | |
| Однородность текста и равномерность распределения пустых мест на всем сайте | 2 | |
| Материал соответствует теме задания | 2 |
Верстка: (максимально 15 баллов)
| Аспект | Вес аспекта, балл | Начисляемый балл |
| Применяется блочная верстка | 4 | |
| Подключение CSS – файла, посредством которого осуществляется оформление сайта | 4 | |
| Весь основной материал представлен локально (не в виде ссылок на внешние ресурсы) | 3 | |
| Наличие примеров с кодом не менее трех | 4 |
Программирование: (максимально 50 баллов)
| Аспект | Вес аспекта, балл | Начисляемый балл |
| Наличие блока тестирования | 5 | |
| Количество вопросов – не менее 10 (штраф за каждый не выполненный вопрос – 0, 25 баллов) | 10 | |
| Подключение таймера | 5 | |
| Вывод результата тестирования (статистика) | 3 | |
| Наличие в коде пояснений (комментариев) | 2 | |
| Все вопросы выводятся сразу | 10 | |
| Вопросы выводятся друг за другом, последовательно | 15 | |
| Отмечаются правильные/неправильные ответы | 10 |
Тестирование: (максимально 20 баллов)
|
|
|
| Аспект | Вес аспекта, балл | Начисляемый балл |
| Корректность (понятность) вопроса | До 5 | |
| Ответ на вопрос можно найти, опираясь на представленный материал | 5 | |
| Выбор одного варианта ответа (кнопки – переключатели) | 5 | |
| Наличие множественного варианта ответа или поля для ввода варианта ответа (другой вариант) | 5 |
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №12
НАИМЕНОВАНИЕ: Работа с Canvas
2. ЦЕЛЬ: Рисование графических объектов средствами JavaScript, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6
2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Canvas. Работа с графикой» и ответить на следующие вопросы:
2.1 Как организовать рабочую область для рисования?
2.2 Какие методы для рисования простейших объектов вам известны?
2.3 Какие свойства для работы с объектами вам известны?
|
|
|
3. ЛИТЕРАТУРА:
3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.
3.2 http://old.code.mu/books/javascript/canvas/osnovy-raboty-s-canvas-v-javascript.html - Основы работа с canvas в JavaScript
3.3 https://joompress.biz/animatsiya-sprajtov-v-html5-canvas/ - Анимация спрайтов
4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:
4.3 ПЭВМ, подключенные к сети Интернет
4.4 Текстовый редактор
5. ЗАДАНИЕ:
5.1 Организуйте холст для рисования, на котором разместите следующие нарисованные объекты:
- решетка (рисуется через объект линия);
- домик с окошком, который необходимо раскрасить;
- Смайл, также необходимо раскрасить;
5.2 Создать анимированный спрайт
7. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия
6.3 Дать ответы на контрольные вопросы.
7. СОДЕРЖАНИЕ ОТЧЕТА:
7.2 Наименование и цель работы
7.2 Выполненное задание
7.3 Ответы на контрольные вопросы
7.6 Вывод о проделанной работе
8. КОНТРОЛЬНЫЕ ВОПРОСЫ:
8.1 Синтаксис организации холста для работы с canvas?
8.2 Что такое спрайт, где они применяются?
ПРИЛОЖЕНИЕ:
Элемент canvas позволяет рисовать графические объекты и манипулировать ими. Определяется элемент на веб-странице следующим образом:
<body>
< canvas id =" myCanvas " width ="300" height ="200">
…
</canvas>
</body>
Для элемента canvas задаются ширина и высота, если не указывать эти атрибуты, то по умолчанию ширина составляет – 300px, а высота – 150px.
Все рисование на canvas производится с помощью кода JavaScript. Чтобы начать рисовать на canvas, надо получить его контекст:
let canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
Для получения контекста используется функция getContext("2d"). В данном случае получаем двухмерный контекст для создания двухмерной графики.
Рисование прямоугольников
Для рисования простейших фигур – прямоугольников, нам понадобятся три метода:
clearRect ( x , y , w , h ) – очищает определенную прямоугольную область, верхний левый угол которой имеет координаты x и y, ширина равна w, а высота h;
fillRect ( x , y , w , h ) – заливает цветом прямоугольник, верхний левый угол которой имеет координаты x и y, ширина равна w, а высота h;
strokeRect ( x , y , w , h ) – рисует контур прямоугольника без заливки его каким-то определенным цветом.
Настройка рисования
Контекст элемента canvas предоставляет ряд свойств, с помощью которых можно настроить отрисовку на canvas. К таким свойствам относятся:
strokeStyle – устанавливает цвет линии или цвет контура, по умолчанию черный;
fillStyle – устанавливает цвет заполнения фигур, по умолчанию черный;
В качестве значений этих двух свойств указывают название цвета.
linewidth – устанавливает толщину линий, по умолчанию1.0;
lineJoin – устанавливает стиль соединения линий. Может принимать следующие значения:
- miter – прямые соединения;
- round – закругленные соединения;
- bevel – конические соединения.
globalAlpha – устанавливает прозрачность отрисовки на canvas. Принимает в качестве значения число от 0 (полностью прозрачный) до 1.0 (не прозрачный);
setLineDash – создает линию из коротких черточек. В качестве параметра принимает массив чисел, которые устанавливают расстояние между линиями.
Рисование фигур
Элемент canvas позволяет рисовать и более сложные фигуры. Для этого используется концепция геометрических путей, которые представляют набор линий, окружностей, прямоугольников и более мелких деталей, которые необходимы для построения сложной фигуры.
Для создания нового пути надо вызвать метод beginPath(), а после завершения пути – метод closePath():
let canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
context.beginPath();
// здесь инструкции по созданию фигур
context.closePath();
Между вызовами данных методов находятся методы, непосредственно создающие различные участки пути.
Для начала рисования пути, надо зафиксировать начальную точку этого пути. Это делается с помощью метода moveTo(), который имеет следующее определение:
MoveTo ( x , y )
Метод перемещает нас на точку с координатами х и y.
Метод lineTo() рисует линию, определение у нее такое же как и у метода moveTo(). Метод рисует линию от текущей позиции до точки с координатами x и y.
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №13
НАИМЕНОВАНИЕ: Работа с библиотекой jQuery
1. ЦЕЛЬ: Изучение возможностей библиотеки jQuery, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6
2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Библиотека jQuery» и ответить на следующие вопросы:
2.1 Как можно подключить библиотеку jQuery?
2.2 Назначение библиотеки?
3. ЛИТЕРАТУРА:
3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.
3.2 http://old.code.mu/books/javascript/jquery/osnovy-raboty-s-jquery.html - Основы работа с jQuery
4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Текстовый редактор
5. ЗАДАНИЕ:
5.1 На веб странице поместите текст, состоящий из нескольких заголовков второго уровня и абзацев. Также на странице должен присутствовать список и некоторого числа позиций. Необходимо:
5.1.1 Во всех h2 поменять текст на Изучаем jQuery ! Цвет текста изменить, а также сменить размер шрифта;
5.1.2 Через alert вывести поочередно все пункты списка
6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия
6.3 Дать ответы на контрольные вопросы.
7. СОДЕРЖАНИЕ ОТЧЕТА:
7.1 Наименование и цель работы
7.2 Выполненное задание
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. КОНТРОЛЬНЫЕ ВОПРОСЫ:
8.1 С чего начинается работа с библиотекой jQuery?
8.2 Какие селекторы jQuery вам известны, перечислить?
ПРИЛОЖЕНИЕ:
jQuery представляет собой библиотеку JavaScript – набор готовых функций, которые помогают делать некоторые вещи проще и удобнее, чем это делается на числом JavaScript.
Для сравнения, первый код на чистом JavaScript, второй на jQuery:
document.getElementById('elem').innerHTML = '!'; // на JS
$('#elem').html('!'); // на jQuery
Код jquery выглядит намного компактнее и проще для написания.
Подключение jQuery
Для начала нужно скачать jQuery с официального сайта - https://jquery.com/download/ , положить файл с вашим сайтом и подключить его в разделе head:
<script src="путь к файлу с jQuery"></script>
Начало работы с jQuery
Работа с библиотекой jQuery осуществляется с помощью универсальной функции $. После нее следует писать круглые скобки, в которых указываются параметры: $(параметр). Чаще всего с помощью $ получают группу HTML элементов по CSS селектору. Например, получить все элемента с классом .www:
var elems = $('.www');
если нужны только абзацы с классом .www: var elems = $('p.www');
Если работаем с id, то обращение происходит через #.
Набора jQuery
В переменную elems записывается группа выбранных элементов, которые называются набором элементов jQuery. Затем одновременно для всего набора элементов можно изменить свойства. Переменная elems чаще всего не нужна, т.к. jQuery позволяет применять полезные функции прямо к набору, в виде методов. Например, получим все элементы с классом .www и назначим им красный цвет:
$('.www').css('color', 'red');
Почти все методы jQuery возвращают набор, к которому этот метод был применен, что позволяет выстраивать цепочки методов любой длины.
Пример: получим все элементы с классом .www, поставим и красный цвет и сменим их текст на новый:
$('.www').css('color', 'red').html('новый текст');
Если для работы с jQuery понадобиться переменная, которая в себе содержит обернутый набор jQuery, то такую переменную принято начинать с $ (т.е. вместо elems, писать $elems).
Пример: Изменим текст во всех абзацах с классом .www:
var $elems = $('.www');
$elems.html('новый текст');
Дата добавления: 2021-02-10; просмотров: 114; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!