JavaScript урок 3. Основные операторы языка JavaScript и конструкции

На уроке будут рассмотрены основные операторы языка JavaScript и управляющие конструкции: условный оператор if, тернарный оператор javascript, оператор switch..case; операторы цикла в javascript: for, while, do..while, for..in

Основной задачей портала labs-org.ru является предоставление возможности получения навыков решения практических задач с использованием языка javaScript, в частности, навыков создания динамических веб-страниц. На основе решенных примеров и лабораторных заданий по javaScript, изложенных по мере увеличения их сложности, даже новичкам будет достаточно просто усвоить предоставленный материал.

Условные операторы языка javaScript

В javaScript условие осуществляет оператор if

Рассмотрим синтаксис условного оператора:

Синтаксис:

 if (условие)  
{
	// если истина
	operator1;
	operator2;
}
else
{
	// если ложь
	operator3;
	operator4;
}

Пример:

var a = prompt('Введите наибольшую цифру в 8-й системе счисления');
if (a != 7)  
{
	// если истина
	alert( 'Неверно!' );
}
else
{
	// если ложь
	alert( 'Верно!' );
}

В качестве условия может использоваться логическое выражение или переменная.

Блок операторов заключенный в {} — это составной оператор, объединяющий несколько операторов в конструкции. Скобки можно опустить, если внутри конструкции только один оператор.

Часть конструкции после служебного слова else — необязательна.

В условии используются следующие операции отношений:

< Меньше
> Больше
<= Меньше либо равно
>= В javascript больше или равно
== Равно (сравнение)
!= в javascript не равно
=== Сравнение с учетом типа (идентичность)

Важно: Идентичность (===) требует совпадения типа и значения переменной, тогда как для равенства (==) достаточно только совпадающих значений

Как понять идентичность переменных?
  1. если значения имеют разные типы, то они не идентичны;
  2. если значения являются числами, имеют одинаковые значения и не являются значениями NaN — они идентичны.

Для оператора равенства стоит использовать символ «==»

//num1 == num2

Для оператора идентичности стоит использовать «===»

//num1 === num2

Рассмотрим простой пример с использованием оператора языка javascript if:

Пример 1: выводить в модальное окно «а больше 1», если запрошенная переменная a действительно больше единицы, иначе выводить сообщение «а не больше 1»


✍ Решение:
 

  • Создайте веб-страницу с html-скелетом и тегом script.
  • В коде для javascript инициализируйте переменную a методом prompt() — модального окна для ввода:
  • var a = prompt("Введите число");
  • Преобразуйте переменную в числовой тип:
  • a = parseInt(a);
  • Введите условие проверки, выдав результат с помощью метода alert():
  • if (a > 1)
    	alert("а больше 1")
    else
    	alert("а не больше 1");
    Если a > 1, то будет выполнен первый оператор alert, в противном случае выполнится второй оператор alert. Можно то же самое записать с операторными скобками:
    if (a > 1) {
    	alert("а больше 1")
    }
    else
    {
    	alert("а не больше 1");
    }
  • Протестируйте сценарий в браузере.

Вопросы для самоконтроля:

  1. Каков синтаксис условного оператора if?
  2. В каких случаях можно опускать фигурные скобки {} в условном операторе?


Задание Js 3_1. Найдите ошибки в следующем фрагменте кода:

1
2
3
4
var a = prompt("Введите число 11", "0");
if (a = 11) 
    document.write("Введенное значение верно.");
}


Задание Js 3_2. Запрашивать у пользователя возраст (метод prompt()).
В зависимости от введенного возраста выдавать сообщение «Вы слишком молоды» (в случае введенного значения менее 20 лет) или «Вы нам подходите» (в случае введенного значения более или равного 20 годам).
Итоговое сообщение выводить с помощью метода document. write().

Несколько условий или сложные условия

Теперь рассмотрим используемые в javascript логические операторы для построения сложных (например, двойных) условий:

символ смысл пример
! в javascript отрицание НЕ if (!x)
&& в javascript И if (x>1 && x<5)
|| в javascript ИЛИ if (x>1 || y>1)
Что значит if (a)?

В большинстве языков программирования также как и в javascript используется так называемое "правило лжи". Рассмотрим пример:

var a=1;
if (a)
	alert(a);

Как в данном примере поступит интерпретатор? как будет проверять условие, состоящее просто из одной переменной? - По правилу лжи:

ЛОЖНО:

  • Null значения
  • Undefined
  • NaN
  • 0
  • Пустая строка ("")
  • false

Пример использования "правила лжи" со строковой переменной:

var s="";
if (s)
	alert("строка не пуста");
else
	alert("строка пуста");

Пример 2: Запрашивать у пользователя имя (метод javascript prompt). Если имя введено, то выводить "Привет, имя!". Если пользователь не ввел имя или щелкнул cancel (значение null) выводить "Привет, незнакомец!"

метод javascript prompt


✍ Решение:
 

  • Создайте веб-страницу с html-скелетом и тегом script.
  • В коде для javascript инициализируйте переменную name методом prompt() — модального окна для ввода:
  • var name = prompt("Введите число");
  • Введите условный оператор для обработки щелчка по кнопке cancell и для пустого ввода:
  • if (!name || name=="null")
        document.write("Привет, незнакомец!")
    проверка !name по правилу лжи означает, что строковая переменная пуста (т.е. пользователь ничего не ввел); проверка name=="null" означает, что пользователь щелкнул по кнопке Отмена (cancell); || - означает логическое ИЛИ, т.е. хотя бы одно из условий должно быть истинным
  • Для блока Иначе (else) организуйте вывод соответствующего сообщения со значением имени:
  • else
        document.write ("Привет, ", name,"!");
  • Протестируйте сценарий в браузере.

Задание Js 3_3. Написать программу, которая по паролю определяет уровень доступа сотрудника к секретной информации в базе данных.
Доступ к базе данных имеют сотрудники, разбитые на три группы по уровням доступа. Они имеют следующие пароли:

  • 9583, 1747 – выдавать сообщение "доступны модули баз А, В и С";
  • 3331, 7922 - выдавать сообщение "доступны модули баз В и С";
  • 9455, 8997 – выдавать сообщение "доступен модуль базы С".

Выводить доступные модули на запрос.


Вопросы для самоконтроля:

  1. Какие логические операторы существуют для сложных условий (И, ИЛИ, НЕ)?
  2. Что означает «правило лжи», и в каких случаях оно используется?

Тернарный оператор javaScript

Тернарный оператор языка javascript - это сокращенная форма конструкции if ... else.

Оператор включает в себя три операнда:

(1. условие ? 2. выполнить, если условие истинно : 3. выполнить, если условие ложно)

Синтаксис:

(логич. выражение) ? выражение 1 : выражение 2
В случае истинности условия выполняется то, что стоит до знака :, в случае ложности условия — выполняется то, что стоит после знака :.

Рассмотрим синтаксис тернарного оператора на примере:

Пример:

str1 = (y%2) ? "нечетное" : "четное"


Пример 3: Переменной b присваивать значение 100 в случае истинности условия a > 1 и присваивать 200 в случае истинности условия a <= 1. Выводить значение переменной b.

✍ Решение:

  • Создайте веб-страницу с html-скелетом и тегом script.
  • Добавьте следующий код:
  • var a = 10;
    var b = (a>1) ? 100 : 200;
    alert(b);
    Если условие a>1 истинно, то переменной b присвоить значение 100, иначе переменной b присвоить значение 200.
  • Протестируйте сценарий в браузере.

Задание Js 3_4. Дополнить код: объявлено 3 локальные переменные с использованием ключевого слова var. Необходимо в переменную max присвоить значение следующего тернарного оператора: если a больше b, то возвращаем a, иначе возвращаем b.
Фрагмент кода:

var a = 1, b = 2, max = 0;
...
document.write(max);

Задание Js 3_5. Исправьте код с оператором IF на тернарный оператор:
Код:

if (a * b < 6) {
  result = 'Мало';
} else {
  result = 'Много';
}


Вопросы для самоконтроля:

  1. Каков синтаксис тернарного оператора?
  2. Сколько аргументов у тернарного оператора?

Оператор переключения в javaScript - switch

Оператор switch javascript служит для проверки переменной на множество значений:

Синтаксис:

switch (переменная или выражение) {
case вариант1:
	//..блок операторов..
 	break
case вариант2:
	//..блок операторов..
 	break
default:
	//..блок операторов..
}

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

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

Важно: Оператор break обязателен после каждого рассмотренного значения переменной (после каждого case); если его не использовать, то будут выведены все, расположенные ниже операторы

Сравним с оператором IF:

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 2;
switch(a) 
{
	case 0: // if (a === 0)
	case 1: // if (a === 0)
		alert("Ноль или один"); // тогда выводим ...
		break;
	case 2: // if (a === 2)
	        alert("Два"); // тогда выводим ...
		break;
	default: // else
		alert("Много"); // иначе выводим ...
}
Как сгруппировать несколько вариантов?

Для выполнения одних и тех же операторов возможно группировка нескольких case. Как в примере выше:

...
case 0: 
case 1: 
	alert("Ноль или один"); 
	break;
...

При a = 0 и a = 1 выполняется один и тот же оператор: alert("Ноль или один");

Пример 4: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета "синий" и "голубой" выдавать одно и то же значение.

✍ Решение:

  • Создайте веб-страницу с html-скелетом и тегом script.
  • Инициализируйте переменную color значением, введенным пользователем в модальное окно:
  • var color = prompt("Какой цвет?");
  • Проверьте значение переменной с помощью конструкции switсh, выводя на каждое значение - соответствующий перевод:
  • 2
    3
    4
    5
    6
    7
    8
    9
    
    switch (color) {
      case "красный" :
        alert("red");
        break;
      case "зеленый":
        alert("green");
        break;
      // ...
    Если переменная color имеет значение "красный", то вывести в модальное окно перевод - "red" и выйти из конструкции (break;). Если переменная color имеет значение "зеленый", то вывести в модальное окно перевод - "green" и выйти из конструкции (break;).
  • Для цветов "синий" и "голубой" выполните группировку:
  •  // ...
     case "синий":
     case "голубой":
        alert("blue");
        break;
     // ...
    Если переменная color имеет значение "синий" или переменная color имеет значение "голубой", то вывести в модальное окно перевод - "blue" и выйти из конструкции (break;).
  • Организуйте вывод для тех цветов, которые не предусмотрены программой:
  •  // ...
      default:
        alert("y нас нет сведений по данному цвету")
    } // конец switch
  • Протестируйте сценарий в браузере.

Задание Js 3_6. Найдите и исправьте ошибки в следующем фрагменте кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var number = prompt("Введите число 1 или 2:");
switch (number) { 
case "1"
  {
    document.write("Один");
  };
    break;
case "2"
  {
    document.write("Два");
  };
  break;
default
  {
    document.write("Вы ввели значение, отличное от 1 и 2");
  };
}


Задание Js 3_7. Что выведется на экране при выполнении следующего кода?:

1
2
3
4
5
6
7
8
9
10
11
12
13
var value = "2";
 switch (value) {
 case "1":
 case "2":
 case "3":
 document.write("Hello");
 break;
 case "4":
 case "5": 
 document.write("World");
 default:
 document.write("Error");
 }


Задание Js 3_8. У пользователя запрашивать число – количество ворон на ветке. В зависимости от введенного числа (не более 10), выводить сообщение:

- На ветке сидит 1 ворона
- На ветке сидит 4 вороны
- На ветке сидит 10 ворон

Рекомендации:

  1. В зависимости от введенного числа, меняется окончание у слова "ворона".
  2. Для проверки использовать оператор Switch javascript.
  3. Сохраните данную страницу в папке результатов (она пригодится для дальнейших работ).


Вопросы для самоконтроля:

  1. В каком случае целесообразно в качестве условного оператора использовать конструкцию switch?
  2. Для чего служит блок default в операторе switch?
  3. Обязательно ли использование оператора break в конструкции switch?
  4. Как осуществляется группировка для нескольких вариантов значений в операторе switch?


Циклические операторы языка javaScript - For

Синтаксис:

for(начальное значение счетчика; условие; приращение счетчика)
  { 
	//..блок операторов..
  }

Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)

  • В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:
  • for(var i = 0; условие; приращение счетчика)
      { 
    	//..блок операторов..
      }
  • В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, i++ указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1:
  • for(var i = 0; условие; i++)
      { 
    	//..блок операторов..
      }
  • Условие цикла - это и есть конечное значение счетчика: например, i<10 - счетчик, достигнув значения 10, останавливает цикл:
  • for(var i = 0; i<10; i++)
      { 
    	//..блок операторов..
      }

Рассмотрим пример использования цикла for в javascript:

Пример 5: Вывести последовательность чисел 0 1 2 3 ... 9, каждую цифру - с новой строки.

0
1
2
...
8
9


✍ Решение:
 

  • Для вывода последовательности чисел будем использовать счетчик цикла for, который должен менять свое значение от 0 до 9 согласно последовательности.
  • Значит, для начального значения счетчика цикла установите значение, равное 0; в качестве условия цикла установите заключительное значение - i<10, т.е. последним значением будет i=9; шаг счетчика должен равняться 1 (i++), так как разница между членами последовательности - единица:
  • 1
    2
    3
    4
    
    for (var i=0; i<10; i++)
    {
     
    }
  • Для вывода значений последовательности воспользуйтесь значениями самого счетчика (i). Поскольку выводить следует каждое значение с новой строки, используйте после каждого вывода тег <br>, который осуществляет переход на следующую строку:
  • 1
    2
    3
    4
    
    for (var i=0; i<10; i++)
    {
    	document.write(i+"<br>");
    }
    В примере на экран выводятся значения счетчика цикла, так как приращение счетчика i++, соответственно, на экране будут появляться 0 1 2 3 ... 9, причем каждая цифра - с новой строки (тег <br>).
  • Протестируйте сценарий в браузере.

Задание Js 3_9. Вывести сумму всех целых чисел от 1 до 15.

Рекомендации:

  1. В качестве последовательности чисел используйте счетчик цикла for.
  2. Для переменной-сумматора следует использовать идентификатор переменной sum.

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

for (var i=...;...;...){
sum = sum + ...;
}
...


Операторы выхода из цикла break и continue в javaScript. Оператор Exit

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

В то время как оператор continue прерывает выполнение текущей итерации цикла, но, продолжая при этом выполнение цикла со следующий итерации.

Рассмотрим работу операторов break и continue на примере:

Пример: Разберите алгоритм фрагмента кода. Что будет выведено?

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

1
2
3
4
5
6
for (var i=0;i<10;i++)
{
	if (i==4) continue;
	document.write(i+"<br>");
	if (i==8) break;
}


✍ Решение:
 

  • В третьей строке примера стоит условие, из-за которого цифра 4 не будет выводиться на экран: оператор continue перейдет к следующей итерации цикла, не завершив текущую.
  • В строке №5 осуществляется выход из цикла, но при этом цифра 8 будет выведена на экран, так как оператор вывода стоит до условия (в 4-й строке). Встретив break, интерпретатор завершит работу цикла.
  • Т.о. на экране будет: 0 1 2 3 5 6 7 8 - каждая цифра с новой строки.

Задание Js 3_10. Вывести сумму всех целых чисел от 1 до 15, исключив из общей суммы числа 5 и 7.

Оператор Exit

В языке javasctipt предусмотрен оператор выхода из программного кода - оператор exit.
Чаще всего оператор используется для исключения ошибки ввода пользователя.

Рассмотрим пример:
Пример 6: Запрашивать пользователя ввести число. Если введено не число, то выводить сообщение "Необходимо число!" и останавливать работу программы.

Рекомендации:
Для выполнения пригодятся функции преобразования типа.


✍ Решение:
 

  • Инициализируйте переменную number значением, введенным пользователем в модальное окно:
  • 1
    
    var number = prompt("Введите число");
  • Используя функцию parseInt преобразования строки в целое число, проверьте, является ли введенное значение числом:
  • 2
    
    number=parseInt(number); // возвратит NaN - не число
    В случае, если введено не число, функция возвратит значение NaN (с англ. not a number - не число).
  • Проверьте значение переменной number с помощью функции isNaN:
  • 3
    
    x = isNaN(number); // возвратит true, если значение не числовое
    Функция isNaN возвращает значение true в случае, если переменная не является числом
  • По правилу "лжи" организуйте проверку значения переменной x. Если значение не числовое выведите соответствующее замечание и завершите программу:
  • 4
    5
    6
    7
    
    if (x){
    	alert("Необходимо число!");
    	exit; // выход из программы
    }
  • Для продолжения программы (если введенное значение было числом), выведите следующее окно с предложением ввода:
  • 8
    
    alert("Введите второе число");// при вводе не числа оператор не выполнится
  • Протестируйте сценарий в браузере.

Вопросы для самоконтроля:

  1. Перечислите три параметра цикла for и поясните их назначение.
  2. Какие операторы предназначены для выхода из цикла и для его прерывания? Приведите примеры их использования.
  3. Для чего предназначен оператор exit?

Возможно ли несколько счетчиков в одном FOR?

Интересная работа с циклом for возможна при использовании одновременно двух счетчиков в цикле.
Рассмотрим пример:

Пример 7: При помощи скрипта распечатать следующие пары переменная-значение в три строки:

i=0 j=2 
i=1 j=3 
i=2 j=4


✍ Решение:
 

  • В цикле for организуйте два счетчика: счетчик i для вывода последовательности 0 1 2, счетчик j для вывода последовательности 2 3 4:
  • 1
    2
    3
    
    for(i=0, j=2; i<10, j<5; i++, j++)
    {
    }
    Каждый из трех параметров цикла for теперь имеет по два значения, которые перечисляются через запятую (например, первый параметр с двумя значениями: i=0, j=2). Сами параметры перечисляются через точку с запятой(;).
  • Для вывода с каждой строки используйте тег <br>:
  • 1
    2
    3
    4
    
    for(i=0, j=2; i<10, j<5; i++, j++)
    {
    	document.write("<br>i=", i, "j=",j);
    }
Генерация страницы "на лету": как это?

Перед выполнением следующего задания рассмотрим пример динамического построения html-страницы при помощи javascript.

Пример 8:

  • Необходимо динамически генерировать маркированные и нумерованные списки на веб-странице в зависимости от введенных пользователем данных: запрашивать у пользователя ввести вид списка (нумерованный (цифра 1) или маркированный (цифра 2)), а затем количество пунктов списка.
  • В зависимости от ответа выводить на экран теги либо маркированного либо нумерованного списка с необходимым количеством пунктов.
  • Если введен несуществующий тип списка, то выдавать сообщение "Введите правильный тип!" и осуществлять выход из программы (оператор exit).

Вспомним теги:
теги нумерованного списка:

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

теги маркированного списка:

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • Например, при вводе сначала единицы, а затем числа 5, браузер отобразит:
  • 1

Рекомендации:
В примере для вывода пунктов списка необходимо использовать цикл for. Также понадобятся функции преобразования типов.


✍ Решение:
 

  • Инициализируйте переменную listType значением, введенным пользователем в модальное окно:
  • var listType=prompt("Введите '1' - если маркированный список, '2' - если нумерованный список");
  • Проверьте введенное значение: для нумерованного списка (цифра 1) выведите тег <ol>, для маркированного (цифра 2) - тег <ul>. Если введено другое значение, выведите замечание и закончите программу:
  • if (listType=='1')
    	document.write("<ol>")
    else if (listType=='2')
    	document.write("<ul>")
    else {
    	alert("Введите правильный тип");
    	exit;
    	}
  • Инициализируйте переменную kolvo значением, введенным пользователем в модальное окно:
  • var kolvo=prompt("Введите количество пунктов");
  • Для преобразования строкового значения в числовое используйте функцию parseInt:
  • kolvo=parseInt(kolvo);
  • Для введенного количества пунктов списка организуйте цикл, в котором выводите теги для списка <li>:
  • for (var i=1; i<=kolvo; i++)
    	document.write("<li></li>");
  • Поскольку списки закрываются соответствующими тегами, в зависимости от вида списка выведите закрывающие теги:
  • if (listType=='1')
    	document.write("</ol>")
    else if (listType=='2')
    	document.write("</ul>");
  • Протестируйте сценарий в браузере.

Задание Js 3_11.
Написать скрипт, который выводит теги input (элементы управления) разного типа, в зависимости от введенной цифры:

1 - текстовое поле,
2 - кнопка,
3 - radio (переключатель).

Количество выведенных тегов должно тоже запрашиваться.

Вспомним теги:

Для 1 - текстовое поле: 
<input type="text">
 
Для 2 - кнопка: 
<input type="button">
 
Для 3 - radio: 
<input type="radio">

Пример вывода:

Задание Js 3_12. Нарисовать шахматную доску 9х9, используя циклы javascript for. "Рисовать" доску следует тегами html для таблицы:

Вспомним теги:

<table border="1" width="30%">
  <tr> <!-- строка --> 
     <td>-</td><td>-</td><!-- две ячейки в строке --> 
  </tr>
</table>

Рекомендации:

  • Для рисования 9 строк необходимо организовать внешний цикл for со счетчиком i.
  • Для рисования 9 ячеек в каждой строке необходимо организовать внутренний (вложенный) цикл for со счетчиком j.
  • Для отрисовки тегов ячеек и строк следует использовать метод document.write.

Результат:
цикл for в javascript

Дополнительно:

  1. В ячейки таблицы вывести таблицу умножения, используя счетчики цикла (i и j).
  2. Первый ряд и первую колонку вывести с красным фоном (атрибут ячейки таблицы bgcolor):
     <td bgcolor='red'>-</td>

Результат:
javascript таблица умножения и шахматная доска

Циклические операторы языка javaScript - While

Синтаксис оператора while:

while (условие) 
{
	//..блок операторов..
};

Пример: Выводить в диалоговое окно степени двойки до 1000 (2, 4, 8 ... 512). Использовать метод alert()

✍ Решение:
 

  • Листинг скрипта:
  • 1
    2
    3
    4
    5
    
    var a = 1;
    while (a < 1000){
    	a*=2;
    	alert(a);
    }
    a*=2 → использована операция составного присваивания: произведение, совмещенное с присваиванием, т.е. то же самое, что a = a*2
  • Протестируйте результат в браузере.

Как работают операторы break и continue в цикле while?

Пример:

var a = 1;
while (a < 1000){
	a*=2;
	if (a==64)
		continue;
	if (a==256)
		break;
	alert(a);
}
Степени двойки будут выводиться до 128 включительно, причем значение 64 будет пропущено. Т.е. в диалоговых окнах мы увидим: 2 4 8 16 32 128

Задание Js 3_13. Какие значения выведет следующий фрагмент кода?

1
2
3
4
5
6
7
var counter = 5;
 while (counter < 10) {
   counter++;
   document.write("Counter " + counter);
   break;
   document.write("Эта строка не выполнится.");
 }


Задание Js 3_14. Написать код возведения х в степень y, используя цикл while. Запрашивать значения переменных и выводить результат с помощью alert().

Дополните код:

1
2
3
4
5
6
7
8
9
var x = ...;
var y = ...;
counter = 1;
chislo=x;
while (...){
	chislo=x*...;
	counter=...;
}
alert(chislo);

Цикл с постусловием do..while

Синтаксис:

do 
{
	//..блок операторов..
}
while (условие);

Условие проверяется уже после цикла. Соответственно, операторы в цикле выполнятся хотя бы один раз в любом случае, независимо от условия.

Пример: Рассмотрим пример использования цикла do while. Самостоятельно выясните, что будет выводиться в диалоговое окно.

✍ Решение:
 

  • Листинг скрипта:
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    var a = 1;
    do
     {
    	a*=2;
    	if (a==64)
    		continue;
    	alert(a);
    	if (a==256)
    		break;
    }while(a<1000);
  • Протестируйте результат в браузере.

Задание Js 3_15. Исправьте ошибку в программе, предназначенную для нахождения факториала числа:

1
2
3
4
5
6
7
8
9
10
11
12
13
var counter = prompt("Введите число");
var factorial = 1;
document.write("Факториал числа: " + counter + "! = ");
do {
     if (counter == 0) {
                factorial = 1;
                break;
     }
     factorial = factorial / counter;
     counter = counter + 1;
}
while (counter > 0);
document.write(factorial);


Задание Js 3_16. Модифицировать программу про ввод имени пользователем:

Запрашивать имя пользователя до тех пор, пока пользователь действительно введет имя (т.е. поле действительно будет заполнено и не нажата клавиша cancel). Когда имя введено, то выводить "Привет, имя!".

