Java Script спешит на помощь (Часть III)
Источник: www.ru-coding.com
После выхода второй статьи на мой почтовый ящик обрушился целый шквал писем с вопросами. Разобравшись со всеми вопросами, я пришел к выводу, что включение фрагментов кода на 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 либо выводит таблицу, либо убирает ее. Это лишь простой пример. Его можно немного улучшить, убрав одну кнопку и подправив код:
Теперь кнопка работает как выключатель: кликнул — включил, еще раз кликнул — выключил, снова кликнул — опять включил... Если кто чего недопонимает — смело пишите.
|
