«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



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



Использование функций в javascript - Исходный код

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

Фрагмент кода

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

var i = 0;
var maximum = 0;

while (i < anyNumber.length)
{
document.write("Индексу " + i + " - соответствует число " + anyNumber[i] + "<br />");
if (anyNumber[i] > maximum)
{
maximum = anyNumber[i]
}
i++;
}


document.write("Максимальное число массива: " + maximum + "<br>")

 

var empty = [];

for(i = 0; i < anyNumber.length; i++)

{
if(anyNumber[i] == maximum)
{
empty.push(i);
}
}

document.write("Позиции этого числа в массиве: " + empty);

</script>

Результат

Результат - Исходный вариант кода

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70
Позиции этого числа в массиве: 6,13

Первая функция

Сначала вынесем в функцию часть кода, которая в примере выше выделена жирным шрифтом. Этот фрагмент кода отвечает за вывод всех значений массива, а также за поиск его максимального значения.

Фрагмент кода

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

function max_Value(array)
{

var i = 0;
var maximum = 0;

while (i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(anyNumber);

document.write(result_1 + " - Максимальное значение массива");

 

var empty = [];

for(i = 0; i < anyNumber.length; i++)

{
if(anyNumber[i] == maximum)
{
empty.push(i);
}
}

document.write("Позиции этого числа в массиве: " + empty);

</script>

Результат

Результат - Использование функций - Шаг №1

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70

Комментарии к коду (красным помечены изменения в исходном коде):

  • Итак, в примере была создана функция max_Value с одним параметром array function max_Value(array), в которую заключен код, выделенный жирным шрифтом.

  • В конце функции, при помощи оператора return мы возвращаем переменную maximum return maximum .

  • Затем вызываем функцию max_Value и в качестве ее параметра вместо array указываем исходный массив anyNumber. Результат работы функции заносим в переменную result_1 var result_1 = max_Value(anyNumber).

  • Далее выводим переменную result_1 на экран.

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

Вторая функция

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

var empty = [];

for(i = 0; i < anyNumber.length; i++)

{
if(anyNumber[i] == maximum)
{
empty.push(i);
}
}

Фрагмент кода

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

function max_Value(array)
{

var i = 0;
var maximum = 0;

while (i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(anyNumber);

document.write(result_1 + " - Максимальное значение массива");

 

function index_max_Value(array)
{

var empty = [];

for(i = 0; i < array.length; i++)

{
if(array[i] == result_1)
{
empty.push(i);
}
}

return empty;
}

var result_2 = index_max_Value(anyNumber);

document.write("<p> Позиции этого числа в массиве: " + result_2);

</script>

Результат

Результат - Использование функций - Шаг №2

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70

Позиции этого числа в массиве: 6,13

Комментарии к коду:

  • Создаем вторую функцию index_max_Value с параметром array:
    function index_max_Value(array).

  • Функция index_max_Value возвращает массив, который содержит индексы (позиции) максимального значения исходного массива: return empty.

  • Затем вызываем функцию index_max_Value, а в качестве ее параметра вместо array указываем исходный массив anyNumber. Результат работы функции заносим в переменную result_2
    var result_2 = index_max_Value(anyNumber).

  • Далее выводим переменную result_2 на экран.

Обратите внимание: в теле функции index_max_Value в условии if текущее значение исходного массива сравнивается с результатом работы функции max_Value - с переменной result_1 (а это в свою очередь переменная maximum): if(array[i] == result_1).
После чего, если условие верно, индекс текущего значения исходного массива заносится в ранее созданный массив empty: empty.push(i).

Повторное использование функций

Теперь, когда отдельные фрагменты кода вынесены в функции, их можно применять как шаблоны для повторного использования уже с другими массивами.

Для повторного использования функций возьмем другой произвольный массив test и подставим его вместо параметра array при вызове функций.

Фрагмент кода

<script type="text/javascript">

var test = [1, 4, 6, 9, 2, 7, 9];

//First function
function max_Value(array)
{
var i = 0;
var maximum = 0;

while (i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(test);
document.write(result_1 + " - Максимальное значение массива")

//Second function
function index_max_Value(array)
{
var empty = [];

for(i = 0; i < array.length; i++)

{
if(array[i] == result_1)
{
empty.push(i);
}
}
return empty;
}

var result_2 = index_max_Value(test);

document.write("<p> Позиции этого числа в массиве: " + result_2);

</script>

Результат

Результат - Повторное испльзование функций - Шаг №3

Индексу 0 - соответствует число 1
Индексу 1 - соответствует число 4
Индексу 2 - соответствует число 6
Индексу 3 - соответствует число 9
Индексу 4 - соответствует число 2
Индексу 5 - соответствует число 7
Индексу 6 - соответствует число 9
9 - Максимальное значение массива

Позиции этого числа в массиве: 3,6

Использование функций в javascript - Тонкости и Нюансы

Существуют определенные тонкости при использовании функций. Далее рассмотрим одну из них.

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

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

Фрагмент кода

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

//First function
function all_Value(array)
{
var i = 0;
while(i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
i++;
}
}

//Second function
function max_Value(array)
{
var i = 0;
var maximum = 0;

while (i < array.length)
{
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(anyNumber);

//Third function
function index_Max_Value(array)
{
var empty = [];

for(i = 0; i < array.length; i++)

{
if(array[i] == max_Value(array))
{
empty.push(i);
}
}
return empty;
}

var result_2 = index_Max_Value(anyNumber);

all_Value(anyNumber);

document.write("Максимальное число массива: " + result_1 + "<br>");

document.write("Позиция максимального числа в массиве: " + result_2 + "<br>");

</script>

Результат

Результат - Использование функций - Тонкости и Нюансы - Шаг №4

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70
Позиция максимального числа в массиве: 6,13

Так вот, обратите внимание на то, что во 2-ой функции из последнего или предпоследнего примеров (текущей страницы) допустимо и используется сравнение: if(array[i] == result_1), но не допустимо следующее: if(array[i] == max_Value(array)).

if(array[i] == result_1) - здесь в сравнении со значением текущего элемента массива используется только возвращаемое функцией max_Value значение переменной maximum.

if(array[i] == max_Value(array)) - здесь же в сравнении используется весь результат работы функции max_Value.

В то время как в текущем (выше представленном) примере допустимы оба варианта сравнения.

Проанализируйте эту ситуацию с использованием функций и массивов в javascript самостоятельно. Это полезно для практики.

Читайте также...

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Задачи по JavaScript
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки