JavaScript - Урок 7. Ветвления в программе - оператор if

Очень часто возникает ситуация, когда нам нужно выполнить какое-либо действие в зависимости от какого-либо условия. Например, у нас интернет-магазин одежды. Мы спрашиваем у пользователя кто он (мужчина или женщина) и в зависимости от ответа отображаем список соответствующих товаров (мужских или женских). При написании подобных программ используется условный оператор if . Синтаксис у него следующий:

if B {S1}
else {S2}

где B - выражение логического типа, а S1 и S2 - операторы.

Работает это так: вычисляется значение выражения B, если оно истинно, то выполняется оператор S1, если оно ложно, то выполняется оператор S2. Строку else {S2} можно опустить.

Думаю на примере будет понятнее. Пусть у нас есть форма, в которую пользователь вводит 3 значения. Напишем сценарий, который определит максимальное из введеных чисел.

Для начала напишем в html-странице код формы:

< html>    < head>        < title> javascript if< /title>        < link rel=" stylesheet" type=" text/css" href=" style1.css" >        < script type=" text/javascript" src=" script.js" > < /script>    < /head>    < body>        < form name=" forma4" >            Значение 1 < input type=" text" size=" 8" maxlength=" 8" name=" zn1" >            Значение 2 < input type=" text" size=" 8" maxlength=" 8" name=" zn2" >            Значение 3 < input type=" text" size=" 8" maxlength=" 8" name=" zn3" > < br> < br>            < input type=" button" value=" Максимальное значение" onClick=" maxZnach(forma4); " >            < input type=" text" size=" 8" maxlength=" 8" name=" res" >            < input type=" reset" value=" Отменить" >        < /form>    < /body> < /html>

Теперь на странице 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).

 

Значение 1 Значение 2 Значение 3

 

 

Вообще такой сценарий можно было бы написать, используя метод 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-страницей все понятно:

< html>    < head>        < title> javascript if< /title>        < link rel=" stylesheet" type=" text/css" href=" style1.css" >        < script type=" text/javascript" src=" script.js" > < /script>    < /head>    < body>      < img src=" images/tigrenok.jpg" name=" tigr" onMouseOver=" bigPict()" >    < /body> < /html>

А в нашей функции, кроме условного оператора, мы воспользуемся еще стандартной функцией javascript setTimeout, которая вызывает пользовательскую функцию с заданным промежутком времени:

function bigPict(){ var w=document.tigr.width; if (w< 302){ document.tigr.width=w+10; document.tigr.src=" images/tigrenok.jpg" setTimeout(" bigPict()", 500) } }

Таким образом, функция проверяет ширину картинки (width) и, если она меньше 302 пикселов, то увеличивает эту ширину на 10 пикселов. Функция setTimeout вызывает нашу функцию bigPict каждые полсекунды, благодаря чему размер картинки будет увеличиваться до тех пор, пока условие w< 302 не станет ложным.

 

Чтобы визуально сделать приближение более плавным попробуйте уменьшить шаг увеличения ширины и время обращения к функции. Поиграйтесь с этими числами и найдите наиболее оптимальные.

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: