Занятие 2. Обновление содержимого документа с помощью JavaScript

Опубликовано пользователем Бессонов Л.В. 25.02.2010г.

Для того чтобы получить доступ к любому элементу html-документа из JavaScript возможно использовать функцию document.getElementById.Для этого необходимо к эле-менту добавить атрибут id, в котором задаётся идентификатор элемента уникальный в пределах документа. Пример:

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function setText() {
  5. document.getElementById("div1").innerHTML = "Hello!";
  6. }
  7. </script>
  8. </head>
  9. <body>
  10. <div id="div1">
  11. </div>
  12. <input type="button" value="Push it" onclick="setText()"></input>
  13. </body>
  14. </html>

Как видите, для того чтобы установить текст элемента div используется свойство innerHTML — это нестандартное свойство поддерживаемое всеми современными браузе-рами, позволяющее установить или считать тело любого тэга в виде html строки.

Кроме этого свойство для элементов доступны также свойства имеющие имена совпадающие с именами атрибутов данного элемента. В частности для всех элементов досупно свойство style, которое позволяет считать или установить стиль элемента. Т.к. стиль является совокупностью пар свойств/значений, то и при доступе к свойству style любого элемента каждое из свойств стиля устанавливается/считывается отдельно.

Для того чтобы не выбирать каждый раз элемент из документа по идентификатору, можно запомнить выбранный элемент в переменной. Пример:

  1. var elem = document.getElementById("div1");
  2. elem.innerHTML = "test";
  3. elem.style.color = "red";
  4. elem.style.fontSize = "20";

В случае когда имя свойство стиля содержит «–», например, background-color, то при доступе к нему из JavaScript необходимо выкинуть из названия знак(и) «–» и сделать следующую букву заглавной т.е. для background-color получим backgroundColor.

Инструкция if

Инструкция if — это базовая управляющая инструкция, позволяющая интерпретатору JavaScript принимать решения или, точнее, исполнять инструкции в зависимости от условий. Инструкция имеет две формы. Первая:

  1. if (выражение)
  2. инструкция

В этой форме инструкции if сначала вычисляется выражение. Если полученный результат равен true или может быть преобразован в true, то исполняется инструкция. Если выражение равно false или преобразуется в false, то инструкция не исполняется. Например:

  1. if (username == null)
  2. username = "John Doe";

Аналогично:

  1. if (!username) username = "John Doe";

Мы всегда можем заменить одиночную инструкцию блоком инструкций. Поэтому инструкция if может выглядеть так:

  1. if ((address == null) || (address == "")) {
  2. address = "undefined";
  3. alert("Пожалуйста, укажите почтовый адрес.");
  4. }

Вторая форма инструкции if вводит конструкцию else, исполняемую в тех случаях, когда выражение равно false. Ее синтаксис:

  1. if (выражение)
  2. инструкция1
  3. else
  4. инструкция2

В этой форме инструкции сначала вычисляется выражение, и если оно равно true, то исполняется инструкция1, в противном случае исполняется инструкция2.

Передача параметров в функции и возврат значений из них

Для того чтобы к функции добавить список параметров, имена параметров пере-числяются в круглых скобках после идентификатора функции. Для функции без парамет-ров, как было указано в материале первого занятия, необходимо использовать пустые круглые скобки.

При передаче параметров в функцию, необходимо указать выражения, значения которых будут вычислены и переданы в функцию. Если выражений несколько, то необходимо разделить их запятой. Внутри функции значение каждого из выражений будет доступно по соответствующему имени параметра. Пример:

  1. function testParams(a, b, c) {
  2. document.write("<p>" + a + "<br>" + b + "<br>" + c);
  3. }
  4. testParams(1 + 2, 4, 7)

Выведет в документ числа 3, 4, 7 расположенные на разных строчках.

Для возврата значений из функции используется инструкция return после которой указывается выражение, значение которого необходимо вернуть из функции. Сам вызов такой функции в данном случае может быть использован как часть выражения. Пример:

  1. function summAll(a, b, c) {
  2. return a + b + c;
  3. }
  4. var x = summAll(1 + 2, 4, 7);

Инструкция return прекращает выполнение текущей функции, для того чтобы пре-кратить выполнение функции без возврата значения можно использовать инструкцию return без выражения, значение которого необходимо вернуть. Пример:

  1. function summAll(a, b, c) {
  2. var summ = a + b + c;
  3. if (summ > 9)
  4. return;
  5. else
  6. document.write(summ);
  7. }

В данном случае при сумме переданных аргументов > 9 произойдёт возврат из функции, в противном случае сумма будет выведена в документ.

Задания:

  1. Создайте функцию id с одним параметром для получения элемента документа по его идентификатору.
  2. Создайте страничку с элементом меняющим цвет при нажатии на него. Сделай-те так, чтобы он менял цвета по кругу, используйте цвета радуги. Добавьте вы-вод цвета в виде текста на данном элементе.
  3. Сделайте страницу с закладками. Пусть на ней будут 3 закладки в каждой из которых имеется свой текст или картинка. Сделайте чтобы ярлык активной за-кладки имел выделение цветом.
  4. *Напишите функцию для добавления новой закладки в условиях предыдущего задания.

Баннер SGU.RU