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

1.    Введение

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

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

 

       2.  Основы 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=”buttonvalue=”Показать” OnClick=’javascript:alert(“Вы нажали на кнопку”)’>

 

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

 

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

 

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

 

3. Формы

 

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

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

 

© CPAS, 2004.



Опубликовал admin
26 Июн, Суббота 2004г.



Программирование для чайников.