Введение
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>
Ну вот, пожалуй, и все что я хотел написать. Если у Вас будут вопросы, то пишите их на мой электронный адрес:
[email protected]