 |
Учебник по программированию.Учимся программировать вместе с JavaScript. |
| Предыдущий параграф | Назад в содержание | Следующий параграф |
§09. JavaScript и html документ.
Реакция интернет страницы на действие пользователя.
Одно из назначений языка JavaScript в веб программировании заключается в том, что бы делать интернет страницы динамическими, т.е. «заставлять» их реагировать на действия пользователей. В простейшем случае действием пользователя может быть щелчок мыши по какому либо элементу страницы. В этот момент возникает так называемое «событие щелчок мыши», которое можно обработать с помощью JavaScript. Обработать событие означает запустить на выполнение какой-то код, который в свою очередь называется обработчиком события.
События бывают различными. Они генерируются браузером как при щелчке левой кнопки мыши, при нажатии на кнопку клавиатуры, так и при открытии документа или изменении размеров окна браузера. Подробнее всевозможные события будут изучены в соответствующем параграфе. На данном этапе рассмотрим только одно – щелчок мыши на элементе Html документа. В коде программы это событие имеет имя onсlick.
Всего существует несколько механизмов обработки событий. На данном этапе рассмотрим один из них. У большинства тэгов html может быть атрибут onclik. Он отвечает за обработку события, возникающего при нажатии кнопки мыши на элементе, созданном данным тэгом. Этому атрибуту необходимо присвоить значение, которое является JavaScript кодом. Этот код и будет обработчиком события onclick. Пример:
При нажатии на элементе появляется диалоговое окно:
Примечание: функция alert вызывает диалоговое окно с сообщением. Она была рассмотрена в 1 параграфе.
Обратите внимание на то, что для присвоения значения атрибуту onclick были использованы двойные кавычки, а уже в самом JavaScript коде для создания строки – одинарные. На практике можно сделать наоборот:
Результат при этом не изменится.
Здесь стоит вспомнить от том, что есть негласное правило: для того, что бы не запутываться, необходимо для себя определиться, где какие кавычки использовать. Как правило, в коде JavaScript используют одинарные кавычки, а в html коде – двойные. Это правило мы использовали, когда вставляли тэги с помощью метода document.write. В качестве аргумента мы отправляли ему строку с html кодом. Сама строка была в одинарных кавычках, а атрибуты тэгов в двойных.
Для того, что бы отделить JavaScript код от html, код обработчика события определяют как функцию в тэге script. А в качестве значения атрибуту onclick присваивают эту функцию. Причём функция может быть определена и в отдельном файле. Пример:
Результат останется прежним.
Использование элемента button для вызова JavaScript кода.
Как было уже сказано, практически любой элемент html документа может иметь атрибут onclick. Соответственно практически для любого элемента можно написать обработчик нажатия. Для наших последующих программ мы будем использовать элемент, который имитирует кнопку, как в «виндоусовских» приложениях. Пример:
Доступ к элементам Html документа.
Для того, что бы производить различные манипуляции с элементами html документа, программист должен иметь к ним доступ в коде программы. Один из способов обращения к элементам заключается в том, что у каждого элемента может быть атрибут id. Если у элемента он присутствует, и ему присвоено какое-либо значение, то в коде JavaScript появляется объект с таким же именем. Используя этот объект, можно обращаться к данному элементу.
Например, если у элемента div есть атрибут id со значением «div_1», то в JavaScript коде будет объект div_1. Этот объект, в свою очередь, отражает данный элемент div и имеет свойства и методы для работы с ним. Причём самому программисту объявлять данный объект уже не нужно.
Свойство innerHTML объектов, отражающих элементы HTML документа.
У любого объекта, отражающего элемент HTML документа, есть свойство innerHTML, которое можно использовать для чтения и изменения его содержимого.
Далее пример, в котором присутствует элемент div и кнопка, при нажатии на которую выводится в диалоговое окно содержимое этого элемента div:
При нажатии на кнопку:
Теперь изменим функцию F так, что бы при нажатии на кнопку менялось содержимое элемента div:
После нажатия:
Формирование содержимого элемента. Конкатенация строк.
В предыдущем параграфе была создана база данных учеников. Сейчас, используя полученные знания, мы можем создать страницу, в которой пользователь при желании может отсортировать по фамилии таблицу с учениками, нажав на кнопку. Для этого необходимо добавить в объект clas метод, который будет формировать строку с таблицей и вставлять её в документ.
Для написания данного метода нам необходимо знать о том, что строки можно соединять друг с другом с помощью знака +. Соединение строк в программировании называется конкатенацией строк. Пример:
Далее получившийся метод и пример его использования:
<body>
<script>
function Birthday(d,m,y)//Конструктор
{
...........
}
function Pupil(SN,N,A,d,m,y)//Конструктор
{
...........
}
function Clas()//Конструктор
{
.............
this.sort_S_Print = function()//Сортирует и выводит
{
this.sort_S();
var s;
s = '<table border = "1">';
s = s + '<tr><td><b>Фамилия</b></td>'+
'<td><b>Имя</b></td>'+
'<td><b>Возраст</b></td>'+
'<td><b>Дата рождения</b></td></tr>';
for (var c = 0;c
После нажатия на кнопку:
Примечание: в данном примере код, который остался без изменения был заменён многоточиями.
Отступление: здесь необходимо сказать несколько слов о политике использования JavaScript в документах. В данном примере таблица была сформирована в коде программы. Если в браузере у пользователя будет запрещено выполнение сценариев JavaScript, то он эту таблицу не увидит вообще. Поэтому в первоначальном виде она должна существовать в html коде. А сама кнопка может быть добавлена из сценария JavaScript, как было сделано в примере.
Только нужно знать и помнить о том, что метод document.write добавляет содержимое в html документ только в то место, где находится тэг script. Т.е. тег script с кодом, вставляющим кнопку, необходимо поместить туда, где эта кнопка должна быть. Так же необходимо знать о том, что с помощью метода document.write можно вставлять в документ содержимое только на этапе формирования страницы. После полной загрузки страницы вызов этого метода сотрёт всё содержимое и начнёт страницу заново.
Так же стоит сказать о том, что поисковые системы при анализе html документов игнорируют JavaScript код. Поэтому если вам важно, что бы тот или иной контент был проанализирован поисковиком, то он должен присутствовать в html документе.
Динамическое изменение свойств CSS.
Одной из замечательных возможностей JavaScript является то, что можно менять CSS свойства элементов в коде программы. В предыдущем подразделе мы рассмотрели свойство объектов отражающих элементы Html документа innerHTML. Так же у таких объектов есть свойство style, которое является объектом со свойствами CSS данного элемента. Эти свойства имеют такие же имена, как и в html документе за не большими исключениями.
Например, в следующем примере осуществлён доступ к свойству CSS color, при этом после нажатия на элемент цвет текста будет изменён:
<body> <div id = "div_1" onclick = "div_1_onclick()">Нажми меня! </div> <script> function div_1_onclick() { div_1.style.color = 'red'; } </script> </body>
После нажатия:
Правила формирования имён свойств объекта style.
Как было уже сказано имена свойств в объекте style и css в некоторых случаях отличаются. Для того, что бы сформировать название свойства в объекте style, необходимо придерживаться следующих правил:
- во-первых, названия свойств пишутся маленькими буквами. Даже первый символ тоже должен быть маленьким. Исключением является случай описанный в следующем правиле.
- во-вторых, если в css в названии свойства есть дефис, то он пропускается, а следующая за ним буква становится большой. Например: в css – border-color, в JavaScript – borderColor.
Пример:
<body> <div id = "div_1" onclick = "div_1_onclick()">Нажми меня! </div> <script> function div_1_onclick() { div_1.style.borderStyle = 'solid'; div_1.style.borderColor = 'red'; div_1.style.borderWidth = '2px'; } </script> </body> </p>
После нажатия:
Динамическое скрытие и показ элементов с помощью свойства CSS display.
С помощью CSS свойства display элементы html документа можно скрывать и показывать. В следующем примере при нажатии на кнопки показывается и скрывается текст:
После нажатия на кнопку:
Снова нажав на кнопку, всё вернётся в исходное состояние.
Задачи.
1. Добавить в документ с базой данных учеников группу радио кнопок для сортировки таблицы по различным параметрам. После нажатия на кнопки таблица должна автоматически обновляться.
Примечание: радио кнопки имеют индикацию нажатия, т.е. в группе нескольких кнопок индикатор должен показывать, какая кнопка нажата в данный момент. В нашем случае группа радио кнопок может выглядеть следующим образом:
2. Создать раскрывающееся содержание двумя способами: с помощью изменения свойства css display и с помощью свойства innerHTML.
3. Создать страницу с калькулятором.
Примечание: возможно при решении данной задачи вам понадобиться из свойства innerHTML брать значение в качестве числа. Т.к. свойство innerHTML – это строка, то если вы присвоите его переменой, то она то же станет строкой. В дальнейшем, когда вы будете производить вычисления у вас, возможно, из-за этого появится ошибка. О том, как переводить строки в числа и наоборот речь будет идти в соответствующем параграфе. Н данном этапе для того, что бы переменная, которой вы присвоите значение типа строка, осталась типом число можно умножить её на 1. Пример:
Примеры решений.
2.
С помощью свойства CSS display:
С помощью свойства innerHTML:
Результат тот же.
3.
| Предыдущий параграф | Назад в содержание | Следующий параграф |