Циклические операторы языка javaScript - цикл For In

Цикл for in предназначен для прохода по массивам, коллекциям и объектам:

Пример: Распечатать все свойства объекта navigator.

Объект navigator необходим для получения различной информации о браузере. Эта информация доступна через свойства объекта.


✍ Решение:
 

  • Создайте код:
  • 1
    2
    3
    4
    
    for (var prop in navigator)
    {
    	document.write(prop + "<br>");
    }
    Переменная prop создана для "перебора" всех свойств объекта navigator.
  • Протестируйте результат в браузере.

Задание Js 3_16. Распечатать все свойства объекта window. Выводить каждое свойство с новой строки, чередуя цвет выводимых свойств: черный | синий.
Результат:
цикл for in
Рекомендации:

  • Использовать дополнительную переменную для проверки четности.
  • Использовать условный оператор If.

Оператор обработки исключений в javaScript - try..catch

Как искать ошибки в javascript?

В некоторых случаях код на странице не работает непонятно по какой причине. Где искать ошибку? В таких случаях можно применить оператор try..catch.

Оператор try..catch пытается выполнить фрагмент кода, и, если в коде есть ошибка, то существует возможность выдать ошибку на экран.
Ошибка хранится в объекте e.message.

Рассмотрим работу оператора на примере:

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

✍ Решение:
 

  • В качестве сообщения с ошибкой будем использовать метод prompt(), написанный с ошибкой - promt(). Сообщение с ошибкой заключите в блок try:
  • 1
    2
    3
    4
    5
    
    alert("до");
    try
    {
         promt("введите число"); // оператор с ошибкой
    }
    Try с англ. - "пытаться", таким образом, ставим оператор try перед фрагментом кода, который, возможно, содержит ошибку (в нашем случае ошибка действительно есть).
  • Сообщение с извещением об ошибке следует разместить в блок catch:
  • 6
    7
    8
    9
    
    catch(e)
    {
    	alert("обработка ошибки: "+e.message);
    }
    Если ошибка действительно есть, то оператор catch (с англ. "ловить") сохраняет эту ошибку в объекте e. В дальнейшем ее можно вывести в диалоговое окно - e.message.
  • Завершающее сообщение, которое необходимо выводить независимо от того, есть ли в коде ошибка, поместите в блок finally:
  • 10
    11
    12
    13
    14
    
    finally
    {
    	alert("завершающие действия");
    }
    alert("после");
    Если ошибка все же есть, то интерпретатор после ее вывода в нашем примере перейдет на выполнение блока catch, а затем finally (с английского "завершение", "наконец"), который выполнится всегда, независимо от того, была ли ошибка или нет. Даже если возникла ошибка в блоке catch.

Важно: Блок finally в конструкции необязателен.
  

Задание Js 3_17. Выполните пример, описанный выше, со следующими модификациями:

  • Удалите блок finally и проследите за выполнением кода.
  • Поставьте вместо ошибочного оператора безошибочный и посмотрите, каким будет результат.
  • Резюме:

    На уроке были рассмотрены следующие операторы языка javascript и конструкции:

    Javascript условные операторы:

  • Оператор if
  • Условное присваивание (тернарный оператор)
  • Оператор переключения switch
  •   
    Операторы цикла:

  • Цикл for
  • Цикл while
  • Цикл do...while
  • Цикл for...in
  • Итоговое задание Js 3_18.
    Создать игру для двоих:

    1. Программа просит первого игрока ввести число от 1 до 100 (второй игрок не видит введенное число). Затем второго игрока просит угадать введенное число. В ответ выводится сообщение «мало» либо «много» в зависимости от введенного ответа. Если игрок угадывает, - выводится поздравление. Если не угадывает – игра продолжается (до тех пор, когда число действительно будет угадано).
    2. Просчитывать число попыток и выдавать результат, когда число разгадано.


    Вопросы для самоконтроля:

    1. В каких случаях целесообразно использовать цикл For In? Назовите пример его использования.
    2. Каково назначение оператор try..catch?
    3. Объясните назначение каждого блока оператора try..catch.

    Поделитесь уроком с коллегами и друзьями:

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

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить