Сегодня мы рассмотрим базу ЯваСкрипта, а именно основные функции и методы для взаимодействия с Интернет страницей. Рассматривать же синтаксис мы не будем, так как это совершенно отдельная история. Так же Вам придется знать основы HTML. Если Вы их не знаете, то советую сначала прочитать про них.
Начнем… Создадим пустой HTML документ «index.html» со стандартным кодом:
<html> <head> <title>JavaScript Test</title> </head> <body> </body> </html>
Как можно вызвать JavaScript?
По сути сществует два способа вызова кода JS: явный вызов и события. Первый способ позволяет вызывать методы JS в любом месте страницы. Делается это путем явного указания участка кода со скриптом:
<script type="text/javacript"> //Ваш код здесь </script> или <script type="text/javacript" src="path\file.js"> //В данном случае весь код храниться в отдельном //файле file.js находящемся в каталоге path </script>
Второй способ, требует знания событий, которые порой различны в разных Интернет браузерах. Самыми простыми являются события onclick, onload. Напрмиер:
<body onload="Ваш код здесь"> </body>
Вернемся к нашему файлу. Теперь добавим на нашу страницу два элемента, текстовое поле и кнопку:
<html> <head> <title>JavaScript Test</title> </head> <body> <input type="text" value="введите текст" /> <input type="button" value="Получить значение поля" /> </body> </html>
Для того чтобы можно было получить значение, введеное в текстовое поле, необходимо сделать две вещи. Первое — дать нашему текстовому полю уникальный идентификатор. Делается это путем добавления параметра id. Второе — задать код, который будет, например, выводить сообщение со значением нашего поля при клике, а следовательно нам необходимо добавить событие onclick на нашу кнопку. В итоге имеем:
<html>
<head>
<title>JavaScript Test</title>
</head>
<body>
<input type="text" value="введите текст" id="test_1" />
<input type="button" value="Получить значение поля"
onclick="alert(document.getElementById('test_1').value);" />
</body>
</html>
Теперь давайте создадим еще одно текстовое поле и попробуем подсчитать сколько символов мы ввели в него. Для этого помимо самого текстого поля нам нужно будет добавить какой-нибудь тег в котором будет отображаться число символов.
<input type="text" value="" /> Длина текста: <b id="b_1"></b>
Добавим событие onKeyUp (срабатывает, при отпускании кнопки на клавиатуре) на форму с вводом текста:
<input type="text" value=""
onkeyup="document.getElementById('b_1').innerHTML=this.value.length;" />
Длина текста: <b id="b_1"></b>
Так же стоит отметить, что в скрипте в элементы HTML можно вставлять целые куски кода. Давайте создадим две кнопки, одна из них будет добавлять элемент в страницу, вторая удалять все созданные. Теперь добавление элементов опишем как отдельную функцию, которая будет вызываться при клике на кнопку «Добавить»:
<script type="text/javascript">
function Add()
{
document.getElementById('s').innerHTML += "<input type='text' /><br/>";
}
</script>
<input type="button" value="Добваить" onclick="Add();" />
<input type="button" value="Очистить"
onclick="document.getElementById('s').innerHTML='';" />
<br/><span id="s"></span>
Если создаваемым элементам добавлять идентификаторы id, то с ними можно будет работать так же как и мы рассматривали чуть выше. Ну вот пожалуй пока и все. Если Вы хотите узнать еще основы, то оставляйте комментарии, я постараюсь рассмотреть все просьбы. =)
