Курс вёрстки и программирования сайтов. Javascript презентация

2. Задание файла с кодом JavaScript.

3. Использование выражений JavaScript в качестве значений параметров тэгов HTML.



4. Определение обработчика событий в тэге HTML.

написание JavaScript кода.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

jQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов.

Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.

Русская документация по ссылке jquery-docs.ru

JS с использованием jQuery

$("#wrap1").animate({height:280}, 2000); $("#wrap1").animate({width:400}, 2000); $("#wrap1").animate({padding:20},2000,function(){ $("#text1").hide(2000,function(){$("#text2").show(2000);}); }); }); });

него являются jQuery кодом;
Селектор позволяет выбрать элемент на странице;
Метод задает действие, которое необходимо совершить над выбранным элементом.

DOM;
Методы для оформления элементов;
Методы для создания AJAX запросов;
Методы для создания эффектов;
Методы для привязки обработчиков событий.

загрузки документа });

изменить или узнать внутреннее содержимое выбранного элемента.
С помощью метода append() Вы можете вставить произвольный текст после внутреннего содержимого выбранного элемента.
С помощью метода prepend() Вы можете вставить произвольный текст перед внутренним содержимым выбранного элемента.
С помощью метода attr() Вы можете узнать или изменить содержимое указанного атрибута у выбранного элемента.
С помощью метода removeAttr() Вы можете удалить указанный атрибут у выбранного элемента.
Метод wrap позволяет "обернуть" выбранный элемент указанными тэгами.

элемента $("селектор").html("новое содержимое");

соединять команды jQuery в цепочки.
Команды в цепочке будут выполняться поочередно слева направо.

strong и окрасьте их в зеленый цвет
— найдите все HTML-элементы em и добавьте им класс .selected
— Найдите все элементы mark, которые находятся в div с классом row и задайте им класс .selected
— Найдите все гиперссылки и удалите у них подчеркивания
— Найдите все HTML-элементы, который содержат слово «Задания» и находятся в элементе с классом .container
— Переключите элементы strong с классом some в состояние без этого класса, а тем элементам (strong), у которых не было этого класса — добавьте.
— среди набора элементов с классом .row удалите класс у второго элемента
— прочитайте CSS-свойство color у второй гиперссылки в тексте

выделить буквы кодового слова.

Измените цвет и размер шрифта:
Списка из блока с id=left-block;
Элемента с тегом h1 (либо h2 или h3) находящегося внутри блока с классом content

Обратите внимание: для изменения цвета текста элемента используйте метод: css('color','новый_цвет_текста'), для изменения размера шрифта используйте метод: css('font-size','размер_шрифта_px').

после совершения определенных действий.

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

Примеры действий, после которых выполняются обработчики:
Курсор мыши наведен на элемент;
Веб-страница или картинка полностью загружена;
Изменено содержимое поля формы;
HTML форма отправлена;
Нажата клавиша на клавиатуре;

после совершения определенных действий.

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

Примеры действий, после которых выполняются обработчики:
Курсор мыши наведен на элемент;
Веб-страница или картинка полностью загружена;
Изменено содержимое поля формы;
HTML форма отправлена;
Нажата клавиша на клавиатуре;

$("#button1").dblclick(function(){alert("Вы нажали два раза на кнопку!");}); });


Код обработчика focus() будет выполнен, когда элемент станет активным.
Код обработчика blur() будет выполнен, когда элемент перестанет быть активным.
Код обработчика change() будет выполнен, при изменении содержимого элемента.

который будет менять цвет фона страницы.
Создайте HTML-форму и по нажатию на кнопку проверяйте заполненность всех полей. Если останутся незаполненные поля — выводите предупреждение и не отправляйте форму.
Создайте обработчик события на нажатие кнопок направлений (влево, вправо) так, чтобы HTML-элемент при однократном нажатии на кнопку анимированно сдвигался влево или вправо на 100px
Навесьте на событие движения мыши обработчик, который будет в консоль выводить координаты движения. Примечание: выводите их как x и y. Событие надо «повесить» на document
* Создайте эффект перетаскивания HTML-элементов с классом .drag. Примечание к задаче: напишите обработчики событий mousedown, mouseup и mousemove

(для выполнения некоторых подпунктов необходимо обратиться к справочнику):

После одинарного нажатия на кнопку с id='but1' цвет текста абзаца с id='par1' должен изменится на зеленый, а размер его шрифта должен стать равным 20px.
При наведении указателя мыши на ссылку ее цвет должен измениться на оранжевый. При выведении указателя мыши за ее пределы оформление должно сбросится на стандартное.
При выделении текста элемента цвет текста должен измениться на красный, а размер шрифта должен стать равным 20px.
При каждом щелчке по кнопке с id=but2 оформление абзаца с id=par2 должно меняться следующим образом:
Текст должен быть отображен шрифтом Times New Roman красного цвета;
Текст должен быть отображен шрифтом Arial синего цвета;
Текст должен быть отображен жирным шрифтом Verdana, с рамкой толщиной 1 пиксель (используйте свойство font-weight:bold для того, чтобы сделать текст жирным и свойство border-style для задания толщины границы).

постепенно скрывать и отображать элементы анимировано.
//Позволяет постепенно скрыть выбранный элемент $("селектор").fadeOut(скорость,функция);
//Позволяет постепенно отобразить выбранный элемент $("селектор").fadeIn(скорость,функция);
//Позволяет постепенно скрыть/отобразить элемент до указанного значения прозрачности $("селектор").fadeTo(скорость,прозрачность,функция);

$("#but4").click(function(){$("#par1").fadeTo(3000,0.8)});
$("#but5").click(function(){$("#par1").fadeOut(3000,function(){ alert("Абзац был полностью скрыт."); }); }); });

плавно изменять высоту выбранных элементов.
//Позволяет изменяет высоту элемента до 0 $("селектор").slideUp(скорость,функция);
//Позволяет плавно возвратить элементу его изначальную высоту $("селектор").slideDown(скорость,функция);
//При первом вызове будет действовать как slideUp, а при втором как slideDown $("селектор").slideToggle(скорость,функция);
С помощью метода slideToggle Вы можете создавать на Ваших страницах удобные выпадающие меню.

с id=but1 абзац с id=par1 должен исчезать, а при нажатии на кнопку c id=but2 появляться.
При наведении курсора мыши на абзац с id=par2 он должен стать прозрачным (можно задавать любые значения прозрачности, но необходимо чтобы текст при этом был видим) в течении 3 секунд (3000 миллисекунд). При выведении курсора мыши за пределы абзаца он должен вернуть стандартные значения прозрачности.
При нажатии на кнопку с id=but3 высота элемента id=par1 должна быть уменьшена до 0 в течении 5 секунд. При повторном нажатии на кнопку должна быть возращена стандартная высота.

должно быть считано и вставлено в абзац с id=par2.
После нажатия на кнопку с id=but2 в абзацы par3, par4, par5 и par6 должны добавляться недостающие слова. Слова при вставке должны быть выделены жирным шрифтом.
После нажатия на кнопку с id=but3 элементы с id=href1 и id=par7 должны стать оформленными соответственно своему содержимому.
После нажатия на кнопку с id=but4 элементы должны стать оформленными соответственно своему содержанию. (Необходимые стили уже заданы, нужно только обернуть абзацы в тэги с соответствующими id - style1, style2, style3, style4.)

элементов.
Одним из самых важных методов в этой группе является метод css().
С помощью метода css Вы можете узнавать текущие или устанавливать новые значения свойств оформления элементов.

//Узнаем значение указанного CSS свойства выбранного элемента $("селектор").css("свойство"); //Установим новое значение указанному CSS свойству выбранного элемента $("селектор").css("свойство","значение"); //Установим произвольные значения нескольким CSS свойствам выбранного элемента $("селектор").css({свойство1:значение1, свойствоN:значениеN});

класс выбранному элементу (данный метод, добавляя новый класс, не удаляет и не заменяет существующие).
С помощью метода removeClass Вы можете удалить указанный класс у выбранного элемента.
Метод toggleClass позволяет переключатся между удалением и добавлением класса выбранного элемента.
//Добавим указанный класс выбранному элементу $("селектор").addClass("имя_класса"); //Удалим указанный класс у выбранного элемента $("селектор").removeClass('имя_класса'); //При первом вызове указанный класс будет добавлен, а при втором удален. $("селектор").toggleClass('имя_класса');

strong и em. Задайте обработчики событий наведения мышью на эти элементы: при наведении, цвет элементов должен отличаться от обычного, а размер плавно увеличиваться.
При наведении на элемент с идентификатором #box, поворачивать элемент с классом .some на 90 градусов, при событии выведения мыши с элемента возвращать .some в исходную позицию
Назначить обработчики событий для кнопок, такие, чтобы после нажатия на кнопку элемент должен двигаться на 100px в направлении, указанном кнопкой
При нажатии на любую точку страницы, плавно с анимацией перемещать к этому месту элемент.
Для изображений создать обработчики событий, чтобы работа скрипта была похожа на работу слайдера
Создать эффект лайтбокса средствами jQuery
Создать эффект карусели
Создать эффект галереи