Если бы программирование было бы всегда линейным, то, наверное, его бы и не было. Ведь практически в любой программе присутствуют различные разветвления, которые зависят от определённых внешних или внутренних факторов. Вот такие разветвления создаются с помощью условных операторов , о которых в этой статье я Вам и расскажу.
Общий вид условного оператора в JavaScript такой:
If (условие) {
//Блок операторов
}
else {
//Блок операторов
}
Сначала идёт ключевое слово if , которое сообщает браузеру, что дальше идёт условный оператор. Внутри скобок указывается условие, которое, соответственно, возвращает true или false . Если выражение в скобках было true (истинно ), то выполняется первый блок операторов, если условие false (ложно ), то выполняется блок операторов в else . Также блок else не является обязательным, и дальше я приведу такой пример.
Давайте теперь потренируемся уже на практике. Решим такую задачу: пользователь вводит число, а мы выводим сообщание - больше оно или меньше 5 .
if (x < 5) alert ("Введённое число меньше пяти");
Разберём этот пример. Первой строкой мы вызываем функцию prompt , которая выводит окно с просьбой ввести число. Дальше пользователь вводит число, которое записывается в переменную x . А дальше идёт условие, которое я перевожу так: Если x меньше 5, то вывести сообщение: "Введённое число меньше пяти", иначе вывести сообщение "Введённое число больше пяти" . Выражение x < 5 возвращает либо true ( < 5 ) или false (x >= 5 ). Также обратите внимание, что мы не используем фигурные скобки. Почему? Потому, что мы используем всего один оператор (функцию alert() ). В принципе, мы можем их поставить, и ничего не поменяется, однако, здесь они будут лишними.
Однако, наша задача содержит существенную ошибку. Если пользователь введёт "5 ", то у нас выводится сообщение "Введённое число больше пяти ", однако, это не совсем правильно. Поэтому давайте преобразуем условие таким образом:
If (x < 5) alert ("Введённое число меньше пяти");
else
if (x == 5) alert ("Вы ввели пять");
else alert("Введённое число больше пяти");
Как видите, блок else в первом условии преобразился. В блоке else проверяется на равенство x и 5-ти. И если это так, то выводится соответствующее сообщение, в противном случае, выводится, что число больше пяти. То есть условие внутри условия - это совершенно нормально. Также обратите внимание, что я по-прежнему не поставил фигурные скобки, так как if-else это один оператор. А когда только один оператор наличие скобок необязательно.
Давайте разберём ещё один пример. Создадим переменную, которая будет true , если введённое число положительное, и false , если число отрицательное.
Var x = prompt("Введите число");
var positive = true;
if (x < 0) positive = false;
alert (positive);
В данном примере используется классический пример, когда мы берём какую-то переменную и присваиваем ей значение по умолчанию. И если это требуется, то меняем. В данном случае, мы меняем значение по умолчанию, если число отрицательное. Однако, данный пример можно было бы написать ещё красивее:
Var x = prompt("Введите число");
var positive = x < 0;
Другими словами, мы переменной positive сразу присваиваем результат сравнения x и нуля.
Теперь поговорим о так называемых сложных условиях . В примерах выше мы рассматривали лишь простые условия, однако, существуют также и другие условия, которые состоят из нескольких условий. И здесь используются две операции: && - логическое И и || - логическое ИЛИ . Давайте напишем такое условие:
If ((x <= 5) && (x >= 0)) {//блок операторов}
Данное условие (сложное условие) даст true , тогда и только тогда, когда x <= 5 И x >= 0 . В противном случае, вернётся false .
Рассмотрим сложное условие с логическим ИЛИ .
If ((x <= 5) || (x == 6)) {//блок операторов}
Перевести это можно так: если x <= 5 ИЛИ x == 6 , то вернуть true , иначе false .
Последнее, что хочется сказать, что бывают условия, которые состоят из нескольких логических И и ИЛИ , и, порой, приходится очень серьёзно напрячь голову, чтобы разобраться в таком условии.
Вот и всё, что хотелось сказать по условным операторам в JavaScript . А дальше нужна лишь практика. Увы, но без практики, Вы никогда не научитесь использовать этот оператор, без знания которого двигаться дальше просто бессмысленно. Так что придумайте какую-нибудь несложную задачу (на подобии той, что мы решили выше) и решите её.
Урок №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 .
JavaScript - Урок 7. Ветвления в программе - оператор if
Очень часто возникает ситуация, когда нам нужно выполнить какое-либо действие в зависимости от какого-либо условия. Например, у нас интернет-магазин одежды. Мы спрашиваем у пользователя кто он (мужчина или женщина) и в зависимости от ответа отображаем список соответствующих товаров (мужских или женских). При написании подобных программ используется условный оператор if . Синтаксис у него следующий:If B {S1}
else {S2}
Где B - выражение логического типа, а S1 и S2 - операторы.
Работает это так: вычисляется значение выражения B , если оно истинно, то выполняется оператор S1 , если оно ложно, то выполняется оператор S2 . Строку else {S2} можно опустить.
Думаю на примере будет понятнее. Пусть у нас есть форма, в которую пользователь вводит 3 значения. Напишем сценарий, который определит максимальное из введеных чисел.
Для начала напишем в html-странице код формы:
Javascript if
Теперь на странице script.js напишем код функции:
function maxZnach(obj){ var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; var m=a; if (b>m) m=b; if (c>m) m=c; obj.res.value=m; }
Итак, наша функция принимает три значения из формы, за максимальное (m ) мы принимаем значение a . Затем мы сравниваем: если значение b больше максимального (т.е. a ), то максимальным становится b , в противном случае максимальным остается a (т.к. выражение в скобках не является истинным). Далее аналогично сравниваем следующее значение c с максимальным. Ответ выводим в поле результата (res ).
Вообще такой сценарий можно было бы написать, используя метод max объекта Math , рассмотренного в прошлом уроке, и код получился бы короче:
function maxZnach(obj){ var a=1*obj.zn1.value; var b=1*obj.zn2.value; var c=1*obj.zn3.value; obj.res.value=Math.max(Math.max(a,b),c); }
Это я к тому, что программирование все-таки процесс творческий, и одну задачу можно решить разными способами. Задача же программиста найти наиболее оптимальный вариант. Но это так, лирическое отступление. Вернемся к условному оператору if и рассмотрим более интересный пример. Напишем сценарий, во-время работы которого, при наведении курсора мыши на изображение, оно будет увеличиваться, создавая эффект приближения.
Как вы помните в HTML можно задать размер вставляемого изображения. Если заданные размеры больше или меньше оригинала, то браузер автоматически подгонит оригинал под эти размеры. Этим мы и воспользуемся. Пусть у нас есть вот такая картинка:
Ширина оригинала 302 пиксела. Мы же хотим, чтобы на странице картинка имела ширину 102 пиксела, а при наведении курсора, увеличивалась до 302 пикселов. С html-страницей все понятно:
Javascript if
А в нашей функции, кроме условного оператора, мы воспользуемся еще стандартной функцией javascript setTimeout , которая вызывает пользовательскую функцию с заданным промежутком времени:
Function bigPict(){ var w=document.tigr.width; if (w Таким образом, функция проверяет ширину картинки (width ) и, если она меньше 302 пикселов, то увеличивает эту ширину на 10 пикселов. Функция setTimeout вызывает нашу функцию bigPict каждые полсекунды, благодаря чему размер картинки будет увеличиваться до тех пор, пока условие w не станет ложным.
Чтобы визуально сделать приближение более плавным попробуйте уменьшить шаг увеличения ширины и время обращения к функции. Поиграйтесь с этими числами и найдите наиболее оптимальные.
На сегодня все, в качестве домашнего задания допишите наш сценарий так, чтобы картинка при выходе курсора мыши принимала исходные значения (т.е. 102 пиксела). Если не получится, то скачайте
В этой статье рассмотрим условные и логические операторы языка JavaScript.
Условные операторы JavaScript
Условные операторы - это операторы языка JavaScript (ECMAScript), которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.
Формы условных операторов в JavaScript:
- условный оператор if (с одной ветвью);
- условный оператор if...else (с двумя ветвями);
- условный оператор else if... (с несколькими ветвями);
- тернарный оператор (?: );
- оператор выбора switch .
Условный оператор if
Синтаксис оператора if:
If (условие) инструкция
Условный оператор if состоит из:
- ключевого слова if ;
- условия (выражения в круглых скобках), которое должно равняться true или false (или быть приведено к одному из этих значений);
- инструкции, которую нужно выполнить , если условие является true или приведено к нему.
Например:
If (true) count = 4;
В этом примере в качестве условия используется значение true . Это означает, что инструкция count = 4 будет выполняться всегда. Данный пример просто приведен для пояснения принципа работы оператора if , т.к. он лишён всякого смысла.
Например , увеличим значение переменной votes на 1, если она (её тип) является числом:
If (typeof votes === "number") votes++;
Если необходимо выполнить несколько инструкций, то их необходимо поместить в фигурные скобки :
If (typeof votes === "number") { votes++; console.log("Число голосов: " + votes); }
If (typeof votes === "number") { votes++; }
Оператор if...else
Оператор if...else используется, когда необходимо при истинности условия выполнить одни инструкции, а при ложности - другие.
Синтаксис:
If (условие) { одно или несколько инструкций (будут выполняться, когда условие равно true или приведено к true) } else { одно или несколько инструкций (будут выполняться, когда условие равно false или приведено к false) }
Например , выведем в консоль сообщение о том, является ли число четным или нет:
If (number % 2) { console.log("Число нечётное!"); } else { console.log("Число чётное!"); }
Правило приведения условия к true или false
Если выражение в условии оператора if не равно true или false , то JavaScript приведёт его к одному из этих значений. Данное действие он выполняет с помощью так называемого "правила лжи".
Смысл данного правила: любое выражение является true, кроме следующих значений :
- false (ложь);
- "" или "" (пустая строка);
- NaN (специальный числовой тип данных «не число»);
- 0 (число «ноль»);
- null («пустое» значение);
- undefined («неопределённое» значение).
Например , выведем в консоль браузера приветственное сообщение, в зависимости от того какое значение хранится в переменной nameUser :
If (nameUser) { console.log("Привет, " + name + "!"); } else { console.log("Привет, гость!"); }
Если переменная nameUser будет содержать пустую строку , то по правилу лжи, она будет приведена к значению false . Следовательно, в консоль будет выведено сообщение «Привет, гость!» .
А если, например, переменная nameUser будет содержать строку «Тимур» , то выражение в условии будет приведено к значению true . В результате, в консоли отобразится сообщение «Привет, Тимур!» .
Оператор else if... (несколько условий)
Синтаксис:
If (условие1) { инструкции 1 } else if (условие2) { инструкции 2 } else if (условие3) { инструкции 3 //... } else if (условиеN) { инструкции N } else { инструкции, которые будут выполнены, если ни одно из условий не равно true или не приведёно к этом значению }
Условный (тернарный) оператор (?:)
Тернарный оператор – оператор JavaScript, который можно использовать, когда необходимо в зависимости от условия выполнить одно из двух заданных выражений.
Синтаксис:
Условие? выражение1: выражение2
Тернарный оператор состоит из трех операндов, которые разделяются с помощью символов? и: . Условие тернарного оператора задаётся в первом операнде. Его также можно заключить в скобки. Если условие равно true или будет приведено к этому значению будет выполнено выражение1 , иначе - выражение 2 .
Например:
(number > 10) ? console.log("Число больше 10!") : console.log("Число меньше или равно 10");
В JavaScript допустимы множественные тернарные операторы (?:):
Var dayNumber = new Date().getDay(); day = (dayNumber === 0) ? "Воскресенье" : (dayNumber === 1) ? "Понедельник" : (dayNumber === 2) ? "Вторник" : (dayNumber === 3) ? "Среда" : (dayNumber === 4) ? "Четверг" : (dayNumber === 5) ? "Пятница" : (dayNumber === 6) ? "Суббота" : "Неизвестный день недели"; console.log("Сегодня " + day.toLowerCase() + ".");
Вышеприведённый пример, но с использованием множественной записи оператора if...else:
Var dayNumber = new Date().getDay(); if (dayNumber === 0) { day = "Воскресенье"; } else if (dayNumber === 1) { day = "Понедельник"; } else if (dayNumber === 2) { day = "Вторник"; } else if (dayNumber === 3) { day = "Среда"; } else if (dayNumber === 4) { day = "Четверг"; } else if (dayNumber === 5) { day = "Пятница"; } else if (dayNumber === 6) { day = "Суббота"; } else { day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");
Оператор switch
Оператор switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая (case ).
Синтаксис оператора switch :
Switch (выражение) { case значение1: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение1» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) case значение2: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение2» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) // ... case значениеN: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значениеN» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) default: // инструкции, которые будут выполнены, если результат выражения не равен не одному из значений }
Ключевое слово default является необязательным. Оно используется, когда необходимо задать инструкции, которые нужно выполнить, если результат выражения будет не равен ни одному значению варианта (case ).
Инструкция break является необязательной. Она предназначена для прерывания выполнения оператора switch и передачи управлению инструкции, идущей после него.
Например , выведем сообщение в консоль браузера о количестве конфет:
Var countCandyBoys = 1, countCandyGirls = 2, message; switch (countCandyBoys + countCandyGirls) { case 1: message = "Одна конфета"; break; case 2: case 3: message = "Две или три конфеты"; break; case 4: message = "Четыре конфеты"; break; default: message = "Не одна, не две, не три и не четыре конфеты"; } // выведем сообщение в консоль console.log(message);
В вышеприведенном примере вычисленное выражение равно 3. Следовательно, будет выполнены инструкции message = "Две или три конфеты" и break . Инструкция break прервёт дальнейшее выполнение оператора switch и передаст управление инструкции, идущей после него, т.е. console.log(message) . Она выведет в консоль сообщение «Две или три конфеты» .
Например , выведем выведем в консоль текущий день недели:
Var day = ""; switch(new Date().getDay()) { case 0: day = "Воскресенье"; break; case 1: day = "Понедельник"; break; case 2: day = "Вторник"; break; case 3: day = "Среда"; break; case 4: day = "Четверг"; break; case 5: day = "Пятница"; break; case 6: day = "Суббота"; break; default: day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");
Пример, в котором не используется инструкция break :
Var result = "success"; switch (result) { case "success": console.log("Успех!"); case "invalidCaptcha": console.log("Неверная капча!"); default: console.log("Ошибка!"); }
В этом примере выражение оператора switch равно success . Следовательно, будет выполнена инструкция console.log("Успех!") , которая выведет сообщение «Успех!» в консоль. Но так как после неё нет инструкции break , то выполнение скрипта будет продолжено в следующем варианте. Таким образом, инструкции будут выполняться до тех пока пока на пути не встретиться break или не будет достигнут конец оператора switch . В результате выполнения этого примера в консоль будут выведены 3 сообщения: «Успех!» , «Неверная капча!» и «Ошибка!» .
В некоторых случаях может требоваться именно такое поведение, но не в этом. Здесь просто допущена ошибка.
Исправленный вариант примера:
Var result = "success"; switch (result) { case "success": console.log("Успех!"); break; case "invalidCaptcha": console.log("Неверная капча!"); break; default: console.log("Ошибка!"); }
Логические операторы
В JavaScript различают следующие логические операторы:
- && - логическое "И";
- || - логическое "ИЛИ";
- ! -логическое "НЕ".
Если в логическом выражении operand1 && operand2 используются булевы значения, то результатом этого выражения будет значение true , если каждый из них равен true ; иначе значением этого выражения будет значение false .
False && false // false true && false // false false && true // false true && true // true
Если в логическом выражении operand1 && operand2 используются не булевы значения, то результатом этого выражения будет operand1 , если его можно привести к false ; иначе результатом этого выражения будет operand2 .
5 && 0 // 0 1 && 5 // 5 "строка" && undefined // undefined "строка1" && "строка2" // "строка2"
Если в логическом выражении operand1 || operand2 используются булевы значения, то результатом этого выражения будет значение true , если хотя бы один из них равен true ; иначе значением этого выражения будет значение false .
False || false // false true || false // true false || true // true true || true // true
Если в логическом выражении operand1 || operand2 используются не булевы значения, то результатом этого выражения будет operand1 , если его можно привести к true ; иначе результатом этого выражения будет operand2 .
5 || 0 // 5 1 || 5 // 1 "строка" || undefined // "строка" "строка1" || "строка2" // "строка1"
Результатом логического выражения!operand1 будет значение true , если operand1 равно false или его можно привести к этому значению; иначе результатом этого выражения будет значение false .
False // true !true // false !"строка" // false !5 // false"
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 .
Фрагмент кода:
if (a * b < 6) { result = "Мало"; } else { result = "Много"; }
Вопросы для самоконтроля:
- Каков синтаксис тернарного оператора?
- Сколько аргументов у тернарного оператора?
Оператор переключения в javaScript - switch
Оператор switch javascript служит для проверки переменной на множество значений:
Синтаксис:
switch (переменная или выражение) { case вариант1: //..блок операторов.. break case вариант2: //..блок операторов.. break default: //..блок операторов.. }
Проверяется значение переменной или выражения: в каждом case проверяется одно из значений, в случае подходящего значения выполняется тот или иной блок операторов, соответствующий данному case .
Блок, начинающийся со служебного слова default можно опустить. Операторы блока будут выполнены в случае, если ни одно из перечисленных значений во всех case не подходит.
Важно: Оператор break обязателен после каждого рассмотренного значения переменной (после каждого case ); если его не использовать, то будут выведены все, расположенные ниже операторы
Сравним с оператором IF :
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
- Проверьте значение переменной с помощью конструкции switсh , выводя на каждое значение - соответствующий перевод:
- Для цветов "синий" и "голубой" выполните группировку:
- Организуйте вывод для тех цветов, которые не предусмотрены программой:
- Протестируйте сценарий в браузере.
| var color = prompt("Какой цвет?" ) ; |
var color = prompt("Какой цвет?");
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 |
// ... default: alert("y нас нет сведений по данному цвету") } // конец switch
Задание Js 3_6. Найдите и исправьте ошибки в следующем фрагменте кода:
| 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" ) ; } ; } |
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" ) ; } |
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 ворон
- В зависимости от введенного числа, меняется окончание у слова "ворона" .
- Для проверки использовать оператор Switch javascript.
- Сохраните данную страницу в папке результатов (она пригодится для дальнейших работ).
Вопросы для самоконтроля:
- В каком случае целесообразно в качестве условного оператора использовать конструкцию switch ?
- Для чего служит блок default в операторе switch ?
- Обязательно ли использование оператора break в конструкции switch ?
- Как осуществляется группировка для нескольких вариантов значений в операторе switch ?
Циклические операторы языка javaScript - For
Синтаксис:
for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }
Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)
- В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:
- В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1 :
- Условие цикла - это и есть конечное значение счетчика: например, i10, останавливает цикл:
for(var i = 0; условие; приращение счетчика) { //..блок операторов.. }
for(var i = 0; условие; i++) { //..блок операторов.. }
for(var i = 0; i<10; i++) { //..блок операторов.. }
Рассмотрим пример использования цикла for в javascript:
Пример 5: Вывести последовательность чисел 0 1 2 3 ... 9 , каждую цифру - с новой строки. 0 1 2 ... 8 9
✍ Решение:
- Для вывода последовательности чисел будем использовать счетчик цикла for , который должен менять свое значение от 0 до 9 согласно последовательности.
- Значит, для начального значения счетчика цикла установите значение, равное 0 ; в качестве условия цикла установите заключительное значение - ii=9; шаг счетчика должен равняться 1 (i++), так как разница между членами последовательности - единица:
- Протестируйте сценарий в браузере.
for (var i=0; i<10; i++)
{
document.write(i+"
");
}
В примере на экран выводятся значения счетчика цикла, так как приращение счетчика i++ , соответственно, на экране будут появляться 0 1 2 3 ... 9
, причем каждая цифра - с новой строки (тег
).
Задание Js 3_9. 1 до 15 .
- В качестве последовательности чисел используйте счетчик цикла for .
- Для переменной-сумматора следует использовать идентификатор переменной 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+
" " ) ; if (i== 8 ) break ; } |
for (var i=0;i<10;i++)
{
if (i==4) continue;
document.write(i+"
");
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 значением, введенным пользователем в модальное окно:
- Используя функцию parseInt преобразования строки в целое число, проверьте, является ли введенное значение числом:
- Проверьте значение переменной number с помощью функции isNaN:
- По правилу "лжи" организуйте проверку значения переменной x . Если значение не числовое выведите соответствующее замечание и завершите программу:
- Для продолжения программы (если введенное значение было числом), выведите следующее окно с предложением ввода:
- Протестируйте сценарий в браузере.
var number = prompt("Введите число");
number=parseInt(number); // возвратит NaN - не число
В случае, если введено не число, функция возвратит значение NaN (с англ. not a number - не число).
x = isNaN(number); // возвратит true, если значение не числовое
Функция isNaN возвращает значение true в случае, если переменная не является числом
if (x){ alert("Необходимо число!"); exit; // выход из программы }
alert("Введите второе число");// при вводе не числа оператор не выполнится
Вопросы для самоконтроля:
- Перечислите три параметра цикла for и поясните их назначение.
- Какие операторы предназначены для выхода из цикла и для его прерывания? Приведите примеры их использования.
- Для чего предназначен оператор 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; i<10, j<5; i++, j++) { }
Каждый из трех параметров цикла for теперь имеет по два значения, которые перечисляются через запятую (например, первый параметр с двумя значениями: i=0, j=2). Сами параметры перечисляются через точку с запятой (;).
| 1 2 3 4 | for
(i=
0
,
j=
2
;
i<
10
,
j<
5
;
i++,
j++
)
{
document.write
(" i=" , i, "j=" , j) ; } |
for(i=0, j=2; i<10, j<5; i++, j++)
{
document.write("
i=", i, "j=",j);
}
Генерация страницы "на лету": как это?
Перед выполнением следующего задания рассмотрим пример динамического построения html-страницы
при помощи javascript.
Пример 8:
- Необходимо динамически генерировать маркированные и нумерованные списки на веб-странице в зависимости от введенных пользователем данных: запрашивать у пользователя ввести вид списка (нумерованный (цифра 1 ) или маркированный (цифра 2 )), а затем количество пунктов списка .
- В зависимости от ответа выводить на экран теги либо маркированного либо нумерованного списка с необходимым количеством пунктов.
- Если введен несуществующий тип списка, то выдавать сообщение "Введите правильный тип!" и осуществлять выход из программы ().
Вспомним теги:
теги нумерованного списка:
| <ol > <li > <li > <li > </ ol > |
теги маркированного списка:
var listType=prompt("Введите "1" - если маркированный список, "2" - если нумерованный список");
- , для маркированного (цифра 2) - тег
- . Если введено другое значение, выведите замечание и закончите программу:
- Инициализируйте переменную kolvo значением, введенным пользователем в модальное окно:
- Для преобразования строкового значения в числовое используйте функцию parseInt:
- Поскольку списки закрываются соответствующими тегами, в зависимости от вида списка выведите закрывающие теги:
- ")
else {
alert("Введите правильный тип");
exit;
}
var kolvo=prompt("Введите количество пунктов");
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("
Задание Js 3_11.
Написать скрипт, который выводит теги input
(элементы управления) разного типа, в зависимости от введенной цифры:
1
- текстовое поле
,
2
- кнопка
,
3
- radio
(переключатель).
Количество выведенных тегов должно тоже запрашиваться.
Вспомним теги:
Для 1 - текстовое поле: Для 2 - кнопка: Для 3 - radio:
Пример вывода:
Задание Js 3_12. Нарисовать шахматную доску 9х9, используя циклы javascript for . "Рисовать" доску следует тегами html для таблицы:
Вспомним теги:
| <table border = "1" width = "30%" > <tr > <td > -</ td > | -</ td > </ tr > </ table > |
| - | - |
- Для рисования 9 строк необходимо организовать внешний цикл for со счетчиком i .
- Для рисования 9 ячеек в каждой строке необходимо организовать внутренний (вложенный) цикл for со счетчиком j .
- Для отрисовки тегов ячеек и строк следует использовать метод document.write .
Результат:
Дополнительно:
- В ячейки таблицы вывести таблицу умножения, используя счетчики цикла (i и j).
- Первый ряд и первую колонку вывести с красным фоном (атрибут ячейки таблицы bgcolor):
<td bgcolor = "red" > -</ td > -
Результат:
Вопросы для самоконтроля:
- Объясните, что значит понятие «динамическое построение страницы»?
- Какая конструкция языка чаще всего используется при динамическом построении страницы?
Циклические операторы языка 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) ; } |
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() .
Дополните код:
| 1 2 3 4 5 6 7 8 9 | var x = ...; var y = ...; counter = 1 ; chislo= x; while (...) { chislo= x* ...; counter= ...; } alert(chislo) ; |
var x = ...; var y = ...; counter = 1; chislo=x; while (...){ chislo=x*...; counter=...; } alert(chislo);
A Исправьте ошибку в программе, предназначенную для нахождения факториала числа:
| 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) ; |
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:
- Сообщение с извещением об ошибке следует разместить в блок catch:
- Завершающее сообщение, которое необходимо выводить независимо от того, есть ли в коде ошибка, поместите в блок finally:
alert("до"); try { promt("введите число"); // оператор с ошибкой }
Try с англ. - "пытаться", таким образом, ставим оператор try перед фрагментом кода, который, возможно, содержит ошибку (в нашем случае ошибка действительно есть).
| 6 7 8 9 | catch (e) { alert("обработка ошибки: " + e.message ) ; } |
catch(e) { alert("обработка ошибки: "+e.message); }
Если ошибка действительно есть, то оператор catch (с англ. "ловить") сохраняет эту ошибку в объекте e . В дальнейшем ее можно вывести в диалоговое окно - e.message .
finally { alert("завершающие действия"); } alert("после");
Если ошибка все же есть, то интерпретатор после ее вывода в нашем примере перейдет на выполнение блока catch , а затем finally (с английского "завершение", "наконец"), который выполнится всегда, независимо от того, была ли ошибка или нет. Даже если возникла ошибка в блоке catch .
Важно: Блок finally в конструкции необязателен.
Задание Js 3_17. Выполните пример, описанный выше, со следующими модификациями:
Резюме:
На уроке были рассмотрены следующие операторы языка javascript и конструкции:
Javascript условные операторы:
Операторы цикла:
Итоговое задание Js 3_18.
Создать игру для двоих:
- Программа просит первого игрока ввести число от 1 до 100 (второй игрок не видит введенное число). Затем второго игрока просит угадать введенное число. В ответ выводится сообщение «мало» либо «много» в зависимости от введенного ответа. Если игрок угадывает, - выводится поздравление. Если не угадывает – игра продолжается (до тех пор, когда число действительно будет угадано).
- Просчитывать число попыток и выдавать результат, когда число разгадано.
Вопросы для самоконтроля:
- В каких случаях целесообразно использовать цикл For In ? Назовите пример его использования.
- Каково назначение оператор try..catch ?
- Объясните назначение каждого блока оператора try..catch .
