Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 8 лет назад пользователемТимур Левшин
1 1 Бурибаев Бахыт Бурибаевич
2 2 ВОПРОСЫ: 1. Цикл while 2. Цикл for 3. Команды break и continue 4. Программирование циклов с конца 5. Описание переменной цикла 6. Встроенные функции JavaScript 6.1. Константы 6.2. Стандартные функции 6.3. Функции пользователя
3 3 1. Цикл while В табл. показан общий вид цикла while и пример его использования. Общий вид while (условие) команда; Результат работы примера: Пример var i = 1; var sum = 0; while(i <= 100) { sum += i; i ++; } alert("Сумма = " + sum);
4 4 Цикл работает так. Сначала проверяется условие. Если оно истинно, выполняется команда (тело цикла). И эти действия повторяются, т.е. снова проверяется ус-ловие,и если оно истинно, выполняется тело цикла,и т.д. Цикл заканчивает работу, когда при оче-редной проверке условие оказывается лож-ным. Так как условие проверяется перед выполнением тела цикла, то команды, входящие в цикл, могут не выполниться ни разу.
5 5 2. Цикл for В табл. показан общий вид цикла for и выполнение предыдущего пример а с этой командой. Общий вид for(начало;условие ; приращение) команда; Результат работы примера: Пример var i; var sum = 0; for(i=1; i<=100; i ++) sum += i; alert ("Сумма = " + sum);
6 6 Результат работы приведенного примера тот же, что и предыдущего. Цикл работает так. Команда, помещаемая в начало, выполняется до циклического повторения (в примере это команда i = 1;), а сам цикл образуете следующими действиями: - проверка условия (в примере i <= 100); - выполнение тела цикла (в примере sum+= i); - выполнение команды, записанной в разделе приращение (в примере i ++).
7 7 Как и в команде while, тело цикла может не выполниться ни разу, если условие ложно с сам-ого начала. Не выполнится при этом и команда из разделов приращение. А вот команда из раз-дела начало выполняется всегда, независимо от условия, и выполняется ровно один раз. В заголовке цикла for любая из трех конструк-ций начало, условие, приращение может быть опущена, при этом соответствующую точку с запятой опускать нельзя. Когда опущено условие, считается, что оно имеет значение true. Таким образом, цикл превращается в бесконечный: for (;;) команда Этот цикл не остановится, если только не будет содержать внутри себя команду break.
8 8 3. Команды break и continue Эти команды используют в теле цикла для изменения последовательного хода выполнения команд. Команда continue заставляет браузер пропустить выполнение всех команд после нее и до конца тела цикла. Но цикл продолжается. Команда break еще радикальнее она заставляет браузер немедленно прекратить выполнение цикла.
9 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 10 При запуске этого пример а на экран выводится сл. рисунок. Стандартная функция Math.random() генерирует случайное число из отрезка [0,1]. Стандартная функция Math.floor(num) возвращает ближайшее целое число, меньшее или равное аргументу.
11 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 12 Результат работы примера может быть таким, как на верхнем рис. или таким, как на нижнем рис.
13 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 14 Если вывести все в одном окне,то нужно использовать вместо alert команду печати document.write
15 15 Результат работы этого примера с командой печати:
16 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 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 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 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 на единицу происходит после проверки условия, а не до, как в правильном варианте. = 0; ) sum += set[i]; является ошибочным,в нем уменьшение i на единицу происходит после проверки условия, а не до, как в правильном варианте.">
20 20 В JavaScript можно написать так: for(var i = 100; i; i --)... – или так: var i; for(i = 100; i; i --)... Для браузера эти записи эквивалентны. Вспомним, что в конструкции цикла: for(начало; условие; приращение) команда; команда начало выполняется один раз перед первым оборотом цикла. Поэтому ясно, что переменная i не определяется 100 раз описателем var. 5. Описание переменной цикла
21 21 Рекомендации такие: –счетчик цикла i можно описывать там же, где описываются другие переменные в начале функции или скрипта; –счетчик обязательно нужно описывать в общем месте, если он используется в нескольких циклах; –если в функции цикл единственный, то можно записывать for (var i = …,…; …) это красиво, и подчеркивает вспомогательный характер переменной i, недостойной более «солидных» описаний.
22 22 Если какая-то переменная digit, используется как рабочая внутри цикла и не имеет смысла вне его, то разумнее объявить ее локальной внутри этого цикла, чем объявлять ее в начале функции с комментарием «рабочая переменная цикла такого-то». Однако, в команде while для JavaScript сл. запись: while (...) { var digit = } эквивалентна такой: var digit;... while (...) {... Digit =...}
23 23 6. ФУНКЦИИ в JavaScript Все стандартные математические функции и часто используемые константы представлены в качестве методов математического объекта – Math и их свойств. Объект Math является встроенным объектом JavaScript. Вы ссылаетесь на константу PI как Math.PI. Константы определены в JavaScript с точностью до 15-знака после запятой. Аналогично, вы ссылаетесь на функции Math как на методы. Например, функция синуса - Math.sin(argument), где argument является аргументом функции.
24 Стандартные константы 1. Основание натурального логарифма - Е. Пример: Alert(Math.E) 2. Натуральный логарифм числа 10 – LN10. Пример: Alert(Math.LN10) 3. Натуральный логарифм числа 2 – LN2. Пример: Alert(Math.LN2)
25 25 4. Число ПИ – PI Пример: Alert(Math.PI) 5. Квадратный корень из 1/2 – SQRT1_2 Пример: Alert(Math.SQRT1_2) 6. Квадратный корень из 2 – SQRT2 Пример: Alert(Math.SQRT2)
26 Стандартные функции 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 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 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);
29 Максимальное или минимальное значение из двух числовых аргументов: 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());
30 Функции пользователя В программировании часто бывает нужно повторять несколько раз одну и ту же группу команд. Если повторение происходит «на месте» используют цикл (while, for). Если код нужно повторять в разных местах программы его оформляют в виде функции пользователя. Описание и вызов функции. В самом деле, если уж нужно вычислить длину (количество цифр) целого положительного числа, то логичнее проделать это один раз, а затем спокойно писать, как в математике F(num), не задумываясь над «анатомией» функции f и не повторяя ее кода заново. Пусть, например, пользователь последовательно вводит три числа, а программа вычисляет общее количество цифр.
31 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 32 Браузер выполняет этот скрипт так. Запись: function F(num) {... } принимается во внимание, но команды в ней не выполняются. Браузер делает пометку: «было описание функции с именем F». Так происходит потому, что ключевое слово function и следующий за ним блок {...} являются не командой, а декларацией (описанием). Команды, следующие за описанием функции, выполняются как обычно. При этом каждый раз, когда в коде попадается обращение к F, браузер возвращается к описанию функции и выполняет ее команды, подставляя вместо формального аргумента num фактические переменные num1, num 2, num3.
33 33 На самом деле буквальной подстановки не происходит. Браузер перед вычислением функции F выполняет команду присваивания: num = num1; При обращении F(numl); num = num2; При обращении F(num2); num = num3; При обращении F(num3). В общем случае описание функции на языке JavaScript выглядит так: function Имя Функции(список формальных аргументов через запятые) {... тело функции... return значение; }
34 34 Команда return, возвращающая значение функции, может быть не одна, а может и вовсе отсутствовать. В последнем случае функция не возвращает никакого значения, и ее вызов нельзя использовать в выражениях. В частности, вызов функции, не возвращающей значения, не может быть использован в команде присваивания. Команда вызова функции имеет вид: Имя Функции(список фактических аргументов через запятые) Фактическим аргументом функции может быть константа, переменная, выражение или число.
35 35 Имя F нельзя считать хорошим для описанной выше функции. В примере это имя использовано для «смягчения» перехода от математики к программированию. Ведь в математике функции обозначаются, как правило, одной буквой. Для програм- мирования однобуквенное имя редкое исключение. По одной букве трудно догадаться о назначении функции. В нашем случае имя DlinaChisla или LenOfNumber вместо F было бы гораздо лучше.
36 36 Длина имен функций и переменных в JavaScript не ограничивается, но имя должно быть одним словом (без пробелов). Имя строится из латинских букв, арабских цифр, знаков подчеркивания и некоторых других (не реко мендуемых) специальных знаков. Русские буквы использовать нельзя. Первым символом имени должна быть латинская буква или знак подчеркивания. Регистр букв имеет значение. Например, имена « LenOfNumber » и « Lenofnumber » считаются разными.
37 37 Проектирование «сверху вниз» Ранее говорилось, что функция используется тогда, когда нужно повторять один и тот же код в разных местах программы. Понятно, что функция удобна и тогда, когда предполагается использовать ее в разных программах. В программировании популярны наборы библиотечных функций. Ввод и вывод данных, математические вычисления, создание окон, обработка щелчков мыши и перемещений все это требуется практически в любой прикладной программе. Ясно, что есть смысл хорошо запрограммировать эти функции один раз. Так и делают. Некоторые наиболее популярные функции становятся даже элементами систем программирования (как функции alert и prompt они закодированы в самом браузере).
38 38 Однако самая важная область применения функций технология построения программ, при которой сначала проектируется иерархическая схема решения поставленной задачи, а каждому иерархическому узлу сопоставляется отдельная функция. Программирование начинается с корня иерархии и постепенно продвигается к ее листьям. Такой способ проектирования называется «нисходящей технологией», или методом «сверху вниз». Он следует за особенностью человеческого мышления: мы не можем продумать проект сразу во всех тонкостях и деталях.
39 39
40 40 Задача. Написать программу, которая формирует HTML-код клетчатого поля, в котором чередуются темные и светлые клетки Решение методом «сверху вниз» Построим изображение поля при помощи HTML- таблицы. Код таблицы будем формировать как значение строковой переменной. Сначала опишем функцию, которая должна решать поставленную задачу целиком. // Функция field(row, column, bcolor, wcolor) // возвращает HTML-код таблицы, изображающей // клетчатое поле.
41 41 // Аргументы: //row - число строк. //column - число столбцов. //bcolor - цвет темной клетки. //wcolor - цвет светлой клетки. function field(row, column, bcolor, wcolor) { // Формируем код начала таблицы. var str = "