{
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 ссылки
Модальное окно
В HTML-документе допустимо создание модального окна для просмотра, т.е. такого окна, которое будет активным до тех пор, пока пользователь не закроет. Подобные окна часто применяются для создания пользовательских окон ввода информации или окна About. Модальное окно открывается
методом showModalDialog() объекта window.
Синтаксис:
showModalDialog (sURL [, vArguments [, sFeatures]])
◦ sURL — URL документа, загружаемого в модальное окно;
◦ vArguments — передает в диалоговое окно произвольный набор параметров. Непосредственная передача данных производится метод diaiogArguments объекта window. Возврат значений из диалогового окна в документ реализуется свойством returnvalue объекта window.
◦ sFeatures — параметры, задающие внешний вид окна; допустимые значения:
§ dialogWidth: number — ширина окна;
§ dialogHeight: number — высота окна;
§ diaiogTop: number — ордината верхнего левого угла окна;
§ diaiogLeft: number — абсцисса верхнего левого угла окна;
§ center: { yes | no | 1 | 0 } — расположение окна по центру экрана.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
window.showModalDialog ("script1.html","dialogHeight:100; dialogWidth:200; center:no");
</script>
</body>
</html>
Не все браузеры хорошо работают с модальными окнами.
Установка веб-сервера Apache и средств программирования под Windows
Шаг 1 - Загрузка компонентов
На время написания статьи последними стабильными версиями (бывают еще тестовые или бета-версии, они весьма ненадежны, так что смотрите что скачиваете) были:
- Apache 2.2.11
- PHP 5.2.8
- Установка производилась на Windows Vista Business Service Pack 1 и XP (2002) Professional Service Pack 3
Эти данные важны потому что от версии к версии, увы, не всегда все одинаково; программное обеспечение имеет свойство развиваться (но и справочные материалы к нему тоже). В первую очередь нам нужен веб-сервер. Он послужит для имитации полноценного хостинга. Как я уже говорил, практически повсеместно сегодня используется Apache HTTP Server. Скачать его можно отсюда: https://httpd.apache.org/download.cgi. Вам предлагаются для скачивания несколько вариантов. Нас интересует «Win32 Binary without crypto (no mod_ssl) (MSI Installer)». Немного разъяснений:
- Win32 - для семейства операционных систем Windows 32-х битных версий.
- Binary - бинарный код, то есть это уже готовая программа. Антонимом является Source, что значит исходный код — только текст программы. Впрочем, если у Вас есть Visual Studio C++, то можете скачать и «исходники» и самостоятельно откомпилировать (превратить в «бинарники»), потом расскажите как Вы это сделали:).
- without crypto (no mod_ssl) - SSL – это особое средство защиты WEB-соединения, которое наврядли в ближайшее время понадобится, в принципе, если есть желание и трафик, можете и версию с OpenSSL (один из вариантов в списке) скачать.
Далее нам понадобится интерпретатор (программа, обрабатывающая все то безобразие, которое мы пишем) какого-либо языка программирования. На сегодняшний день самый популярный, да и, наверное, наиболее удобный язык для веб-программирования — это PHP. Скачать можно с официального сайта: https://www.php.net/downloads.php. На данный момент параллельно распространяются две версии php: 5.3 и 5.2. Рекомендуется скачивать именно 5.2.x (то есть, где вторая цифра 2, а не 3). PHP 5.3.x имеет много особенностей при установке, в которых еще нет смысла разбираться, ибо не известно как пойдет развитие PHP дальше. Каждая из веток (то есть версий) имеет раздел «Windows Binaries», который представляет из себя довольно-таки большой список. Но в нем в основном одни модули (дополнения). На самом верху находится zip-архив, а пониже PHP Installer (инсталятор, по-русски). Zip-архив содержит множество файлов для ручной установки, Installer же, это программа, делающая все за нас, и размером при этом в 2 раза больше. Что примерно повествует документация к PHP: «В Интернете существует несколько инсталляторов «Все-в-одном», но ни один из них не разрешен php.net, так как мы верим, что ручная установка — лучший выбор, чтобы сделать Вашу систему безопасной и оптимизированной». Почему не послушать рекомендации умных людей? Итак, качаем zip-архив.
Что касается Windows XP и еще некоторых вещей — в местах, где существует разница в установке, будут помещены небольшие примечания.
Шаг 2 - Инсталяция
Устанавливать будем в той же последовательности в которой и скачивали.
Итак, Apache встречает нас симпатичным экраном приветствия. Щелкаем «Next» для продолжения. Далее предлагается лицензионное соглашение, которое, естественно, необходимо принять:
Выбираем пункт «I accept the terms in the license agreement» и переходим на следующую страницу с различной информацией о веб-сервере. Пропускаем и ее... Ах!, наконец-то что-то интересное:
Домен и имя сервера (подчеркнуты красным) — это адрес нашего будущего сайта. Для домашнего компьютера стандартом является «localhost». Email администратора можно выбрать любой, я, допустим, написал «admin@localhost» - все равно для работы почты нужен почтовый сервер (но его мы рассматривать не будем — это тема других статей). С помощью переключателя внизу окошка (между полями ввода и кнопками) указывается будет ли работать сервер для всех пользователей компьютера или только для данного. Мы выбираем первый пункт, так как в этом случае Apache запускается автоматически как Служба – что очень облегчает жизнь в дальнейшем.
На следующем экране предоставляется сделать выбор между стандартной и выборочной установкой:
Не будем прихотливыми...
И наконец, папка для установки. Если Вас не устраивает стандартная, то кликните «Change» и выберите подходящую. У меня, например, все посторонние программы находятся в C:\Programs\. В идеале название папки не должно быть более 8 символов и не должно содержать пробелы и буквы русского алфавита. В дальнейшем я буду указывать пути так, как они есть у меня на компьютере, так что внимательно следите за тем, где и что у меня установлено (и в какой версии, ибо иногда от смены версии меняется названия некоторых папок, но прочий процесс остается тем же), чтобы делать соответствующие изменения.
В конце концов можно приступить к установке — давим «Install» Если все пройдет успешно, инсталлятор Apache Вам об этом сообщит и останется нажать лишь кнопку «Finish». Сервер также должен был автоматически запуститься и добавиться в автозапуск (чтобы автоматически включаться вместе с Windows)
Запустим браузер и в адресной строке наберем: localhost. Должна загрузиться примерно такая страница (кликните по скриншоту для увеличения):
Как и написано, хоть и немножко на английском, все пока идет гладко. Двигаемся дальше. PHP.
Первым делом распаковываем куда-нибудь архив. Я выбрал по своему обыкновению папку C:\Programs\php, вы можете предпочесть что-нибудь другое, но php дает одно предостережение: желательно, чтобы путь не содержал пробелов (например, C:\Program Files\php), ибо тогда веб-сервер может отказаться работать. Итак, правой клавишей по zip-файлу → Extract All... (Или Extract Here, или еще что-то в этом роде, в зависимости от установленного архиватора) → Browse для выбора пути → Ok → Extract.
Далее нам нужно объяснить системе где находится наш php. Меня Start (Пуск) → правой клавишей по Computer (My Computer или Мой компьютер) → в выпавшем списке выбираем Properties (Свойства) → Advanced system settings → Вкладка Advanced (Дополнительно) → Environment variables (Переменные среды) → в нижнем списке (System variables (Системные переменные)) ищем пункт Path и щелкаем Edit... (Изменить) → в конце второй строки добавляем точку с запятой и указываем путь к папке с php (c:\programs\php, например; слэш и точку с запятой в конце ставить не обязательно) → и жмем Ok, пока не закроем все окна.
Что касается Windows XP... Путь проникновения к нужному нам окошку выглядит следующим образом: Start → правой клавишей на My Computer → Properties → Advanced system settings → Вкладка Advanced → Environment Variables. И далее претворяем в жизнь то, что описано выше.
(кликните по скриншоту для увеличения)
ПЕРЕЗАГРУЖАЕМСЯ!
Переходим в указанную Windows'у папку (C:\Programs\php). Файл php.ini-recommended переименуем в php.ini (правой клавишей по нему → Rename (Переименовать)). Это файл конфигурации... Вместо php.ini-recommended можно использовать php.ini-dist. Второй — это стандартные настройки, но поскольку группа разработчиков подготовила для нас нечто лучшее — воспользуемся. Откройте новоиспеченный файл. Конфигурации обычно состоят из директив, их значений и комментариев. Директива это название какой-либо настройки, значение, - думаю, понятно; комментарии служат просто для пояснений; в них может быть написано все что угодно. В php.ini комментарии следуют после точки с запятой (;). Самая важная часть кода выглядит как:
директива = значение
Может такое случится, что весь файл будет представлять из себя сплошной текст чуть ли ни в одну строчку; в который влеплены еще небольшие квадратики. Не пугайтесь. Это связано с тем, что родная среда для PHP – это Linux, а в Windows и Linux символы перехода на новую строку отличаются (хоть мы этого и не видим). Если у Вас такое приключилось, выполняйте поиск как описано ниже ни на что не взирая.
Итак, найдем директиву register_globals и изменим значение с on на off. Для этого воспользуемся поиском: Edit (Правка) → Find (Найти)... → Введите «register_globals» → Find Next (Найти далее):
(кликните по скриншоту для увеличения)
Данная настройка выполнена на всех хостингах – поэтому мы её устанавливаем в off для совместимости при тестировании наших сркиптов.
Сохраняем изменения File (Файл) → Save (Сохранить). Закроем блокнот. Все. PHP установлен. Осталось немного покапаться в настройках Apache, дабы объяснить и ему, что к чему.
Добавьте в любое место файла C:\Programs\Apache2.2\conf\httpd.conf (или меню Start (Пуск) → All Programs (Все программы) → Apache HTTP Server 2.2 → Configure Apache Server → Edit the Apache httpd.conf Configuration File) три строки:
LoadModule php5_module "c:/programs/php/php5apache2_2.dll"
AddType application/x-httpd-php.php
PHPIniDir "c:/programs/php"
Внимание! Нужно как всегда исправить указанные мной директории на реальные для Вашей системы. И все обратные слэши (\) заменяются на /. В конце пути слэша нигде не должно стоять. Комментарии здесь следуют за символом #.
Но это еще не все!
Найдите в этом же файле директиву DocumentRoot, то есть строку, начинающуюся с этого слова (!не с «# DocumentRoot»!, без #). Значением этой директивы является путь к корневой папке (каталогу, директории) Вашего сайта. Это значит что, когда Вы наберете в браузере «https://localhost/index.php», файл index.php будет искаться в этой папке, а если «https://localhost/my_page/biography.php», то biography.php должен находиться в поддиректории my_page, которая в свою очередь — в корневом каталоге. Если Вам удобно C:/Programs/Apache2.2/htdocs, то строку можно оставить без изменений, для примера я укажу «C:/First steps». Чуть пониже найдите строку типа: <Directory "C:/Programs/Apache2.2/htdocs"> - и измените путь в ней на тот, что указали выше («C:/First steps»). Папка должна уже существовать! Apache не создаст ее за Вас!
(кликните по скриншоту для увеличения)
Далее вышеописанным способом найдите директиву DirectoryIndex и добавьте в список (через пробел) index.php. Это, так называемые, индексные файлы. Если в адресной строке не указана конкретная страница (например, просто https://localhost), то в каталоге, на который ведет эта ссылка, будет поочередно искаться один из перечисленных файлов.
(кликните по скриншоту для увеличения)
На этом мы пока закончим. Закроем файл, сохранив при этом сделанные изменения. В правом нижнем углу найдем значок Апача, и щелкнув по нему правой клавишей выберем Open Services. В появившемся окне нам нужно выбрать Apache2 и чуть левее нажать Restart (Перезапустить).
(кликните по скриншоту для увеличения)
Если что-то не так (выскочит окошко с ошибкой), попробуйте запустить веб-сервер вручную: Start (Пуск) → All Programs (Все программы) → Apache HTTP Server 2.0 → Control Apache Server → Start. Apache в случае краха выдаст в черном окошке сообщение об ошибке. Например:
(кликните по скриншоту для увеличения)
Тогда еще раз перепроверьте попунктно все действия, проделанные совместно нами и попробуйте еще раз запустить сервер (в открытом нами окне с сервисами нажать только уже не Restart (Перезапустить), а просто Start (Запустить) (впрочем, других вариантов у Вас и не будет
Шаг 3 - Проба
Самый интригующий момент. Start (Пуск) → All Programs (Все программы) → Accessorias (Стандартные) → Notepad (Блокнот). Набирите или скопируйте:
<?php
phpinfo();
?>
File (Файл) → Save as (Сохранить как)... → в графе Save as type (Тип файла) выберите All Files (Все файлы), в графе File Name (Имя файл) введите C:\First steps\index.php, где «First steps» - путь к корневой папке сайта соответственно, и жмете на клавиатуре Enter.
Теперь запускаете снова браузер и вводие знакомое localhost в адресной строке. Вашему взору должен предстать примерно следующий экран:
(кликните по скриншоту для увеличения)
Этот коротенький php-код выводит множество настроек как сервера, так и самого PHP. Можете полистать, почитать - не повредит.
Но как не старайся, а у меня все же нет возможности проверить работоспособность моей писанины на всех версиях Windows с разными версиями Apache и PHP (да и еще в разных комбинациях:)). Поэтому всегда рад замечаниям и вопросам, которые прошу оставлять на форуме https://forum.postroika.ru//index.php?showforum=12.
Что такое хостинг и где взять место под страницу.
Если мы хотим разместить страницу/сайт – надо найти для нее место (как для книги на полке), в интернете такие места предоставляют специальные службы – хостеры. Они предоставят место для вашей страницы/сайта на своем сервере – машине, на которой установлены специальные программы, и которая постоянно подключена к сети. Собственно, интернет и состоит из множества таких машин объединенных между собой.
Стоп, - можете сказать вы, - а почему я не могу установить у себя на компьютере сервер? Можете, но это достаточно сложно, и одних только специальных программ и круглосуточного подключения компьютера к сети недостаточно. Дело в том, что интернет подобен большому городу, где у каждого сервера есть свой уникальный цифровой адрес (например, 197.84.789.10), и для того, чтобы вам выделили такой адрес, вам придется платить специальной организации, которая занимается их распределением. Т.е. я вам советую откинуть мысль о собственном сервере, возможно, в далеком будущем, если вам захочется, но сейчас мы не будем искать сложных путей.
Итак, нам нужно найти дом для нашего сайта – хостинг. Квартиру в таком доме можно купить, а можно поселиться в таком доме бесплатно. Однако, вы должны понимать, что за бесплатно ваши возможности будут сильно ограничены: вы не сможете пользоваться скриптами (установить свою гостевую книгу, голосование, форум, чат и прочие скрипты), вас могут обязать вешать на вашей странице рекламу (баннеры), вы ограничены местом (как правило не больше 3-10 мегабайт вам отводится под вашу страницу), и бесплатные хостеры не несут перед вами обязательств, и вы можете лишиться своей квартиры в любой момент.
Однако, если ваша страничка – домашняя, и вы пока что не создаете серьезный проект, то бесплатный хостинг это то, что вам нужно на первых порах. Бесплатный хостинг предоставляют Narod.ru, By.ru, Boom.ru и многие другие, вы легко найдете их с помощью любой поисковой системы, достаточно ввести в строке поиска “бесплатный хостинг”.
Как зарегистрировать место под страницу, что такое домен, как завести уникальное имя для сайта.Допустим, вы решили зарегистрироваться на Narod.ru. Ищем на Народ.ру ссылку на раздел Регистрация (Создать страницу, Зарегистрировать сайт - это может называться по-разному), читаем внимательно правила и соглашение с пользователем, заполняем внимательно предложенную форму (анкету).
После регистрации адрес вашего сайта будет, допустим, vasya.narod.ru – это называется домен третьего уровня.
Что такое домен: когда-то давно взрослые дяди и тети разработчики решили, что цифровой адрес не удобен для пользователей интернет, что гораздо удобнее набрать vasya.ru, а не 197.84.789.10, но это было удобнее для людей, а не для машин. И тогда умные дяди и тети придумали следующее: пусть будет так – человек набирает буквенный адрес, а машина сверяет его с некой базой, и смотрит какой цифровой адрес соответствует буквенному, и отправляет человека туда. И назвали буквенный адрес доменом. Каждой стране был присвоен адрес из 2-3 букв – например,.ru – был присвоен России, и назвали такой адрес – доменом первого уровня, и дали его каждой стране.
Соответственно, теперь каждая организация могла купить в зоне какой-либо страны себе домен – например, firma.ru – это домен второго уровня. На своем домене второго уровня каждая фирма может создать сколько угодно доменов третьего уровня, что и делают бесплатные хостеры.
Что делать, если вы хотите уникальное имя для своего сайта, и не хотите сидеть на бесплатном хостинге? Сначала зарегистрировать свой домен. Регистрацией доменов в России занимается РосНИИРОС, вы можете найти информацию о них и зарезервировать домен для регистрации на сайте https://nic.ru.
Иногда, платные хостеры предлагают вам следующую услугу – регистрацию домена за вас. Но дело в том, что в этом случае они все равно обращаются к РосНИИРОС, и регистрируют домен не на вас, а на себя. Это делается, чтобы вы потом не могли уйти от них к другому хостеру, если вам не понравится их обслуживание, ведь в этом случае вы потеряете уникальное имя для своего сайта, т.к. оно зарегистрировано не на вас, и жаловаться вы можете в таком случае только на свою глупость. Поэтому, лучше регистрировать домен самостоятельно, а не через кого-нибудь. Домен вы можете также потерять в случае неуплаты за него в РосНИИРОС. В год домен обойдется вам около 20 y.e., что не так дорого, согласитесь.
Пара слов о платных хостерах.
Какие преимущества вам дают платные хостеры: все по-разному, у них существуют различные тарифы и услуги, о которых вы можете узнать на сайте каждого хостера и подобрать себе подходящего. Одно из самых главных преимуществ для фирмы или проекта – это свое имя, согласитесь, проект, который имеет свое уникальное имя, который завтра никуда не исчезнет, вызывает больше доверия и уважения, т.е. firma.narod.ru явно проигрывает просто firma.ru.
Чтобы разместить страницу на сайте платного хостера не достаточно одного лишь заполнения формы, обычно нужно лично ваше присуствие для заключения контракта, более того, раз хостер платный, то его услуги придется сначала оплатить. Совет: прежде, чем выбрать платного хостера, походите по сайтам разных хостеров и почитайте внимательно, что они предлагают, сравните цены. Лучше всего выбирать хостера, который имеет офис в вашем родном городе, потому что при возникновении проблем с ними будет легче сконтактироваться, и лично приехать для выяснения объстоятельств, если возникнет такая надобность.
Список хостеров платных и бесплатных можно посмотреть тут:https://yaca.yandex.ru/yca/ungrp/cat/Computers/Internet/Hosting/.
Как закачать ваши файлы (картинки, html-документы и др.) на ваш сайт. Программы для закачки.
Теперь, когда вы зарегистрировались, то вам надо закачать файлы со своей страницей на сайт хостера. Хостеры часто позволяют вам сделать это через их веб-страницу. Для этого надо авторизоваться (войти) в центр управления своей страницей на сайте хостера, введя свои логин и пароль в форме на первой странице. Дальше вам все будет ясно, как правило, центр управления вашей страницей имеет интуитивно понятный пользователю интерфейс, и вы без труда разберетесь куда нажимать и что делать, чтобы закачать на свой сайт ваши документы и картинки. Если у вас возникнут какие-то вопросы, то на сайте, предоставившем вам место под страничку, как правило, есть раздел Помощь, советую вам ознакомиться с ним, прежде, чем вы начнете предпринимать какие-то действия по размещению своей странички, это поможет вам избежать многих ошибок и лишних действий.
Вы можете закачивать файлы на свою страницу не только при помощи броузера, авторизовавшись на сайте, предоставившим вам хостинг. Вы можете использовать специальную программу, это гораздо удобнее. Но для этого, вам надо узнать, дает ли ваш хостер пользователю, т.е. вам, возможность доступа к своей страничке через FTP (это такой протокол, основное назначение которого пересылать файлы, соответственно специальная программа, при помощи которой вы будете закачивать файлы на свой сайт, используя FTP, называется FTP-клиент). Узнать это можно в разделе Помощь на сайте вашего хостера.
Я лично предпочитаю программу CuteFTP, поэтому опишу, что и куда заполнять, ориентируясь на этот Ftp-клиент, в других ftp-клиентах действия будут аналогичными.
Итак, откроем CuteFTP (допустим, вы его уже скачали).
- В меню выбираем пунт FTP -> File Manager (или нажимаем кнопку F4, чтобы вызвать Менеджер файлов)
- В появившемся окошке нажимаем на кнопку Add site
- Во вновь появившемся окошке заполняем следующее:
* Site Label - любое название (например, Мой сайт, каждый раз потом, вызывая File Manager, вы будете видеть список сайтов, название для каждого будет такое, какое вы зададите в site label)
* Host address - например, ftp.narod.ru (это вы должны посмотреть в разделе Помощь, сайта предоставившего вам хостинг)
* User Id - имя пользователя (логин)
* Password - ваш пароль
* Login Type - Normal
* Transfer Type - Auto-detect
- Нажимаете на кнопку Ок
- Теперь, чтобы подсоединиться к вашему сайту (и заодно проверить правильность набранных параметров: Пароля Логина, и Имени сайта), нажмите на Мой сайт в File Manager.
Если вы не можете соединиться со своим сайтом, значит вы неправильно набрали пароль, логин или host address. Редактировать (изменять) информацию о соединении с вашим сайтом, вы можете, нажав кнопку Edit site в Site Manager, удалить - кнопка Delete site.
Также в этой статье я расскажу вам как закачивать файлы на свой сайт при помощи программы FAR, если вы умеете в ней работать, то может быть вам будет легче пользоваться ей:
- Откройте Far
- В командной строке наберите ftp://ваш_логин:ваш_пароль@имя_сайта (например: ftp://vasiliy:moyparol@vasya.ru)
- нажмите кнопку Enter
Far, соединится с вашим сайтом, список файлов которого отобразится на одной из панелек файл-менеджера Far, переключившись на другую панельку кнопкой TAB, вы открываете там папку с файлами своей странички и перекачиваете их на свой сайт при помощи Copy (F5).
Напутствие.
Вот и вся премудрость.
Еще раз повторюсь, на сайте вашего хостера обязательно должен существовать раздел Помощь, где вы найдете все необходимые данные для того, чтобы зайти на свой сайт, используя FTP, а также, возможно, ответы на некоторые свои вопросы. Если вы пользуетесь платным хостером – никогда не стесняйтесь обратиться в службу поддержки, они обязаны быстро отреагировать на ваш призыв о помощи и помочь вам. Это еще одно ваше преимущество перед пользователями бесплатных хостингов, служба поддержки которых, как правило, перегружена, и может ответить стандартными, ничего не объясняющими, письмами на вопрос пользователя.
Объектная Модель. Детали.
JavaScript это язык на базе прототипов, а не на базе классов. Из-за этого в JavaScript менее очевидно, как создаётся иерархия объектов и происходит наследование свойств и их значений. В данной главе делается попытка прояснит этот вопрос.
Предполагается, что Вы уже немного знакомы с JavaScript и что Вы использовали функции JavaScript для создания простых объектов.
Языки на базе классов и языки на базе прототипов
Объектно-ориентированные языки на базе классов, такие как Java и C++, помогут понять две разных сущности: класс и экземпляр.
- Класс определяет все свойства (методы и поля - в Java, члены, то есть свойства, в C++), характеризующие определённый набор объектов. Класс это абстракция, в отличие от конкретного члена набора объектов, который он описывает. Например, класс Employee может представлять набор всех employees/служащих.
- Экземпляр, с другой стороны, это инстанциация класса; то есть это один из членов класса. Например, Victoria может быть экземпляром класса Employee, представляя конкретную персону как employee. Экземпляр имеет в точности все свойства своего класса-родителя (ни более, ни менее).
В языке на базе прототипов, таком как JavaScript, нет такого отличия: здесь просто имеются объекты. В языке на базе прототипов имеется понятие объект-прототип\prototypical object, это объект, используемый как шаблон, по которому получаются начальные свойства объекта. Любой объект может специфицировать свои собственные свойства либо при создании, либо на этапе прогона. Кроме того, любой объект может быть ассоциирован как прототип другого объекта для совместного использования свойств первого объекта.\
Определение класса
В языках на базе классов Вы определяете класс в отдельном определении класса\class definition. Здесь Вы можете специфицировать специальные методы, называемые конструкторами, которые создают экземпляры данного класса. Метод-конструктор может специфицировать начальные значения свойств экземпляров и выполнять иную работу, необходимую на этапе создания экземпляров. Вы используете операцию new вместе с методом-конструктором для создания экземпляров класса.
В JavaScript используется похожая модель, но отсутствует определение класса, отдельное от конструктора. Вместо этого Вы определяете функцию-конструктор для создания объектов с определённым набором начальных значений и свойств. Любая функция JavaScript может использоваться как конструктор. Вы используете операцию new вместе с функцией-конструктором для создания нового объекта.
Подклассы и наследование
В языках на основе классов Вы создаёте иерархию классов через определения классов. В определении класса Вы можете специфицировать, что новый класс является подклассом\subclass уже существующего класса. Подкласс наследует все свойства своего родителя (суперкласса) и может добавлять новые свойства или изменять наследуемые. Например, класс Employee имеет только свойства name и dept, а Manager является подклассом классаEmployee и добавляет свойство reports. В этом случае экземпляры класса Manager будут иметь три свойства: name, dept и reports.
В JavaScript реализовано наследование, что даёт возможность ассоциировать объект-прототип с любой функцией-конструктором. Так, Вы можете воспроизвести тот же пример Employee-Manager, но используя несколько иную терминологию. Сначала Вы определяете функцию-конструктор Employee, специфицируя свойства name и dept. Затем Вы определяете функцию-конструктор Manager, специфицируя свойство reports. Наконец, Вы присваиваете новый объект Employee как prototype функции-конструктору Manager. Затем создаёте новый объект Manager, который наследует свойства name и dept из объектаEmployee.
Добавление и удаление свойств
В языках на основе классов Вы обычно создаёте класс на этапе компиляции, а затем инстанциируете экземпляры на этапе компиляции или на этапе прогона. Вы не можете изменить количество или тип свойств класса, после того как Вы его определили. В JavaScript, однако, Вы можете на этапе прогона добавлять или удалять свойства любого объекта. Если Вы добавляете свойство объекту, который используется как прототип для набора объектов, то объекты, для которых данный объект является прототипом, также получают новое свойство.
Отличия. Резюме.
В таблице дано краткое резюме по некоторым отличительным особенностям языков. Остальная часть данной главы посвящена деталям использования конструкторов и прототипов языка JavaScript для создания иерархии и делаются сравнения с аналогичными действиями в Java.
Таблица 8.1 Сравнение объектных систем языков на базе классов (Java)
и языков на базе прототипов (JavaScript)
| На базе классов (Java) | На базе прототипов (JavaScript) |
| Класс и экземпляр это разные сущности. | Все объекты являются экземплярами. |
| Класс определяется в определении класса; инстанциация (создание экземпляров) производится методами-конструкторами. | Набор объектов создаётся и определяется функциями-конструкторами. |
| Одиночный объект создаётся операцией new. | То же самое. |
| Иерархия объектов создаётся через использование определения класса для определения подклассов существующих классов. | Иерархия объектов создаётся путём присвоения объекта как прототипа, ассоциированного с функцией-конструктором. |
| Свойства наследуются по цепочке классов. | Свойства наследуются по цепочке прототипов. |
| Определение класса специфицирует все свойства всех экземпляров данного класса. Свойства нельзя добавлять динамически на этапе прогона. | Функция-конструктор или прототип специфицируют начальный набор свойств. Свойства могут добавляться динамически отдельному объекту или целому набору объектов. |
Пример Employee
В остальной части данной главы используется иерархия employee, показанная на рисунке.
Рисунок 8.1 Простая иерархия объектов
В этом примере используются следующие объекты:
- Employee имеет свойства name (значение по умолчанию - пустая строка) и dept(значение по умолчанию - "general").
- Manager базируется на Employee. Он добавляет свойство reports (значение по умолчанию - пустой массив, предназначенный для хранения массива Employee-объектов как значений).
- WorkerBee также основан на Employee. Он добавляет свойство projects (значение по умолчанию - пустой массив, предназначенный для хранения массива строк как значений).
- SalesPerson базируется на WorkerBee. Он добавляет свойство quota (значение по умолчанию - 100). Также переопределяет свойство dept значением "sales", указывая, что все менеджеры по продажам/salespersons находятся в этом отделе.
- Engineer базируется на WorkerBee. Он добавляет свойство machine (значение по умолчанию - пустая строка), а также переопределяет свойство dept property значением "engineering".
Создание иерархии
Есть несколько способов создания функции-конструктора для реализации иерархии Employee. Выбор конкретного способа во многом зависит от того, что должно будет делать Ваше приложение.
В данном разделе показано, как использовать очень простое (и сравнительно негибкое) определение для демонстрации создания работающей иерархии. В этих определениях Вы не можете специфицировать значения свойств, когда создаёте объект. Вновь создаваемый объект просто получает все значения по умолчанию, которые Вы можете изменить позднее.Рисунок 8.2 показывает иерархию с несколькими простыми определениями.
В реальном приложении, Вы, вероятно, определите конструктор, который позволит задавать начальные значения свойств на этапе создания объекта (см. "Более Гибкие Конструкторы"). Итак, эти простые определения демонстрируют появление иерархии.
Рисунок 8.2 Определения объекта Employee
Следующие определения Employee в Java и в JavaScript похожи. Единственное отличие - Вы должны специфицировать тип каждого свойства в Java, но не в JavaScript, и Вы должны создать конкретный метод-конструктор для Java-класса.
| JavaScript | Java |
| function Employee () { this.name = ""; this.dept = "general"; } | public class Employee { public String name; public String dept; public Employee () { this.name = ""; this.dept = "general"; } } |
Определения для Manager и WorkerBee показывают отличия в специфицировании объекта, стоящего выше в цепочке иерархии. В JavaScript Вы добавляете экземпляр-прототип как значение свойства prototype функции-конструктора. Вы можете сделать это в любое время после определения конструктора. В Java Вы специфицируете суперкласс в определении класса. Вы не можете изменить суперкласс вне определения класса.
| JavaScript | Java |
| function Manager () { this.reports = []; } Manager.prototype = new Employee;function WorkerBee () { this.projects = []; } WorkerBee.prototype = new Employee; | public class Manager extends Employee { public Employee[] reports; public Manager () { this.reports = new Employee[0]; } }public class WorkerBee extends Employee { public String[] projects; public WorkerBee () { this.projects = new String[0]; } } |
Определения Engineer и SalesPerson создают объекты, которые являются потомкамиWorkerBee и, следовательно, потомками Employee. Объект этих типов имеет свойства всех объектов, стоящих выше него в цепочке иерархии. Кроме того, эти определения переопределяют наследуемое значение свойства dept новыми значениями, специфичными для этих объектов.
| JavaScript | Java | ||
function SalesPerson () { this.dept = "sales"; this.quota = 100; } SalesPerson.prototype = new WorkerBee;function Engineer () { this.dept = "engineering"; this.machine = ""; } Engineer.prototype
Поиск по сайту©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование. Дата создания страницы: 2016-02-16 Нарушение авторских прав и Нарушение персональных данных |
Поиск по сайту: Читайте также: Деталирование сборочного чертежа Когда производственнику особенно важно наличие гибких производственных мощностей? Собственные движения и пространственные скорости звезд |