Софт для Windows    Программы для смартфонов и планшетов, мобильный софт    Софт для Линукс, Unix, Linux
 

JavaScript спешит на помощь - 3

Интернет | 09:57 26 ноября

После выхода второй статьи - Java Script спешит на помощь - 2, на мой почтовый ящик обрушился целый шквал писем с вопросами. После разбора всех вопросов оказалось, что включение фрагментов кода на JS в документ и динамическое создание страниц, конечно очень хорошо, но вебмастерам хочется еще. Ну что ж спрос порождает предложение.

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

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

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

<FORM name=test_form method=post>
<INPUT onclick="test_change ()" type=button value="Нажми на меня">
</FORM>

<SCRIPT language=javascript>
function test_change ()
{
document.all.resultat.innerHTML="Спасибо!";
}
</SCRIPT>

<DIV id=resultat></DIV>

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

document.all.resultat.innerHTML="Спасибо!";

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

<DIV id=resultat></DIV>

Ну как, неплохо? Сразу хочу вас обрадовать, динамически можно вставлять не только простой текст, но и 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 onclick="getmoney (this.form.Oplata.value,this.form.Chasov.value,this.form.Dney.value)" type=button value="Подсчитать"></td></tr>

</FORM>
</TABLE>

<SCRIPT language=javascript>
function getmoney (dat1,dat2,dat3)
{
month=dat1*dat2*dat3;
document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" ";
}
</SCRIPT>

<DIV id=resultat></DIV>

Сохраняем файл и открываем его браузером. Что мы видим? Три поля для ввода и кнопку с надписью "Подсчитать", при клике на которую запускается функция "getmoney". Она получает введенные значения, вычисляет месячную зарплату и выводит ее в браузере. Введите значения и нажмите кнопку "Подсчитать". Обратите внимание на значение месячной зарплаты. А теперь измените одно или несколько введенных значений и снова нажмите кнопку "Подсчитать". Как вы видите новое значение заменило старое. Очень удобно. А можно, например, выводить новое значение под старым, для этого нужно изменить строчку

document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" ";

на

document.all.resultat.innerHTML=document.all.resultat.innerHTML+"За месяц Вы заработаете "+month+" <br>";

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

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

Советы дилетанта или как сделать полноценный корпоративный сайт
По работе я занимаюсь достаточно специфической темой в области строительства, которая большинству нормальных людей мягко говоря малоинтересна. Достаточно долго я размышлял о необходимости создать добротный сайт, посвященный профессиональной сфере деятельности, который был бы интересен специалистам моей области и являлся надежным подспорьем в рабочей жизни
Что должен знать о Яндексе каждый. Часть 1
Название самой популярной поисковой системы по русскоязычному Интернету, т.е. Яндекса, означает Языковой index, а также имеет несколько других схожих трактовок, общий смысл которых выражается слоганом Найдется все. Прогрессирующая конкуренция среди поисковых машин заставляет более предвзято относиться к подобным обещаниям, т.к. мало найти все, надо уметь найти самой главное
Новейшая обсервация российских счетчиков: формация SpyLOG
Кто когда к кому пришел, Кто чего нарушил Все известно хорошо Из известной песни Вы когда-нибудь лечили зубы? Нет, не в бесплатной городской поликлинике 10, где длинные очереди и инвалидные бор-машины

<FORM name=test_form method=post>
<INPUT onclick="test_on_off (1)" type=button value="Включить">
<INPUT onclick="test_on_off (0)" type=button value="Выключить">
</FORM>

<SCRIPT language=javascript>
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="";}
}
</SCRIPT>

<DIV id=resultat></DIV>

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

<FORM name=test_form method=post>
<INPUT onclick="test_change ()" type=button value="ВключитьВыключить">
</FORM>

<SCRIPT language=javascript>
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="";}
}
</SCRIPT>

<DIV id=resultat></DIV>

Теперь кнопка работает как выключатель: кликнул - включил, еще раз кликнул - выключил, снова кликнул - опять включил...

Если кто чего недопонимает - смело пишите. Ну, а если кому облом код набивать, тоже пишите, вышлю.

В общем теперь вы имеете немалый арсенал средств для сайтостроителя, так что удачной работы!

Источник: http://www.ru-coding.com/


 

Последние новости

Портал госуслуг заражен Российская антивирусная компания 'Доктор Веб' опубликовала сообщение о том, что портал государственных услуг России (gosuslugi...
Махачкалинский преподаватель электроники Расул Кишов создал первый в Дагестане игровой аппарат с боевыми роботами Rambot...
Видео: CrashNet1 / YouTubeНациональное управление безопасности дорожного движения США (National Highway Traffic Safety Administration - NHTSA) провело первый краш-тест кроссовера Tesla Model X...
Видео: Numberphile / YouTubeФизик Тони Падилле из Ноттингемского университета (Великобритания) оценил количество элементарных частиц во Вселенной (кроме фотонов и нейтрино)...
Компания Microsoft запретила пользователям менять браузер по умолчанию в Windows 10 S. Об этом говорится в разделе FAQ, посвященном новой версии ОС...

Блог о софте

AVG 2013 Christmas Collection Mega Pack Final Version-FL | 761 MBAVG 2013 Christmas Collection Mega Pack Final VersionYou Have a Complete Collection of AVG 2013 SoftwareMega Pack Contains:AVG Antiviru
О программе:Zoner Photo Studio Pro - приложение, созданное для качественной обработки цифровых снимков...
Sophos Virus Removal Tool - антивирусный сканер проведет диагностику вашего ПК на наличие вирусов, программ-шпионов, руткитов и поддельных антивирусов и удалит их...
Photo Collage Max – программа, которая создает фотоколлажи. Так же создает альбомы, календари и т.п. Содержит в себе множество шаблонов, фигур, масок, фоторамок...
Дизайн Календарей - это доступная и удобная программа для создания красивых календарей с фотографиями на любой год или месяц...