Инфоурок / Информатика / Конспекты / Анимирование статических объектов средствами JQuery
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.

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

Только сейчас Вы можете пройти дистанционное обучение прямо на сайте "Инфоурок" со скидкой 40% по курсу повышения квалификации "Организация работы с обучающимися с ограниченными возможностями здоровья (ОВЗ)" (72 часа). По окончании курса Вы получите печатное удостоверение о повышении квалификации установленного образца (доставка удостоверения бесплатна).

Автор курса: Логинова Наталья Геннадьевна, кандидат педагогических наук, учитель высшей категории. Начало обучения новой группы: 20 сентября.

Подать заявку на этот курс    Смотреть список всех 203 курсов со скидкой 40%

Анимирование статических объектов средствами JQuery

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

Технологическая карта

(закрепление знаний и формирование умений и навыков/ практическое занятие/ лабораторная работа)

Группа

И-11

Тема занятия

Анимирование статических объектов

Вид занятия

Практическое занятие

Цель занятия

Формировать ПК 1.2 -ПК 1.2 и ОК 1. – ОК 10.

Задачи занятия

Обучающие; познакомить с принципами анимирования статических объектов средствами JQuery

Развивающие: развивать умение управления статических объектов html документа;

Воспитательные: воспитывать самостоятельность и ответственность учащихся.

Аппаратное и программное обеспечение

Требования к ПО:

  1. Операционная система Windows 7

  2. MS Office

  3. NotePad++

Требования к ТО:

  1. Персональный компьютер

  2. ОЗУ – не менее 1 Гб.

  3. Свободное место на жестком диске не менее 700 Мб.

  4. Канал Интернет со скоростью не менее 3 мегабит/сек.

Средства обучения

Интерактивные средства обучения (интерактивная доска, презентация)


Методы и приемы

Групповые обсуждения, мозговой штурм, словесно – наглядный

Используемые педагогические технологии

Интерактивные средства обучения


Организационная структура занятия

Этап 1

Организационный момент

Цель этапа

Предварительная организация группы (проверка отсутствующих, внешнего состояния помещения, рабочих мест, наличия дежурных, рабочей позы и внешнего вида учащихся, организация внимания)

Длительность этапа

5 минут

Этап 2

Актуализация знаний (проверка домашнего задания)

Цель этапа

Воспроизведение студентами знаний умений и навыков, профессиональных и общих компетенций необходимых для «открытия» нового знания.

1 Для чего предназначен JS?

2. В чем разница JS от JQ?

3. Какой метод библиотеки JQ позволяет изменять свойства объектов документа html?

4. Приведите примеры листингов изменения свойств объекта.


Длительность этапа

5 минут

Форма организации деятельности обучающихся

Фронтальная

Функции преподавателя на данном этапе

Координатор, организатор, привлечение к размышлению


Содержание этапа

Представление целей занятия, проведение опроса и комментирование ответов

Развитие

(закрепление ПК и ОК)

Закрепление ПК 1.1- ПК 1.2 и ОК 1. – ОК 9.

Этап 3

Рекомендации по выполнению

Цель этапа

Объяснение учащимся как выполнять практическую работу

Длительность этапа

5 минут

Функции преподавателя на данном этапе

Координатор, организатор

Содержание этапа

Технология выполнения практической работы

Использование вспомогательного материала методов работы с объектами.

Эффекты представленные в таблице ниже позволяют скрывать и отображать элементы различными способами.

Метод Описание

fadeIn() Постепенно меняет прозрачность выбранного элемента делая его видимым.

fadeOut() Постепенно меняет прозрачность выбранного элемента делая его невидимым.

fadeTo() Постепенно меняет прозрачность выбранного элемента до указанного значения.

hide() Скрывает выбранный элемент.

show() Отображает скрытый элемент.

slideDown() Постепенно изменяет высоту выбранного элемента делая его видимым.

slideToggle() Применяет к выбранному элементу метод slideDown() если он невидим и slideUp() если он отображен.

slideUp() Постепенно изменяет высоту выбранного элемента делая его невидимым.

Этап 4

Выполнение различных заданий, задач, упражнений

Цель этапа

Выполнение практической работы, помощь при выполнении

Длительность этапа

20 минут

Форма организации деятельности обучающихся

Индивидуальная

Функции преподавателя на данном этапе

Организующая, направляющая, инструктирующая


Содержание этапа

Разработать собственный скрипт анимирования объектов на основе предложенных

Листинг 1

$(document).ready(function(){

$("#but1").click(function(){

$("p").fadeOut(2000);

});

$("#but2").click(function(){

$("p").fadeIn(2000);

});


});

Я первый абзац на странице.

Скрыть абзац" />

Отобразить абзац" />

Листинг 2

$(document).ready(function(){

$("#but1").click(function(){

$("#par1").animate({fontSize:"1.3em"},1000);

$("#par1").animate({"30px"},1000);

$("#par1").animate({"50px"},1000);

$("#par1").animate({fontSize:"1em"},1000);

$("#par1").animate({"0px"},1000);

$("#par1").animate({"0px"},1000);

});


});

Нажмите на кнопку ниже, чтобы запустить анимацию.

Я первый абзац.

Выполнить анимацию" />

Закрепление

ПК и ОК

Закрепление ПК 1.2 и ОК 1. – ОК 10.

Этап 5

Проверка выполнения работ; обсуждение допущенных ошибок и их коррекция

Цель этапа

Проверить выполнение практической работы

Длительность этапа

5 минут

Форма организации деятельности обучающихся

Индивидуальная

Функции преподавателя на данном этапе

Организатор, аналитик, эксперт

Закрепление

ПК и ОК

Закрепление ПК 1.1 - ПК 1.2 и ОК 1. – ОК 9.

Этап 6

Рефлексия (подведение итогов и самоанализ деятельности/ обратная связь)

Цель этапа

Оценка освоения умений, входящих в профессиональную компетенцию ПК 1.1, формирование умений самооценки

Длительность этапа

5 минут

Форма организации деятельности обучающихся

Фронтальная, индивидуальная

Функции преподавателя на данном этапе

Организатор, аналитик, эксперт

Содержание этапа

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

Закрепление

ПК и ОК

Закрепление ПК 1.1 -ПК 1.2 и ОК 1. – ОК 9.

Этап 7

Домашнее задание

Цель этапа

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

Длительность этапа

5 минут

Функции преподавателя на данном этапе

Организатор, эксперт

Содержание этапа

Разработать элемент галереи средствами JQ




Самые низкие цены на курсы переподготовки

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

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

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

Начало обучения ближайшей группы: 20 сентября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

Общая информация

Номер материала: ДБ-404816

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

2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации. Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии.

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Законы экологии», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

Конкурс "Законы экологии"