АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Java Script спешит на помощь 3

• Все журналы \ Номер 33/256 `2003 от 25.08.2003 \ Java Script спешит на помощь 3

Владислав ПУТЯК po4u@ukrpost.net

После выхода второй статьи «Java Script спешит на помощь» (МК №№23, 27 (246, 250)) на мой почтовый ящик обрушился целый шквал писем с вопросами. Разобравшись со всеми вопросами, я пришел к выводу, что включение фрагментов кода на JS в документ и динамическое создание страниц, конечно очень хорошо, но web-мастерам хочется еще. Ну что ж, спрос порождает предложение.

Чем же еще может порадовать старина JS сайтостроителей? Внешний код подключаем, создаем динамические страницы — красота! Ну что еще желать? А как насчет интерактивности? Что? Нет, чат на JS устраивать не будем. Сегодня мы поговорим о динамическом изменении (!) кода.

В последнее время в Сети все чаще и чаще мелькают калькуляторы. Например, многие хостинговые компании предлагает вам калькулятор для расчета стоимости услуг размещения сайта. Все, что вам необходимо, — выбрать тариф, дополнительные услуги, ввести продолжительность срока хостинга и нажать кнопку «Рассчитать». После чего вы моментально получаете результат прямо на странице сайта хостера. Причем, сама страница не обновляется! Это простой пример динамического изменения кода.

Ладно, хватит разговоров, давайте перейдем непосредственно к примерам. Для начала самый простой. Создайте новый HTML-файл и пропишите в нем следующий код:

Теперь сохраните файл и откройте его в браузере. Вы увидите кнопку с надписью «Нажми на меня». Нажимайте, не бойтесь, баннеры не появятся :-). Что мы видим? Код изменился. Под кнопкой появилась надпись «Спасибо!» Содержание страницы изменилось, файл же с кодом неизменен. Как такое возможно? Все очень просто. Дело в том, что JS является client-side технологией. Т.е. он исполняется на машине посетителя, а не на сервере. А теперь давайте разберемся с кодом. Итак, сначала ничего нового не видим: форма с кнопкой, при клике на которую исполняется функция test_change. Сама функция содержит одну единственную строчку:

Это и есть команда JS на вставку. Все, что остается, — это определить место, куда делать вставку. Место мы обозначили идентификатором resultat. Идентификатор вы можете изменять вольно по своему усмотрению. Теперь создаем новый слой и связываем его с идентификатором resultat:

Ну как, неплохо? Сразу хочу вас обрадовать: динамически можно вставлять не только простой текст, но и HTML-тэги! А теперь рассмотрим более сложный пример. Создадим калькулятор, который на основании введенных данных подсчитает вашу месячную зарплату :-). Итак, создайте новый HTML-файл и наберите следующее:

Сохраняем файл и открываем его в браузере. Что мы видим? Три поля для ввода и кнопку с надписью «Подсчитать», при клике на которую запускается функция getmoney. Последняя получает введенные значения, вычисляет месячную зарплату и выводит ее в браузере. Введите значения и нажмите кнопку «Подсчитать». Обратите внимание на значение месячной зарплаты. А теперь измените одно или несколько введенных значений и снова нажмите кнопку "Подсчитать". Как видите, новое значение заменило старое. Очень удобно. А можно, например, выводить новое значение под старым — для этого нужно изменить строчку document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $" на document.all.resultat.innerHTML=document.all.resultat.innerHTML+"За месяц Вы заработаете "+month+" $<br>".

Теперь новые данные будут прибавляться к более ранним, и все они вместе будут выведены на экран. Обратите внимание на добавленный HTML-тэг <br> в конце кода. Это перевод строки. Вот мы и протестировали использование HTML-кода в динамически изменяемых страницах.

Конечно, калькуляторы нужны далеко не каждому сайту. И правильно, не стоит на одном зацикливаться. Подключите свое воображение. Возможность динамически добавлять HTML-код открывает воистину огромный потенциал для разработчика. Конечно, меню, приготовленное таким образом, вряд ли сможет превзойти выпадающее меню JS — кликать надоест. А вот для экономии места и для организации пояснений к разным элементам сайта такие возможности JS идеально подходят. Простой пример — страница контактов на сайте компании. Там, как правило, размещена контактная информация компании, дистрибьюторов, представителей, разработчика сайта. Куча адресов, телефонов и e-mail'ов. Так и заблудиться недолго. А вот если разместить ссылки «Компания», «Дистрибьюторы», «Представители», «Разработчик», посетитель быстро сориентируется и выберет нужную ссылку. Осталось только написать JS-код, который при клике на ссылку выводил бы под ссылкой соответствующую информацию и убирал бы ранее выведенную. Многие могут возразить, мол, можно сделать просто ссылку на нужный файл, и не нужно никакого динамического изменения текущего. Но, во-первых, вдруг посетитель заинтересован не одной ссылкой — ему придется возвращаться, а во-вторых, намного приятнее кликнуть и моментально (!!!) увидеть нужную информацию (загруженную вместе со страницей), чем ожидать загрузку очередной страницы. Давайте я дам простой примерчик, а разработка подобного кода останется вам как домашнее задание для закрепления материала. Итак, код:

При открытии файла, содержащего этот код, в окне браузера можно будет увидеть две кнопки: «Включить» и «Выключить». При клике на первую из них функции test_on_off передается значение 1, а при клике на вторую —0. В зависимости от полученного значения функция test_on_off либо выводит таблицу, либо убирает ее. Это лишь простой пример. Его можно немного улучшить, убрав одну кнопку и подправив код:

Теперь кнопка работает как выключатель: кликнул — включил, еще раз кликнул — выключил, снова кликнул — опять включил... Если кто чего недопонимает — смело пишите.

Идёт загрузка...

Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:
Комментарий:
Введите символы или вычислите пример: * Обновить