JavaScript - Условные и логические операторы. Ветвление · Опыт программирования на javascript Логические операции над условиями

. Если введено другое значение, выведите замечание и закончите программу:
") else { alert("Введите правильный тип"); exit; }
• Инициализируйте переменную kolvo значением, введенным пользователем в модальное окно:

var kolvo=prompt("Введите количество пунктов");

• Для преобразования строкового значения в числовое используйте функцию parseInt:

for (var i=1; i<=kolvo; i++) document.write("");

• Поскольку списки закрываются соответствующими тегами, в зависимости от вида списка выведите закрывающие теги:

if (listType== "1" ) document.write ("" ) else if (listType== "2" ) document.write ("" ) ;

if (listType=="1") document.write("

") else if (listType=="2") document.write("

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

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

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

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

Для 1 - текстовое поле: Для 2 - кнопка: Для 3 - radio:

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

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

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

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

Результат:

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

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

   <td bgcolor = "red" > -</ td >

   -

Результат:

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

1. Объясните, что значит понятие «динамическое построение страницы»?
2. Какая конструкция языка чаще всего используется при динамическом построении страницы?

Циклические операторы языка 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) ; }

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

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

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

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

var x = ...; var y = ...; counter = 1; chislo=x; while (...){ chislo=x*...; counter=...; } alert(chislo);

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

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). Когда имя введено, то выводить "Привет, имя!" . document.

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

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

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

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

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

• В качестве сообщения с ошибкой будем использовать метод prompt() , написанный с ошибкой - promt() . Сообщение с ошибкой заключите в блок try:

alert("до"); try { promt("введите число"); // оператор с ошибкой }

Try с англ. - "пытаться", таким образом, ставим оператор try перед фрагментом кода, который, возможно, содержит ошибку (в нашем случае ошибка действительно есть).

• Сообщение с извещением об ошибке следует разместить в блок catch:

6 7 8 9

catch (e) { alert("обработка ошибки: " + e.message ) ; }

catch(e) { alert("обработка ошибки: "+e.message); }

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

• Завершающее сообщение, которое необходимо выводить независимо от того, есть ли в коде ошибка, поместите в блок finally:

finally { alert("завершающие действия"); } alert("после");

Если ошибка все же есть, то интерпретатор после ее вывода в нашем примере перейдет на выполнение блока catch , а затем finally (с английского "завершение", "наконец"), который выполнится всегда, независимо от того, была ли ошибка или нет. Даже если возникла ошибка в блоке catch .

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

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

Резюме:

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

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

Операторы цикла:

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

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

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

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

Условные операторы

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

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

Оператор if/else

Оператор if - это базовый управляющий оператор, позволяющий интерпретатору JavaScript принимать решения или, точнее, выполнять операторы в зависимости от условий. Оператор if имеет две формы. Первая:

if (выражение) оператор

В этой форме сначала вычисляется выражение. Если полученный результат является истинным, то оператор выполняется. Если выражение возвращает ложное значение, то оператор не выполняется. Например:

If (username == null) // Если переменная username равна null или undefined username = "Alex"; // определить ее

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

Вторая форма оператора if вводит конструкцию else, выполняемую в тех случаях, когда выражение возвращает ложное значение. Ее синтаксис:

if (выражение) оператор1 else оператор2

Эта форма выполняет оператор1, если выражение возвращает истинное значение, и оператор2, если выражение возвращает ложное значение. Например:

If (n == 1) console.log("Получено 1 новое сообщение."); else console.log("Получено " + n + " новых сообщений.");

Оператор else if

Оператор if/else вычисляет значение выражения и выполняет тот или иной фрагмент программного кода, в зависимости от результата. Но что если требуется выполнить один из многих фрагментов? Возможный способ сделать это состоит в применении оператора else if. Формально он не является самостоятельным оператором JavaScript; это лишь распространенный стиль программирования, заключающийся в применении повторяющегося оператора if/else:

If (n == 1) { // Выполнить блок 1 } else if (n == 2) { // Выполнить блок 2 } else if (n == 3) { // Выполнить блок 3 } else { // Если ни один из предыдущих операторов else не был выполнен, выполнить блок 4 }

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

Оператор switch

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

Оператор switch предназначен именно для таких ситуаций. За ключевым словом switch следует выражение в скобках и блок кода в фигурных скобках:

switch(выражение) { инструкции }

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

Когда выполняется оператор switch, он вычисляет значение выражения, а затем ищет метку case, соответствующую этому значению (соответствие определяется с помощью оператора идентичности ===). Если метка найдена, выполняется блок кода, начиная с первой инструкции, следующей за меткой case. Если метка case с соответствующим значением не найдена, выполнение начинается с первой инструкции, следующей за специальной меткой default: . Если метка default: отсутствует, блок оператора switch пропускается целиком.

Работу оператора switch сложно объяснить на словах, гораздо понятнее выглядит объяснение на примере. Следующий оператор switch эквивалентен повторяющимся операторам if/else, показанным в предыдущем примере:

Switch(n) { case 1: // Выполняется, если n === 1 // Выполнить блок 1 break; // Здесь остановиться case 2: // Выполняется, если n === 2 // Выполнить блок 2 break; // Здесь остановиться case 3: // Выполняется, если n === 3 // Выполнить блок 3 break; // Здесь остановиться default: // Если все остальное не подходит... // Выполнить блок 4 break; // Здесь остановиться }

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

В случае отсутствия операторов break оператор switch начнет выполнение блока кода с меткой case, соответствующей значению выражения, и продолжит выполнение операторов до тех пор, пока не дойдет до конца блока. В редких случаях это полезно для написания программного кода, который переходит от одной метки case к следующей, но в 99% случаев следует аккуратно завершать каждый блок case оператором break. (При использовании switch внутри функции вместо break можно использовать оператор return. Оба этих оператора служат для завершения работы оператора switch и предотвращения перехода к следующей метке case.)

Ниже приводится более практичный пример использования оператора switch, он преобразует значение в строку способом, зависящим от типа значения:

Function convert(x) { switch(typeof x) { // Преобразовать число в шестнадцатеричное целое case "number": return x.toString(16); // Вернуть строку, заключенную в кавычки case "string": return """ + x + """; // Любой другой тип преобразуется обычным способом default: return x.toString(); } } console.log(convert(1067)); // Результат "42b"

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

Оператор switch сначала вычисляет выражение после ключевого слова switch, а затем выражения case в том порядке, в котором они указаны, пока не будет найдено совпадающее значение. Факт совпадения определяется с помощью оператора идентичности ===, а не с помощью оператора равенства ==, поэтому выражения должны совпадать без какого-либо преобразования типов.

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

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

Урок №5
Операторы ветвления if в языке JavaScript

Операторы ветвления предназначены для того, чтобы программа могла запускать тот или иной блок кода, в зависимости от верности true или не верности false условия.

Операторов ветвления существует пять видов, в этом уроке мы рассмотрим два из них:
— оператор ветвления if
— оператор ветвления if else

Запускает код, если условие возвращает true .

В качестве условия, в операторах ветвления, обычно выступают операции сравнения или логические операции.

Схема оператора ветвления if , выглядит следующим образом:

If (условие) { код запустится, если условие вернёт true }

Приведём пример с оператором ветвления if:

// создадим две переменные var numOne; var numTwo; // присвоим переменным значения numOne = 5; numTwo = 3; if (numOne > numTwo) { alert("Условие возвратило true"); }

В скрипте мы создали две переменные numOne и numTwo , присвоили им числовые значения 5 и 3 .

Далее создали оператор ветвления if , который сравнивает между собой значения двух переменных. Если операция сравнения вернёт true , то запустится код расположенный между фигурными скобками. В нашем случае, появится окошко с сообщением Условие возвратило true . Если операция сравнения вернёт false , то ничего не произойдёт.

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

Оператор ветвления if else , предназначен для запуска того или иного блока кода, в зависимости от значения которое вернёт условие: true или false

Схема оператора ветвления if else , выглядит следующим образом:

If (условие) { код запустится, если условие вернёт true } else { код запустится, если условие вернёт false }

Приведём пример с оператором ветвления if else:

Var numOne; var numTwo; numOne = 5; numTwo = 3; if (numOne > numTwo) { alert("Условие возвратило true"); } else { alert("Условие возвратило false"); }

Присвойте переменной numTwo , число большее чем 5 , например 7 , тогда условие вернёт false и появится окошко с сообщением Условие возвратило false .

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

В программировании это тоже встречается очень часто. Для этого существуют два условных операторов, это if-else и switch-case . В этой статье я Вам расскажу об операторе if-else, а в следующей статье об switch-case.

Синтаксис условного оператора if-else следующий:

Если условие истина (true), то выполняется код из блока if, иначе, если условие ложь, то выполняется код из блока else.

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

Var money = 35000; // Допустим у нас есть 35 000 евро //Машину которую мы хотим купить стоит 50 000 евро. И возникает такое условие if(money > 50000){ document.write("Мы можем купить автомобиль"); }else{ document.write("Недостаточно денег для покупки машины"); }

Сохраняем документ, открываем его в браузере и видим, что на странице вывелось такое сообщение "Недостаточно денег для покупки машины". Если же у нас было бы больше 50 000 евро, то выполнился бы код из блока if. Если бы у нас было бы ровно 50 000 евро, то мы также не смогли бы купить автомобиль, потому что 50 000 не больше 50 000. Для того чтобы условие в данном случае было истина, то нужно написать знак больше либо равно (>=).

Замечание! Логическая операция равно пишется двумя знаками равенства (==) . Также присутствует и логическая операция меньше или равно (

использование фигурных скобок

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

Пример приведенный выше, будет прекрасно работать и без фигурных скобок, так как в обоих блоках находятся только по одному оператору.

Внутри if можно написать любые логические операции , будь то они простые или сложные. Можно использовать и операторы AND (&&) и OR (||).

Замечание! Присутствие блока else, не является обязательным .

Например, если a равен b, и c равен d, то выводим соответствующее сообщение, иначе если отсутствует блок else, то просто идем дальше, к следующей строчке.

Var a = 4, b = 4, c = 8, d = 8; if((a == b) && (c == d)) document.write("a равен b И c равен d"); document.write("Следующая строчка кода");

Оператор if - else if - else

После блока if, может последовать один и больше блоков else if, и в конце уже блок else. Это удобно в случае, когда нужно использовать больше чем одно условие.

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

Теперь перейдем к программированию.

Var socket = 2; // Кол-во розеток в доме if(socket == 1)  document.write("

Мы можем подключить только одно устройство

Мы можем подключить только две устройства

Например телевизор и ноутбук

Мы можем подключить к электрической сети все устройства из дома

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

Сокращенная запись if else

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

Например, если значение переменной a больше значения переменной b, то в переменную x запишем такое сообщение, "Переменная a больше переменной b" , иначе запишем что "Переменная a меньше переменной b".

Var a = 50, b = 100, x; x = (a > b) ? "

Переменная a больше переменной b

Переменная a меньше переменной b

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

Вернёмся к нашим зайцам

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

Добавим в фунцию lastBoatRabbits ветвление:

Итак, если зайцев на речке нет , последняя лодка никого не привезёт (на самом деле, она вернётся почти сразу же, т.к. дедушка точно будет знать, что зайцев на речке нет).

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

Что ещё можно было бы улучшить в этой программе? Я бы использовал отдельную переменную,
хранящую количество зайцев, помещающихся в лодке, на тот случай, если благодарные
зайцы подарят Мазаю лодку побольше. Мало ли что вдруг.

Синтаксис ветвления

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

Условия

В качестве условия в if может выступать выражение сравнения двух чисел или строк,
с использованием операций == , > , < , >= , <= , != и === , любая переменная, которой
было присвоено логическое значение и просто любое значение, которое в результате работы
if будет приведено к логическому значению.

Примеры сравнения:

Переменные в качестве условия:

Логические операции над условиями

Несколько выражений, возвращающих логическое (или приводимое к логическому) значений
можно объединить с помощью логических операций. Такими операциями называют:
логическое И && , логическое ИЛИ || и логическое отрицание! .

Логическое И возвращает true только в том случае, если с обоих сторон от него true ,
логическое ИЛИ возвращает false только в том случае, если с обоих сторон от него — false .
Отрицание возвращает false для true и, наоборот, true для false .

По правилам Javascript значения 0 , null и undefined приводятся к false .
Однако, получая результат && мы получим первое неприведённое значение, которое
приводится к false , а получая результат || — первое неприведённое значение,
которое приводится к true:

Таким образом, функцию, возвращающую количество зайцев в последней лодке можно было бы переписать так:

Задания

1. Напишите функцию fizzbuzz , которая принимает параметр number и:
   • Для чисел, кратных трём, возвращает "Fizz"
   • Для чисел, кратных пяти, возвращает "Buzz"
   • Для чисел, кратных пятнадцати (одновременно трём и пяти), возвращает "FizzBuzz"
   • В остальных случаях возвращает исходное число
2. Напишите фунцию iGoToNorth , которая принимает параметр number и определяет, подходит ли нам переданное число. Число подходит если оно больше 10, меньше 30 и кратно 7.