Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Использование JS для создания «умных» форм

Источник: realcoding.net

Введение


JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году.

Вы, наверное, видели на моем сайте в гостевой книге или на форуме, формы добавления сообщений со специальными кнопками. И, если Вам хотелось обзавестись такой же, то эта статья для Вас.

Основы JS


Код JavaScript вставляется между тегами <script> и </script>

Если в коде содержаться функции, то эти функции должны быть размещены в тегах <script></script> между тегов <head> и </head>.

Если JavaScript код вынесен в отдельный файл с расширением .js, то подключить такой файл к HTML-коду можно, указав имя файла в качестве параметра src тега <script>

Пример:

<html>
   <head>
     <script src=”func.js”></script>
   </head>
   <body>
     …
   </body>
 </html>

Таким образом, мы подключили к HTML файлу файл с JavaScript.

Использовать JavaScript можно, например, в качестве обработчика определенных событий. Например, при нажатии мышкой на какой-нибудь элемент управления, возникает событие OnClick.

Пример:

<input type=”button” value=”Показать” OnClick=’javascript:alert(“Вы нажали на кнопку”)’>

Для того, чтобы браузер «понял», что нужно выполнить скрипт, написанный на JS, мы указываем псевдопротокол javascript:

Функция alert(string s) выводит на экран окно с текстом s и одной кнопкой “OK”.

В данном примере при нажатии на кнопку «Показать» выведется окно с текстом «Вы нажали на кнопку» и одной кнопкой «ОК».

Формы


Доступ к элементам формы можно получить, через следующую конструкцию:

document.имя_формы.имя_компонента

Для элементов ввода информации (<input type=”text”…> и <textarea></textarea>) для доступа к самой введенной или не введенной информации доступно свойство value.

Пример:

<html>
<head>
 <script>
   function AddText (text)
{
 document.form1.edit1.value=text;
}
 </script>
</head>
<body>
<form name=”form1”>
<input type=”text” name=”edit1”>
<input type=”button” value=”Press me” OnClick=’javascript:AddText (“This is Edit”)’>
</form>
</body>
</html>

В данном примере после нажатия на кнопку “Press me” в текстовом поле ввода появиться текст “This is Edit”. Так же в функции такого рода можно добавлять еще один параметр – объект в который нужно записать текст. Например, у нас есть два поле ввода текстовой информации и две кнопки. При нажатии на первую кнопку мы запишем некоторый текст в первое поле ввода, а при нажатии на вторую кнопку – текст во второе поле. Для этого нам не обязательно писать две функции, достаточно написать одну функцию, указав в ее параметрах дополнительно к тексту, который мы хотим добавить, объект, в который этот текст нужно добавить.

function AddText2 (object, text)
{
 object.value=text;
}

Вот и вся функция, необходимая для изменения любого текста в любом элементе ввода текстовой информации. Давайте сохраним эту функцию в отдельном файле с именем addtext.js

А вот и html страничка:

<html>
<head>
<script src=”addtext.js”></script>
</head>
<body>
<form name=”form1”>
<input type=”text” name=”edit1”>
<input type=”text” name=”edit2”>
<input type=”button” value=”edit1” OnClick=’javascript:AddText2(document.form1.edit1, “Text in edit1”)’>
<input type=”button” value=”edit2” OnClick=’javascript:AddText2(document.form1.edit2, “Text in edit2”)’>
</form>
</body>
</html>

Ну вот, пожалуй, и все что я хотел написать. Если у Вас будут вопросы, то пишите их на мой электронный адрес: cpas@realcoding.net



Похожие статьи:
- Преобразование числа в текст
- Пример загрузки файла в Perl
- Загрузка файлов на сервер и посылка e-mail с вложениями
- Введение в сервлеты
- Постоянная загрузка в чате
- Модуль mod_rewrite. Часть 3.
- Обманщик спам-роботов
- Пароль на страницу
- Оптимизация сайта: проблема выбора
- Accessibility в WEB
- Чем ссылка глубже - тем она лучше
- Время выполнения SQL запросов
- Парсер на РНР - это возможно!


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]