Встроенный объект Array. Массивы в JavaScript

Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно тремя способами:

var a1 = new Array();

var a2 = new Array(3);

var a3 = new Array('раз','два','три');

a1 - массив, в котором нет ни одного элемента.
a2 - массив из трех элементов с неопределенным (undefined) значением.
a3 - массив, заданный списком своих элементов.

Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:

a3[5]='шесть';

Типы данных элементов массива в JavaScript могут быть различными:

a3[3]=4; a3[4]=5; a3[7]=false;

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

Для создания многомерного массива каждому элементу массива нужно присвоить другой массив:

var myArray = new Array(2);

for (i=0; i<3; i++){

myArray[i] = new Array(2);

}

Так можно создать массив, состоящий из трех строк и трех столбцов.

Свойство объекта Array

length. Число элементов массива.

Методы объекта Array

concat(). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b); Здесь элементы массива b добавляются к элементам массива a.

join(). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; ');

reverse(). Меняет порядок элементов массива на обратный.

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

Объект Math

Объект Math - это встроенный в JavaScript объект, содержащий математические константы и функции. Вам нет необходимости создавать объект Math, поскольку он уже создан и готов к использованию. Свойства объекта Math содержат математические константы, а методы - математические функции. Поскольку свойства и методы объекта Math управляются с помощью набора всевозможных операторов, очень удобно использовать вместе с этим объектом ключевое слово with.

Объект Math

Объект Math содержит основные математические константы и стандартные математические функции. Наиболее часто используемые приведены в таблице:

Матем. ф-ция	Синтаксис	Результат
E	Math.E	Значением свойства E является основание натуральных логарифмов e, которое приблизительно равно 2.718281828459045.
LN10	Math.LN10	Значением свойства LN10 является натуральный логарифм числа 10 (ln 10), который приблизительно равен 2.302585092994046
LOG10E	Math.LOG10E	Значением свойства LOG10E является десятичный логарифм числа e (lg e), который приблизительно равен 0.4342944819032518
LOG2E	Math.LOG2E	Значением свойства LOG2E является двоичный логарифм числа e (log2e), который приблизительно равен 1.4426950408889634
PI	Math.PI	Значением свойства PI является число π (отношение длины окружности к диаметру круга), которое приблизительно равно 3.1415926535897932
SQRT1_2	Math.SQRT1_2	Значением свойства SQRT1_2 является квадратный корень из 1/2, который приблизительно равен 0.7071067811865476
SQRT2	Math.SQRT2	Значением свойства SQRT2 является квадратный корень из 2, который приблизительно равен 1.4142135623730951
abs	Math.abs(число)	Аргументы: число — числовое выражение Результат: числовое значение Метод abs возвращает абсолютную величину числа
acos	Math.acos(число)	Аргументы: число — числовое выражение Результат: числовое значение. Метод acos возвращает арккосинус числа. Если число находится в диапазоне от -1 до 1 включительно, то результат находится в диапазоне от 0 до π. В противном случае результат равен NaN.
asin	Math.asin(число)	Аргументы: число — числовое выражение Результат: числовое значение. Метод asin возвращает арксинус числа. Если число находится в диапазоне от - 1 до 1 включительно, то результат находится в диапазоне от -π/2 до +π/2. В противном случае результат равен NaN.
atan	Math.atan(число)	Аргументы: число — числовое выражение Результат: числовое значение Метод atan возвращает арктангенс числа. Результат находится в диапазоне от -π/2 до +π/2.
atan2	Math.atan2(число1, число2)	Аргументы: число1, число2 — числовые выражения Результат: числовое значение. Метод atan2 возвращает арктангенс частного от деления числа1 на число2. Результат находится в диапазоне от -π до +π и соответствует величине угла в радианах между осью абсцисс и вектором до точки с координатами (число2, число1).
ceil	Math.ceil(число)	Аргументы: число — числовое выражение Результат: числовое значение. Метод ceil возвращает наименьшее целое число, большее или равное числа.
cos	Math.cos(число)	Аргументы: число — числовое выражение Результат: числовое значение Метод cos возвращает косинус числа. Результат находится в диапазоне от -1 до +1.
exp	Math.exp(число)	Аргументы: число — числовое выражение Результат: числовое значение Метод exp возвращает экспоненту числа (e число, где е — основание натуральных логарифмов). Если число больше 709.78, то возвращается Inifinity.
floor	Math.floor(число)	Аргументы: число — числовое выражение Результат: числовое значение. Метод floor возвращает наибольшее целое число, меньшее или равное числа.
log	Math.log(число)	Аргументы: число — числовое выражение Результат: числовое значение. Метод log возвращает натуральный логарифм числа. Если число отрицательно, то возвращается NaN.
max	Math.max(число1, …, числоN)	Аргументы: число1, …, числоN — числовые выражения Результат: числовое значение. Метод max возвращает наибольшее из значений своих аргументов. Если аргументы не заданы, то он возвращает -Inifinity.
min	Math.min(число1, …, числоN)	Аргументы: число1, …, числоN — числовые выражения. Результат: числовое значение. Метод min возвращает наименьшее из значений своих аргументов. Если аргументы не заданы, то он возвращает Inifinity.
pow	Math.pow(число1, число2)	Аргументы: число1, число2 — числовые выражения. Результат: числовое значение. Метод pow возвращает число1, возведенное в степень число2 (число1число2).
random	Math.random()	Результат: числовое значение. Метод random генерирует случайное число в диапазоне от 0 включительно до 1 исключительно.
round	Math.round(число)	Аргументы: число — числовое выражение. Результат: числовое значение. Метод round округляет число до ближайшего целого числа и возвращает его.
sin	Math.sin(число)	Аргументы: число — числовое выражение. Результат: числовое значение. Метод sin возвращает синус числа. Результат находится в диапазоне от -1 до +1.
sqrt	Math.sqrt(число)	Аргументы: число — числовое выражение. Результат: числовое значение. Метод sqrt возвращает квадратный корень из числа. Если число отрицательно, то возвращается NaN.
tan	Math.tan(число)	Аргументы: число — числовое выражение. Результат: числовое значение. Метод tan возвращает тангенс числа.

Набор математических функций JavaScript позволяет решать довольно большой спектр задач, но злоупотреблять этим не стоит. Не забывайте, что код исполняется интерпретатором, а вот о низкоуровневой оптимизации вычислений нет и речи, следовательно, высокого быстродействия добиться будет очень сложно. Чаще всего математика на сайтах используется для создания различных калькуляторов или расчёта положения элементов интерфейса.

Обработка событий

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

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

Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, необходимо включить в HTML-дескриптор следующее выражение:

имя_обработчика="команды_обработчика"

Это выражение включается в тэг, описывающий объект, с которым связано событие.

Например, если необходимо обработать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь примерно следующий вид:

<input type="text" name="Inform" onFocus="alert(‘Hello World’);">

Имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится функцией которая выводит сообщение alert(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.

Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:

<a href = "http://www.ya.ru" onmouseover="alert('An onMouseOver event'); return false"> Такой вот обработчик!!!</a>

Список атрибутов, которые определены для HTML тэгов приводится ниже:

IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт

Атрибут	Описание	Номер версии браузера	W3C
IE	F	O
onabort	Прерванная загрузка изображения				Да
onblur	утрата фокуса элементом				Да
onchange	Изменение содержимого в поле ввода				Да
onclick	Щелчок мыши на объекте				Да
ondblclick	Двойной щелчок мыши на объекте				Да
onerror	Ошибка при загрузке изображения или документа				Да
onfocus	Получение фокуса элементом				Да
onkeydown	Нажатие клавиши			Нет	Да
onkeypress	Клавиша нажата				Да
onkeyup	Отжатие клавиши				Да
onload	Завершение загрузки страницы или изображения				Да
onmousedown	Нажатие кнопки мыши				Да
onmousemove	Перемещение курсора мыши				Да
onmouseout	Смещение курсора мыши с объекта				Да
onmouseover	Наведение курсора мыши на объект				Да
onmouseup	Отжатие кнопки мыши				Да
onreset	Кнопка "Reset" нажата				Да
onresize	Изменение размера окна				Да
onselect	Выделение текста				Да
onsubmit	Кнопка "Submit" нажата				Да
onunload	Уход с веб-страницы				Да

 

Практическое задание

Задание 1. В зависимости от введенной температуры (из формы) в событии alert сообщается, что в сосуде лед, пара, вода.

Задание №2. Варианты заданий:

 

№ варианта	Задание
1,8,15	Дан массив из 20 чисел. Заполнить его случайными значениями и вывести его в строке в обратном порядке. Функция генерации случайных чисел Peremennaya = Math.random();
2,9	Дан массив из 10 чисел. Заполнить его случайными значениями. Найти и вывести максимальное число в массиве. Функция генерации случайных чисел Peremennaya = Math.random();
3,10	Дан массив из 10 чисел. Заполнить его случайными значениями. Найти и вывести минимальное число в массиве. Функция генерации случайных чисел Peremennaya = Math.random();
4,11	Дан массив из 20 чисел. Заполните его случайными числами. Определить, сколько в нем элементов. Функция генерации случайных чисел Peremennaya = Math.random();
5,12	Создать массив из 10 элементов, заполнить положительными и отрицательными элементами. Вывести при нахождении положительного элемента FALSE и TRUE при нахождении отрицательного.
6,13	Создать массив из 10 элементов, заполнить положительными и отрицательными элементами. Отсортировать по возрастанию.
7,14	Создать массив из 10 элементов, заполнить положительными и отрицательными элементами. Отсортировать по убыванию.

Задание №3

Варианты заданий:

№ варианта	Задание
1,10
3,11
5,12

Задание №4

Напишите сценарий, который обменивает местами значения четырёх переменных последовательно слева - направо, справа - налево и случайным образом.

 

Задание №5. Рассмотрите работу сценария «Перестановка двух изображений».

В документе заданы два изображения. Требуется написать сценарий, который осуществляет перестановку заданных изображений. При нажатии на кнопку Обменять изображения меняются местами. Функция chpict вызывается как реакция на событие "щелчок по кнопке" Обменять. Изображения задаются в документе с помощью тегов. Значение параметра src определяет имя файла, в котором хранится изображение. Переменная a1 служит для того, чтобы запомнить имя файла, который связан с первым изображением. Оператор присваивания d.pmi.src=d.pm2.src обеспечит загрузку второго изображения вместо первого. И, наконец, со вторым тегом изображения будет связан тот файл, который первоначально относился к первому изображению. Выполните сценарий. Поменяйте местами 3 изображения.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

<script language="JavaScript">

 

function chpict ()

{

var a1=p1.src

p1.src=p2.src

p2.src=p3.src

p3.src=a1

p1.width=200

}

 

</script>

</HEAD>

<BODY>

<h3>Обмен трех изображений</h3>

<IMG src="r_1.gif" name=p1 width=100><br>

<IMG src="r_2.gif" name=p2 width=100>

<IMG src="r_3.gif" name=p3 width=100>

<FORM name="form1">

<input type="button" value="Обменять" onClick="chpict()">

</FORM>

</BODY>

</HTML>

Измените сценарий так, чтобы он переставлял местами три изображения и одно при этом увеличивал.

Задание №6.

Создайте веб документ в котором img1-6 рисунки. При нажатии на кнопку 1 первый рисунок вставляется в окно просмотра (img7), второй на место первого, третий на место второго и т.д. седьмой на место шесто, при повторном нажатии процесс повторяется. При нажатии на вторую кнопку пермешения осуществляются случайным образом.

 

4. Содержание отчёта

Отчёт должен содержать название и цель. Выполненные задания с комментариями.

Контрольные вопросы

1. Что такое JavaScript и его назначение.
2. Как создавать сценарии на JavaScript.
3. Переменные в JavaScript.
4. Условные операторы в JavaScript.
5. Операторы цикла в JavaScript.
6. Объекты JavaScript.
7. Массивы в JavaScript.
8. Какие арифметические операторы вам известны.
9. Расскажите о объекте Math. Свойство With.
10. Метод round. Метод min и max. Метод floor.
11. Для чего нужны обработчики событий.
12. Перечислить обработчики событий клавиш мышки.
13. Перечислить обработчики событий курсора мышки.
14. Перечислить обработчики событий клавиатуры.
15. Перечислить обработчики событий документа.