§03. Выбор действия по условию. Правила «хорошего тона программирования». Блок-схема алгоритма. Сравнение строк.
Выбор действия по условию.
Как и в любом другом языке программирования, в JavaScript есть возможность выбирать те или иные действия в зависимости от заранее неизвестных параметров. Для примера можно привести следующую ситуацию: т.к. интернет-страницу могут загрузить как с компьютера, так и с мобильного устройства, то сейчас всё чаще создают помимо основной версии сайта ещё версию для мобильного устройства. При загрузке страницы с помощью JavaScript узнают, на какое устройство страница загружается, и при необходимости делают принудительный переход на мобильную версию.
Выбор действия в JavaScript осуществляется с помощью конструкции, которая выглядит следующим образом:
if (условие)
действие_1
else
действие_2;
Принцип действия данной конструкции заключается в том, что если условие верно, то выполняется действие один, если условие не верно, то выполняется действие два. Действием может быть любая операция, будь то вывод в окно браузера или решение какого либо примера.
Условие – это сравнение переменной с каким либо числом. Так же можно сравнивать переменную с переменной. Пример:
Number < 0.5
Number_1 > Number_2
Помимо знаков меньше и больше, как в примере для сравнения можно использовать следующие сочетания символов:
<= //Меньше или равно
>= //Больше или равно
== //Равно
Примечание: на самом деле условие – несколько более сложный аспект программирования, чем было только что преподнесено. Тем не менее, на данном этапе вполне достаточно воспринимать условие именно в таком виде.
Далее пример, в котором переменной присваивается случайным образом подобранное значение, после чего выводится в окно браузера сообщение о том, является ли число меньше либо равно 0.5:
<script>
var Number; //Число
Number = Math.random();//Присваиваем числу случайное значение
if (Number<=0.5)
document.write('Число меньше либо равно 0.5')
else
document.write('Число больше 0.5');
</script>
Обратите внимание на слово, которое выделено красным шрифтом Math.random(). Если называть вещи своими именами, то это вызов метода random объекта Math, который возвращает случайное число в диапазоне от 0 до 1. На данном этапе предлагаю, так же как и в случае с document.write, воспринимать это как операцию, которая создаёт случайное число от 0 до 1.
Примечание: для того, что бы тестировать подобную программу, запуская её снова и снова, достаточно обновлять страницу. Делать это можно с помощью сочетания клавиш «Ctr+R».
Действие, которое выполняется по условию, может состоять не только из одной операции, как в предыдущем примере, но и из нескольких. Для этого необходимо заключить все операции в фигурные скобки. Пример:
<script>
var Number; //Число
Number = Math.random();//Присваиваем числу случайное значение
if (Number<=0.5){
document.write('Число равно ');
document.write(Number);
document.write('. Оно меньше либо равно 0.5');
}
else {
document.write('Число равно ');
document.write(Number);
document.write('. Оно больше 0.5');
}
</script>
Правила «хорошего тона программирования».
Обратите внимание на то, где именно находятся фигурные скобки, и на то, каким образом вообще оформлен код. На самом деле можно было написать и следующим образом:
var Number; //Число
Number = Math.random();//Присваиваем числу случайное значение
if (Number<=0.5){document.write('Число равно ');
document.write(Number);
document.write('. Оно меньше либо равно 0.5')}
else {document.write('Число равно ');
document.write(Number);
document.write('. Оно больше 0.5')};
Результат работы программы при таком написании останется таким же. Однако читать и понимать такой код достаточно сложно. Поэтому все программисты при написании программ используют негласные правила оформления кода. Это называется «хорошим тоном программирования».
Для данного случая правила «хорошего тона» можно сформулировать следующим образом:
слово if, условие, и открывающая фигурная скобка находятся на одной строчке;
в следующей и последующих строчках на расстоянии нескольких пробелов от левой стороны пишутся операции;
в следующей строчке после последней операции, относящейся к первому действию, ставится закрывающая фигурная скобка. Она должна находиться на том же расстоянии от левого края, что и слово if;
далее в отдельной строке пишется слово else и открывающая фигурная скобка. Слово else должно находиться под словом if;
далее пишутся в разных строчках операции, относящиеся ко второму действию. Они должны быть на таком же расстоянии от левого края, как и операции первого действия;
в строчке после последней операции ставится закрывающая фигурная скобка так же под словом else.
Эти правила направлены на то, что бы блоки кода были отделены друг от друга различным расстоянием от левого края. При их соблюдении код становится «читабельным» и понятным. Подобные правила, будут использованы в дальнейшем и для других конструкций.
Примечание: в большинстве литературы встречается именно такое оформление кода. Однако существует несколько иное правило расстановки фигурных скобок: открывающая скобка всегда должна находиться над закрывающей, а все операции должны быть их правее. В таком случае сразу видно, где блок начинается и где заканчивается. Так же есть ещё одно правило, которому рекомендуется следовать: если вы написали открывающую фигурную скобку, то сразу под ней необходимо поставить закрывающую. И только после этого можно добавлять нужное количество строк между ними. В таком случае практически не бывает ошибок с не закрытыми скобками.
Вероятней всего в данном учебнике, в примерах, может встретиться код, оформленный этим правилам. Это не является парадигмой, и свой код вы можете оформлять так, как вам будет удобнее.
Далее пример формирования кода из предыдущего примера по другим правилам:
<script>
var Number; //Число
Number = Math.random();//Присваиваем числу случайное значение
if (Number<=0.5)
{
document.write('Число равно ');
document.write(Number);
document.write('. Оно меньше либо равно 0.5');
}
else
{
document.write('Число равно ');
document.write(Number);
document.write('. Оно больше 0.5');
}
</script>
Так же стоит сказать о том, что при использовании «хорошего тона программирования» в коде появляется очень много строк и пробелов, которые не несут смысловой нагрузки. Поэтому файл с кодом становится гораздо больше, чем мог бы быть. Для того, что бы уменьшить файл, когда программа уже готова и протестирована, можно воспользоваться определённой программой, которая автоматически уберёт все не нужные строки и пробелы.
Блок-схема алгоритма.
В следующем параграфе мы будем изучать циклы. Для их лучшего понимания изучим то, каким образом можно графически изобразить последовательность действий (алгоритм работы) компьютера.
Сформулируем следующие понятия:
Алгоритм – последовательность действий.
Блок-схема алгоритма – графическое изображение последовательности действий.
Существуют некоторые стандарты, в которых расписаны правила оформления блок-схем. Кому интересно можете найти их в Интернете. Мы рассмотрим только то, что нам необходимо на данном этапе.
Блок-схема алгоритма состоит из геометрических фигур, в которых записываются определённые действия, и стрелочек обозначающих переходы. Для каждого типа действия существует своя геометрическая фигура. Далее в таблице приведены некоторые нужные нам фигуры и описание типов действий соответствующих им:
Геометрическая фигура | Название | Описание |
| Начало процесса | Обозначает место, в котором начинает работать данный алгоритм |
| Конец процесса | Обозначает место, в котором данный алгоритм завершает работу |
| Линейный процесс | Процесс, который идёт без ответвлений, т.е. одна операция за другой. |
| Условие | Деление процесса на две линии в зависимости от значения условия |
| Соединитель | Если блок-схема не входит на одну страницу, то ставится соединитель с цифрой. На следующей странице процесс продолжится на соединителе с такой же цифрой. Так же соединители при необходимости могут быть использованы на одной странице. |
| Комментарии | При необходимости могут быть вставлены комментарии с помощью данной фигуры. |
Теперь в качестве примера создадим блок-схему алгоритма работы программы из предыдущего примера:
Примечание: на данной блок-схеме словами «Да» и «Нет» обозначено направление движения программы в зависимости от того верно условие или неверно соответственно. На практике чаще встречаются слова «True» (правда, соответствует слову «Да») и «False» (ложь, соответствует слову «Нет»). Почему чаще используются именно английские слова, мы узнаем, когда будем изучать условия более подробно.
Сравнение строк.
Так же как и числа строки можно сравнивать друг с другом. Такое сравнение чаще всего используется для вывода каких либо слов по алфавиту.
Для того, что бы понимать, по какому принципу строки сравниваются, необходимо знать, каким образом они хранятся в памяти компьютера. Если не вдаваться в подробности, то можно сказать, что у каждого символа есть свой порядковый номер. Например, у символа «А» порядковый номер – 192, у символа «Б» – 193 и т.д. У символа «Я» соответственно порядковый номер – 223. Затем идут символы маленьких букв. Символ «а» имеет порядковый номер 224, символ «я» – 255.
При сравнении строк сравниваются как раз порядковые номера символов, из которых эти строки состоят. Вначале сравниваются первые символы. Если у первой строки порядковый номер первого символа больше, то и вся первая строка считается больше второй. Если первые символы одинаковы, то сравниваются вторые. И так до тех пор, пока не будут проверены все символы.
Далее пример, в котором происходит сравнение строк из одного символа:
<script>
if ('a'<'b')
document.write('a меньше b')
else
document.write('a больше либо равно b');
</script>
Расстановка строк по алфавиту.
При расстановке строк по алфавиту необходимо учитывать тот факт, что порядковые номера больше у тех символов, которые по алфавиту находятся дальше. Так же необходимо знать, что вначале идут большие, после них маленькие буквы латинского алфавита, а потом идут большие и маленькие буквы русского алфавита соответственно. Поэтому по алфавиту первым будет та строка, которая меньше. Пример:
<script>
if ('Коля'<'Толя')
document.write('Коля, Толя - по алфавиту')
else
document.write('Коля, Толя - не по алфавиту');
</script>
Задачи.
1. Создать две переменные. Присвоить им случайные значения и сравнить между собой. Значения переменных и результат сравнения вывести в окно браузера. Составить блок-схему алгоритма работы вашей программы.
2. Найти значение Y при различных значениях X:
.
Значение X получить с помощью процедуры Math.random в диапазоне от 0 до 10. Результаты вычислений вывести в окно браузера.
Примечание: для того, что бы получить X в диапазоне от 0 до 10 достаточно результат процедуры Math.random умножить на 10.
3. Создать случайное число от -1 до +1. Найти его модуль. Вывести результат в окно браузера.
4. Сравнить два слова и вывести сообщение о том, в каком порядке их надо расположить, что бы они были по алфавиту.
Примеры решений.
1.
<script>
var A;
A = Math.random();
var B;
B = Math.random();
document.write('A = ');
document.write(A);
document.write(' B = ');
document.write(B);
document.write('<br>');
if (A<B)
document.write('A меньше B')
else
document.write('A больше либо равно B');
</script>
2.
<script>
var X,Y;
X = Math.random()*10;
document.write('X = ');
document.write(X);
document.write('<br>');
if (X<5)
{
Y = 2*X+3;
document.write('X < 5<br>Y = 2 * ');
document.write(X);
document.write(' + 3 = ');
document.write(Y);
}
else
{
Y = 3*X-4;
document.write('X >= 5<br>Y = 3 * ');
document.write(X);
document.write(' - 4 = ');
document.write(Y);
}
</script>
3.
<script>
//Получаем случайное число от 0 до 1
var number;
number = Math.random();
//Получаем случайным образом + или -
var r;
r = Math.random();
if (r<0.5)
r = -1
else
r = 1;
number = r*number;
//Находим модуль
var modul;
if (number<0)
modul = -1*number
else
modul = number;
//Выводим результа
document.write('Случайное число равно ');
document.write(number);
document.write('<br>Модуль равен ');
document.write(modul);
</script>
