После выхода 2-ой статьи - «Java Script торопится на помощь - 2», на мой почтовый ящик обвалился целый шквал писем с вопросами. После разбора всех вопросов оказалось, что включение фрагментов кода на JS в документ и динамическое создание страничек, естественно прекрасно, но веб-мастерам охото еще. Ну что ж спрос порождает предложение.
Чем все-таки еще может повеселить старина JS сайтостроителей? Наружный код подключаем, создаем динамические странички, краса. Ну что еще желать? Как насчет интерактивности? Что? Нет, чат на JS устраивать не будем. Сейчас мы побеседуем о динамическом изменении (!) кода.
В последние время в сети все почаще и почаще возникают некоторые калькуляторы. К примеру, многие хостинговые компании предлагает вам калькулятор для расчета цены услуг размещения веб-сайта. Все что вам нужно - избрать тариф, дополнительные услуги, ввести длительность хостинга и надавить кнопку "Рассчитать". После этого вы мгновенно получаете итог прямо на страничке веб-сайта хостера. При этом сама страничка не обновляется! Это обычный пример динамического конфигурации кода.
Хорошо, хватит дискуссий, давайте перейдем конкретно к примерам. Для начала самый обычной. Сделайте новый HTML файл и пропишите в нем последующий код:
Код:
<FORM name="test_form" method="post">
<INPUT type="button value=Нажми на меня" />
</FORM>
function test_change ()
{
document.all.resultat.innerHTML="Спасибо!";
}
Сейчас сохраните файл и откройте его браузером. Вы увидите кнопку с надписью "Нажми на меня". Жмите, не страшитесь, баннеры не появятся ?. Что мы видим? Код поменялся. Под кнопкой появилась надпись "Спасибо!". Содержание странички поменялось. Но если вы загляните в файл с кодом, он неизменен. Как такое возможно? Все просто. Дело в том, что JS является client-side технологией. Т.е. он исполняется на машине гостя, а не на сервере. А сейчас давайте разберемся с кодом. Итак, с начала ничего нового не лицезреем: форма с кнопкой, при клике на которую исполняется функция “test_change”. Сама функция содержит одну - единую строку:
Код: document.all.resultat.innerHTML="Спасибо!";
Это и есть команда JS на вставку. Все что остается добавить это место, куда делать вставку. Место мы обозначили идентификатором "resultat". Идентификатор вы сможете изменять вольно по собственному усмотрению. Сейчас создаем новый слой и связываем его с идентификатором "resultat":
Ну как, неплохо? Сходу желаю вас порадовать, динамически можно вставлять не только лишь обычный текст, да и HTML теги! А сейчас разглядим более непростой пример. Сделаем калькулятор, который по веденным данным подсчитает вашу месячную заработную плату ?. Итак сделайте новый HTML файл и наберите последующее:
Код:
<TABLE>
<FORM name="cash_form" method="post">
<TR /><TD />Оплата, $/час: <TD /><INPUT size="10" name="Oplata" /></td></tr>
<TR /><TD />Рабочих часов в день: <TD /><INPUT size="10" name="Chasov" /></td></tr>
<TR /><TD />Рабочих дней в месяц: <TD /><INPUT size="10" name="Dney" /></td></tr>
<TR /><TD colSpan="2" />
<INPUT type="button value=Подсчитать" /></td></tr>
</FORM>
</TABLE>
function getmoney (dat1,dat2,dat3)
{
month=dat1*dat2*dat3;
document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $";
}
Сохраняем файл и открываем его браузером. Что мы видим? Три поля для ввода и кнопку с надписью "Подсчитать", при клике на которую запускается функция "getmoney". Она получает введенные значения, вычисляет месячную заработную плату и выводит ее в браузере. Введите значения и нажмите кнопку "Подсчитать". Направьте внимание на значение месячной заработной платы. А сейчас измените одно либо несколько введенных значений и опять нажмите кнопку "Подсчитать". Как вы видите новое значение поменяло старенькое. Очень комфортно. А можно, к примеру, выводить новое значение под старенькым, для этого необходимо поменять строку
Код: document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $";
на
Код: document.all.resultat.innerHTML=document.all.resultat.innerHTML+"За месяц Вы заработаете "+month+" $";
Сейчас новые данные будут прибавляться к более ранешным, и они все вкупе будут выведены на экран. Направьте внимание на добавленный HTML тег
в конце кода. Это перевод строчки. Вот мы и протестировали внедрение HTML кода в динамически изменяемых страничках.
Естественно, калькуляторы необходимы далековато не каждому веб-сайту. И верно, не стоит на одном зацикливаться. Подключите свое воображение. Возможность динамически добавлять HTML код открывает поистине большой потенциал для разработчика. Естественно, меню на таком коде навряд ли сумеет затмить выпадающее меню JS - кликать надоест. А вот для экономии места и для организации пояснений к различным элементам веб-сайта такие способности JS совершенно подходят. Обычный пример - страничка контактов на веб-сайте компании. Там, обычно, расположена контактная информация компании, дистрибьюторов, представителей, разработчика веб-сайта. Куча адресов, телефонов и e-mail'ов. Так и заплутаться можно. А вот если расположить ссылки "Компания", "Дистрибьюторы", "Представители", "Разработчик", гость стремительно сориентируется и изберет подходящую ссылку. Осталось только написать JS код, который при клике на ссылку выводит под ссылкой подобающую информацию и убирал ранее выведеную. Многие могут сделать возражение, дескать можно сделать просто ссылку на подходящий файл и не надо динамическое изменение текущего. Но, во-1-х, может быть гость заинтересован не одной ссылкой - ему придется ворачиваться, а во-2-х, намного приятнее кликнуть и мгновенно (!!!) узреть подходящую информацию (загруженную вкупе со страницей), чем ждать загрузку очередной странички. Давайте я дам обычной примерчик, а разработка подобного кода остается вам как домашнее задание для закрепления материала. Итак, код:
Код:
<FORM name="test_form" method="post"> <INPUT type="button value=Включить" /> <INPUT type="button value=Выключить" /> </FORM> function test_on_off (dat1) { if (dat1==1) {document.all.resultat.innerHTML="<table border="1"><tr><td>Ура! Работает!</td></tr></table>";} else {document.all.resultat.innerHTML="";} }
При открытии файла, содержащего вышеуказанный код, в окне браузера можно будет узреть две кнопки: "Включить" и "Выключить". При клике на первую из их функции "test_on_off" передается значение 1, а при клике на вторую - 0. Зависимо от приобретенного значения функция "test_on_off" или выводит таблицу, или убирает ее. Это только обычной пример. Его можно мало сделать лучше, убрав одну кнопку и подправив код:
Код:
<FORM name="test_form" method="post"> <INPUT type="button value=ВключитьВыключить" /> </FORM> function test_change () { if (document.all.resultat.innerHTML=="") {document.all.resultat.innerHTML="<table border="1"><tr><td>Ура! Работает!</td></tr></table>";} else {document.all.resultat.innerHTML="";} }
Сейчас кнопка работает как выключатель: кликнул - включил, снова кликнул - выключил, опять кликнул - снова включил...
Если кто чего недопонимает - смело пишите. Ну, а если кому облом код набивать, тоже пишите, вышлю.
В общем сейчас вы имеете большой арсенал средств для сайтостроителя, так что успешной работы!
|
