Поделиться Поделиться

Встроенный объект 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.

Таблица математических операторов

+ (плюс) Сложение 2 + 8 7 + 3
- (минус) Вычитание 2 - 8 7 - 3 -6
* (звёздочка) Умножение 2 * 8 7 * 3
/ (слэш)   Обычное деление   8 / 2 7 / 3 2,333
% (процент)   Деление по модулю 8 % 2 7 % 3
++ (два плюса)   Единичный инкремент 8++ 7++
-- (два минуса) Единичный декремент 8-- 7--

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

Если один из операндов - строка, то все остальные операнды приводятся к строковому виду.

var1 = "Дядя"

var2 = "Ваня"

result = var1 + " " + var2

// result = "Дядя Ваня"

mixed = var2 + 100

// mixed = "Ваня100"

Все логические операнды приводятся к числовому виду, кроме случаев, когда все операнды в выражении логические. При этом true приводится к "1", а false - к "0". При сочетании логических операндов со строками - все операдны переводятся в текстовый вид.

var1 = true

var2 = true

result = var1 + var2

// result = 2

mixed = var2 + 100

// mixed = 101

var3 = "строка:"

str = var3 + var1

// str = "строка:true"

Если приведение типов выполнить не удалось - результатом выражения будет "NaN" (например, при попытке разделить строку на что-либо).

var1 = "Дядя"

var2 = "Ваня"

result = var1 / var2

// result = "NaN"

mixed = var2 * true

// mixed = "NaN"

Однако на начальном этапе лучше воздержаться от приведения типов и фокусов с преобразованием результатов. Это избавит вас от значительного числа ошибок.

Объект 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 позволяет решать довольно большой спектр задач, но злоупотреблять этим не стоит. Не забывайте, что код исполняется интерпретатором, а вот о низкоуровневой оптимизации вычислений нет и речи, следовательно, высокого быстродействия добиться будет очень сложно. Чаще всего математика на сайтах используется для создания различных калькуляторов или расчёта положения элементов интерфейса.

Задание 1.Проверьте работу сценария вычисления модуля разницы двух заданных чисел.

<html>

<head>

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

<title>z1</title>

</head>

<script language="javascript">

var a=5.3;

var b=2.6;

var c=Math.abs(b-a)

document.write (c)

window.document.write("c=",c)

</script>

<body>

</body>

</html>

Задание 2.Введите сценарий вычисления полусуммы двух чисел и работы со срочными величинами. Обратите внимание на использование тегов внутри сценария. Внесите изменения: измените шрифт, размеры и цвет линий, Добавляйте выведения своей фамилии через свойство документа document.write (используйте слой и встроенные стили).

<html>

<head>

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

<title>z2</title>

</head>

<body>

<script language="javascript">

var a=5.3;

var b=2.6;

var c,d;

c=a+b;

d=c/2;

var k=5; ++k;

var m="Луганский национальный университет";

var f="имени Тараса Шевченко";

var ff=m+" "+f;

document.write ("<hr style='color:#ffff00' width=35%>", "c=", c, "<br>", "d=", d, "<hr width=50%>", "k=", k, "<hr><font face='arial' color='green'>",m+"</font> "+f)

</script>

</body>

</html>

Задание 3.Введите сценарий вычисления периметра и полупериметра треугольника с заданными параметрами. Вычислите площадь данного треугольника по формуле Герона, используя математические функции.

<html>

<head>

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

<title>z3</title>

</head>

<body bgcolor="#CC99FF">

<script language="javascript">

var a=2, b=3, c=4;

var p=a+b+c;

var pp=p/2;

s=Math.sqrt(p*(p-a)*(p-b)*(p-c));

window.document.write ("периметр равен", p, "<br>", "полупериметр равен", pp, "<hr>", "площадь трeугольника равна", s)

</script>

</body>

</html>

Задание 4.Рассмотрите пример введения функций с помощью JavaScript. Обратите внимание на выведение сообщения и структуру выведения текста document.write().Найдите дескрипторы комментариев. Сохраните набранный файл primer1.htm и запустите его.

<html>

<head>

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

<title>z4</title>

<script language="javascript">

function pl (m,n)

{var s=(m*n)/2;

document.write ("<table border='2' bgcolor='aqua'> <tr> <td>", "Площадь прямоугольного треугольника равна", "</td> <td>", s, "</td> </tr> </table>");

return (s)}

function p2(m,n)

{

pl (m,n);

document.write (k)

}

</script>

</head>

<body>

<form name="wwod">

Основание: <input name="t1" type="text" size="5" /> <hr>

Высота: <input name="t2" type="text" size="5" /> <hr>

<input type="button" value="вычислить" onclick="pl(document.wwod.t1.value, document.wwod.t2.value)" />

<input type="button" value="вычислить" onclick="p2(document.wwod.t1.value, document.wwod.t2.value)" />

</form>

</body>

</html>

Задание 6.Наберите код программы и вычислите гипотенузу и косинусы острых углов прямоугольного треугольника с катетами 3 см и 5 см. Обратите внимание на то, что в функцию передается объект - имя формы и на использование метода math. JavaScript чувствительный к регистру. В форму введите дополнительно строку с текстовым полем:

Площадь <Input type="text" size=7 name="res"><hr>

В функции измените метод вывода результата: вместо document.write ("Площадь ровная ", s) введите obj.res.value=s и выведите результат в форму.

< html>

<head>

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

<title>z7</title>

<script language="javascript">

function tr2 (obj)

{var a=obj.st1.value;

var h=obj.st2.value;

var s;

var k1=3;

var k2=5;

var c=Math.sqrt(k1*k1+k2*k2);

var y1=Math.cos(k1/c);

var y2=Math.cos(k2/c);

with (Math) {s=(a*h)/2};

//document.write ("",s);

obj.res.value=s;

obj.cos1.value=y1;

obj.cos2.value=y2;

obj.gip.value=c;

return(s)}

</script>

</head>

<body>

<p> Вычисление площади треугольника </p>

<form name="f_m">

Основание: <input name="st1" type="text" size="7" /> <hr>

Высота: <input name="st2" type="text" size="7" /> <hr>

Площадь: <input name="res" type="text" size="7" /><hr>

При катетах равных 3 и 5 см имеем:

Косинус 1:<input name="cos1" type="text" /><hr>

Косинус 2:<input name="cos2" type="text" /><hr>

Гипотенуза:<input name="gip" type="text" /><hr>

<input type="button" value="вычислить" onclick="tr2(f_m)"/>

</form>

</body>

</html>

Задание 7.Выполните сценарий, который определяет, или есть число в переменной а парным. Измените сценарий, чтобы число вводилось и в из формы и результат выводился в форму.

<html>

<head>

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

<title>Untitled Document</title>

</head>

<body>

<script language="javascript" >

function vivod() { /*проверить является ли число четным*/

var a=document.f1.v_a.value;

var c=(a%2);/*остаток от деления на 2*/

if (c==0) {

document.f1.otv.value='Четное'

}else {

document.f1.otv.value='Нечетное';

}

}

</script>

<form name="f1">

<p>Введите а:

<input name="v_a" type="text" id="v_a" size="5" />

<input type="button" name="button" id="button" value="Ввести" onclick="vivod()" />

</p>

<p>Ответ:

<input name="otv" type="text" id="otv" size="10" />

</p>

</form>

</body>

</html>

Задание 8.Проверьте роботу сценария, который определяет больше из 3-х чисел.

<html>

<head>

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

<title>Задание №3</title>

</head>

<body>

<script>

var a=2;

var b=5;

var c=4;

var max;

if (a>b) {max=a} else {max=b};

if (max<c) {max=c};

document.write("max=",max);

</script>

</body>

</html>

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

Задание 10.Введите сценарий, который определяет правильную отмену количества собранных грибов до 10 штук.

<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="jscript">

function sklon(x) /*определьть правильное склонение количества грибов*/

{var n=parseInt(x);

var d=document;

var st;

switch (n)

{case 1: st="гриб"; break;

case 2: case 3: case 4: st="гриба"; break;

case 5:case 6: case 7: case 8: case 9: case 10: st="грибов"; break;

default: st="-вобщем целую кучу";}

window.alert( "Мы нашли "+ n+" " +st);

}

</script>

</head>

<body>

<form name="f_m">

Введите количество грибов:

<input type="text" name="t1">

<input type="button" onmouseover="sklon(t1.value)" value="Определить" />

</body>

</html>

Задание №11

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

№ варианта Задание
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 элементов, заполнить положительными и отрицательными элементами. Отсортировать по убыванию.

Задание №12

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

№ варианта Задание
1,10 Встроенный объект Array. Массивы в JavaScript - Инвестирование - 1
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 2
3,11 Встроенный объект Array. Массивы в JavaScript - Инвестирование - 3
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 4
5,12 Встроенный объект Array. Массивы в JavaScript - Инвестирование - 5
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 6
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 7
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 8
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 9
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 10
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 11
Встроенный объект Array. Массивы в JavaScript - Инвестирование - 12

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

Отчёт должен содержать название и цель. Выполненные 10 заданий с комментариями и написанные варианты двух последних заданий в тетрадь и файлы *.HTML.

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

1. Что такое JavaScript и его назначение.

2. Как создавать сценарии на JavaScript.

3. Переменные в JavaScript.

4. Условные операторы в JavaScript.

5. Операторы цикла в JavaScript.

6. Объекты JavaScript.

7. Массивы в JavaScript.

8. Какие арифметические операторы вам известны.

9. Расскажите о объекте Math. Свойство With.

10. Метод round. Метод min и max. Метод floor.

← Предыдущая страница | Следующая страница →