Условные комментарии
Из-за возможных различий в отображении браузерами одного и того же кода возникает проблема идентификации браузера и его версии, чтобы «подсунуть» ему персональный код. Браузер IE поддерживает специальную технологию определения версии под названием «условные комментарии». Синтаксис их применения следующий.
Во втором случае всё с точностью наоборот, это уже не комментарий, а специфический тег, как его воспринимают браузеры. Поэтому применение указанного синтаксиса приведёт к ошибке валидации кода. Зато IE при соблюдении условий позволяет выводить любой текст и теги.
Условие работает аналогично языкам программирования. Если оно истинно (true), то браузер выполняет HTML-код, если условие ложно (false), то код не выполняется и пропускается. В формировании условий используются ключевые слова для идентификации версии браузера (табл. 4.1).
| Значение | Браузер |
|---|---|
| IE | Любая версия IE |
| IE 6 | Internet Explorer 6.0 |
| IE 7 | Internet Explorer 7.0 |
| IE 8 | Internet Explorer 8.0 |
| IE 9 | Internet Explorer 9.0 |
Условные комментарии для изменения стиля для браузера IE7 показаны в примере 4.1.
Пример 4.1. Стиль для IE7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Для расширения возможностей условных комментариев используются логические операторы (табл. 4.2).
Начиная с IE8 номер версии, отправляемый браузером можно изменять через Средства разработчика. Если режим браузера (рис. 4.9) установить на IE7, то условный комментарий [if gt IE 7] выполняться не будет, хотя мы просматриваем сайт в IE9. Потому что отправляется номер версии 7.
Рис. 4.9. Режим браузера
Пример 4.2. Стиль для разных версий IE
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Результат примера в браузере IE9 показан на рис. 4.10.
Рис. 4.10. Полупрозрачность в браузере IE
| % | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|---|---|---|---|---|---|---|---|---|---|---|
| Шестнадцатеричное | 19 | 33 | 4D | 66 | 80 | 99 | B3 | CC | E6 | FF |
Логическое НЕ можно использовать для создания стиля, который будет доступен во всех браузерах кроме IE. Условные комментарии игнорируются этими браузерами, они воспринимают их как обычные комментарии HTML. Поэтому необходимо изменить код следующим образом.
Условные комментарии это главное средство для исправления ошибок Internet Explorer. Простой и понятный синтаксис делает ненужными всяческие хаки, заменяя их стандартной конструкцией. Стили для IE правильнее выделить в отдельный CSS-файл, который будет загружаться только при необходимости.
Урок 6: Условия
Условия используются для выполнения части скрипта, только если некоторые предопределённые требования (условия/conditions) выполняются. Например, условие может требовать, чтобы дата была после January 1, 2012, или чтобы переменная была больше 7.
Этот синтаксис, опять-таки близок нормальному языку: If\если условие соответствует, то выполняется ещё что-то. Рассмотрим простой пример:
Синтаксис: if\если условие соответствует, выполняется что-то, либо else\иначе выполняется ещё что-то.
Однако есть масса способов усложнить условие и сделать его работу более точной. Ниже перечислены операции сравнения, которые можно использовать в нашем операторе:
== равно
больше, чем
= больше или равно
!= не равно
Кроме того существуют логические операции:
&& И
|| ИЛИ
! НЕ
Эти операции можно использовать для создания более сложных условий, так что мы теперь можем расширить предыдущий пример и включить в него все весенние месяцы:
Рассмотрим расширенное условие подробнее:
Его можно расшифровать так:
Неплохо, а? Операции играют важную роль в PHP.
Но это работает только с мартом, апрелем и маем. Все другие месяцы не охватываются этим условием. Так что попытаемся усложнить условие ещё немного.
Написание условий требует методичности и логического подхода. Предыдущий пример достаточно прямолинеен, но условия могут быть весьма сложными.
Этот метод основан на выражении и перечисляет различные «ответы» или «значения» с соответствующими операторами. Проще всего объяснить работу этого метода на примере.
В следующем уроке мы рассмотрим, как добавлять комментарии в скрипты для пояснения их работы. Хорошие комментарии могут понадобиться если вы или кто-то ещё захочет в будущем внести изменения в код.
Условные операторы: (if), (?:)
Курс: Основы HTML и CSS
Курс: Разработка на C#
Курс: Python-разработчик с нуля
Осваивайте профессию, начните зарабатывать, а платите через год!
Курсы Python Акция! Бесплатно!
Станьте хакером на Python за 3 дня
Веб-вёрстка. CSS, HTML и JavaScript
Станьте веб-разработчиком с нуля
Инструкция if
Выполняемая инструкций может быть представлена одной строкой или блоком кода (группой строк в фигурных скобках), например:
Примечание: Рекомендуется всегда использовать фигурные скобки, даже если нужно выполнить всего одну строку кода. Это ясно показывает, что должно быть выполнено в каждом случае и улучшает читаемость кода.
Конструкция if. else
Следующий пример выведет соответствующее окно приветствия в зависимости от текущего времени в вашем браузере:
Инструкция else if
Инструкция else if используется в случае, если требуется выполнить один из многих фрагментов кода. Формально это не JavaScript-инструкция, а лишь распространенный стиль программирования, который заключается в применении повторяющихся инструкций if/else :
Тернарный оператор (?:)
Условный оператор (?:) – это единственный тернарный (от лат. ternarius — «тройной») оператор с тремя операндами в JavaScript. Тернарный оператор возвращает свой второй или третий операнд в зависимости от значения логического выражения, заданного первым операндом.
Читается этот код так: если а больше b, то c = a, иначе c = b.
Можно записать тоже самое через if/else:
Вложенные инструкции if/else, так же можно заменить последовательностью из тернарных операторов:
В предыдущем примере оператор && сначала проверяет выполняется ли временное условие (чему равна переменная time). Если условие выполняется, то в переменную message будет записана соответствующая строка приветствия. В противном случае, в силу побочного эффекта, связанного с неполным вычислением, оператор && выведет false и т.д. Этот метод используется не очень часто, но если вам встретится нечто подобное, то вы теперь знаете, как работают подобные инструкции.
Вам даны две переменные x и y, менять их не нужно. При помощи тернарного оператора сравните их и если x больше, чем y, то выведите фразу: «x больше, чем y», иначе выведите фразу: «x не больше, чем y».
Ответ: «x больше, чем y».
Четное или нечетное число
Пользователь вводит какое-то число (num). Используя конструкцию if..else, напишите код, который делает запрос: «Введите число».
Если посетитель вводит четное число, то выводить «»Число » + num + » четное»», если нечетное: «Число » + num + » нечетное».
Суть решения заключается в том, что проверяется остаток от деления числа на 2. Если остаток равен 0, значит число чётное, иначе – нечётное. Получить остаток от деления в можно с помощью оператора %.
Сколько цифр в числе и его знак
Напишите код, который предлагает пользователю ввести целое число. Нужно вывести на экран сколько в этом числе цифр, а также положительное оно или отрицательное. Например, «Число » + num + » однозначное положительное». Достаточно будет определить, является ли число однозначным, двухзначным или трехзначным и более.
Принадлежность точки окружности
Следует рассмотреть прямоугольный треугольник, один катет которого лежит на любой оси, а другой является перпендикуляром к этой оси из заданной точки A. В этом случае длины катетов треугольника равны значениям x и y, а гипотенуза L является отрезком, соединяющим начало координат O с точкой A. Если этот отрезок L больше радиуса круга R, то значит точка лежит вне окружности.
Длина гипотенузы находится по теореме Пифагора: L = Math.sqrt(x*x + y*y).
Определить существование треугольника по трем сторонам
У треугольника сумма любых двух сторон должна быть больше третьей. Иначе две стороны просто на третью и треугольника не получится.
Пользователь вводит поочерёдно через prompt длины трех сторон. Используя конструкцию if..else, напишите код, который должен определять, может ли существовать треугольник при таких длинах. Т. е. нужно сравнить суммы двух любых строн с оставшейся третьей стороной. Чтобы треугольник существовал, сумма всегда должна быть больше отдельной стороны.
Найти максимальное число из трех
Определить какое из трех, введенных пользователем, чисел максимальное и вывести его на экран.
Пользователь вводит поочерёдно через prompt числа. Используя конструкцию if..else, напишите код, который должен определять, какое из введенных чисел является наибольшим.
Найти сумму или произведение цифр трехзначного числа
Пользователь вводит через prompt трёхзначное число. Проверить трехзначное число на четность и найти сумму его цифр, если число четное, или произведение его цифр, если число нечетное.
Чтобы извлечь первую цифру трехзначного числа, надо его разделить на 100 и округлить воспользовавшись побитовыми операторами.
Чтобы извлечь вторую цифру трехзначного числа, можно пойти разными способами. Например, найти остаток от деления на 100, потом разделить на 10 и снова округлить.
Последняя цифра любого числа, обозначающая единицы, извлекается путем нахождения остатка от деления на 10: n % 10.
Проверить число на четность. Найти остаток от деления числа на 2. Для этого использовать оператор %. Если результат равен нулю, значит число четное. Иначе – нечетное.
Условные операторы
Управляющие структуры — это языковые конструкции, которые позволяют управлять ходом выполнения программы или сценария. Их можно разделить на две категории: на условные структуры (или структуры ветвления) и структуры повторения (или циклы).
Если необходимо, чтобы сценарий разумно реагировал на информацию, введенную пользователем, код должен быть способным принимать решения. Конструкции, которые указывают программе на необходимость принимать решение, называются условными операторами.
Операторы if
Если посетитель вообще не заказывает запчастей, вероятно, имеет смысл вывести сообщение вроде » Вы ничего не заказали на предыдущей странице! «. Это легко сделать с помощью следующего оператора if :
echo ‘ Вы ничего не заказали на предыдущей странице!
‘;
Блоки кода
echo ‘ Вы ничего не заказали на предыдущей странице! ‘ ;
Операторы else
Часто не только приходится принимать решение, должно или не должно выполняться то или иное действие, но и выбирать это действие из некоторого набора возможных действий.
echo » Вы ничего не заказали на предыдущей странице!
«;
echo » Вы ничего не заказали на предыдущей странице!
«;
Операторы elseif
Вован предоставляет скидки при заказе большого количества автопокрышек. Схема скидок выглядит следующим образом:
■ приобретение менее 10 покрышек — без скидки;
■ приобретение от 10 до 49 покрышек — скидка 5%;
■ приобретение от 50 до 99 покрышек — скидка 10%;
■ приобретение 100 и более покрышек — скидка 15%.
> elseif (($tireqty >= 10) && ($tireqty
> elseif ( ($tireqty >= 50) && ($tireqty
> elseif ($tireqty > 100) <
Операторы switch
Вован желает знать, какие формы рекламы содействуют успеху его предприятия. Для этого в форму заказа можно добавить вопрос.
Добавьте в форму приведенный ниже HTML-код, после чего она должна принять вид, показанный на рис. 1.6.
Эту новую переменную можно было бы обработать с помощью последовательности операторов if и elseif :
echo » Постоянный клиент.
echo » Клиент, обратившийся после телевизионной рекламы. «;
echo » Клиент, обратившийся по телефонному справочнику. «;
echo » Клиент, обратившийся по чьей-то устной рекомендации. «;
echo » Непонятно, как этот клиент нашел нас. «;
В качестве альтернативы можно воспользоваться оператором switch :
echo » Постоянный клиент.
echo » Клиент, обратившийся после телевизионной рекламы. «;
echo » Клиент, обратившийся по телефонному справочнику. «;
echo » Клиент, обратившийся по чьей-то устной рекомендации. «;
echo » Непонятно, как этот клиент нашел нас. «;
Сравнение разных условных операторов
Если вы не работали с операторами, описанными в предыдущих разделах, у вас вполне может возникнуть вопрос: «Какой же из них самый лучший?»
Принятие решений в вашем коде — условные конструкции
Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в JavaScript работают так называемые «условия».
| Необходимое условие: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, JavaScript first steps. |
|---|---|
| Цель: | Понять принципы использования операторов условий в JavaScript. |
Выбор одного условия.
Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых («стоит ли мне съесть одну печеньку или две?») до жизнеопределяющих («стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?»)
Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом «съесть одну печеньку» будет «все ещё буду чувствовать себя голодным», а результатом «съесть две печеньки» будет «буду чувствовать себя сытым, но мама меня поругает за то, что я съел все сладости».
Базовый if. else синтаксис выглядит как pseudocode:
Стоит заметить, что else и второй блок скобок < >не обязателен — следующий код так же будет работать:
Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок < >не контролируется условием, то этот код будет выполняться всегда. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода или другой, но не оба.
И, наконец, иногда вы можете встретить код if. else без фигурных скобок в сокращённой форме:
Это абсолютно рабочий код, но он менее читаем, лучше использовать фигурные скобки, новые строки и отступы.
Реальный пример
Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка. Родитель может сказать: «Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь». В JavaScript, мы можем представить это так:
Примечание: вы можете увидеть больше в полной версии этого примера на GitHub (также посмотреть как он работает вживую.)
else if
В предыдущем примере предоставлено два выбора, или результата — но что, если мы хотим больше, чем два?
Примечание об операторах сравнения
Примечание: Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.
И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:
Вполне нормально использовать один условный оператор if. else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:
Несмотря на то, что весь код работает вместе, каждый условный оператор if. else работает полностью отдельно от другого.
Логические операторы: И, ИЛИ и НЕ
Если вы хотите проверить несколько условий без записи вложенных if. else условий, логические операторы помогут вам. При использовании в условиях, первые два оператора делают следующее:
Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:
Давайте посмотрим на быстрый пример оператора ИЛИ:
Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:
Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.
В данном примере условие в if(. ) всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:
Оператор switch
Выражения if. else отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.
В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:
Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант default необходим.
Пример оператора switch
Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:
