Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые пер...
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #18: Программируем "за кадром" Страницы: « 1 2 3 4 5 6 7 вопросы »

Массивы

Массивы делятся на встроенные (document.links[], document.images[],...) и определяемые пользователем (автором документа). Встроенные массивы мы подробно обсуждаем в разделах "Программируем картинки", "Программируем формы" и "Программируем гипертекстовые переходы". Поэтому подробно остановимся на массивах, определяемых пользователем. Для массивов задано несколько методов:

  • join();
  • reverse();
  • sort();

и свойство length, которое позволяет получить число элементов массива. Это свойство активно используется в примерах данного раздела. В частности, при обсуждении метода join().

Для определения массива пользователя существует специальный конструктор:

a = new Array();
b = new Array(10);
c = new Array(10,"Это значение");

Пример использования:

<SCRIPT>
c = new Array(30,"Это значение");
</SCRIPT>
<FORM><INPUT SIZE=& {c[0];};
value=& {c[1];};
onFocus="this.blur();">
</FORM>

Как видно из этого примера, массив может состоять из разнородных элементов. Массивы не могут быть многомерными.

Для работы с массивами в JavaScript применяются методы join(), reverse(), sort(). Кроме того, массивы обладают свойством длины, length.

Метод join()

Метод join() позволяет объединить элементы массива в одну строку. Он является обратной функцией методу split(), который применяется к объектам типа STRING. Рассмотрим пример преобразования локального URL в URL схемы http:

window.location:
http://intuit.ru/help/index.html

Выполнили:

b = window.location.href.split('/');

Получили массив b:

b[0]=http:
b[1]=
b[2]=intuit.ru
b[3]=help
b[4]=index.html

Заменили схему и вставили "host:port":

for(i=0;i<b.length;i++)
{
if(b[i]=="file:") b[i] = "http:/";
if(b[i]=="c%7C") b[i] = "remote.host.domain:80";
}

Получили массив b:

b[0]=http:
b[1]=
b[2]=intuit.ru
b[3]=help
b[4]=index.html

Слили элементы массива b:

l=b.join("/");

Получили в результате:

http://intuit.ru/help/index.html

Другой пример использования метода join() — замена символа в строке:

str = "document.img1.src='http://images/imagе1.gif';"
document.write(str);

Исходная строка:

document.img1.src='http://images/imagе1.gif';

Заменяем в строке все единицы на двойки:

b = str.split('1');
str = b.join('2');

Получаем следующий результат:

document.img2.src='http://images/imagе2.gif';

Последний пример показывает, что массив пользователя можно получить и без явного применения конструктора массива. Массив элементов строки получается просто как результат действия функции split().

Метод reverse()

Метод reverse() применяется для изменения на противоположный порядка элементов массива внутри массива. Предположим, массив натуральных чисел упорядочен по возрастанию:

a = new Array(1,2,3,4,5);

Упорядочим его по убыванию:

a.reverse();
a[0]=5
a[1]=4
a[2]=3
a[3]=2
a[4]=1

Можно, наверное, придумать и более внятный пример, но, к сожалению, на практике встречаться с этим методом мне приходилось нечасто.

Метод sort()

Как принято в современных интерпретируемых языках, например в Perl, метод sort() позволяет отсортировать элементы массива в соответствии с некоторой функцией сортировки, чье имя используется в качестве аргумента метода:

a = new Array(1,6,9,9,3,5);
function g(a,b)
{
if(a > b) return 1;
if(a < b) return -1;
if(a==b) return 0;
}
b = a.sort(g);

В результате выполнения этого кода получим массив следующего вида:

b[0]=1
b[1]=3
b[2]=5
b[3]=6
b[4]=9
b[5]=9

Возможность использования произвольной функции сортировки позволяет выполнять подробный анализ строковых объектов. Одним из таких примеров может служить анализ строки атрибута SRC контейнера IMG, если картинка подставляется скриптом, и сортировка полей формы по значениям:

document.image.src = "http://www.intuit.ru:80/cgi-bin/image?x=10&y=20&z=15";

Выделим x и y. Затем отсортируем их:

str = "http://www.intuit.ru:80/cgi-bin/image?x=10&y=20&z=15";
s = str.split('?');
s1 = s[1].split('&');
s2 = s1.sort(v);
for(i=0;i<s2.length;i++) document.write("s2["+i+"]='"+s2[i]+"'<br>");
s2[0]='x=10'
s2[1]='z=15'
s2[2]='y=20'

Аналогичные манипуляции можно проделать с любым массивом. Если не указывать функции в аргументе метода сортировки, то элементы массива сортируются в лексикографическом порядке. Это значит, что они сначала преобразуются в строки и только потом сортируются.

Перейти к следующей странице »
версия для печати: HTML, PDF
Страницы: « 1 2 3 4 5 6 7 вопросы »
  Основные понятия
Типы данных, модель безопасности, прототипы, объекты, функции, процедуры, обмен данными, счетчики.
 
  Информация о лекции
В этой лекции рассматриваются приемы программирвания на JavaScript, невидимые для читателей HTML-страниц. Рассматриваются принципы работы счетчиков посещаемости, работы с механизмом cookie и многое другое.
 
  Информация о главе
Глава 3. JavaScript
Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »