Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
J a v a S c r i p t: о с н о в ы п р о г р а м м и р о в а н и я
Часть II. JavaScript: основы программирования
Основные сведения о языке
1. Базовые структуры программирования
Алгоритм – чёткое описание последовательности действий для решения поставленной задачи. Умение мыслить алгоритмически – представить сложное действие в последовательной совокупности простых действий.
Существуют следующие способы описания алгоритмов:
Ввод данных в переменные.
Вывод результатов и текста.
Простое действие (вычисление и присваивание).
Условие.
Начало (конец) алгоритма.
Программирование – вид профессиональной деятельности, задача которой – создание новых программ, системных или прикладных.
Система программирования – среда, которая позволяет создавать в памяти компьютера тексты программ, транслировать (переводить) тексты программ в машинные коды, отлаживать и исполнять программы.
Язык программирования – способ записи алгоритма (система обозначений) для выполнения его компьютером.
Языки программирования высокого уровня, например, Basic, Fortran, C, Pascal, Java, JavaScript, являются искусственными языками со строго определённым синтаксисом и семантикой. Понятия и структура языков высокого уровня удобны для восприятия человеком.
Любой язык программирования базируется на основных алгоритмических структурах:
В линейных алгоритмах действия (команды или операторы) выполняются последовательно, друг за другом: ввод данных, их последовательная обработка и вывод результатов обработки.
Ввод Команда 1 … Команда N Вывод
Условный алгоритм проверяет истинность заданного условия. Если результат логического выражения в условии равен значению True, то выполняется Блок операторов №1, иначе (False) – Блок операторов №2.
True False
Условие
Блок операторов №1 Блок операторов №2
Циклический алгоритм построен на базе условия. Блок команд, записанный в теле цикла, выполняется заданное число раз.
False
Условие
True
Тело цикла:
Блок команд
Выход из цикла
Во многих языках программирования реализована возможность задания функций-подпрограмм. Подпрограмма – это группа операторов, выполняющих определённые действия, по завершению которых возвращается некоторое значение. Для выполнения подпрограммы необходимо осуществить её вызов.
Функция-подпрограмма Средство вызова функции
для её выполнения
Тело функции
Выводы
Вы узнали о базовых понятиях программирования:
2. Назначение и возможности языка JavaScript
Назначение. Язык HTML предоставляет средства для разработки статических Web-страниц. Язык программирования JavaScript расширяет возможности HTML для создания динамических Web-страниц.
Назначение JavaScript – позволить разработчикам страниц писать небольшие скрипты (программы), которые могли бы выполняться не на сервере, а в среде броузеров. Такой язык удобен для создания приложений типа клиент–сервер в Internet. В приложениях клиента скрипты встраивают в HTML-документ и используют для обработки событий, связанных с вводом и просмотром информации. Например, приложение, собирающее данные из какой-либо формы, может проверять правильность этих данных до того, как их передавать на сервер. Это улучшает производительность работы Web-документа, так как на сервер передаются только корректные данные.
Определение. Язык программирования JavaScript является объектно-ориентированным языком, так как основан на использовании объектов.
Программа на языке JavaScript интерпретируется самим броузером Internet Explorer при загрузке документа, в который помещён её код. Интерпретатор JavaScript читает программу сверху вниз и сообщает об ошибках после каждой прочитанной строки. Интерпретатор – это переводчик операторов программы в машинные команды.
Возможности. Язык JavaScript позволяет программисту:
Встраивание скриптов. Программы на JavaScript встраивают в HTML-документ с помощью пары тегов:<script>операторы через ;</script>.
Рекомендуется размещать скрипты в тегах <head>…</head>, так как это первый тег, который читает броузер. Однако простые скрипты можно размещать в любом месте тела документа <body>…</body>.
3. Структурные элементы языка
Переменные. Переменная – это поименованная область памяти, где записываются, хранятся и изменяются значения.
Выражения и операции. В выражении записываются операции над значениями переменных. Например, в результате арифметических операций, записанных в выражении, в переменную записывается новое значение.
Операторы. Команды или ключевые слова для выполнения определённых действий в программе.
Объекты. Объект – это осязаемый или видимый предмет, который характеризуется состоянием (набор свойств), поведением (воздействие на другие объекты) и индивидуальностью (различие свойств).
Язык JavaScript включает в себя около 20 стандартных объектов.
Каждый объект имеет свой арсенал методов и свойств:
Методы объекта выполняют заданные действия над ним.
Свойства объекта – это совокупность его атрибутов (переменных, значений, других объектов).
Объекты обеспечивают доступ к элементам в HTML-документе.
События. Событие – это совершение пользователем каких-либо действий в рамках данной страницы: нажатие и перемещение кнопки мыши, нажатие клавиши. События обрабатываются интерпретатором JavaScript с помощью обработчиков событий.
Контрольные вопросы
Практическая работа «Мой первый скрипт»
8а2 в3 + 1,5aс
Вычислите формулу d = ------------------- при заданных значениях а=2 в=4 с=5
ав(2авс – а/c)
Html-код <html><head></head>
<body><h1 align=center>Арифметические вычисления</h1>
<script>
a=2; b=4; c=5; ввод данных
d=(8*a*a*b*b*b+1.5*a*c)/(a*b*(2*a*b*c-a/c)); обработка данных
document.write(d) вывод результата
</script>
</body>
</html>
Выводимая строка в методе document.write, записанная в круглых скобках, может содержать переменные, а также текст и теги HTML. В этом случае переменная конкатенируется (объединение с помощью знака +) с текстом и тегами HTML таким образом:
Задание
Практическая работа “Встраивание скриптов”
2( x2 + y) – 3(x2 - y)
Z = -------------------------- для х = 10 y = 15
5( x2 - y2 )
Отформатируйте вывод информации по следующему образцу:
При заданных числах X=10 Y=15 цвет шрифта красный, размер= 5
горизонтальная линия
Отформатируйте вывод по вашему образцу
Отформатируйте вывод по вашему образцу.
4. Переменные. Выражения и операции
Переменные. Как и в других языках программирования, в JavaScript переменная имеет два признака: имя переменной и значение переменной. Имя переменной должно начинаться с латинской буквы или символа подчёркивания (_), следующие символы могут быть латинские буквы или арабские цифры. Язык чувствителен к регистру, то есть следует различать заглавные и маленькие буквы.
Создать переменную можно двумя способами:
Оператор присваивания записывает значение в переменную.
При объявлении переменной не указывается её тип, язык JavaScript слаботипизирован. Именем переменной не может быть ключевое слово языка (названия операторов, объектов и других элементов языка).
Значениями переменных могут быть:
Ключевые слова. В языке JavaScript имеется ряд зарезервированных или ключевых слов, которые используются для описания операторов:
|
break |
for |
new |
true |
with |
|
continue |
function |
null |
typeof |
|
|
else |
if |
return |
var |
|
|
false |
in |
this |
while |
Выражения и операции. Значениями переменных могут быть арифметические и условные выражения.
Арифметические выражения содержат арифметические операции: + сложение (конкатенация для символьных строк), - вычитание, * умножение, / деление. Приоритет действий выделяют круглые скобки.
Примеры:
part1=”Java”; Year=365*24; x=”ответ равен”+42;
а). part2=”Script” ; б). Minutes=Year*60; в). z=”58”+42; part3=part1+part2;
Условные (логические) выражения проверяют истину знака сравнения в условии (==,!=,>,<,>=,<=). Если результат сравнения вырабатывает значение true, то в переменную запишется одно значение, если результат сравнения – false, то в переменную запишется другое значение.
Пример: status = (a >= 18) ? ”взрослый” : ”подросток”;
Сравнение Значение1 Значение 2
Если значение в переменную а введено >=18, то в переменную status запишется значение ”взрослый”, иначе – status = “подросток”.
5. Вывод информации методом document.write
Язык JavaScript предоставляет способ вывода информации в окно броузера с помощью метода write объекта document.
document.write(“текст”) – вывод содержимого в кавычках
document.write(z) – вывод значения переменной z
document.write(“текст”+z) – конкатенация переменной с текстом
document.write(“<h1>текст”+z+”</h1>” ) – конкатенация переменной с тегами HTML
document.write(арифметическое выражение) – вывод результата арифметического
выражения.
Используя конкатенацию с тегами форматирования объект document предоставляет пользователю доступ к элементам оформления web-страницы.
При выводе длинных выражений в методе document.write можно применять вложенные круглые скобки, например:
document.write((“<h1>текст”)+(z)+(”</h1>”));
Вложенные кавычки должны различаться по виду, например:
document.write(“<font color= ‘#red’>текст</font>”);
Метод document.writeln(список выражений) применяется для перевода курсора в начало следующей строки при просмотре документа в виде HTML.
Для установки цвета фона страницы web-документа используется свойство bgColor объекта document с указанием кода цвета, например:
document.bgColor=”# ffffff”
Контрольные вопросы
Практическая работа «Метод document.write»
Создайте скрипт в файле js2.htm, демонстрирующий варианты вывода информации методом document.write
Практическая работа «Конкатенация переменных»
1. Создайте скрипты в html-файле js2.htm для примеров теоретической темы «Выражения и операции»: а, б, в, используя заданные переменные.
2. Разделите примеры горизонтальной чертой и отформатируйте вывод результатов в броузере по следующему образцу:
а)
JavaScript – язык программирования Web Цвет шрифта – красный
Размер шрифта – 5
б)
В году: Цвет синий, размер – 5
… часов или … минут Цвет красный, размер – 6
в) Сколько ни считай Оформить по желанию
а ответ равен 42 Это меньше, чем 5842
Программирование алгоритмов линейной структуры
1. Методы объекта window для ввода-вывода информации
Объект window представляет собой окно броузера и является объектом самого верхнего уровня в иерархии объектов. Свойства объекта window можно вызывать напрямую, не указывая его имени. Объект window предоставляет следующие методы ввода-вывода информации: alert, confirm и prompt. Все данные методы выводят в окно броузера небольшую диалоговую панель и прерывают выполнение программы.
Метод alert
Выводит панель с сообщением и кнопкой «Оk». Признак alert – знак !
Формат в скрипте: alert (“Hello, World!”);
Результат в броузере:
! Hello, World!
Ok
Выполнение программы продолжается после нажатия кнопки «Оk». При этом диалоговая панель исчезает.
Метод confirm
Выводит панель с сообщением и кнопками «Оk» и «Cancel»(отмена). Признак confirm – знак ?
Формат в скрипте: b=confirm(“Хотите закончить?”);
Результат в броузере:
? Хотите закончить?
Ok Cancel
Выполнение программы продолжается после нажатия одной из кнопок. При этом диалоговая панель исчезает. После обработки функция confirm возвращает значение true, если была нажата кнопка «Оk» (b=true), и false, если была нажата «Cancel» (b=false).
Метод prompt
Выводит панель с сообщением и кнопками «Оk» и «Cancel» (отмена). Признак prompt – текстовое поле.
Формат в скрипте: b=prompt(“Введите имя”,”Иван”);
Результат в броузере:
Введите имя Ok
Иван Cancel
Первый аргумент в скобках – это сообщение на панели, второй аргумент – это образец ввода текста в текстовом поле. Второй аргумент можно задать пустым, например: b=prompt(“Введите имя”,””);
Выполнение программы продолжается после нажатия одной из кнопок. При этом диалоговая панель исчезает. После обработки функция prompt возвращает текст, набранный в поле ввода, если была нажата кнопка «Оk» (b=”Иван”), и null, если была нажата «Cancel» (b=null)
Метод prompt позволяет вводить только текстовые данные, то есть символьную строку. Для работы с числами необходимо применить функцию parseFloat, которая преобразует введённую строку в действительное число (или parseInt для преобразования в целое число).
b= parseFloat(b) или b= parseInt(b)
Пример скрипта для методов ввода-вывода объекта window
<script>
alert (“Hello, World!”); - вывод панели alert
confirm(“Хотите закончить?”); - вывод панели confirm
a=prompt(“Введите имя”,”Иван”); - вывод панели prompt и ввод строки в переменную a
document.write(a); - вывод значения на экран из переменной а
b=prompt(“Введите число”,””); - вывод панели prompt и ввод строки в переменную b
b=parseFloat(b); - преобразование строки в число в переменной b
b=b/2; - вычисление деления на 2 значения переменной b
document.write(b) - вывод значения на экран из переменной b
</script>
Контрольные вопросы
Практическая работа «Демонстрация методов window»
Создайте html-файл js3.htm с примером скрипта, демонстрирующего методы ввода и вывода объекта window, и отобразите его в броузере, проанализируйте результаты отображения.
Практическая работа «Ввод и вывод информации»
Задание 1. Метод alert
Задание 2. Метод prompt
Задание 3. Условные выражения
Считать взрослым человека, достигшего 18 лет.
Задание 4. Условные выражения
Задание 5. Вычисление арифметического выражения
2. Виды присваиваний
В программах линейной структуры вне зависимости от исходных данных выполняется одна и та же последовательность действий (операторов или блоков операторов). Действия в программе линейной структуры выполняются в порядке их написания, по очереди.
Ввод команда1 … командаN вывод
Оператором линейной структуры является оператор присваивания, который записывает значение в переменную. Например, в строке Z = Z + 5 оператор присваивания = запишет значение Z + 5 в переменную Z. Для корректности такого действия программист должен задать начальное значение переменной Z.
В языке JavaScript применяются следующие виды оператора присваивания:
Вид: Аналог:
X+=Y X=X+Y
X-=Y X=X-Y
X*=Y X=X*Y
X/=Y X=X/Y
А также применяется присваивание – инкрементация (++) и декрементация (--):
Вид: Аналог:
Х++ Х=Х+1
Х-- Х=Х-1
Присваивания: инкрементация и декрементация используются, в основном, в
циклических структурах программ, при задании счётчиков цикла.
Практическая работа “Каков результат программы?”
будут иметь переменные после выполнения операторов присваивания:
X-=5; Y*=X
будут иметь переменные после выполнения операторов присваивания:
Z+=1; K*=Z; Z+=K
3. Этапы решения задачи
Решая любую задачу, программист выделяет следующие основные этапы:
результатов.
отладка программы.
Задача «Бронза». Для приготовления бронзы надо взять: 17 частей меди, 2 части цинка и 1 часть олова. Сколько надо взять каждого металла для получения К количества бронзы?
I. Описание переменных:
На вводе (исходные данные) – К (количество бронзы);
На выводе (результаты) – М (кол. меди), Z (кол. цинка), О (кол. олова).
Образец вывода в броузере: Для получения … бронзы возьмите:
… меди
… цинка
… олова
II. Решение задачи:
III. Программа:
<script>
k=prompt(“Введите количество бронзы”,””);
k=parseFloat(k);
s=k/20;
m=s*17;
z=s*2;
document.write (“<font color=’#red’ size=5><i>Для получения ”+k+” бронзы возьмите<br>”+m+” меди<br>”+z+” цинка<br>”+s+”олова</i></font>”)
</script>
Контрольные вопросы
Выводы
4. Контрольная работа «Линейные алгоритмы»
1 Вариант
Задание 1. Подберите каждому термину левой колонки определение из правой.
1. Переменная а) Команда или ключевое слово для выполнения
определённого действия в программе.
2. Оператор б) Выполнение арифметических или условных операций перед
присваиванием значения переменной
3. Конкатенация в) Прерывание выполнения программы и ожидание действий
пользователя
4. Выражение г) Поименованная область памяти для записи, изменения и
хранения значений
5. Ввод информации д) Объединение символьных переменных знаком «+»
Задание 2. Пусть значения в переменных X и Y, соответственно, 0.3 и –0.2. Какие значения будут иметь переменные после выполнения операторов присваивания:
X+=1; Y+=X
Задание 3. Записать скрипт для вычисления среднего арифметического трёх чисел, вводимых с клавиатуры. Вывод результатов отформатировать по следующему образцу:
Среднее арифметическое чисел:
… , … , … равно … .
Задание 4. Подсчитать, сколько стоит пакет акций, если в нём имеется m акций фирмы IBM и n акций фирмы Netscape, стоимостью соответственно, 125 и 75 долларов каждая.
Вывод данных и результатов отформатировать по своему образцу.
*Задания 3 и 4 выполнить в файле kont1.htm
2 Вариант
Задание 1. Подберите каждому термину левой колонки определение из правой.
1. Переменная а) Прерывание выполнения программы и ожидание действий
пользователя
2. Оператор б) Выполнение арифметических или условных операций перед
присваиванием значения переменной
3. Конкатенация в) Поименованная область памяти для записи, изменения и
хранения значений
4. Выражение г) Команда или ключевое слово для выполнения
определённого действия в программе.
5. Ввод информации д) Объединение символьных переменных знаком «+»
Задание 2. Пусть значения переменных X и Y равны, соответственно, 0.3 и –0.2. Какие значения будут иметь переменные после выполнения операторов присваивания:
X*=2; Y+=X;
Задание 3. Записать скрипт для вычисления периметра правильного n-угольника с заданной стороной. Вывод результатов отформатировать по следующему образцу:
Периметр
правильного …угольника равен… .
Задание 4. Подсчитать, сколько очков набрала команда «Торпедо» в чемпионате по хоккею, если известно, что m встреч она выиграла, n встреч проиграла, k встреч сыграла вничью. Считается, что 2 очка – выигрыш, 1 – ничья, 0 – проигрыш.
Вывод данных и результатов отформатировать по своему образцу.
*Задания 3 и 4 выполнить в файле kont1.htm
Вспомогательный алгоритм
Элемент function
Сложные программы размещают в тегах заголовка документа <head>…</head>, используя для этого основной элемент языка – функцию (function), которая играет роль подпрограммы. Для выполнения функции необходим её вызов. Вызов функции можно осуществить с помощью какого-либо обработчика события из тела документа.
Таким образом, функция считывается в память во время загрузки документа в броузер, а выполняется после загрузки всего документа.
Задача «Имитиция светофора». Установите цвет фона окна броузера и соответствующее предупреждение методом alert для обработки сигналов светофора
Схема кода html-документа Код для задачи «Имитация светофора»
<html> <html>
<head><script> <head><script>
function Start( ) { function Start( ) {
операторы программы document.bgColor=”red”;
} alert(“Стой!”);
</script></head> document.bgColor=”yellow”;
<body onLoad=”Start( )”> alert(“Жди!”);
</body> document.bgColor=”green”;
</html> alert(“Иди!”)
}
</script></head>
<body onLoad=”Start( )”> </body></html>
Программирование разветвляющихся алгоритмов
1. Условный оператор if….
Часто в задачах требуется выбрать порядок действий в зависимости от условия. Это выполняет условный оператор, и такие программы называются программами разветвляющейся структуры.
Синтаксис
if (условие) {операторы 1} else {операторы 2}
Механизм управления
Для значения false выполняется блок {операторы 2}
Неполная форма оператора if…
Блок else является необязательным, тогда условный оператор имеет вид:
if (условие) {операторы}
Блок-схема условного алгоритма
Данные
false условие true
Операторы 2 Операторы 1
Результаты
Задача “Сравнение чисел”. Даны два числа. Если первое число больше второго, то увеличить эти числа вдвое, в противном случае разделить их на семь.
1. Блок-схема:
a, b
false a>b true
a = a/ 7 a = a*2
b = b/ 7 b = b*2
a, b
<html><head><script>
function Start() {
a=prompt(“Введи 1 число”, “”);
a=parseFloat(a);
b=prompt(“Введи 2 число”, “”);
b=parseFloat(b);
document.write(“<h2>Старые числа ”+a+” и ”+b+”</h2>”);
if (a>b) {
a=a*2;
b=b*2} else {
a=a/7;
b=b/7}
document.write(“<h2>Новые числа ”+a+” и ”+b+”</h2>”);
}
</script></head>
<body onLoad=”Start()”>
</body></html>
Контрольные вопросы
Выводы
Программы сложных структур выполняются в тегах <head>…</head> с помощью функции-подпрограммы function Имя( ) { тело функции } . В разветвляющихся структурах программирования используется условный оператор if…, который проверяет истину операции сравнения в условии. В зависимости от значения логического выражения условия в программе выполняется одна из веток: либо - true, либо - false.
Практическая работа «Программирование условий»
Задача 1. Даны два числа. Если числа не равны, то удвойте их значения, в противном случае возведите эти числа в квадрат.
Задача 2. Введите слово. Если введённое слово – «земля», то замените его на слово
«небо», в противном случае замените его на слово «мир».
Задача 3. Даны два числа. Если первое число больше или равно второго, то замените
числа нулями, в противном случае оставьте числа без изменения.
Задача 4. Вычислите выражение Y=1/X, при заданном значении X. При вводе значения 0
выведите панель alert с сообщением “Делить на 0 нельзя!”.
Задача 5. Выведите панель confirm с сообщением «Пора отдыхать?». Если нажата кнопка «Оk», то выведите панель alert с сообщением «Отдыхать – не работать!» и установите красный фон страницы. Если нажата кнопка «Cancel», то выведите текст «Работа – не волк, в лес не убежит!», при этом используйте размер и цвет шрифта.
Задача 6*. «Предметы». Выведите панель confirm с сообщением «Предмет – программирование». При нажатии кнопки «Ok» выведите фамилии учеников вашей группы в виде списка, отформатируйте текст и установите цвет фона страницы. В противном случае (при нажатии «Cancel») выведите панель alert с сообщением «Другие предметы», а затем таблицу по образцу и установите цвет фона страницы
Экономика Иванов
Экология Петров
Проверочная работа «Условный оператор»
Задание 1. Какая последовательность символов является условным оператором в
языке JavaScript?
Задание 2. Какие будут значения переменных j и k после выполнения условного
оператора:
If (j>k) {j=k+2} else {k=k+2}
если исходные значения переменных таковы:
Задание 3. Постройте блок-схему алгоритма и запишите html-файл с текстом скрипта для
следующей задачи:
Даны два числа, определите и напечатайте, какое из чисел больше, а какое меньше?
3. Простые и составные условия
Определение. Условие, содержащее в себе одно логическое выражение, называется простым. Например: (а>=1); (а==true). Составное условие содержит в себе два простых условия, которые могут объдиняться логическими операциями И и ИЛИ. Например, логическое выражение (a>0 && a<1) определяет попадание числа а в интервал (0,1), то есть 0<a<1.
Правила выполнения логических операций
Операция И – &&. Составное условное выражение равно значению true, когда оба логических выражения в нём равны true.
Операция ИЛИ – ||. Составное условное выражение равно значению true, когда хотя бы одно из логических выражений в нём равно true.
|
Логическое выражение 1 |
Логическое выражение 2 |
Результат операции && (И) |
Результат операции || (ИЛИ) |
|
True |
True |
True |
True |
|
True |
False |
False |
True |
|
False |
True |
False |
True |
|
False |
False |
False |
False |
Составные условия применяются для записи двойных неравенств.
Контрольные вопросы
Выводы
Практическая работа «Вычисление логических выражений»
Задание 1. Вычислите значения логических выражений:
Задание 2. Запишите логические выражения на JavaScript для выполнения следующих
условий:
Справочная информация «Интервалы».
Пусть X – действительное переменное. Множество всех значений X (точек), удовлетворяющих условиям:
Замкнутый интервал называют также отрезком, или замкнутым промежутком.
Множество точек (X), удовлетворяющих условиям:
A ≤ X < B, A < X ≤ B, X ≥A, X ≤ A, можно называть полуоткрытыми интервалами.
Задание 3. Вычислите значения переменных j и k после выполнения условного
оператора:
If ((j>1 || k>4) && k==0) {j=j+2} else {k=k+2}
для следующих исходных данных:
Практическая работа «Составные условия»
Задача 1. «Установка фона страницы по условию».
Введите число. Если это число равно 0 или 1, то установите красный фон страницы, в противном случае – установите зелёный фон страницы.
Задача 2. «Обработка заданного числа по условию».
Введите число b. Если введённое число удовлетворяет условию 10b50, то удвойте значение b и выведите отформатированный результат. В противном случае, выведите панель alert (“число”+b+” не в интервале (0,50)”).
Задача 3. «Обработка панели prompt по условию»
Введите число, используя панель prompt. Если нажата кнопка «Cancel», то выведите панель alert с сообщением «Загрузи программу ещё раз!». В противном случае выведите результат умножения введённого числа на 3 и 4 в таблице:
Умножение Результат
,,, х 3 ,,,
,,, х 4 ,,,
Задача 4*. «Обработка панели prompt»
При вводе пользователем с клавиатуры фамилии автора Кинг выведите список предлагаемых вашей фирмой его произведений, при вводе других данных или нажатии кнопки “Cancel” выведите панель alert с соответствующим сообщением.
4. Сложное ветвление
Применение в программе нескольких условных операторов есть сложное ветвление. Различают два типа задач: линейность независимых условий и применение вложенных операторов if….
Линейность независимых условий. Часто в задачах требуется выполнить несколько условий, которые не зависят друг от друга. Тогда, в программе операторы if… выполняются последовательно, по мере их написания.
Задача «Три числа»
Даны три целых числа. Неотрицательные числа заменить нулями, а отрицательные – удвоить.
Блок-схема: Программа:
a,b,c
<script>
false a>=0 true function Start(){
a=prompt(“введи а”,“”);
a=a*2 a=0 a=parseInt(a);
b=prompt(“введи b”,””);
b=parseInt(b);
c=prompt(“введи c”,””);
false b>=0 true c=parseInt(c);
b=b*2 b=0 if (a>=0) {a=0} else {a=a*2};
if (b>=0) {b=0} else {b=b*2};
if (c>=0) {c=0} else {c=c*2};
document.write(a+”,”+b+”,”+c)
false c>=0 true }
</script>
c=c*2 c=0
Вопросы к программе:
1.Протестируйте программу с исходными данными:
а) 5, -10, 2 б) 0, 55, -9 в) -7, -8, -9 г) 7, 8, 9
a,b, c 2. Как изменится алгоритм при перестановке условий?
Вложенные условные операторы
В программах на JavaScript разрешено применение вложенных операторов if… .
Блок-схема (общий вид)
false true
Условие1
false true false true
Условие3 Условие2
Операторы4 Операторы3 Операторы2 Операторы1
Синтаксис
if (Условие 1) {
if (Условие 2) {Опреаторы 1} else {Операторы 2} }
else {
if (условие 3) {Операторы 3} else {Операторы 4} }
5. Задача «Светофор»
Введите данные в диалоговую панель prompt: red, yellow или green. Используйте структуру вложенных условий для вывода сообщений методом alert по заданной схеме. Оформите вывод соответствующим цветом фона страницы.
Ввод red yellow green
true true true
Стой! Жди! Иди!
function Start() {
b=prompt (“Введи цвет: red, yellow или green”,””);
if (b==”red”) { alert (“Стой!”); document.bgColor=”red” }
else { if (b==”yellow”) { alert (“Жди!”); document.bgColor=”yellow” }
else {if (b==”green”) { alert (“Иди!”); document.bgColor=”green” }
}
}
}
Выводы
Практическая работа «Светофор»
Практическая работа «Вложенные if…»
Задача 1. Введите число X. Вычислите значение Y для заданных условий.
2X – 5 , если X > 5
Y = 1 – X , если 2 X 5
1/X , если X 0
0 , в остальных случаях
Задача 2. «Книжный магазин».
Напишите программу, которая работает вместо кассира в книжном магазине. При вводе цены книги и полученной суммы от покупателя программа подсказывает, сколько надо взять сдачи, либо какую сумму покупателю доплатить, либо благодарит за покупку.
Задача 3*. Введите числа X, Y, Z. Вычислите V = max ( min ( X,Y ), Z )
6. Программирование вложенных ветвлений
Задача «Книжный магазин» выполняет функции кассира. При вводе цены книги и полученной суммы от покупателя программа подсказывает, сколько надо взять сдачи, либо какую сумму покупателю доплатить, либо благодарит за покупку.
Описание переменных
A – цена книги; B – сумма, полученная с покупателя; C – разница между суммой покупателя и ценой книги.
Блок-схема
a, b
false true
a или b=null
Запусти
c = b – a программу
false true
c > 0
false true Возьмите
c < 0 сдачу (c)
Благодарю Доплатите
за покупку (с)
Код html-файла
<html><head><script>
function Start() {
var a=prompt('Какова цена книги?',"");
var b=prompt('Сколько вы платите?',"");
if (a==null || b==null) {
alert("Зачем нажал 'Отмена'?\nЗапусти программу ещё раз!");
document.write('<h1 align=center>Хулиган</h1>');
document.bgColor="braun"
} else {
document.write('<font color="green" size=6 align=center>Книжный магазин<br></font>');
c=parseInt(b)-parseInt(a);
if(c>0) {
document.write("<font color='red' size=7 align=center>Возьмите сдачу "+c+" у.е.!</font>")
} else {
if (c<0){
document.write("<font color='red' size=7 align=center>Вы не доплатили "+c+" у.е.!</font>")
} else {
document.write("<font color='red' size=7 align=center>Благодарим за покупку!</font>")
}
}
document.write('<p><font color="green" size=6>Как здорово работать кассиром! </font> </p>');
}
}
</script></head>
<body onLoad="Start()">
</body>
</html>
7. Контрольная работа «Сложное ветвление»
1 Вариант
Задача 1. Введите число G. Вычислите значение F для заданных условий.
– G , если 0 G 1
F = 1/G , если G 0
0 , в остальных случаях
Задача 2. Составьте программу, реализующую эпизод сказки.
Выполните запрос, куда предпочитает пойти герой (налево, направо или прямо), и напечатайте, что ждёт его в каждом случае.
Предусмотрите ввод незнакомого направления, а также нажатие кнопки «Cancel» в диалоговой панели prompt.
2 Вариант
Задача 1. Введите число R. Вычислите значение S для заданных условий.
0.3 + R , если 1 R < 10
S = 1/( R – 2 ) , если R 2
R , в остальных случаях
Задача 2. Составьте программу, которая спрашивала бы сокращённое имя, а
печатала полное (например, Саша – Александр) для троих ваших друзей.
Предусмотрите ввод незнакомого имени, а также нажатие кнопки «Cancel» в диалоговой панели prompt.
19
PAGE 19