Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Цикл while - Счетчик Цикл while и Массивы Цикл for

Цикл while в JavaScript - Работа с элементами Массива

Циклы в JavaScript: while и for

Урок №2 Цикл while и Массивы

Количество просмотров: 736

Продолжаем изучение цикла while. Здесь мы будем выводить с помощью этого цикла все элементы Массива на экран.

Если кто-то плохо знаком (или вообще не знаком) с Массивами в JavaScript, то читайте об этом здесь.

Для работы мы возьмём массив «Друзей» из темы о методе Splice.

<script type="text/javascript">

var friends = [" Алексей", " Вячеслав", " Григорий", " Настя", " Павел"];

</script>

Цикл while вывод элементов Массива - Самостоятельно

Цикл while вывод элементов Массива - Самостоятельно

Теперь предложение. Если Вы помните тему Массивов и Вам легко далось первое занятие по циклу while, то, возможно Вам будет интересно выполнить это задание самостоятельно, а потом посмотреть, как оно реализуется согласно курсу «Javascript+jQuery для начинающих».

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

Итак, каков был порядок моих мыслей и действий:

  • 1 - Есть массив из 5 элементов и их все нужно вывести на экран

  • 2 - Вернёмся к теме Массивов и вспомним о том, что нумерация элементов в Массиве начинается с нуля! Поэтому имеем: 5 элементов под номерами от 0 до 4.

  • 3 - Создаём счётчик (переменную i), который будет начинаться с 0, так как 0 - это индекс 1-го элемента массива.

  • 4 - Ограничением для счётчика будет цифра 4 - это индекс последнего 5-го элемента.

    Напомним! Для того чтобы в программном коде получить индекс последнего элемента массива, нужно из числа его элементов (т.е. из длины Массива) Вычесть единицу!!!

  • 5 - Совершаем действие - выводим на экран текущий элемент массива (значение счётчика i) и прибавляем к переменной i единицу.

А теперь всё описанное реализуем в программном коде Javascript.

<script type="text/javascript">

var friends = [" Алексей", " Вячеслав", " Григорий", " Настя", " Павел"];

var i = 0; /* Устанавливаем СЧЁТЧИК i = 0, так как 0 - это индекс 1-го элемента массива */

while (i <= friends.length - 1) /* Устанавливаем условие - ОГРАНИЧЕНИЕ. Пока i меньше или равно ИНДЕКСУ последнего элемента массива выполняем... */

{

document.write(friends[i]); /* ДЕЙСТВИЕ - Выводим текущий элемент массива и далее прибавляем к переменной i единицу */

i = i + 1;

}

</script>

Алексей Вячеслав Григорий Настя Павел

Вот таким образом я самостоятельно решил эту задачу. Теперь можно это решение сранить с тем, которое рассматривается в рамках курса «Javascript+jQuery для начинающих».

Цикл while вывод элементов Массива - Исходный код...

Цикл while вывод элементов Массива - Исходный код...

Как оказалось в курсе «Javascript+jQuery для начинающих» приводиться практически идентичная реализация поставленной задачи.

Тем не менее, небольшая разница есть, поэтому давайте рассмотрим и немного другой вариант программного кода по выводу элементов Массива при помощи цикла while в Javascript.

<script type="text/javascript">

var friends = [" Алексей", " Вячеслав", " Григорий", " Настя", " Павел"];

var i = 0; /* Устанавливаем СЧЁТЧИК i = 0, так как 0 - это индекс 1-го элемента массива */

while (i < friends.length) /* Устанавливаем условие - ОГРАНИЧЕНИЕ. Пока i меньше количества элементов массива */

{

document.write(friends[i] + "<br />"); /* ДЕЙСТВИЕ - Выводим текущий элемент массива и далее прибавляем к переменной i единицу */

i++;

}

</script>

Алексей
Вячеслав
Григорий
Настя
Павел

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

В предыдущем примере мы задавали следующее условие (ограничение для счетчика): что переменная i должна быть меньше или равна именно ИНДЕКСУ последнего элемента массива. Индекс последнего 5-го элемента это цифра 4.

friends[4] - это имя Павел.

4 <= 4 и на этом цикл останавливается.

А во втором варианте условие таково: переменная i просто меньше количества элементов Массива (их пять). Таким образом, мы исключаем из условия цифру 5, так как в этом Массиве нет 6-го элемента, который имел бы индекс 5.

4 < 5 - это последнее условие, которое будет выполнено.

friends[4] - это имя Павел.

Далее. Во втором примере мы видим, что добавлен тег переноса строки "<br />" для того, чтобы вывод каждого следующего элемента начинался с новой строки. И в конце использован сокращенный вариант программного кода для увеличения значения переменной i на единицу i++;

Здесь мы закончим. Далее следует Домашнее задание. Обязательно выполните его самостоятельно, чтобы закрепить эту тему, так как циклы в Javascript довольно часто используются вместе с Массивами.

Домашнее задание

Домашнее задание

Итак, переходим к выполнению домашнего задания по пройденной теме: «Цикл while в JavaScript - Работа с элементами Массива».

Как всегда сначала пробуем решить задание самостоятельно. Если получилось - хорошо, если нет, то смотрим решение.

У Вас есть массив Друзей:

var friends = [" Алексей", " Вячеслав", " Григорий", " Настя", " Николай", " Павел", " Любовь", " Егор", " Лэйла"];

С помощью цикла while нужно вывести на экран всех друзей, начиная с Григория и заканчивая Любовью. При условии, что мы видим массив и знаем, как в нём расположены друзья.

Для решения этой задачи снова рассуждаем:

  • 1 - Нам нужно вывести на экран часть элементов массива, начиная с 3-го и заканчивая 7-м включительно.

  • 2 - Помня о том, что нумерация элементов в Массиве начинается с нуля, имеем: индекс 3-го элемента массива - это цифра 2, а индекс 7-го - цифра 6.

  • 3 - Создаём счётчик (переменную i), который будет начинаться с 2.

    4 - Ограничением для счётчика будет цифра 6 если включительно, если нет, то цифра 7.

    5 - Совершаем действие - выводим на экран текущий элемент массива (значение счётчика i) и прибавляем к переменной i единицу.

<script type="text/javascript">

var friends = [" Алексей", " Вячеслав", " Григорий", " Настя", " Николай", " Павел", " Любовь", " Егор", " Лэйла"];

var i = 2; /* Устанавливаем СЧЁТЧИК i = 2 */

while (i <= 6) /* Устанавливаем условие - ОГРАНИЧЕНИЕ. Пока i меньше или равно 6 */

{

document.write(friends[i] + "<br />"); /* ДЕЙСТВИЕ - Выводим текущий элемент массива и далее прибавляем к переменной i единицу */

i++;

}

</script>

Григорий
Настя
Николай
Павел
Любовь

Вот так решается эта задача. Все достаточно просто, если Вы поняли, как взаимодействует цикл while с массивами в Javascript.

Главная Изучаем JavaScript Цикл while и Массивы Цикл for

Ваши комментарии к уроку:

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

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru