Учебник по JavaScript_part3

J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Объекты JavaScript
1. Основные группы объектов
Объект – это абстрактный контейнер для хранения данных всех типов. В языке
JavaScript различают три группы объектов: объекты броузера, встроенные объекты
языка и объекты, созданные программистом. Каждый объект характеризуется своим
набором свойств и методов. Каждому тегу HTML соответствует объект языка JavaScript.
Объекты броузера
window
__parent, frame, self, top
__location
__history
__document
данные объекты есть свойства объекта window
__ form
__ element
(textarea, checkbox, password,
данные объекты есть свойства объекта
document
radio, select, button, reset, submit)
__ link
__ anchor
Структура объектов в броузере иерархична. Существует главный объект window, внутри
которого находятся объекты:

parent, frame, self, top – хранят информацию для окон, куда может быть загружен
текущий документ

location – хранит URL текущего документа

history – хранит URL предыдущих вызовов документа

document – содержит информацию о текущем html-документе
Внутри объекта document находятся следующие объекты:

form, element – хранит объекты для обмена информацией с сервером

link – хранит указатели ссылки на внешние документы

anchor – хранит указатели на ссылки в текущем документе
Встроенные объекты JavaScript. Наряду с представленной иерархической структурой
существует ряд объектов, которые являются встроенными объектами языка JavaScript.
date – обеспечивает доступ к функциям даты и времени
Math – выполняет вычисление математических функций
string – строка, набор символов
Array – массивы данных
2. Свойства и методы объектов
Свойства. Свойства объектов предназначены для хранения значений (как переменная).
Свойства объектов имеют режимы либо записи и чтения, либо чтения.
Для обращения к свойству объекта надо указать:
имя объекта.имя свойства
Например, document.bgColor=”red” , режим – запись;
a=document.bgColor, режим – чтение.
Методы. Методы управляют действиями над объектами. Для вызова метода объекта надо
указать:
имя объекта.метод ( )
Содержимое скобок показывает, к чему применён метод, над чем производится действие:
1). document.write (“<h1>”+r+”</h1>”) выводит на экран значение переменной r в
формате заголовка HTML <h1>
2). Math.sin(a) вычисляет функцию sin от значения переменной a
Для сохранения значения синуса можно выполнить присваивание (возвратить значение)
какой-либо переменной, например, b=Math.sin(a)
29
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Контрольные вопросы
1.
2.
3.
4.
5.
6.
7.
Дайте определение и характеристику объекту языка программирования.
Какова структура объектов в броузере?
Какие вы знаете встроенные объекты языка JavaScript?
Для чего предназначены свойства объектов?
Как обратиться к свойству объекта?
Для чего предназначены методы объектов?
Как осуществить вызов метода объекта?
3. Объект document
Объект document является свойством объекта window. Объект document содержит
информацию о текущем документе и предоставляет методы для отображения его в окне
броузера. Свойства объекта document соответствуют элементам, которые могут
содержаться в текущем документе (якоря, формы, ссылки).
Обращение к свойствам и методам
document.имяСвойства
document.метод (параметры)
Свойства

alinkColor – цвет текста ссылки в момент выбора

vlinkColor – цвет ссылки, которую посетили

anchors – массив якорей всего документа

bgColor – цвет фона документа

fgColor – цвет текста документа

forms – массив объектов форм документа

lastModified – дата последнего изменения документа

links – массив всех элементов link, используемых как ссылки на другие документы
Методы

write – выводит на экран выражение

clear – очищает окно, в котором находился документ

open – открывает поток вывода информации для загрузки документа

close – закрывает поток вывода информации и отображает документ
4. Объект Math
Встроенный объект Math предоставляет методы для вычисления математических функций:

abs, sqrt – абсолютное значение и квадратный корень аргумента

sin, cos, tan – тригонометрические функции (аргументы – в радианах)

exp, log – экспонента и натуральный логарифм

min, max – большее или меньшее двух аргументов

round, ceil – округляет аргумент до ближайшего целого

floor – возвращает целое число аргумента, отбрасывая его дробную часть
Практическая работа «Математические функции объекта Math»
Используя методы объекта Math, вывести в таблице значения синуса, тангенса, экспоненты
и квадратного корня для заданного числа N. Применить свойства объекта document для
установки цвета фона и цвета текста документа. Округлить выводимые значения до 0, 01.
5. Объекты String
Объект String состоит из набора символов, заключённых в кавычки: A=”JavaScript”.
Строки можно конкатенировать (складывать) и разделять. B=”Java”+”Script”
30
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Свойства. Объект String имеет свойство – length (длина строки). length подсчитывает
количество символов в строке и работает только в режиме чтения. Например, значением
A.length является число 10.
Для возвращения результата надо применить:
1). document.write(A.length) – вывод на экран числа 10
2). B=A.length – присваивание числа 10 переменной В
Методы. Методы объекта String можно разделить на две группы: форматирование и
выделение подстроки.
Методы форматирования:

bold – выделяет строку жирным шрифтом, например, document.write (A.bold( ))

italics – выделяет строку курсивом, например, document.write (A.italics( ))

fontcolor – устанавливает цвет строки, например, document.write (A.fontcolor(“#rrggbb”))

fontsize – устанавливает размер строки, например, document.write (A.fontsize(7))

big – вывод строки шрифтом бóльшего размера, например,
document.write(“это”+”большой”.big()+”текст”)

small – вывод строки шрифтом меньшего размера

sub, sup – выделяет строку нижним или верхним индексом

toLowerCase – переводит строку в нижний регистр (маленькие буквы)

toUpperCase – переводит строку в верхний регистр

fixed – печатная машинка

link – динамическое создание гиперсвязей
Методы выделения подстроки:

сharAt(№ позиции) – получает символ указанной позиции строки (нумерация
символов строки начинается с нуля)
Пример: A=”JavaScript”
B=A.charAt (2)
0 1 2 3 4 5 678 9


В результате в переменную B возвратится значение “v”.
JavaScript
indexOf(“подстрока”, [index]) – получает № позиции искомого символа (подстроки)
“подстрока” – что искать; [index] – с какого № позиции искать (по умолчанию №=0)
Пример: A=”JavaScript”
B=A.indexOf (“v”)
В результате в переменную B возвратится значение “2”
substring(N1,N2) – выделяет подстроку от позиции символа N1 до позиции N2,
причём, символ на позиции N2 в подстроку не включается.
Пример1: A=”JavaScript”
B=A.substring (0,4)
0 1 2 3 4 5 678 9
В результате в переменную B возвратится значение “Java”
Пример2: A=”JavaScript”
B=A.substring (4,A.length)
В результате в переменную B возвратится значение “Script”
JavaScript
0 1 2 3 4 5 678 9
JavaScript
Контрольные вопросы
1.
2.
3.
4.
5.
6.
7.
8.
Что представляет собой объект String?
Назовите свойство объекта String.
Назовите основные группы методов объекта String.
Назовите методы форматирования.
Перечислите методы выделения подстроки.
Какую функцию выполняет метод сharAt?
Какую функцию выполняет метод indexOf?
Какую функцию выполняет метод substring?
Практическая работа «Выделение подстроки»


Создайте html-файл Строка.htm
В тегах заголовка документа <head> создайте скрипт, включающий в себя функции с
именами
Z1( ), Z2( ), Z3( ), Z4( ):
31
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
<head><script>
function Z(1) { };
function Z(2) { }; …
</script></head>
 Последовательно реализуйте программы для каждой задачи в созданных функциях
 Выполните вызов функций из дополнительных скриптов тела документа <body>:
<body>
<script> Z(1) </script>
<script> Z(2) </script>…
</body>
 Проанализируйте отображение результатов программы в броузере.
Задача 1. Из заданной строки «железнодорожник» составьте следующие строки: «донор»,
«жезл», «крокодил». Примените методы форматирования fontsize, fontcolor и bold для
вывода результатов. Проанализируйте отображение результатов работы скрипта в
броузере.
Задача 2. Введите строку с клавиатуры. Подсчитайте, сколько раз в заданной строке
встречается символ «+» и сколько раз символ «-»?
Задача 3. В заданной строке заменить все восклицательные знаки на вопросительные.
Задача 4*. Вычеркнуть (удалить) все пробелы из заданной строки.
Задача «Телеграмма». Определить стоимость текста телеграммы, если одно слово стоит
10 руб. и взимается комиссионный сбор с одной телеграммы 15 руб.
Задача «Символы строки». Выяснить, какая из букв, первая или последняя, встречается
в заданной строке чаще.
Пример вывода символов средствами HTML и JavaScript
Задача. Вывести строку «Реклама» по образцу, применяя для каждого символа размер
шрифта от 1 до 7.
Дополните скрипт циклом для вывода строки «Реклама» по образцу, применяя для каждого
символа размер шрифта от 7 до 1.
амал
кеР Реклама
Код html-файла:
Пример вывода символов средствами HTML и JavaScript
<html><head> <script>
function start ( ) {
s="Реклама";
k=1;
for ( i=s.length-1; i >=0; i-- ) {
m=s.charAt( i );
document.write( ( ( m.fontcolor ('red') ).bold( ) ).fontsize ( k ) );
k=k+1;
}
}
</script></head>
<body><center>
<big>р<big>е<big>к<big>л<small>а<small>м<small>а<br>
<hr size=10 width=95% align=center color='red'>
<font size=7>Реклама</font><br>
<hr size=10 width=95% align=center color='blue'>
<! Комментарий: два примера отображения текста с горизонтальными разделителями в
html ->
<script> start ( ) </script>
</center>
</body> </html>
32
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Массивы данных
1. Назначение массивов. Способы обработки
Массивы – это способ организации данных. (Данные хороши тогда, когда они хорошо
организованы!). Существуют одномерные, двумерные массивы данных.
Определение, назначение. Массив – это последовательность данных, которая
обозначена одной переменной с разными индексами (номерами). Доступ к каждому
элементу массива осуществляется по его индексу, например, А 0, А 1,… , А n
Массивы
нужны
тогда,
когда
для
решения
задачи необходимо
хранение
последовательности данных, для этого их записывают в файлы и хранят во внешней
памяти. Примером организации данных в виде массивов являются паспортные данные
каждого гражданина (№, серия, ФИО, место рождения, место жительства и т.п.).
Типовые задачи обработки массивов





Поиск суммы элементов
Поиск интересующего элемента
Поиск max (min) элемента
Слияние массивов
Перестановка элементов, сортировка
Требования к алгоритму. Для обработки массива программа должна содержать три
части:
1. Создание и заполнение массива. Создать или описать массив – зарезервировать
обозначенную область памяти компьютера. Заполнить массив – в каждую переменную
массива записать конкретные данные.
2. Обработка массива, решение задачи. Для решения задачи применяются типовые
задачи обработки массивов.
3. Вывод результатов обработки массива.
Так как массив – это последовательность данных, отличающихся индексом переменной, то
все части программы выполняются в циклических алгоритмах. В некоторых задачах в одном
и том же цикле выполняются заполнение и обработка массива, или обработка массива и
вывод результатов.
Контрольные вопросы
1.
2.
3.
4.
5.
6.
Дайте определение массива данных.
Для чего применяются массивы?
Приведите примеры массивов.
Назовите типовые задачи обработки массивов.
Каковы требования к алгоритму решения задачи обработки массива?
Какая базовая структура программирования применяется в обработке массива?
Почему?
2. Одномерные массивы в JavaScript. Объект Array
Создание и заполнение массива. Для создания массива данных А0, А1,… , Аn
применяется объект Array и конструктор new.
var A = new Array(n+1)
A – объект, создаваемый программистом
new – конструктор создания нового объекта
n – указывает размер массива (количество элементов можно не определять)
Объект A имеет только одно свойство: A.length – длина, количество элементов
(режим чтения). Нумерация элементов массива начинается с 0.
массива
Для заполнения элементов массива данными можно использовать два способа.
1. Присваивание каждому элементу массива его значения
2. Заполнить массив с клавиатуры, применив в цикле метод prompt
1. var A = new Array (5,-1,7);
2.
Выполнение строки программы приводит к:
A[0]=5;
A[1]=-1;
A[2]=7;
A.length → 3
var A = new Array ();
for (i=0; i<=20; i++) {
A[i]=prompt(“Введи”+i+”-й элемент”,””)
}
b= A.length → (в результате b=21)
33
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Контрольные вопросы
1.
2.
3.
4.
5.
Как создать массив в языке JavaScript?
Что означает понятие «создать или описать массив»?
Что означает понятие «заполнить массив»?
Назовите способы заполнения массивов.
Назовите свойство объекта Array.
3. Типовые задачи обработки массивов
Поиск суммы элементов массива
Найти сумму элементов массива a0, a1, …, an-1. Данные массива и количество элементов
массива n ввести с клавиатуры.
Решение. Алгоритм решения задачи сводится к трём частям:
1. Ввод n и создание объекта Array для переменной a.
2. Организация цикла для ввода и суммирования элементов массива s=a0+a1+…+an-1
3. Вывод результата из переменной s
Скрипт.
n=prompt(“Введи количество элементов массива”,””)
n=parseInt (n);
s=0;
var a = new Array ();
for (i=0; i<=n-1; i++) {
b=prompt (“Введи”+i+”-й элемент массива”,””);
a[i]=parseFloat (b);
s=s+a[i]
}
document.write (“сумма элементов массива = ”+s)
Поиск интересующего элемента в массиве
В массиве из десяти целых чисел (2,-10,5,5,2,2,5,5,-10,-10) определить номера элементов,
равных заданному числу m.
*Вывести сообщение «Таких данных в массиве нет», если такого числа m в массиве не
окажется.
Решение. Алгоритм решения задачи сводится к следующим частям:
1. Создание объекта Array для переменной a с перечисленными данными.
2. Ввод с клавиатуры целого числа m
3. Организация цикла для проверки условия (m==a[i] ) и вывод номера элемента.
4*. Объявление переменной k с несуществующим номером элемента массива k=–1.
Переприсваивание k в цикле при нахождении элемента m. Проверка условия на
первоначальное значение k после выполнения цикла.
Скрипт.
var a = new Array (2,-10,5,5,2,2,5,5,-10,-10);
m=prompt (“Введите интересующее вас число”,””);
m=parseInt (m);
var k=-1;
for (i=0; i<=a.length -1; i++) {
if ( m==a[i] ) { document.write ( i + “-№ числа”+m+” в массиве”+”<br>”);
k=i; }
}
if ( k==-1 ) { document.write ( “числа”+m+” в массиве нет”) }
Контрольные вопросы
1. Для задачи №1 укажите составные части алгоритма в скрипте: создание и заполнение
массива; суммирование элементов; вывод результатов?
2. Для задачи №2 укажите составные части алгоритма в скрипте: создание и заполнение
массива; поиск интересующего элемента; вывод результатов?
34
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Практическая работа «Поиск суммы и интересующих элементов»
1. Составьте скрипт для решения задачи. Проанализируйте работу скрипта в броузере
2. Продемонстрируйте работу приложения по следующему плану:
 Прочитайте текст задачи, какие переменные вы используете в программе (данные,
результаты, промежуточные переменные)
 Как осуществляется ввод данных и их обработка (алгоритм решения, структуры
программирования, объекты, методы)
 Как осуществляется вывод результатов (структуры программирования, объекты,
методы)
 Подберите различные исходные данные и протестируйте программу
Задача «Зарплата сотрудника»
Определить среднюю зарплату сотрудника за год, если известна его зарплата за каждый
месяц. Исходные данные и результат вывести на экран.
Решение. Алгоритм решения задачи сводится к следующим частям:
1. Создание объекта Array для переменной a.
2. Организация цикла для заполнения массива с клавиатуры и вычисления суммы в
промежуточной переменной s: s=a[0]+a[1]+…+a[11]
3. Нахождение среднего арифметического sr = s/12.
4. Организация цикла для вывода исходных данных (элементов массива).
5. Вывод результата sr.
Задача «Телефонный справочник»
В двух массивах хранятся фамилии абонентов и соответствующие номера телефонов. По
заданной с клавиатуры фамилии найти номер телефона. Вывести диалоговое окно метода
alert с информацией “абонент не найден”, если в массиве фамилий таковой не окажется.
Решение. Алгоритм решения задачи сводится к следующим частям:
1. Создание объектов Array для переменных f (массив фамилий – 5 элементов) и t (массив
телефонов – 5 элементов).
2. Заполнение массивов способом «присваивание».
3. Ввод с клавиатуры интересующей фамилии в переменную z.
4. Организация цикла для поиска интересующего элемента в массиве фамилий (z==f[i]),
вывода интересующего элемента из массива телефонов (t[i]) и выход из цикла break.
5. Организация проверки условия (i==f.length) по окончании работы цикла и вывод
результата (“абонент не найден”).
4. Задачи поиска max (min) элементов массива
Поиск max (min) элемента. Найти минимальный элемент и его номер в заданном
массиве a0, a1, … an-1. Данные массива и количество элементов n ввести с клавиатуры.
Решение. Поиск проводится путём сравнения всех элементов массива с «эталоном». За
«эталон» обычно принимают переменную со значением первого элемента массива.
Алгоритм решения задачи сводится к следующим частям:
1. Ввод данных, создание массива и организация цикла для заполнения массива.
2. Объявление «эталона»: min = a[0]; к =0;
3. Организация цикла для сравнения «эталона» с элементами массива (a[i]<min) и
переприсваиванием переменных min и k.
4. Вывод результатов из переменных min и k.
Скрипт.
n=prompt(“Введи количество элементов”,””); n=parseInt (n);
var a = new Array ()
for (i=0; i<=n-1; i++) {
b=prompt(“Введи”+i+”-й элемент”,””);
a[i]=parseInt (b);
}
var min=a[0]; var k=0;
for (i=1; i<=n-1; i++) {
if (a[i]<min) { min = a[i]; k=i }
}
document.write ( “Минимальный элемент равен ”+min+”его номер ”+k)
35
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Для поиска максимального элемента, в логическом выражении при сравнении элементов
массива с «эталоном» (a[i]< ) надо поменять знак на противоположный (a[i]> ).
Контрольные вопросы
1.
2.
3.
4.
5.
6.
7.
8.
Назовите типовые задачи обработки массивов.
Как осуществляется доступ к элементам массива?
Каков алгоритм поиска суммы элементов массива?
Каков алгоритм поиска интересующего элемента в массиве?
Как создаются “справочники”?
Как найти минимальный элемент массива?
Как изменится алгоритм для поиска максимального элемента массива?
Как задаётся “эталон” для поиска второго минимального элемента массива?
Максимального?
Выводы








Массив – это последовательность данных, которая обозначена одной переменной с
разными индексами. Доступ к каждому элементу массива осуществляется по его
индексу.
Типовые задачи обработки массивов: поиск суммы элементов, интересующего
элемента, max (min) элемента, слияние массивов, перестановка элементов,
сортировка.
Для создания массива данных применяется объект Array и конструктор new.
Для реализации алгоритма поиска в среде программирования массивы необходимо
заполнять.
Чтобы найти сумму элементов массива необходимо организовать цикл, количество
шагов которого задаётся по количеству элементов массива для их суммирования.
Для поиска интересующего элемента применяется «интересующее» условие в теле
цикла при просмотре элементов массива. Так создаются «справочники».
Перед поиском минимального или максимального элемента массива необходимо
объявить «эталоны» для дальнейшего сравнения их с элементами массива. При
нахождении элементов массива, удовлетворяющих «эталонам», те переприсваиваются.
Для поиска первого минимального (максимального) элемента массива за «эталон»
можно принимать первый элемент массива, для поиска второго и следующих
минимальных (максимальных) элементов за «эталон» принимается большое
(маленькое) число.
Практическая работа «Поиск максимальных элементов в массиве»
Составьте скрипт для решения задачи.
Проанализируйте работу скрипта в броузере.
Задача «Максимальная температура»
Ежедневная температура за первую декаду месяца задана в массиве. Подсчитать
количество дней, когда температура была максимальной.
Решение. Алгоритм решения задачи сводится к следующим частям:
1. Создание объекта Array для переменной a.
2. Организация цикла для заполнения массива a[0], a[1], …,a[9]
3. Организация цикла для поиска максимального элемента в массиве a
4. Организация цикла для подсчёта количества максимальных элементов k и вывода
исходных данных – элементов массива a[0], a[1], …,a[9]
5. Вывод результата – количества максимальных элементов k.


Практическая работа «Поиск двух минимальных элементов в массиве»
 Составьте скрипт для решения задачи.
 Проанализируйте работу скрипта в броузере.
Задача «Футбольные команды»
Дан список футбольных команд Высшей лиги и количество очков, набранное каждой
командой. Известно, что две команды, набравшие наименьшее количество очков, покинут
Высшую лигу. Какие это команды?
Решение. Алгоритм решения задачи сводится к следующим частям:
36
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
1. Создание объектов Array для переменных x (массив команд – 5 элементов,
заполняется присваиванием) и y (массив очков – 5 элементов, заполняется с
клавиатуры).
2. Объявление «эталона» для поиска первого минимального элемента и его номера:
min1=y[0]; k1=0;
3. Организация цикла для поиска первого минимального элемента в массиве очков y.
4. Объявление «эталона» для поиска второго минимального элемента и его номера:
min2=2000000; k2=0;
5. Организация цикла для поиска второго минимального элемента в массиве очков y.
Перед поиском минимального элемента необходимо поставить условие сравнения
элементов массива с найденным первым минимальным элементом (y[i]==min1) и
выполнить прерывание цикла с переходом на следующий шаг {continue}
6. Организация цикла для вывода исходных данных – элементов массивов команд x[i] и
их очков y[i].
7. Вывод результатов, выбывших команд: x[k1]; x[k2]
5. Контрольная работа «Поиск в одномерных массивах»




Опишите переменные.
Составьте алгоритм поиска в теле функции скрипта.
Создайте html-файл и проанализируйте работу каждой программы в броузере
Продемонстрируйте работу программ
Вариант 1
Задача 1. В заданном массиве найти сумму тех элементов, которые больше числа 5.
Найти в этом массиве min, max и их номера.
Задача 2. В расписании движения поездов указаны: номер поезда, пункт назначения,
направление следования (юг, север, восток, запад). Сколько поездов следует на
север? Укажите их номера и пункты назначения.
Вариант 2.
Задача 1. В заданном массиве заменить все нули единицами, найти в этом массиве
min, max и их номера.
Задача 2. Дан список из 50 фамилий с указанием года рождения. Сколько лет
Иванову? Учесть, что такой фамилии в списке может и не быть.
Вариант 3.
Задача 1. В заданном массиве из 20 элементов напечатать числа, большие 100. Найти
в этом массиве min, max и их номера.
Задача 2. В заданных массивах указаны: количество ежедневных осадков и
ежедневная температура воздуха. Сколько осадков выпало в виде дождя и сколько в
виде снега? (Идёт дождь при температуре > 0°)
Вариант 4.
Задача 1. В заданном массиве определить два наибольших элемента и их номера.
Задача 2. Массив содержит сведения о количестве выпущенных станков по каждому
из цехов предприятия. Положительная величина означает сверхплановый выпуск
станков, отрицательная – невыполнение плана, 0 – выполнение плана. В каких цехах
невыполнение плана?
Вариант 5.
Задача 1. В заданном массиве заменить все элементы, большие 10 числом 10. Найти
два наименьших числа и их номера.
Задача 2. В расписании движения поездов указаны: номер поезда, пункт назначения,
длительность стоянки. Определить длительность стоянки и номер поезда
интересующего пункта назначения.
37
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
6. Слияние массивов
Слияние одномерных массивов одинаковой длины
Слияние массивов – это получение нового массива данных из двух или нескольких исходных
массивов. Исходный массив – это массив, который следует ввести в память компьютера в
качестве заданного. Существует несколько способов формирования нового массива.
Способ «дополнение»
Из двух исходных массивов одинакового размера A1, A2,…, An и B1, B2,…,Bn сформировать
новый массив C1,C2,…,C2n таким образом, чтобы:
A1
A2
…
An
B1
B2
…
Bn
C1
C2
…
Cn
Cn+1
Cn+2
…
C2n
Решение.
Организуем цикл по номерам исходных массивов от 1 до n.
Элементы массива А записываем в массив С соответственно их номеров.
Элементы массива В записываем в массив С со смещением номеров на n.
Скрипт.
n=prompt(“Введи количество элементов”,””); n=parseInt (n);
var a = new Array ();
var b = new Array ();
for (i=1; i<=n; i++) {
a[i]=prompt(“Введи”+i+”-й элемент массива a”,””);
a[i]=parseInt (a[i]);
b[i]=prompt(“Введи”+i+”-й элемент массива b”,””);
b[i]=parseInt (b[i]) }
var c = new Array ();
for (i=1; i<=n; i++) {
c[i]=a[i];
c[n+i]=b[i] }
document.write ( “Исходный массив ‘a’: ”+а+”<br>”)
document.write ( “Исходный массив ‘b’: ”+b+”<br>”)
document.write ( “Новый массив ‘c’: ”+c+”<br>”)
Способ «поэлементно»
Из двух исходных массивов одинакового размера A1, A2,…, An и B1, B2,…,Bn сформировать
новый массив C1,C2,…,C2n таким образом, чтобы:
A1
B1
A2
B2
…
An
Bn
C1
C2
C3
C4
… C2n -1 C2n
Решение.
Организуем цикл по номерам исходных массивов от 1 до N.
Для записи элементов массива А при нумерации массива С используем формулу
нечетного числа [2*i –1], а для записи элементов массива В – формулу чётного числа [2*i]
Скрипт.
n=prompt(“Введи количество элементов”,””); n=parseInt (n);
var a = new Array ();
var b = new Array ();
ввод данных исходных массивов;
var c = new Array ();
for (i=1; i<=n; i++) {
c[2*i -1]=a[i];
c[2*i]=b[i]; }
вывод данных исходных массивов и нового массива;
38
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Слияние одномерных массивов разной длины методом concat
Из двух исходных массивов разной длины A1, A2,…, Ak и B1, B2,…,Bn сформировать новый
массив C1,C2,…,Ck+n способом «дополнение», причём массив бóльшей длины
устанавливается первым, а мéньшей длины – вторым.
Решение. Для слияния двух массивов в один применяется метод concat объекта Array.
Массив а, указанный в качестве объекта при вызове метода concat, присоединяет к себе
массив, заданный в виде параметра в методе concat.
Пример слияния двух массивов строковых переменных.
var a = new Array(“январь”, “февраль”, “март”);
var b = new Array(“апрель”, “май”, “июнь”, “июль”, “август”);
var с = new Array( );
c = a.concat (b);
document.write (c)
7. Выделение части одномерного массива методом slice
Метод slice используется для получения части массива. При вызове метода указываются
индексы начального и конечного элементов массива, причём последний элемент в массив
не включается. Методы concat и slice поддерживаются в MIE.
Пример выделения летних месяцев из массива b в новый массив d:
var d = new Array();
d = b.slice (2, 5); document.write (c);
Контрольные вопросы
1.
2.
3.
4.
5.
Что такое слияние массивов? Какие вы знаете способы слияния массивов?
Каков алгоритм слияния массивов способом “дополнение”?
Каков алгоритм слияния массивов способом “поэлементно”?
Назовите метод объекта Array для слияния массивов разной длины?
Как осуществить выделение части исходного массива в новый массив?
Выводы



Слияние массивов – это формирование нового массива данных из двух или нескольких
исходных массивов. Мы рассмотрели алгоритмы слияния двух массивов одинаковой
длины способами «дополнение» и «поэлементно».
Для слияния двух массивов в один применяется метод concat объекта Array. Массив,
указанный в качестве параметра при вызове метода concat, присоединяется в конце
массива, метод concat которого вызывается.
Метод slice используется для получения части массива. При вызове метода
указываются индексы начального и конечного элементов массива, причём последний
элемент в массив не включается.
Практическая работа “Демонстрация задач слияния массивов”
Продемонстрируйте работу программы по плану: анализ структуры программы – в
Блокноте; тестирование – в броузере Internet Explorer
Задача 1. Слияние двух массивов одинаковой длины «Дополнением»
Как изменится программа для слияния массивов: второй исходный + первый исходный
Задача 2. Слияние двух массивов одинаковой длины «Поэлементно»
Как изменится программа для слияния массивов: элемент второго исходного + элемент
первого исходного и т.д.
Задача 3. Слияние двух массивов разной длины методом concat
В чём разница при слиянии массивов: первый исходный + второй исходный
В чём разница при слиянии массивов: второй исходный + первый исходный
Задача 4. Выделение части массива из исходного массива строковых переменных
Дополните скрипт для выделения весенних месяцев из исходного массива b

39
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
8. Перестановка элементов в одномерных массивах
Для работы со строковыми переменными объект Array имеет следующие методы:

join – объединяет все элементы массива в одну строку

reverse – изменяет порядок элементов в массиве – первый элемент становится
последним, последний – первым.

sort – выполняет сортировку элементов массива по алфавиту.
Сортировку числовых массивов выполняют стандартные алгоритмы: «Выбор» и «Обмен».
Сортировка строковых элементов методом sort
Отсортировать массив строковых переменных – это значит расположить элементы массива
по алфавиту.
Пример сортировки массива a строковых элементов
При выводе массива объект-перменная a «снабжается» методом sort( )
var a = new Array(“мать”, “отец”, “сестра”, “брат”, “дядя”);
t= a.sort(); document.write (t);
Сортировка числовых массивов
Отсортировать числовой массив – это значит переставить элементы массива так, чтобы они
располагались либо по возрастанию, либо по убыванию. Рассмотрим стандартные
алгоритмы сортировки – «Простой выбор» и «Простой обмен». Файл Сортировки.htm
Сортировка «Простой выбор»
Отсортировать массив A1, A2,…, An по возрастанию.
Решение. В массиве находим наименьший элемент. Меняем местами первый элемент с
найденным наименьшим. Для этого используем переменные: X – для элемента, K – для его
номера. Далее те же действия проделаем с оставшимися (без первого) n-1 элементами,
затем с n-2 и так далее до тех пор, пока не останется один элемент – последний, он –
наибольший.
Скрипт.
var a = new Array ();
for (i=1; i<=n-1; i++)
{
X = a[i]; K = i;
for (j= i+1; j<=n; j++) {
if (a[j] < X)
{
X = a[j]; K = j;
}
}
a[K] = a[i];
a[i] = X
}
Сортировка «Простой обмен (пузырька)»
Отсортировать массив A1, A2,…, An по возрастанию.
Решение. Идея сортировки заключается в многократных попарных сравнениях рядом
стоящих элементов массива и перестановке этих элементов в заданном порядке. Массив
просматривают от конца к началу.
В результате первого просмотра наименьший элемент переместится на первое место. В
дальнейшем просмотре этот элемент исключаем. Каждый очередной просмотр будет
приводить к постановке очередного минимального элемента в левый конец массива. И в
результате n-1 раз просмотров (шагов цикла) получаем упорядоченный по возрастанию
массив.
Скрипт.
var a = new Array ()
for (i=2; i<=n-1; i++) {
for (j= n; j>=i; j--) {
if (a[j-1] < a[j]) {
X = a[j-1];
a[j-1] = a[j];
a[j] = X;
}
} }
40
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Контрольные вопросы
1.
2.
3.
4.
5.
6.
7.
8.
9.
Что такое перестановка элементов в массиве?
Какие вы знаете типовые задачи перестановки элементов массива?
Назовите методы объекта Array, переставляющие элементы массива.
Какова функция метода reverse? sort? join?
Что значит отсортировать числовой массив?
Какие вы знаете алгоритмы сортировки числовых массивов?
Какие способы сортировки вы знаете?
Какова идея сортировки «Простой выбор»?
Какова идея сортировки «Простой обмен»?
Выводы






Отсортировать массив строковых переменных – значит расположить элементы по
алфавиту.
Для перестановки строковых элементов массива объект Array имеет методы для
сортировки – sort и обратной перестановки – reverse
Метод join объединяет элементы в одну строку.
Отсортировать числовой массив – значит переставить элементы массива так, чтобы они
располагались либо по возрастанию, либо по убыванию.
Идея сортировки «Простой выбор» заключается в поиске наименьшего элемента и
перестановке его с первым элементом массива и т.д.
Идея сортировки «Простой обмен» заключается в попарных сравнениях рядом стоящих
элементов массива и перестановке этих элементов в заданном порядке. Массив
просматривают от конца к началу. В результате первого просмотра наименьший
элемент переместится на первое место и т.д.
Практическая работа “Задачи сортировки одномерных массивов”

Продемонстрируйте работу программы по плану: анализ структуры программы – в
Блокноте; тестирование – в броузере Internet Explorer
Задача 1. Сортировка массива строковых переменных
Дополните скрипт использованием методов reverse и join для массива а
Задача 2. Сортировка числового массива «Простой выбор»
Выполните вместо компьютера первый шаг внешнего цикла. Как изменяются значения
переменных?
Задача 3. Сортировка числового массива «Простой обмен (пузырька)»
Выполните вместо компьютера первый шаг внешнего цикла. Как изменяются значения
переменных?
41