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;
}

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

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

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

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

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

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

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

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

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

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

var a=1;
if (a>1)
	alert("а больше 1")
else
	alert("а не больше 1");

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

! в javascript отрицание НЕ if (!x)
&& в javascript И if (x>1) && (x<5)
|| в javascript ИЛИ if (x>1) || (y>1)

Пример: Запрашивать у пользователя возраст. В зависимости от введенного возраста выдавать сообщение "Вы слишком молоды" или "Вы нам подходите"

Показать решение:

1
2
3
4
5
6
var age=prompt("Сколько лет?");
age=parseInt(age); // преобразовываем текстовые данные в число
if (age<18)
  alert("Bы слишком молоды")
else
  alert ("Вы нам подходите")

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

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

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


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

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

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

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

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

ЛОЖНО:

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

Пример со строковой переменной:

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

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

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

Важно: Тернарный оператор языка javascript - это сокращенная форма конструкции if ... else. Данный оператор включает в себя три операнда:

( условие ? Если условие ИСТИННО : Если условие ЛОЖНО )

Т.е. синтаксис:

(логическое выражение) ? выражение 1 : выражение 2

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

Пример: Переменной b присваивать значение 100 в случае истинности условия a>1 и присваивать 200 в случае ложного условия

Показать решение:

var a = 10;
var b = (a>1) ? 100 : 200;
alert(b);

Т.е. в случае истинности условия, выполняется то, что стоит до знака :, в случае ложности условия - выполняется то, что стоит после знака :.

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

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

 

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

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

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

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

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

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
var a =2;
switch(a)
{
	case 0:
	case 1:
		alert("Ноль или один");
		break;
	case 2:
	alert("Два");
		break;
	default:
		alert("Много");
}

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

Показать решение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var color = prompt("Какой цвет?");
switch (color) {
  case "красный" :
    alert("red");
    break;
  case "зеленый":
    alert("green");
    break;
  case "синий":
    alert("blue");
    break;
  default:
    alert("y нас нет документа на таком языке")
}

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

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_6. Что выведется на экране при выполнении следующего кода?:

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_7. У пользователя запрашивать число – количество ворон на ветке. В зависимости от введенного числа (не более 10), выводить сообщение. Для проверки использовать оператор Switch javascript:
- На ветке сидит 1 ворона
- На ветке сидит 4 вороны
- На ветке сидит 10 ворон

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

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

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

В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля.

В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, i++ указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1.

Условие цикла - это и есть конечное значение счетчика: например, i<10 - счетчик, достигнув значения 10, останавливает цикл.

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

1
2
3
4
for (var i=0;i<10;i++)
{
	document.write(i+"<br>");
}

В примере на экран выводятся значения счетчика цикла, так как приращение счетчика i++, соответственно на экране будут появляться 0 1 2 3 ... 9, причем каждая цифра - с новой строки (тег br).

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

Операторы выхода из цикла 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 не будет выводиться на экран. В строке №5 осуществляется выход из цикла, но при этом цифра 8 будет выведена на экран, так как оператор вывода стоит до условия (в 4-й строке). Т.е. на экране будет: 0 1 2 3 5 6 7 8 - каждая цифра с новой строки.

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

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

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

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

1
2
3
4
5
6
7
8
9
var number=prompt("Введите число");
number=parseInt(number); // возвратит NaN - не число
x=isNaN(number); // возвратит true, т.к. не числовое
if (x){
	alert("Необходимо число!");
	exit; // выход из программы
}
alert("Введите второе число");// при вводе не числа оператор не выполнится
...

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

Пример: При помощи скрипта распечатать следующие пары переменная - значение в три строки:
i=0 j=2; i=1 j=3; i=2 j=4

1
2
3
4
for(i=0,j=2;i<10,j<5;i++, j++)
{
	document.write("<br>i=", i, "j=",j);
}

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

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

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

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

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

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

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


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

Показать результат:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var listType=prompt("Введите '1' - если маркированный список, '2' - если нумерованный список");
if (listType=='1')
	document.write("<ol>")
else if (listType=='2')
	document.write("<ul>")
else {
	alert("Введите правильный тип");
	exit;
	}
var kolvo=prompt("Введите количество пунктов");
kolvo=parseInt(kolvo);
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_10. Написать скрипт, который выводит теги input (элементы управления) разного типа, в зависимости от введенной цифры: 1 - текстовое поле, 2 - кнопка, 3 - radio (переключатель). Количество выведенных тегов должно тоже запрашиваться.

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

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

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

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

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

  1. В ячейки таблицы вывести таблицу умножения, используя счетчики цикла
  2. Первый ряд и первую колонку вывести с красным фоном (атрибут ячейки таблицы bgcolor)


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

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

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

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

Пример: Выводить в диалоговое окно степени двойки до 1000

Показать решение:

1
2
3
4
5
var a = 1;
while (a<1000){
	a*=2;
	alert(a);
}

На примере также посмотрим как работают операторы 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_12. Какие значения выведет следующий фрагмент кода?

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


Задание Js 3_13. Выполнить возведение х в степень y, используя цикл while

Циклические операторы языка javaScript - цикл с постусловием 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_14. Исправьте ошибку в программе, предназначенную для нахождения факториала числа:

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_15. Модифицировать программу про ввод имени пользователем: запрашивать имя пользователя до тех пор, пока пользователь действительно введет имя (т.е. поле будет заполнено и не нажата клавиша cancel)

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

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

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

1
2
3
4
for (var prop in navigator)
{
	document.write(prop + "<br>");
}

В примере переменная prop создана для "перебора" всех свойств объекта navigator.

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
alert("до");
try
{
     sdfsdf; // оператор с ошибкой
}
catch(e)
{
	alert("обработка ошибки: "+e.message);
}
finally
{
	alert("завершающие действия");
}
alert("после");

Try с англ. - "пытаться", таком образом, ставим оператор try перед фрагментом кода, который, возможно, содержит ошибку. Если ошибка действительно есть, то оператор catch (с англ. "ловить") сохраняет эту ошибку в объекте e. В дальнейшем ее можно вывести в диалоговое окно - e.message. Если ошибка все же есть, то интерпретатор после ее вывода в нашем примере перейдет на выполнение блока catch, а затем finally (с английского "завершение", "наконец"), который выполнится всегда, независимо от того была ли ошибка или нет. Даже если возникла ошибка в блоке catch.

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

Задание Js 3_16. Выполните пример, описанный выше.

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

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

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

    Операторы цикла:
    Цикл for
    Цикл while
    Цикл do...while
    Цикл for...in

    Итоговое задание Js 3_17.
    Создать игру для двоих:

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

    2. Просчитывать число попыток и выдавать результат, когда число разгадано.

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

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

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

    *
    *

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