Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 681 RSS
←   Ноябрь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

681 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

Внимание!!! В интернет магазине ПО и инфопродуктов (лекций и видеоуроков) появился новый урок из цикла "Создаем биржевого робота".

В платном разделе

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Java Script(JS):

 

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS") и Разработка сервиса сайта на PHP на примере партнерской программы).

 

Продолжим изучение DOM-объектов. На уроке 83 мы изучили понятие DOM-и объект document, который позволяет получить доступ к различным элементам web-страницы. И так, начнем изучать эти элементы. Первый из элементов, который мы изучим - форма (тэг <form>). Давайте рассмотрим его на примере:

<html>

 

<head>

    <title>Урок 85. Java Script (JS): Работа с элементами формы</title>

</head>

 

<body>

    <form  name="ProgrammForm">

        Введите ваше имя: <input type="text" name="YourName" size="20"><input type="submit" value="ОК" name="BtnOk" OnClick="ButtonClick()"></p>

    </form>

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

        function ButtonClick() {

            document.ProgrammForm.BtnOk.value="Больше сюда не нажимать"

            alert("Здравствуй "+document.ProgrammForm.YourName.value)

        }

    </SCRIPT>

</body>

 

</html>

 

И вот результат работы данной программы:

Как видим, к формам web-страницы мы обращаемся по имени, которое задано в параметре name тэга формы. К элементам формы обращается точно так же - через точку по имени.

Еще можно при помощи слова this передать в обработчик ссылку на тот объект, из которого вызван этот обработчик события, например, если это OnClik привязанный к кнопочке, то в функцию обработчик будет передана ссылка на эту кнопку. Как из кнопки сослаться на другой реквизит этой формы? Для этого сначала сошлемся на форму (свойство form), а через нее на другой элемент формы. Вот как будет выглядеть тот же самый пример с использованием ссылки this:

 

<html>

 

<head>

    <title>Урок 85. Java Script (JS): Работа с элементами формы</title>

</head>

 

<body>

    <form  name="ProgrammForm">

        Введите ваше имя: <input type="text" name="YourName" size="20"><input type="submit" value="ОК" name="BtnOk" OnClick="ButtonClick(this)"></p>

    </form>

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

        function ButtonClick(obj) {

            obj.value="Больше сюда не нажимать"

            alert("Здравствуй, "+obj.form.YourName.value)

        }

    </SCRIPT>

</body>

 

</html>

 

А теперь рассмотрим еще один пример:

на странице картинка:

 

 щелкаем на нее мышкой

 

и картинка меняется на другую:

 

А вот код этой программы:

<html>

 

<head>

    <title>Урок 85. Java Script (JS): Пример с заменой картинки при щелчке на нее мышкой</title>

</head>

 

<body>

    <img src="Blue_01.png" OnClick="ImageClick(this)">

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

        function ImageClick(obj) {

            obj.src="Yellow_04.png"

        }

    </SCRIPT>

</body>

 

</html>

 

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное