Операторы циклов, их виды, особенности и области применения (Особенности среды выполнения javascript)

Содержание:

ВВЕДЕНИЕ

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

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

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

ГЛАВА 1. ОСОБЕННОСТИ СРЕДЫ ВЫПОЛНЕНИЯ JAVASCRIPT

1.1 Что такое JavaScript?

JavaScript — это кросс-платформенный, объектно-ориентированный скриптовый язык, являющийся небольшим и легковесным. Внутри среды исполнения JavaScript может быть связан с объектами данной среды и предоставлять программный контроль над ними.

JavaScript включает стандартную библиотеку объектов, например, Array, Date и Math, а также базовый набор языковых элементов, например, операторы и управляющие конструкции. Ядро JavaScript может быть расширено для различных целей путем добавления в него новых объектов, например:

• JavaScript на стороне клиента расширяет ядро языка, предоставляя объекты для контроля браузера и его Document Object Model (DOM). Например, клиентские расширения позволяют приложению размещать элементы в форме HTML и обрабатывать пользовательские события, такие как щелчок мыши, ввод данных в форму и навигация по страницам.
• JavaScript на стороне сервера расширяет ядро языка, предоставляя объекты для запуска JavaScript на сервере. Например, расширение на стороне сервера позволяет приложению соединяться с базой данных, обеспечивать непрерывность информации между вызовами приложения или выполнять манипуляции над файлами на сервере.

1.2 Где применяется javascript

Язык JavaScript предназначен для выполнения в браузере наряду с HTML и CSS. Но, если эти языки предназначены для верстки структуры сайта, то JavaScript позволяет 'оживлять' web-страницы - делать их реагирующими на действия пользователя или демонстрировать некоторую динамичность.

Написать и запустить JavaScript можно двумя способами: первый заключается в том, что мы пишем код прямо в теле HTML страницы внутри тега <script> как показано на рисунке 1.

Рисунок 1. Использование тега <script> в теле HTML докуента.

Второй вариант заключается в том, что JavaScript код хранится в отдельном файле с расширением js (наподобие CSS) и подключается тоже с помощью тега <script> с атрибутом src, в котором указывается путь к файлу со скриптом как показано на рисунке 2.

Рисунок 2. Использование javascript в отдельном файле.

1.3 Что умеет JavaScript

Современный JavaScript – это «безопасный» язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.

Что же касается остальных возможностей – они зависят от окружения, в котором запущен JavaScript. В браузере JavaScript умеет делать всё, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

• Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
• Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
• Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX").
• Получать и устанавливать cookie, запрашивать данные, выводить сообщения…
• …и многое, многое другое!

1.4 Что НЕ умеет JavaScript

JavaScript – быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения…

Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя.

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

Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.

• JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.
• Современные браузеры могут работать с файлами, но эта возможность ограничена специально выделенной директорией – «песочницей». Возможности по доступу к устройствам также прорабатываются в современных стандартах и частично доступны в некоторых браузерах.
• JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).
• Из JavaScript можно легко посылать запросы на сервер, с которого пришла страница. Запрос на другой домен тоже возможен, но менее удобен, т. к. и здесь есть ограничения безопасности.

ГЛАВА 2. ОПЕРАТОРЫ ЦИКЛОВ В JAVASCRIPT

Оператор цикла повторно выполняет последовательность операторов JavaScript, определенных в его теле, пока не выполниться некоторое заданное условие.

В языке JavaScript имеется пять опрераторов цикла: while, do…while, for, for…in и for…of. Каждому из них посвящен один из следующих подразделов.

2.1 Оператор while

Синтаксис while:

while (условие)

{

инструкция

}

Цикл while начинает работу с вычисления условия. Если это условие имеет ложное значение, интерпретатор пропускает инструкцию, составляющую тело цикла, и переходит к следующей инструкции в программе. Если выражение имеет истинное значение, то выполняется инструкция, образующая тело цикла, затем управление передается в начало цикла и условие порверяется снова. Иными словами, интерпретатор снова и снова выполняет инструкцию тела цикла, пока значение выражения остается истинным. Обратите внимание, что имеется возможность организовать бесконечный цикл с помощью синтаксиса while(true).

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

Кроме того, если изменяемая переменная (или переменные) присутствует в условии, значение переменной может меняться при каждом проходе цикла. Это важно, т.к. в противном случае условие, которое было истинным, никогда не изменится и цикл никогда не завершится! Ниже приводится пример цикла while, который выводит в консоли брайзера числа от 0 до 9:

var count = 0;

while (count < 10)

{

console.log(count);

count++;

}

В начале переменной count присваивается значение 0, а затем ее значение увеличивается каждый раз, когда выполняется тело цикла. После того как цикл будет выполнен 10 раз, выражение вернет false (т.е. переменная count уже не меньше 10), инструкция while завершится и интерпретатор перейдет к следующей инструкции в программе. Большинство циклов имеют переменные-счетчики, аналогичные count. Чаще всего в качестве счетчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код понятнее, следует давать счетчикам наглядные имена.

2.2 Оператор do…while

Цикл do/while отличается от while тем, что условие определяющее, будет ли цикл повторятся снова, проверяется после выполнения инструкции.

Тело цикла do/while выполняется по крайней мере один раз. Этот оператор удобно использовать, когда некоторое действие в программе нужно выполнить по крайней мере единожды, но при некоторых условиях придётся повторять его многократно.

Такой цикл выполнится 4 раза, а в консоли браузера будет выведено «2 3 4 5»:

var i = 1;
do {
    i++;
console.log (i);
} while (i < 5);

Такой цикл выполнится 1 раз, а в консоли браузера будет выведено «2»:

var i = 1;
do {
    i++;
   console.log (i);
} while (i < 0);

2.3 Оператор for

Чаще всего применяется цикл for. Выглядит он так:

for (начало; условие; шаг) {

инструкция

}

Любая часть for может быть пропущена.

Например, можно убрать начало:

var i = 0;

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

alert( i ); }

Можно убрать и шаг:

var i = 0;

for (; i < 3;) {

alert( i );

}

Цикл превратился в аналог while (i<3).

А можно и вообще убрать всё, получив бесконечный цикл:

for (;;) {

}

Такой цикл будет выполняться вечно.

При этом сами точки с запятой «;» обязательно должны присутствовать, иначе будет ошибка синтаксиса.

2.4 Оператор for…in

Оператор for...in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные инструкции для каждого отдельного свойства. Цикл for...in выглядит так:

for (переменная in объект) {

инструкция

}

В качестве переменной здесь обычно используется имя переменной, но точно так же можно использовать оператор var, объявляющую единственную переменную. Параметр объект - это выражение, возвращающее объект. И как обычно, инструкция - это инструкция или блок инструкций, образующих тело цикла.

Для обхода элементов массива часто используется обычный цикл for:

var arr = [1,2,3,4,5];

for (var i = 0; i < arr.length; i++)

{

console.log(arr[i]);

}

Инструкция for/in позволяет выполнить обход свойств объекта:

var obj = {name:'Alex', password:'12345' };

for (var i in obj)

{

console.log(obj[i]);

}

Чтобы выполнить инструкцию for/in, интерпретатор JavaScript сначала вычисляет выражение объект. Если оно возвращает значение null или undefined, интерпретатор пропускает цикл и переходит к следующей инструкции. Если выражение возвращает простое значение, оно преобразуется в эквивалентный объект-обертку. В противном случае выражение возвращает объект. Затем интерпретатор выполняет по одной итерации цикла для каждого перечислимого свойства объекта. Перед каждой итерацией интерпретатор вычисляет значение выражения, сохраняет его в переменной и присваивает ему имя свойства (строковое значение).

Обратите внимание, что переменная в цикле for/in может быть любым выражением, возвращающим значение, которое можно использовать слева от оператора присваивания. Это выражение вычисляется в каждой итерации цикла, т.е. каждый раз оно может возвращать разные значения. Например, чтобы скопировать имена всех свойств объекта в массив, можно использовать следующий цикл:

var obj = {name:'Alex', password:'12345' };

var arr = [], i = 0;

for (arr[i++] in obj);

console.log(arr);

В действительности цикл for/in может совершать обход не по всем свойствам объекта, а только по перечислимым свойствам. Многочисленные встроенные методы, определяемые в базовом языке JavaScript, не являются перечислимыми. Например, все объекты имеют метод toString(), но цикл for/in не перечислит свойство toString. Кроме встроенных методов также не являются перечислимыми многие другие свойства встроенных объектов. При этом все свойства и методы, определяемые пользователем, являются перечислимыми. Унаследованные свойства, которые были определены пользователем, также перечисляются циклом for/in.

Если в теле цикла for/in удалить свойство, которое еще не было перечислено, это свойство перечислено не будет. Если в теле цикла создать новые свойства, то обычно такие свойстве не будут перечислены. (Однако некоторые реализации могут перечислять унаследованные свойства, добавленные в ходе выполнения цикла.).

Хотя, очень заманчиво использовать for...in как способ пройтись по всем элементам массива, этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный for для числовых индексов при взаимодействии с массивами, поскольку оператор for...in проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.

2.5 Оператор for…of

Оператор for...of создаёт цикл, проходящий по перечислимым объектам (включая Array, Map, Set, объект arguments и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.

for (переменная of обьект) {

инструкция

}

Следующий пример показывает разницу между циклами for...of и for...in. Тогда как for...in проходит по именам свойств, for...of проходит по значениям свойств:

let arr = [3, 5, 7];

arr.foo = "hello";

for (let i in arr) {

console.log(i); // выводит "0", "1", "2", "foo"

}

for (let i of arr) {

console.log(i); // выводит "3", "5", "7"

}

ГЛАВА 3. ОПЕРАТОРЫ ПЕРЕХОДА И МЕТКИ В ЦИКЛАХ JAVASCRIPT

Еще одной категорией операторов языка JavaScript являются операторы перехода. Как следует из названия, эти операторы заставляют интерпретатор JavaScript переходить в другое место в программном коде. Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции. Оператор continue заставляет интерпретатор пропустить оставшуюся часть тела цикла, перейти обратно в начало цикла и приступить к выполнению новой итерации. В языке JavaScript имеется возможность помечать инструкции метками, благодаря чему в операторах break и continue можно явно указывать, к какому циклу или к какой другой инструкции они относятся.

3.1 Метки инструкций

Метка представляет собой оператор с индентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue, чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.

Синтаксис метки следующий:

метка : оператор

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

В этом примере, метка markLoop обозначает цикл while:

markLoop:

while (theMark == true) {

инструкция

}

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

Присвоив имя циклу, его затем можно использовать в инструкциях break и continue, внутри цикла для выхода из него или для перехода в начало цикла, к следующей итерации. Инструкции break и continue являются единственными инструкциями в языке JavaScript, в которых можно указывать метки - о них подробнее рассказывается далее. Ниже приводится пример инструкции while с меткой и инструкции continue, использующей эту метку.

mainloop: while (token != null)

{

инструкция

continue mainloop; // Переход к следующей итерации именованного цикла

}

3.2 Оператор break

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

Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт:

var sum = 0;

while (true) {

var value = +prompt("Введите число", '');

if (!value) break; // *

sum += value;

}

alert( 'Сумма: ' + sum );

Оператор break в строке  помеченной *, если посетитель ничего не ввёл, полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert.

Сочетание «бесконечный цикл + break» отлично подходит для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале-конце цикла, а посередине.

3.3 Оператор continue

Сontinue прекращает выполнение текущей итерации цикла.

Он – в некотором роде «младший брат» оператора break: прерывает не весь цикл, а только текущее выполнение его тела, как будто оно закончилось.

Её используют, если понятно, что на текущем повторе цикла делать больше нечего.

Например, цикл ниже использует continue, чтобы не выводить чётные значения

for (var i = 0; i < 10; i++) {

if (i % 2 == 0) continue;

alert(i);

}

Для чётных i срабатывает continue, выполнение тела прекращается и управление передаётся на следующую итерацию цикла for.

ЗАКЛЮЧЕНИЕ

Статичный Web-сайт вполне подходит для вывода простого содержимого, но динамичный Web-сайт может реагировать на события и позволяет организовать взаимодействие с пользователем.

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

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Алекс Маккоу, Веб-приложения на JavaScript, Издательство: Питер, 2012.
2. Дэвид Флэнаган, JavaScript. Подробное руководство, 6-е издание, Символ-Плюс, 2012.
3. Джон Рейсиг, JavaScript. Профессиональные приемы программирования, Питер, 2008.
4. Т.В. Зудилова, М.Л. Буркова, Web-программирование JavaScript - СПб: НИУ ИТМО, 2012.
5. Интернет-ресурс: http://www.wisdomweb.ru/JS/javascript-first.php