Занятие #2

JavaSCRIPT

ДЛЯ закрепленияНесколько простых правил:

— выносим JavaScript во внешние файлы — никогда не пишем inline обработчиков событий (onclick="some()") — выносим CSS из HTML во внешние файлы — никогда не пишем inline стилей (style="color:red") — и ещё разок для закрепления – не пишем inline!

Отладка JavaScriptChrome Developer Tools — на мой взгляд, самый удобный инструмент веб-разработки. Он содержит в себе весь необходимый функционал для создания и отладки полноценных веб-приложений.

Консоль играет роль интерактивного JavaScript-интерпретатора. В ней также отображаются ошибки, возникающие в процессе работы веб-приложения.

Переменные Первое с чем столкнёмся – это объявление переменных:

Всё просто, объявляем переменную, используя ключевое слово var. Можно, конечно же, и без него, но делать я вам это настоятельно не рекомендую, т.к. могут возникнуть непредвиденные проблемы. На имена переменных наложено два ограничения: — имя должно состоять только из букв, цифр, и символов $ и _ — первый символ не должен быть цифрой Регистр букв имеет значение:

Константы В JavaScript нет констант, но поскольку необходимость в них всё же есть, то появилась договорённость: переменные, набранные в верхнем регистре через подчёркивание, не изменять:

Константы необходимы, чтобы избежать появления «magic numbers», сравните следующий код if(status==2) – о чём тут речь мало кому будет понятно, а вот код if(status==USER_STATUS_BANNED) уже более информативный.

Типы данных В JavaScript не так уж и много типов данных: 1. number – целое или дробное число var pi = 3.1415;

2. string – строка, заключается в кавычки: var str = "Hello World!"; В JavaScript нет разницы между двойными кавычками и одинарными

3. boolean – булево значение, т.е. или true или false var result = true;

4. null – специальное значение для определения «пустоты» var result = null;

5. undefined – ещё одно специальное значение «неопределенности», используется как значение неопределённой переменной, т.е. переменная объявлена и существует, но значение ей ещё не присвоено:

6. object – это объекты, на них остановлюсь подробнее чуть позже…

Массивы Массив – это коллекция данных с числовыми индексами. Данные могут быть любого типа, но я приведу самый простой массив со строками:

Нумерация массивов начинается с «0», так что для получения первого элемента вам потребуется следующий код:

Размер массива хранится в свойстве length:

Для перебора массива лучше всего использовать цикл for(;;):

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

Функции

Анонимные функции В JavaScript можно создавать анонимную функцию (т.е. функцию без имени),для этого достаточно слегка изменить предыдущую конструкцию:

Так как функция это вполне себе объект, то её можно присвоить переменной, и (или) передать в качестве параметра в другую функцию:

Объекты На объекты в JavaScript возложено две роли: — хранилище данных — функционал объекта

Первое предназначение можно описать следующим кодом:

Это фактически реализация key-value хранилища, или хэша, или ассоциативного массива, но в JavaScript это объект, и запись выше – это JSON.Для перебора такого хранилища можно использовать цикл for(.. in ..):

Объекты Любая функция вызванная с использованием ключевого слова «new» возвращает нам объект, а сама становится конструктором данного объекта:

Поведение функции User() при использовании «new» слегка изменится:

1. Данная конструкция создаст новый, пустой объект 2. Ключевое слово this получит ссылку на этот объект3. Функция выполнится и возможно изменит объект через this (как в примере выше) 4. Функция вернёт this (по умолчанию)

Результатом выполнения кода будет следующий объект:

Переменная this всегда указывает на текущий объект вызывающий функцию

Как начать пользоваться jQuery? Для того чтобы начать пользоваться jQuery нужно скачать эту библиотеку (желательно с официального и самую свежую версию), поместить ее в проект (обычно она хранится в папке со скриптами, например в ../js) и подключить ее в документе вот таким образом:

После этого можно начинать использовать jQuery. Я бы рекомендовал использовать следующую конструкцию при написании скриптов на jQuery:

Данная конструкция позволяет выполнять код скрипта только после полной загрузки страницы, т.е. только после того как загрузятся все ее элементы и сформируется полная объектная модель документа (DOM — Document Object Model).Если не использовать этот код, то некоторые конструкции могут работать не правильно.

Селекторы jQuery

Селекторы jQuery

Примеры

Часто используемые события

click — событие одиночного клика левой кнопкой мыши;dblclick — событие двойного нажатия левой кнопкой мыши;mouseover — событие наведения указателя мыши на объекты страницы;mouseout — событие убирание указателя мыши с объекта страницы;mousemove — событие передвижения мыши;mousedown — событие при котором пользователь нажал на левую кнопку мыши и пока еще не отпустил;mouseup — событие отпускания кнопки мыши, т.е. продолжение события mousedown;submit — событие отправки формы;focus — событие установки фокуса на элементе (нажатие на него или выделение TAB’ом);blur — событие снятие фокуса (фокус получает какой-нибудь другой элемент страницы);change — событие изменения объекта (выбор элемента списка, ввод символов в текстовое поле и т.д.);reset — сброс формы;keypress — нажатие кнопки на клавиатуре;keydown — мы нажали кнопку, но еще не отпустили;keyup — событие «отпускания» ранее нажатой ранее клавиши;resize — событие изменение ширины окна браузера;scroll — событие прокрутки окна браузера;load — событие полной загрузки документа;unload — событие перехода выхода со страницы (например переход на другую или закрытие браузера), нужно отметить что это событие работает не во всех браузерах.

ОБРАБОТКА СОБЫТИЙ

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

Допустим целью было вывести текст, и никуда не уходить. Для этого стоит отменить действие по умолчанию:

В действительности этот метод представляет из себя обёртку для вызова on():

Работа с событиями События мышки

Оптимизация выборки

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

Пару советов об оптимизации по работе с выборками:

1. Сохранять результаты поиска

Оптимизация выборки

2. Или использовать цепочки вызовов (что по сути аналогично первому правилу):

3. Разбивать запрос на более простые составные части используя context, и сохранять промежуточные данные:

Оптимизация выборки

4. Лучше разделять «сложный» селектор на несколько более простых:

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

Учебники по JavaScript и jQuery

Спасибо за внимание!

АЛЕКСАНДР КИРИЛЛОВ

cto@uplab.ruwww.uplab.ru