- •Лекции по JavaScript Что такое javascript?
- •Среда разработки программ JavaScript
- •Что умеет javascript?
- •Переменные
- •Типы переменных
- •Массивы Создание
- •Аргументы
- •Описание, примеры
- •Методы объекта Array
- •Многомерные массивы
- •Объект Boolean
- •Объект Number
- •Объект Math
- •Объект String
- •Основы работы со строками
- •Использование кавычек
- •Встроенные функции
- •Строки и числа
- •Преобразование «Число → строка»
- •Преобразование «Строка → число»
- •Объект Date
- •Объект Global
- •Операторы и операции Операторы Javascript
- •Оператор break
- •Оператор comment
- •Оператор continue
- •Перебор свойств, кроме унаследованных
- •Оператор function
- •Оператор if...Else
- •Оператор return
- •Оператор var
- •Оператор while
- •Оператор with
- •Логические операторы
- •Операции сравнения
- •Арифметические операции
- •Битовые операции
- •Логические операции
- •Строковые операции
- •Операции присваивания
- •Прочие операции Условная операция
- •Операция запятая
- •Операция delete
- •Операция in
- •0 In langs // возвращает true
- •4 In langs // возвращает false Операция instanceof
- •Операция new
- •Операция this
- •Операция typeof
- •Операция void
- •Порядок выполнения операций
- •Функции
- •Функции - объекты
- •Области видимости
- •Параметры функции
- •Работа с неопределенным числом параметров
- •Пример передачи функции по ссылке
- •Пример использования:
- •Сворачивание параметров в объект
- •Объекты, свойства и методы Основные понятия
- •Объект JavaScript
- •Создание объектов с помощью инициализатора
- •Создание объектов с помощью конструктора
- •Создание методов
- •Изменение прототипа объекта
- •Удаление объектов
- •Вывод информации в строку состояния
- •Объект location
- •Проигрывание wav-файлов
- •Плавное изменение цвета фона документа html
- •Объект window.
- •Динамическое изменение страницы
- •Прокручивание документа
- •Параметры
- •Закрывающий тег
- •Аргументы
- •Значение по умолчанию
- •Параметр alt Описание
- •Значение по умолчанию
- •Параметр value Описание
- •Синтаксис
- •Параметры
- •Закрывающий тег
- •События
- •Когда использовать
- •Через свойство объекта
- •Основные события javascript
- •If (условие)
- •Способы открытия нового окна с помощью js
- •Модальное окно
- •X: 1, // добавляем свойство
- •Установка веб-сервера Apache и средств программирования под Windows
- •Что такое хостинг и где взять место под страницу.
- •Объектная Модель. Детали.
- •Языки на базе классов и языки на базе прототипов
- •Определение класса
- •Подклассы и наследование
- •Добавление и удаление свойств
- •Отличия. Резюме.
- •Пример Employee
- •Создание иерархии
- •Свойства объекта
- •Наследование свойств
- •Добавление свойств
- •Более гибкие конструкторы
- •И снова о наследовании свойств
- •Локальные и наследуемые значения
- •Определение взаимоотношений экземпляров
- •Глобальная информация в конструкторах
- •Нет множественного наследования
Способы открытия нового окна с помощью js
Несмотря на заявления юзабилистов о том, что новые окна браузера должен открывать только пользователь, в реальности довольно часто возникает необходимость открыть новое окно, например для того, что бы показать увеличенную версию картинки или форму обратной связи. Даже на этом сайтекарта форумов открывается в новом окне.
Ниже перечислены несколько способов открытия нового окна, а также указаны их достоинства и недостатки.
href="javascript:…"
<a href="javascript:window.open('popup.html','','…')">Новое окно</a>
Это самый старый (известный мне) способ. Его минусы:
при отключении JS ссылка не работает;
не индексируется поисковиками;
в статусной строке вместо ссылке отображается JavaScript-код;
„грязный“ код.
onclick="…"
<a href="popup.html" onclick="window.open('popup.html','…','…'); return false">Новое окно</a>
<a href="popup.html" onclick="window.open(this.href,'…','…'); return false">Новое окно</a>
Именно этот способ чаще всего используется на сайтах. Он лишён первых двух минусов предыдущего способа, и если на сайте открытие новых окон не является частым действием (например, на этом сайте я нашёл только одну такую ссылку), то этот способ является оптимальным.
Если же на сайте приходиться открывать много новых однотипных окон (например увеличенное изображение товаров в интернет-магазине), то этот способ выливается в большое количество лишнего кода.
сlass="popup", window.onload
Идея проста, обозначим каким-либо образом ссылки, которые нужно открывать в новом окне (в данном случае присвоив им класс), а после загрузки документа присвоим этим ссылкам обработчик события onclick.
<a href="popup.html" class="popup">Новое окно</a>
function handlePopupClick()
{
window.open(this.href,'…','…');
return false;
}
window.onload = function()
{
var lnks = document.getElementsByTagName('A')
for(var i = 0; i < lnks.length; i++)
if(/\bpopup\b/.test(lnks[i].className))
lnks[i].onclick = handlePopupClick;
}
В данном примере параметры нового окна (размеры, имя окна и т.д.) будут одинаковыми у всех ссылок, но при желании это можно изменить — к примеру, определить стандартные параметры, и отклонения от них указывать атрибутами ссылки. Основной же минус в том, что эти ссылки будут открывать новые окна только после полной загрузки документа, а до этого они будут работать как обычные ссылки. Кроме того, если на странице много ссылок, то на их проверку уйдет некоторое время, что выражается в "подвисании" браузера при окончании загрузки страницы.
сlass="popup", document.onclick
Вспомним, что события всплывают, и отловить их можно на самом верхнем уровне. Поэтому будем перехватывать все клики в документе, и если это клик по ссылке class ="popup", то будем открывать новое окно.
<a href="popup.html" class="popup">Новое окно</a>
document.onclick = function(e)
{
e = e || event;
var t = e.target || e.srcElement;
if (t.tagName.toLowerCase() == 'a' && /\bpopup\b/.test(t.className))
{
window.open(t.href,'…','…');
return false;
}
return true;
}
Здесь отсутствуют минусы предыдущего способа. При сложной разметке сайта следует, однако, учитывать, что клик может произойти не на самой ссылке, а на одном из его дочерних элементов (на картинке, к примеру). В этом случае нужно переходить от t к родительским элементам по цепочке, пока не будет найдена ссылка:
document.onclick = function(e) {
e = e || event;
var t = e.target || e.srcElement;
while (t && t.nodeType == 1 && t.tagName.toLowerCase() != 'a')
t = t.parentNode;
if (t && t.nodeType == 1 && /\bpopup\b/.test(t.className)) {
window.open(t.href,'…','…');
return false;
}
return true;
}
Разумеется, в двух последних способах не обязательно определять ссылки, которые должны открывать новые окна, с помощью класса. Вариантов может быть много. Например, если на вашем сайте все попапы открываются по адресу /popup/что-то…, то можно определять проверять наличие этого пути в атрибуте href ссылки