Главная » Полезные статьи » Язык JavaScript » Использование JS для создания «умных» форм
Распечатать статью

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

Введение

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

 

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи