1 Бурибаев Бахыт Бурибаевич

2 ВОПРОСЫ: 1. Цикл while 2. Цикл for 3. Команды break и continue 4. Программирование циклов с конца 5. Описание переменной цикла 6. Встроенные функции JavaScript 6.1. Константы 6.2. Стандартные функции 6.3. Функции пользователя

3 1. Цикл while В табл. показан общий вид цикла while и пример его использования. Общий вид while (условие) команда; Результат работы примера: Пример var i = 1; var sum = 0; while(i <= 100) { sum += i; i ++; } alert("Сумма = " + sum);

4 Цикл работает так. Сначала проверяется условие. Если оно истинно, выполняется команда (тело цикла). И эти действия повторяются, т.е. снова проверяется ус-ловие,и если оно истинно, выполняется тело цикла,и т.д. Цикл заканчивает работу, когда при оче-редной проверке условие оказывается лож-ным. Так как условие проверяется перед выполнением тела цикла, то команды, входящие в цикл, могут не выполниться ни разу.

5 2. Цикл for В табл. показан общий вид цикла for и выполнение предыдущего пример а с этой командой. Общий вид for(начало;условие ; приращение) команда; Результат работы примера: Пример var i; var sum = 0; for(i=1; i<=100; i ++) sum += i; alert ("Сумма = " + sum);

6 Результат работы приведенного примера тот же, что и предыдущего. Цикл работает так. Команда, помещаемая в начало, выполняется до циклического повторения (в примере это команда i = 1;), а сам цикл образуете следующими действиями: - проверка условия (в примере i <= 100); - выполнение тела цикла (в примере sum+= i); - выполнение команды, записанной в разделе приращение (в примере i ++).

7 Как и в команде while, тело цикла может не выполниться ни разу, если условие ложно с сам-ого начала. Не выполнится при этом и команда из разделов приращение. А вот команда из раз-дела начало выполняется всегда, независимо от условия, и выполняется ровно один раз. В заголовке цикла for любая из трех конструк-ций начало, условие, приращение может быть опущена, при этом соответствующую точку с запятой опускать нельзя. Когда опущено условие, считается, что оно имеет значение true. Таким образом, цикл превращается в бесконечный: for (;;) команда Этот цикл не остановится, если только не будет содержать внутри себя команду break.

8 3. Команды break и continue Эти команды используют в теле цикла для изменения последовательного хода выполнения команд. Команда continue заставляет браузер пропустить выполнение всех команд после нее и до конца тела цикла. Но цикл продолжается. Команда break еще радикальнее она заставляет браузер немедленно прекратить выполнение цикла.

9 Пример 1 (continue). Найти сумму 5 четных чисел, случайным образом взятых из диапазона [1,20]. var len = 5; // Количество чисел. var a = 1; // Левая граница интервала. var b = 20; // Правая граница интервала. var sum = 0; // Сумматор. var counter = 0; // Счетчик чисел. var number; // Случайное число. var str = " "; // Строка для вывода. while (counter < len) { number = Math.floor(a + (b-a+1)*Math.random()); if (number % 2) continue; sum += number; str += number; if (counter < len-1) str += " + "; else str += " = "; counter++; } str += sum; alert(str);

10 При запуске этого пример а на экран выводится сл. рисунок. Стандартная функция Math.random() генерирует случайное число из отрезка [0,1]. Стандартная функция Math.floor(num) возвращает ближайшее целое число, меньшее или равное аргументу.

11 Пример 2 (break). Целые числа случайным образом генерируются из диапазона [1,20]. Требуется сумми-ровать эти числа до тех пор, пока очередное случайное число не станет равным 10. var a = 1; // Левая граница интервала. var b = 20; // Правая граница интервала. var special = 10; // Критическое значение // случайного числа. var sum = 0; // Сумматор. var number; // Случайное число. var str = ""; // Строка для вывода. for ( ; ; ) // Бесконечный цикл. { number = Math.floor(a + (b-a+1)*Math.random( )); sum += number; str += number ; if (number == special) break; str += " + "; } str += " = " + sum; alert(str);

12 Результат работы примера может быть таким, как на верхнем рис. или таким, как на нижнем рис.

13 Пример 3. Дана функция Требуется найти значения у при изменениях аргумента х от 0 до 3 с шагом 0,5. Печатать значения х и у до тех пор, пока очередное значение х не станет равным 3. var x 0 = 0; // Начальное значение х var x k = 3; // Конечное значение х var dx = 0.5; // шаг изменения х var x=x0; // Присвоение х начального значения var y; // Объявление переменной у while (x =< xk) { y = x*x - Math.sqrt(x) +1.5; alert(" x= " + x + " y= " + y); x+=dx ; }

14 Если вывести все в одном окне,то нужно использовать вместо alert команду печати document.write

15 Результат работы этого примера с командой печати:

16 Пример 4. Дана функция Требуется ввести значения х и найти значения у var x = prompt("Введите значение х:", "1"); y = (x <= 0) ? x*x+x+1:x-Math.sqrt(x+1); alert ("x="+x+" y=" + y); Теперь попробуем изменить х от 0 до 3 с шагом 0,5 и определить значения у

17 var x0 = 0; // Начальное значение х var xk = 3; // Конечное значение х var dx = 0.5; // шаг изменения х var x = x0; // Присвоение х // начального значения var y; // Объявление у while (x =< xk) { y = x*x - Math.sqrt(x) +1.5; alert(" x= " + x + " y= " + y); x+=dx ; }

18 4. Программирование циклов с конца В сл. примере подсчитать сумму элементов массива set мож-но таким образом (нумерация элементе массива начинается с нуля; set.length – свойство массива – его длина): var sum = 0; for(var i=0; i < set.length; i++) sum += set[i]; А можно и так: var sum = 0; for(var i = set.length; -- i >= 0; ) sum += set[i]; Второй способ предпочтительнее.Сравнение с нулем обычно более эффективно, чем сравнение с другим чис-лом.Иными словами «-- i >= 0» работает быстрее, чем «i < set.length». Общее правило: в цикле со счетчиком значение счетчика должно по возможности уменьшаться до нуля.

19 В сл. примере найдено 10!= 1*2*...*10 var proizvedenie = 1; for(var i=10; i; --i) proizvedenie *= i; alert("10!=1 * 2 *...* 10 = "+proizvedenie); Результат этой программы: Заметим, что следующий вариант: var sum = 0; for(var i = set.length; (i --) >= 0; ) sum += set[i]; является ошибочным,в нем уменьшение i на единицу происходит после проверки условия, а не до, как в правильном варианте.

20 В JavaScript можно написать так: for(var i = 100; i; i --)... – или так: var i; for(i = 100; i; i --)... Для браузера эти записи эквивалентны. Вспомним, что в конструкции цикла: for(начало; условие; приращение) команда; команда начало выполняется один раз перед первым оборотом цикла. Поэтому ясно, что переменная i не определяется 100 раз описателем var. 5. Описание переменной цикла

21 Рекомендации такие: –счетчик цикла i можно описывать там же, где описываются другие переменные в начале функции или скрипта; –счетчик обязательно нужно описывать в общем месте, если он используется в нескольких циклах; –если в функции цикл единственный, то можно записывать for (var i = …,…; …) это красиво, и подчеркивает вспомогательный характер переменной i, недостойной более «солидных» описаний.

22 Если какая-то переменная digit, используется как рабочая внутри цикла и не имеет смысла вне его, то разумнее объявить ее локальной внутри этого цикла, чем объявлять ее в начале функции с комментарием «рабочая переменная цикла такого-то». Однако, в команде while для JavaScript сл. запись: while (...) { var digit = } эквивалентна такой: var digit;... while (...) {... Digit =...}

23 6. ФУНКЦИИ в JavaScript Все стандартные математические функции и часто используемые константы представлены в качестве методов математического объекта – Math и их свойств. Объект Math является встроенным объектом JavaScript. Вы ссылаетесь на константу PI как Math.PI. Константы определены в JavaScript с точностью до 15-знака после запятой. Аналогично, вы ссылаетесь на функции Math как на методы. Например, функция синуса - Math.sin(argument), где argument является аргументом функции.

Стандартные константы 1. Основание натурального логарифма - Е. Пример: Alert(Math.E) 2. Натуральный логарифм числа 10 – LN10. Пример: Alert(Math.LN10) 3. Натуральный логарифм числа 2 – LN2. Пример: Alert(Math.LN2)

25 4. Число ПИ – PI Пример: Alert(Math.PI) 5. Квадратный корень из 1/2 – SQRT1_2 Пример: Alert(Math.SQRT1_2) 6. Квадратный корень из 2 – SQRT2 Пример: Alert(Math.SQRT2)

Стандартные функции 1. Aбсолютное значение аргумента – abs(arg) Пример: var x = -25; var y y = Math.abs(x); alert(y); 2. Тригонометрические функции: sin (arg), cos(arg), tan(arg) Пример: var x = Math.PI/4; var y y = Math.sin(x); alert(y); 3. Обратные тригонометрические функции: a sin (arg), acos(arg), atan(arg) var x = 0.5; var y y = Math.asin(x); alert(y);

27 4. Экспонента и натуральный логарифм: exp(arg), log(arg) var x = 1; var y y = Math.exp(x); alert(y); 5. Ближайшее целое число, большее или равное аргументу: ceil(arg) var x = -2.69; var y y = Math.ceil(x); alert(y); 6. Ближайшее целое число, меньшее или равное аргументу: floor(arg) var x = -2.69; var y y = Math.floor(x); alert(y);

28 7. Округляет аргумент до ближайшего целого: round(x) var x = -2.69; var y = Math.round(x); alert(y); 8. Экспонента и натуральный логарифм: exp(arg), log(arg) var x = 1; var y y = Math.exp(x); alert(y); 9. Корень квадратный из аргумента: sqrt(arg) var x = 3; var y y = Math.sqrt(x); alert(y);

Максимальное или минимальное значение из двух числовых аргументов: max(arg1, arg2), min(arg1, arg2) var x = 3; var y = Math.min(x,10); alert(y); 11. Число в степени : pow(arg1, arg2) Вычисляет arg1 в степени arg2 var x = 2; var y = Math.pow(x,10); alert(y); 12. Выдает случайное число из диапазона [0,1]: random() alert(Math.random());

Функции пользователя В программировании часто бывает нужно повторять несколько раз одну и ту же группу команд. Если повторение происходит «на месте» используют цикл (while, for). Если код нужно повторять в разных местах программы его оформляют в виде функции пользователя. Описание и вызов функции. В самом деле, если уж нужно вычислить длину (количество цифр) целого положительного числа, то логичнее проделать это один раз, а затем спокойно писать, как в математике F(num), не задумываясь над «анатомией» функции f и не повторяя ее кода заново. Пусть, например, пользователь последовательно вводит три числа, а программа вычисляет общее количество цифр.

31 Пример: // Количество цифр в целом положительном числе num. // Вход: num (целое положительное число). // Выход: количество цифр в num. function F(num) { var len = num ? 0 : 1; while(num) { num = (num - num % 10) / 10; len ++; } return len; } var sum = 0; var num1, num2, num3; num1 = prompt("Введите первое число", ""); sum += F(numl) ; num2 = prompt("Введите второе число", ""); sum += F(num2) ; num3 = prompt("Введите третье число", ""); sum += F(num3) ; alert("Общее число введенных цифр: " + sum);

32 Браузер выполняет этот скрипт так. Запись: function F(num) {... } принимается во внимание, но команды в ней не выполняются. Браузер делает пометку: «было описание функции с именем F». Так происходит потому, что ключевое слово function и следующий за ним блок {...} являются не командой, а декларацией (описанием). Команды, следующие за описанием функции, выполняются как обычно. При этом каждый раз, когда в коде попадается обращение к F, браузер воз­вращается к описанию функции и выполняет ее команды, подставляя вме­сто формального аргумента num фактические переменные num1, num 2, num3.

33 На самом деле буквальной подстановки не происходит. Браузер перед вычислением функции F выполняет команду присваивания: num = num1; При обращении F(numl); num = num2; При обращении F(num2); num = num3; При обращении F(num3). В общем случае описание функции на языке JavaScript выглядит так: function Имя Функции(список формальных аргументов через запятые) {... тело функции... return значение; }

34 Команда return, возвращающая значение функции, может быть не одна, а может и вовсе отсутствовать. В последнем случае функция не возвращает никакого значения, и ее вызов нельзя использовать в выражениях. В частности, вызов функции, не возвращающей значения, не может быть использован в команде присваивания. Команда вызова функции имеет вид: Имя Функции(список фактических аргументов через запятые) Фактическим аргументом функции может быть константа, переменная, выражение или число.

35 Имя F нельзя считать хорошим для описанной выше функции. В примере это имя использовано для «смягчения» перехода от математики к программированию. Ведь в математике функции обозначаются, как правило, одной буквой. Для програм- мирования однобуквенное имя редкое исключение. По одной букве трудно догадаться о назначении функции. В нашем случае имя DlinaChisla или LenOfNumber вместо F было бы гораздо лучше.

36 Длина имен функций и переменных в JavaScript не ограничивается, но имя должно быть одним словом (без пробелов). Имя строится из латинских букв, арабских цифр, знаков подчеркивания и некоторых других (не реко­ мендуемых) специальных знаков. Русские буквы использовать нельзя. Первым символом имени должна быть латинская буква или знак подчеркивания. Регистр букв имеет значение. Например, имена « LenOfNumber » и « Lenofnumber » считаются разными.

37 Проектирование «сверху вниз» Ранее говорилось, что функция используется тогда, когда нужно повторять один и тот же код в разных местах программы. Понятно, что функция удобна и тогда, когда предполагается использовать ее в разных программах. В программировании популярны наборы библиотечных функций. Ввод и вывод данных, математические вычисления, создание окон, обработка щелчков мыши и перемещений все это требуется практически в любой прикладной программе. Ясно, что есть смысл хорошо запрограммировать эти функции один раз. Так и делают. Некоторые наиболее популярные функции становятся даже элементами систем программирования (как функции alert и prompt они закодированы в самом браузере).

38 Однако самая важная область применения функций технология построения программ, при которой сначала проектируется иерархическая схема решения поставленной задачи, а каждому иерархическому узлу сопоставляется отдельная функция. Программирование начинается с корня иерархии и постепенно продвигается к ее листьям. Такой способ проектирования называется «нисходящей технологией», или методом «сверху вниз». Он следует за особенностью человеческого мышления: мы не можем продумать проект сразу во всех тонкостях и деталях.

39

40 Задача. Написать программу, которая формирует HTML-код клетчатого поля, в котором чередуются темные и светлые клетки Решение методом «сверху вниз» Построим изображение поля при помощи HTML- таблицы. Код таблицы будем формировать как значение строковой переменной. Сначала опишем функцию, которая должна решать поставленную задачу целиком. // Функция field(row, column, bcolor, wcolor) // возвращает HTML-код таблицы, изображающей // клетчатое поле.

41 // Аргументы: //row - число строк. //column - число столбцов. //bcolor - цвет темной клетки. //wcolor - цвет светлой клетки. function field(row, column, bcolor, wcolor) { // Формируем код начала таблицы. var str = "<TABLE border = 1 cellspacing = 0 cellpadding = 10 >"; // Добавляем коды табличных строк. str += lines(row, column, bcolor, wcolor); // Добавляем код конца таблицы. str += " "; < return str; }

42 Этап 2. Подумаем о том, как должен быть устроен формирователь табличных строк. // Формирователь табличных строк. // Функция lines(row, column, bcolor, wcolor) // возвращает HTML-код всех табличных строк. // АРГУМЕНТЫ: // row - число строк. column - число столбцов. // bcolor - цвет темной клетки. // wcolor - цвет светлой клетки. function lines (row, column, bcolor, wcolor) { var str ="";// Накопитель кода. var numpair = Math.floor(row / 2); // Число пар строк. // Строим коды строк таблицы парами. for(var i = 0; i < numpair; i ++) { // Формируем код нечетной табличной строки. str += lineOddfcolumn, bcolor, wcolor); // Формируем код четной табличной строки. str += lineEven(column, bcolor, wcolor); // Строим дополнительно "нечетную" строку, если число строк нечетно. if{row%2) str += lineOdd(column, bcolor, wcolor); return str; }

43 Этап 3. Теперь можно заняться проектированием функций lineOdd и lineEven, которые строят соответственно нечетную и четную табличные строки. Функция lineOdd должна начинать строку с темной клетки, а функция lineEven co светлой. // Функция lineOdd(column, bcolor, wcolor) // возвращает HTML-код нечетной строки таблицы. // Аргументы: //column - число ячеек в строке. //bcolor - цвет темной клетки. //wcolor - цвет светлой клетки. function lineOdd(column, bcolor, wcolor) { // Формируем код начала табличной строки. var str = " "; var numpair = Math.floor(column /2); // Число пар клеток. // Формируем коды клеток парами. for(var i = 0; i < numpair; i ++) { // Строим код нечетной табличной клетки. str += cell (bcolor); // Строим код четной табличной клетки. str += cell(wcolor); } // Строим дополнительную клетку, если число клеток нечетно. if(column%2) str += cell (bcolor);

44 // Формируем код конца табличной строки. str += " "; return str; } // Функция lineEven(column, bcolor, wcolor) // возвращает HTML-код четной строки таблицы. // Аргументы: //column - число ячеек в строке. //bcolor - цвет темной клетки. //wcolor - цвет светлой клетки. function lineEven(column, bcolor, wcolor) { // Формируем код начала табличной строки. var str = " "; var numpair = Math.floor(column /2); // Число пар клеток. // Формируем коды клеток таблицы парами. for(var i = 0; i < numpair; i ++) { // Строим код нечетной табличной клетки. str += cell(wcolor); // Строим код четной табличной клетки. str += cell(bcolor); } // Строим дополнительную клетку, если число клеток нечетно. if (column % 2) str += cell(wcolor); // Формируем код конца табличной строки. str += " "; return str; }

45 Этап 4. Остается только описать функцию cell, которая строит HTML-код отдельной табличной клетки. // Функция cell(color) // возвращает HTML-код табличной клетки. // Аргументы: //color - цвет клетки function cell(color) { return " "; }

46 построение таблицы field построение строк lines построение строк lineOdd, lineEven построение клетки cell Построенная программа описывается иерархической схемой, которая соответствует этапам нисходящей разработки