Инструкции и обработка исключений JavaScript

Содержание

Слайд 2

Что такое «инструкция»?

Инструкция (statement) – автономная часть скрипта, которая может быть выполнена;

Что такое «инструкция»? Инструкция (statement) – автономная часть скрипта, которая может быть
команда.
Значит, любой скрипт – это набор инструкций.
Для разделения инструкций JavaScript использует ; или переход на новую строку (обсуждали это ранее).

Слайд 3

Инструкция block

Иногда синтаксис JavaScript требует в определённом месте наличия только одной инструкции.
А

Инструкция block Иногда синтаксис JavaScript требует в определённом месте наличия только одной
по смыслу программы инструкций надо несколько.
Инструкция block используется для группировки инструкций (несколько инструкций, рассматриваются как одна).
Блок ограничивается фигурными скобками:
{ statement_1; statement_2; ... statement_n; }
обычно используется с управляющими инструкциями (например, if, for, while).

Слайд 4

Пустые инструкции

Иногда синтаксис JavaScript требует в определённом месте наличия инструкции (любой).
А по

Пустые инструкции Иногда синтаксис JavaScript требует в определённом месте наличия инструкции (любой).
смыслу программы инструкция не нужна.
Выход: использовать пустую инструкцию (вроде и инструкция, но ничего не делает).
Пустая инструкция в JavaScript – это просто символ ;

Слайд 5

Инструкции-выражения

Простейший вид инструкции – это выражение с побочным эффектом (помним о точке

Инструкции-выражения Простейший вид инструкции – это выражение с побочным эффектом (помним о
с запятой)
greeting = "Hello " + name; // присваивание
counter++; // инкремент (и декремент)
delete obj.prop; // оператор delete
alert(greeting); // вызов функции

Слайд 6

Инструкции объявления

Инструкция var позволяет объявить одну или несколько переменных (опционально –

Инструкции объявления Инструкция var позволяет объявить одну или несколько переменных (опционально –
с начальным значением):
var имя_1 [ = знач_1][,..., имя_n [= знач_n]]
Если значение не указано, подразумевается undefined.
Инструкция var может размещаться внутри функции (локальная переменная функции), вне функции – на верхнем уровне скрипта (глобальная переменная).

Слайд 7

var x = 10; // глобальная переменная
var y; // неинициализированная переменная
function f()

var x = 10; // глобальная переменная var y; // неинициализированная переменная
{
var z = "Str"; // локальная переменная
}
// счётчик цикла
for(var i = 0; i < 10; i++) alert(i);

Слайд 8

let Объявляет локальную переменную в области видимости блока, необязательно инициализирует её значением. 
if

let Объявляет локальную переменную в области видимости блока, необязательно инициализирует её значением.
(x > y) {
let gamma = 12.7 + y;
i = gamma * x;
}
const Объявляет именованную константу только для чтения. const MY_FAV = 7;
const MY_OBJECT = {"key": "value"};

Слайд 9

Инструкция var – ловушка!

var x = y = 10;

Вы думаете, что это
var

Инструкция var – ловушка! var x = y = 10; Вы думаете,
y = 10;
var x = 10;

Нет! Это вот что:
y = 10;
var x = 10;
Скоро станет понятно, что это очень разные вещи.

Слайд 10

В JavaScript при объявлении переменной не указывается тип, потому что переменные могут

В JavaScript при объявлении переменной не указывается тип, потому что переменные могут
хранить значения любых типов:
var x = 10; // сначала храним число
x = "Srt"; // затем строку
x = [2, 3, 5]; // затем массив (объект)

Слайд 11

Инструкция function

Инструкция function служит для определения функции:
function имя_функции([арг_1 [,арг_2 [...,арг_n]]]){
инструкции
}
Круглые и

Инструкция function Инструкция function служит для определения функции: function имя_функции([арг_1 [,арг_2 [...,арг_n]]]){
фигурные скобки здесь обязательны.

Слайд 12

Инструкция function может располагаться на «верхнем уровне» скрипта или быть вложенной в

Инструкция function может располагаться на «верхнем уровне» скрипта или быть вложенной в
функцию.
В любом случае, не допускается вложение этой инструкции в ветвления, циклы и тому подобное! (нужен «первый уровень вложенности»)

Слайд 13

Условные переходы Инструкция if

Две формы записи:
выражение вычисляется, результат приводится к boolean.

Условные переходы Инструкция if Две формы записи: выражение вычисляется, результат приводится к boolean.

Слайд 14

Приведение типов: напоминание

Ложными являются следующие значения
false
null
undefined
"" (пустая строка)

Приведение типов: напоминание Ложными являются следующие значения false null undefined "" (пустая
0
NaN
Все остальные значения являются истинными.

Слайд 15

if (0) { // 0 преобразуется к false
...
}
if (1) {

if (0) { // 0 преобразуется к false ... } if (1)
// 1 преобразуется к true
...
}
var cond = (year != 2011); // true/false
if (cond) {
...
}

Слайд 16

var year = prompt('Введите год появления стандарта ECMA-262 5.1', '');
if (year

var year = prompt('Введите год появления стандарта ECMA-262 5.1', ''); if (year
== 2011) {
alert( 'Да вы знаток!' );
} else {
alert( 'А вот и неправильно!' ); // любое значение, кроме 2011
}
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ' ');
if (year < 2011) {
alert( 'Это слишком рано..' ); }
else if (year > 2011) {
alert( 'Это поздновато..' ); }
else {
alert( 'Да, точно в этом году!' ); }

Слайд 17

var userName = prompt('Кто пришёл?', ''); 
if (userName == 'Админ') { 
var pass =

var userName = prompt('Кто пришёл?', ''); if (userName == 'Админ') { var
prompt('Пароль?', ''); 
if (pass == 'Повелитель сайта') {
alert( 'Добро пожаловать!' );}
else if (pass == null) { // нажатие «Отмена»
alert( 'Вход отменён' );
} else {
alert( 'Пароль неверен' );} 
} else if (userName == null) {
alert( 'Вход отменён' ); 
} else { 
alert( 'Я вас не знаю' ); }

Слайд 18

Еще раз о тернарной операции

var access;
var age = prompt('Сколько вам лет?', '

Еще раз о тернарной операции var access; var age = prompt('Сколько вам
');
if (age > 14) {
access = true; access = age > 14 ? true : false;
access = age > 14;
} else {
access = false;
}
 alert(access);

Слайд 19

var age = prompt('возраст?', 18);
var message = (age < 3) ? 'Здравствуй,

var age = prompt('возраст?', 18); var message = (age (age (age 'Какой
малыш!' :
(age < 18) ? 'Привет!' :
(age < 100) ? 'Здравствуйте!' :
'Какой необычный возраст!';
 alert( message );
if (age < 3) {
message = 'Здравствуй, малыш!';
} else if (age < 18) {
message = 'Привет!';
} else if (age < 100) {
message = 'Здравствуйте!';
} else {
message = 'Какой необычный возраст!';
}

Слайд 20

Инструкция switch

switch (expression) {
case valueExpression1: // if (expression === valueExpression1)
//

Инструкция switch switch (expression) { case valueExpression1: // if (expression === valueExpression1)
инструкции, соответствующие valueExpression1
[break;]
...
case valueExpressionN: // if (expression === valueExpressionN)
// инструкции, соответствующие значению valueExpressionN
[break;]
[default:
// инструкции, которые выполняются при отсутствии совпадений
[break;]
]
}

Слайд 21

На первый взгляд похожа на аналоги из других языков. Однако после case

На первый взгляд похожа на аналоги из других языков. Однако после case
указываются выражения!
Сначала вычисляем expression.
Затем вычисляем выражение valueExpression1.
Если значения совпали (===), выполняем соответствующий набор инструкций.
Если не совпали, переходим к вычислению valueExpression2.

Слайд 22

var a = 2 + 2;
switch (a) {
case 3:
alert(

var a = 2 + 2; switch (a) { case 3: alert(
'Маловато' );
break;
case 4:
alert( 'В точку!' );
break;
case 5:
alert( 'Перебор' );
break;
default:
alert( 'Я таких значений не знаю' );
}

Слайд 23

Инструкция switch

1. Часть default не является обязательной.
2. Части case можно группировать:
case 0:
case

Инструкция switch 1. Часть default не является обязательной. 2. Части case можно
1:
// инструкции
3. Набор инструкций после case (и default) может завершаться переходом (break, return), но не обязан!

Слайд 24

Если break  нет, то выполнение пойдёт ниже по следующим case, при этом остальные проверки

Если break нет, то выполнение пойдёт ниже по следующим case, при этом
игнорируются

var a = 2 + 2;
switch (a) {
case 3: alert( 'Маловато' );
case 4: alert( 'В точку!' );
case 5: alert( 'Перебор' );
default: alert( 'Я таких значений не знаю' );
}

Слайд 25

var x = 12;
switch(true) {
case x < 0:
alert("Negative");
break;
case

var x = 12; switch(true) { case x alert("Negative"); break; case x
x >= 0 && x <= 100:
alert("Between 0 and 100");
break;
default:
alert("More than 100");
}

В case могут быть любые выражения, в том числе включающие в себя переменные и функции:

Слайд 26

Несколько значений case можно группировать: case 3 и case 5 выполняют один и тот же код

var

Несколько значений case можно группировать: case 3 и case 5 выполняют один
a = 2+2;
switch (a) {
case 4: alert('Верно!');
break;
case 3:
case 5: alert('Неверно!');
alert('Немного ошиблись, бывает.');
break;
default: alert('Странный результат, очень странный');
}

Слайд 27

var arg = prompt("Введите arg?") ;
switch (arg) {
case '0':
case '1':

var arg = prompt("Введите arg?") ; switch (arg) { case '0': case

alert( 'Один или ноль' );
case '2':
alert( 'Два' ); break;
case 3:
alert( 'Никогда не выполнится' );
default:
alert('Неизвестное значение: ' + arg)
}

Слайд 28

var a = +prompt('a?', ' '); switch (a) {
case 0:

var a = +prompt('a?', ' '); switch (a) { case 0: alert(
alert( 0 );
break;
case 1:
alert( 1 );
break;
case 2:
case 3:
alert( '2,3' );
break;
}

var a = +prompt('a?', ' ');
if (a == 0) {
alert( 0 );
}
if (a == 1) {
alert( 1 );
}
if (a == 2 || a == 3) {
alert( '2,3' );
}

Слайд 29

Циклы while и do-while

Две формы циклов:
Циклы работают, пока выражение, приведённое к boolean,

Циклы while и do-while Две формы циклов: Циклы работают, пока выражение, приведённое
равно true. Обратите внимание на обязательную ; в цикле do-while.

Слайд 30

вместо while (i!=0) обычно пишут while (i)

вместо while (i!=0) обычно пишут while (i)

Слайд 31

Цикл for

for (инициализация; проверка; инкремент)
инструкция
Это (почти) эквивалентно:
инициализация;
while (проверка) {
инструкция;
инкремент;
}

Цикл for for (инициализация; проверка; инкремент) инструкция Это (почти) эквивалентно: инициализация; while

Слайд 32

Цикл for

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

Цикл for Инициализация – вычисляется один раз перед циклом. Обычно это присваивание.
инструкция var.
Проверка – это выражение вычисляется перед каждой итерацией. Тело цикла выполняется, если true.
Инкремент – это выражение вычисляется в конце цикла. Обычно это присваивание, или ++, или --.

Слайд 33

for (var count = 0; count < 10; count++)
alert(count);
var i, j;
for

for (var count = 0; count alert(count); var i, j; for (i
(i = 0, j = 10; i < 10; i++, j--)
sum += i * j;
function tail(o) { // находит последний элемент в списке
for(; o.next; o = o.next) ;
return o;
}

Слайд 34

var i = 0;
for (; i < 3;) {
alert( i );
// цикл

var i = 0; for (; i alert( i ); // цикл
превратился в аналог while (i<3)
}
А можно и вообще убрать всё, получив бесконечный цикл:
for (;;) {
// будет выполняться вечно
}

Слайд 35

Цикл for...in

for (переменная in объект)
инструкция
Этот цикл выполнят перебор имён (строки!) свойств

Цикл for...in for (переменная in объект) инструкция Этот цикл выполнят перебор имён
объекта .
объект – выражение, которое преобразуется в объект.
переменная – любое левостороннее выражение или инструкция var.

Слайд 36

// вывод значений свойств объекта
for(var prop in obj)
alert(obj[prop]);
// копируем имена свойств

// вывод значений свойств объекта for(var prop in obj) alert(obj[prop]); // копируем
в массив
var a = [], i = 0;
for(a[i++] in obj) ; // пустое тело цикла
// индексы массива – это свойства объекта
for(var i in a)
alert(a[i]);

Слайд 37

Цикл for...in перебирает только перечислимые свойства объекта (как сделать такое свойство –

Цикл for...in перебирает только перечислимые свойства объекта (как сделать такое свойство –
особый вопрос).
Перебираются свойства, которые есть и в объекте, и в его прототипах.
Обычно порядок перебора соответствует порядку определения свойств (свойства прототипа – в конце), но спецификация не даёт указаний на этот счёт.

Слайд 38

Цикл for...of 

В то время как for...in обходит имена свойств, 
for...of выполняет обход значений свойств:
let arr

Цикл for...of В то время как for...in обходит имена свойств, for...of выполняет
= [ 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"
}

Слайд 39

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

Любая инструкция может быть снабжена меткой:
идентификатор: инструкция
1. Метки используются для

Метки инструкций Любая инструкция может быть снабжена меткой: идентификатор: инструкция 1. Метки
переходов при помощи break или continue.
2. Метки работают только внутри тех инструкций, к которым они применяются.
помечают switch, while, do, for.

Слайд 40

Инструкция break

Первая форма инструкции break:
break;
Эта форма используется для выхода из switch или

Инструкция break Первая форма инструкции break: break; Эта форма используется для выхода
для выхода из цикла (самого внутреннего цикла, если циклы вложены).

Слайд 41

var sum = 0;
while (true) {
var value = +prompt("Введите число", '');
if (!value)

var sum = 0; while (true) { var value = +prompt("Введите число",
break; //ничего не введено
sum += value;
}
alert( 'Сумма: ' + sum );

Слайд 42

Вторая форма инструкции break:
break имя_метки;
Эта форма выполняет переход на следующую инструкцию за

Вторая форма инструкции break: break имя_метки; Эта форма выполняет переход на следующую
помеченной.
Break должен находиться внутри отмеченного блока, который соответствует метке.
Отмеченная инструкция может быть любой блочной инструкцией;
она не обязательно должна являться циклом.

Слайд 43

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

loops: for (var i = 0; i for (var j = 0;
(var j = 0; j < 15; j++) {
if (i == 5 && j == 5) break loops;
//выход из двух циклов сразу
}
}
alert(i + j); // выведет 10

Слайд 44

Инструкция continue

Существует в двух формах:
continue;
continue имя_метки;
 прекращает выполнение текущей итерации цикла
В отличие от break: прерывает

Инструкция continue Существует в двух формах: continue; continue имя_метки; прекращает выполнение текущей
не весь цикл,
а только текущее выполнение его тела

Слайд 45

for (i = 0; i < data.length; i++) {
// не обрабатывать

for (i = 0; i // не обрабатывать неопределенные данные if (!data[i])
неопределенные данные
if (!data[i]) continue;
total += data[i];
}

Слайд 46

Особенность continue в разных циклах:
1. В цикле while выражение в начале цикла

Особенность continue в разных циклах: 1. В цикле while выражение в начале
проверяется снова, и если оно равно true, тело цикла выполняется с начала.
2. В цикле for вычисляется выражение инкремента и снова вычисляется выражение проверки, чтобы понять, следует ли выполнять следующую итерацию.
continue также может быть использована с меткой, в этом случае управление перепрыгнет на следующую итерацию цикла с меткой.

Слайд 47

n>1 – простое, если при делении на любое число
от 2 до n-1 есть остаток.
выводит все простые

n>1 – простое, если при делении на любое число от 2 до
числа из интервала от 2 до 10
nextPrime:
for (var i = 2; i < 10; i++) {
for (var j = 2; j < i; j++) {
if (i % j == 0) continue nextPrime;
}
alert( i ); // простое
}

Слайд 48

Инструкция return

Инструкция return осуществляет немедленный выход из функции, возвращая указанное выражение или

Инструкция return Инструкция return осуществляет немедленный выход из функции, возвращая указанное выражение
undefined, если не указано:
return выражение;
return;
Используется только в функциях.

Слайд 49

return;
return true;
return false;
return x;
return x + y /

return; return true; return false; return x; return x + y /
3;

return
a + b;
// трансформируется ASI в
return;
a + b;
// Консоль предупреждает "unreachable code after return statement".

Слайд 50

Генерация исключений

Для генерации исключения используется инструкция throw, а для его обработки инструкция try...catch.
throw

Генерация исключений Для генерации исключения используется инструкция throw, а для его обработки
выражение;
выражение содержит значение, которое будет выброшено и может иметь любой тип результата! , но рекомендуется объект, желательно – совместимый со стандартным, то есть чтобы у него были как минимум свойства name и message.

Слайд 51


throw "Error2"; // string
throw 42; // number
throw true; //

throw "Error2"; // string throw 42; // number throw true; // boolean
boolean
throw { toString: function() { return "I'm an object!"; } }; // object
В качестве конструктора ошибок можно использовать встроенный конструктор: new Error(message) или любой другой.
Конструкторы для стандартных ошибок: SyntaxError, ReferenceError, RangeError

Слайд 52

function factorial(x) {
if (x < 0)
throw new Error("x cannot be

function factorial(x) { if (x throw new Error("x cannot be negative"); for(var
negative");
for(var f = 1; x > 1; f *= x, x--) ;
return f;
}

Слайд 53

Случай 1. throw используется внутри функции:
Выполнение функции прекращается, управление передаётся на ближайший

Случай 1. throw используется внутри функции: Выполнение функции прекращается, управление передаётся на
catch в стеке вызова.
Если catch отсутствует, прекращается выполнения всего скрипта (но не других скриптов на странице).

Слайд 54

Случай 2. throw используется вне функции («глобально»):
Если есть обрамляющий блок обработки, управление

Случай 2. throw используется вне функции («глобально»): Если есть обрамляющий блок обработки,
передаётся на его catch.
Если обрамляющий блок обработки отсутствует, прекращается выполнения всего скрипта (но не других скриптов на странице).

Слайд 55

Инструкция try...catch

try {
// инструкции, которые могут сгенерировать исключение
}
catch (e) {
// блок

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

Слайд 56

Обработка исключений

Все фигурные и круглые скобки обязательны.
Присутствует или блок catch, или блок

Обработка исключений Все фигурные и круглые скобки обязательны. Присутствует или блок catch,
finally, или оба.
Переменная e (имя может быть любым) видима только в catch-блоке, будет содержать объект ошибки с подробной информацией о произошедшем , имеет значение, которое указывали после throw при генерации исключения.

Слайд 57

try {
alert('Начало блока try'); // (1) <--
lalala; // ошибка, переменная не определена!
alert('Конец

try { alert('Начало блока try'); // (1) lalala; // ошибка, переменная не
блока try'); // (2)
} catch(e) {
alert('Ошибка ' + e.name + ":" + e.message + "\n" + e.stack); // (3) <--
}
alert("Потом код продолжит выполнение...");

Слайд 59

объект ошибки

name тип ошибки. Например, при обращении к несуществующей переменной: "ReferenceError".
message текстовое сообщение

объект ошибки name тип ошибки. Например, при обращении к несуществующей переменной: "ReferenceError".
о деталях ошибки.
stack содержит строку с информацией о последовательности вызовов, которая привела к ошибке (кроме IE8-)
В зависимости от браузера, могут быть и дополнительные свойства

Слайд 60

В блоке catch можно обработать исключение или (и) сгенерировать исключение повторно.
Секцию finally используют,

В блоке catch можно обработать исключение или (и) сгенерировать исключение повторно. Секцию
чтобы завершить начатые операции при любом варианте развития событий.
Блок finally выполняется, если блок try завершился:
как обычно, достигнув конца блока
из-за инструкции break, continue или return
с исключением, обработанным в блоке catch
с неперехваченным исключением, которое продолжает своё распространение на более высокие уровни

Слайд 61

Блок finally – вопрос ?

function f() {
try {
return 5;
}

Блок finally – вопрос ? function f() { try { return 5;
finally {
return 10;
}
}
// функция f() вернёт?
var x = f(); alert(x);

10

Слайд 62

openMyFile();
try {
writeMyFile(theData);
} catch(e) {
handleError(e);
} finally {
closeMyFile();

openMyFile(); try { writeMyFile(theData); } catch(e) { handleError(e); } finally { closeMyFile(); }

}

Слайд 63

window.onerror

Если ошибка произошла вне блока try..catch или выпала из try..catch наружу, во внешний код, то рекомендуется

window.onerror Если ошибка произошла вне блока try..catch или выпала из try..catch наружу,
свойство window.onerror.
если в него записать функцию, то она выполнится и получит в аргументах сообщение ошибки, текущий URL и номер строки, откуда «выпала» ошибка.
Необходимо , чтобы функция была назначена заранее.

Слайд 64

window.onerror = function(message, url, lineNumber) {
alert("Поймана ошибка, выпавшая в глобальную область!\n"

window.onerror = function(message, url, lineNumber) { alert("Поймана ошибка, выпавшая в глобальную область!\n"
+ "Сообщение: " + message + "\n(" + url + ":" + lineNumber + ")");
};
function readData() {
error(); // ой, что-то не так
}
readData();
Имя файла: Инструкции-и-обработка-исключений-JavaScript.pptx
Количество просмотров: 36
Количество скачиваний: 0