Все примеры javascript для данной страницы находятся в файле o3.js. Для правильной работы скриптов необходима также библиотека ir2.js.
Пользователь периодически заходит на страницу, например, телефонного справочника, в котором есть несколько городов. Пользователь постоянно смотрит один и тот же город. Как сделать, чтобы один раз выбранный город не надо было бы выбирать потом заново?
Если пользователь не «зарегистрирован» на сайте, эту информацию, очевидно, нельзя хранить на стороне сервера в профиле пользователя. Значит, остаётся только вариант с куки. Коротко говоря, сохранить настройки в данном случае поможет такой код:
В нём используется только одно знание о нужном элементе – id ("gorod"). Хитрость в том, что в этом коротком коде используются три функции из библиотеки ir2.js: addLoadEvent(), getCookie(), setCookie(). Ещё одна хитрость – мы специально для ответа на этот вопрос изменили библиотечную функцию setCookie() – добавили в неё строку:
Эта строка проверяет, не является ли тип вызвавшего функцию элемента "select-one" (это тип элемента SELECT из примера), и если ответ положительный, сохраняет в куки индекс элемента OPTION, который был выбран пользователем (selectedIndex). При очередной загрузке страницы (именно к этому событию привязана функция myopt()) мы проверяем куки с именем "gorod" – его значение является номером элемента OPTION, который выбрал в прошлый раз пользователь. Да. А если пользователь ничего в прошлый раз не выбрал, функция getCookie() вернёт значение null. Поэтому мы проверяем, является ли полученное значение id числом, и если нет, присваиваем ему 0 (что соответствует первому элементу OPTION – "Выберите город").
Допустим, у нас есть элемент INPUT, который может получать фокус:
Как узнать, имеет ли он фокус в данный момент? Вопрос несколько не соответствует логике HTML и Javascript. Предположим, если элемент имеет фокус, его надо окрасить в розовый цвет. Логика веб-страницы «прямая»: как только элемент получает фокус, его тут же и окрашивают в розовый; это делается с помощью присвоения элементу функции, запускаемой по событию "onfocus":
Для наглядности мы добавили ещё на событие потери фокуса (blur) функцию, отменяющую окраску в розовый. Функции addclass() и delclass() описаны в библиотеке ir2.js. Конечно, можно предположить сверхсложный случай, когда наступает какое-то другое пользовательское событие (например, нажатие функциональной клавиши), по которому запускается другая функция, для которой важно, имеет ли конкретный элемент сейчас фокус. Тоже решаемо: в нашем случае, когда элемент имеет фокус, у элемента в значении "className" присутствует слово "rose". Можно добавить и другую, более специфичную метку, например:
и потом проверять свойство rose.moya_poluchala_focus.
У элемента iframe есть свойство, позволяющее получить доступ к внутреннему документу фрейма. Это свойство в разных браузерах называется по-разному. Предположим, у нас есть элемент iframe с атрибутом id="ifr". Доступ к элементу iframe мы получаем стандартно, через DOM: var ifr=document.getElementById("ifr"). Свойство, дающее доступ к документу фрейма, в одном браузере может быть ifr.document, в другом – ifr.contentDocument, в третьем – ifr.contentWindow.document. Какое в каком – разбираться не обязательно, мы используем стандартную логическую конструкцию, чтобы проверить их все:
Дальше, для получения доступа к конкретным элементам в документе фрейма, можно использовать обычный метод DOM: framedoc.getElementById("elementid").
Не обязательно, конечно, именно другого скрипта, интересно увидеть текст даже того же самого. Через DOM, «законными» методами, этого сделать нельзя. Но можно загрузить текст любого файла .js в элемент iframe и получить к нему доступ, как описано в ответе на предыдущий вопрос.
Допустим, мы (в процессе работы скрипта) хотим просмотреть текст файла tabsort.js. Можно создать элемент iframe динамически или использовать готовый элемент, главное, чтоб атрибут src у него был равен "tabsort.js":
<iframe id="ifr" src="tabsort.js"></iframe>
Может возникнуть сомнение такого рода: Апач ведь отправляет файлы .js с заголовком "Content-Type: text/javascript", как же эти файлы будет показывать браузер? А вы проверьте: просто откройте в браузере файл tabsort.js (через адресную строку). После этого отпадут всякие сомнения: всё, что не "text/html" (и что браузер берёт на себя смелость отображать сам, а не переправлять другим программам), браузер выводит на экран как простой текст.
Точнее, как "псевдо-простой" текст. Потому что любой текст в окне браузера подчиняется законам окна браузера, то есть законам DOM, и любой такой текст будет вложен в элемент body объекта document. А может, и в ещё один элемент внутри body – это надо проверить. Создаём iframe:
Получаем доступ к документу фрейма:
Проверяем, что там в этом документе внутри:
Результат: framedoc.body: первый дочерний элемент имеет nodeType 1; tagName=PRE, то есть, если в окно загружен простой текст, а не HTML, внутри элемента body браузер создаёт элемент pre, в который уже вкладывается текст. Таким образом, доступ к этому тексту будет выглядеть как, например, frametext=framedoc.body.firstChild.innerHTML; вот первые 200 символов искомого скрипта tabsort.js:
– получено с помощью кода:
Скрипт может быть не в отдельном файле, а прямо в тексте текущей HTML-страницы. Его текст тоже можно получить, используя свойство элементов innerHTML. Главное, знать, в каком именно элементе находится скрипт. Предположим, он у нас в элементе head. Мы можем, например, вывести на экран весь элемент head текущей страницы:
Получено с помощью кода:
Если хочется увидеть текст между тэгами <script> и </script> (если он там вообще есть), нужно использовать закомментированную строку с h.match (а строку с h.replace закомментировать).
Допустим, есть элемент input, в который пользователь вводит текст. Надо следить, какой там появляется текст, и если пользователь пытается добавить что-то, кроме разрешённого, давать пользователю сигнал (например, менять цвет элемента или сообщать об ошибке словами). Ну, и ещё можно блокировать кнопку отправки формы.
Вот вариант скрипта, решающий подобную задачу (функция привязывается к событию «загрузка страницы»):
(Функции addclass() и delclass() – из библиотеки ir2.js). Понятно, что такие вещи делаются не для обеспечения безопасности, так как хитрый пользователь всё равно сумеет отправить на сервер всё, что захочет (и безопасность в этом случае должен обеспечивать серверный скрипт). Но проверка заполнения формы на стороне клиента очень облегчает жизнь добросовестным пользователям – они видят и могут исправить ошибку ввода данных, не дожидаясь перезагрузки страницы.
Используем элемент из предыдущего вопроса – input id="russo", мы точно знаем, что на него при загрузке страницы на событие «onkeyup» была «навешена» какая-то функция.
При загрузке страницы «навешиваем» на кнопку «Найти события элемента...» функцию ce(); в элемент p id="checkevresult" будем выводить результат. Вот код функции:
В функции мы просто перебираем все свойства анализируемого элемента, и если тип объекта, к которому ведёт свойство, является функцией, то... проверяем, нету ли в тексте функции слов "[native code]". Если есть – это встроенная функция браузера. В нашем случае мы хотим найти только свойства, связанные с пользовательскими функциями, поэтому все свойства с "[native code]" пропускаем.
Поиском в Интернете можно найти много разных справочников и учебников, как в архивах, так и он-лайн версии (из которых можно самостоятельно сделать архивы). Вопрос только в их качестве. Для его определения можно, пожалуй, выделить три свойства (в порядке убывания важности): 1) полнота (плюс наличие примеров), 2) достоверность (с учётом самых новых достижений), 3) русский язык.
В применении к Javascirpt полнота означает, в первую очередь, описание методов DOM. Большинство же справочников в сети описывают только ядро Javascript. Это, например, справочник с сайта javascript.ru. Он очень современный, но не годится для пользования по двум причинам: отсутствие DOM и какое-то неаккуратное обращение с примерами (как будто они "для галочки", как-то без души всё сделано). Статьи, однако, на javascript.ru отличные, очень полезные для изучения кроссбраузерных функций типа обработки событий или определения координат мыши на странице.
Гораздо лучше, на наш взгляд, «Справочник веб-разработчика» Юрия Лукача http://wdh.suncloud.ru/contents.htm. Несмотря на то что этот проект был заброшен в 2002 году, он до сих пор актуален, потому что других справочников такой полноты (javascript+DOM) просто нет. Этот справочник существует в виде архива chm (со встроенным поиском): http://wdh.suncloud.ru/wdh.chm (1.4 Мб).
Что касается языка, то сам по себе английский для справочника по Javascript не так уж плох; но проблема в том, что большинство ссылок на англоязычные справочники ведут просто-напросто в никуда (на страницы, набитые рекламой).