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
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>
Контрольные вопросы
1. Какие средства предоставляет объект window для ввода-вывода информации?
2. Какие действия выполняют методы ввода-вывода?
3. Каков принцип выполнения alert?
4. Каков принцип выполнения confirm?
5. Каков принцип выполнения prompt?
6. Как преобразовать символьную строку в действительное число?
Практическая работа «Демонстрация методов window»
Создайте html-файл js3.htm с примером скрипта, демонстрирующего методы ввода и вывода объекта window, и отобразите его в броузере, проанализируйте результаты отображения.
Практическая работа «Ввод и вывод информации»
Þ При выводе текста используйте установку цвета, размера и стиля шрифта.
Задание 1. Метод alert
1. Вывести диалоговую панель alert с сообщением «Вримание! Встреча!»
2. При нажатии кнопки «Оk» вывести текст «Увидимся позже!».
Задание 2. Метод prompt
1. Вывести диалоговую панель prompt с сообщением «Как вас зовут?»
2. Введите ваше имя в текстовое поле панели prompt.
3. При нажатии «Оk» отобразите ваше имя в окне броузера.
Задание 3. Условные выражения
1. Вывести диалоговую панель prompt с сообщением «Сколько вам лет?».
2. Ввести число (возраст) в текстовое поле панели prompt.
3. При нажатии «Оk» вывести текст «Так Вы – взрослый!» или «Так Вы – подросток!».
Считать взрослым человека, достигшего 18 лет.
Задание 4. Условные выражения
1. Вывести диалоговую панель prompt с сообщением «Введите дату».
2. Ввести число (год) в текстовое поле панели prompt.
3. При нажатии кнопки «Оk» вывести текст «Документ устарел» или «Документ новый». Считать устаревшим документ, созданный до 1995 года.
Задание 5. Вычисление арифметического выражения
1. Вычислить арифметическое значение B = A (A2 +1).
2. Ввод данных осуществить в диалоговом окне prompt.
3. Вывод результата произвести в окне броузера с установкой параметров цвета фона, цвета текста, размера и стиля шрифта.
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
Присваивания: инкрементация и декрементация используются, в основном, в
циклических структурах программ, при задании счётчиков цикла.
Практическая работа “Каков результат программы?”
Þ Выполните вычисления в заданных алгоритмах сами, вместо компьютера:
1. Пусть значения в переменных X и Y, соответственно, 10 и –2. Какие значения
будут иметь переменные после выполнения операторов присваивания:
X-=5; Y*=X
2. Пусть значения в переменных Z и K, соответственно, 0.7 и –0.9. Какие значения
будут иметь переменные после выполнения операторов присваивания:
Z+=1; K*=Z; Z+=K
3. Этапы решения задачи
Решая любую задачу, программист выделяет следующие основные этапы:
I. Описание переменных. Выделение исходных данных, результатов, промежуточных
результатов.
II. Построение математической модели решения задачи, последовательности действий.
III. Построение алгоритма и написание программы на языке программирования.
IV. Ввод программы в среде программирования.
V. Тестирование программы с различными исходными данными, анализ результатов,
отладка программы.
Задача «Бронза». Для приготовления бронзы надо взять: 17 частей меди, 2 части цинка и 1 часть олова. Сколько надо взять каждого металла для получения К количества бронзы?
I. Описание переменных:
На вводе (исходные данные) – К (количество бронзы);
На выводе (результаты) – М (кол. меди), Z (кол. цинка), О (кол. олова).
Образец вывода в броузере: Для получения … бронзы возьмите:
… меди
… цинка
… олова
II. Решение задачи:
1) Какое количество металлов содержится в одной части бронзы? S=K/20;
2) Какое количество меди? M=S*17;
3) Какое количество цинка? Z=S*2;
4) Какое количество олова? O=S;
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>
Контрольные вопросы
1. Определите составные части программы для задачи «Бронза»: ввод данных, обработка данных, вывод результатов.
2. Как выполняются операторы в линейных структурах программирования?
3. Какова функция оператора присваивания? Каковы виды оператора присваивания?
4. Что такое инкрементация и декрементация?
5. Назовите этапы решения задачи с помощью компьютера.
6. Что такое среда программирования? В какой среде вы создаёте программы на языке JavaScript?
Выводы
· Язык программирования JavaScript расширяет возможности HTML для создания динамических Web-страниц. JavaScript является объектно-ориентированным языком. Программы на JavaScript встраивают в HTML-документ с помощью пары тегов:<script>операторы через ;</script>. Структурные элементы языка: переменные, выражения и операции, операторы, объекты, события.
· В программах линейной структуры операторы выполняются по порядку их написания. Оператор присваивания является линейным, он записывает значение в переменную. Значением может быть число, текст, арифметическое или условное выражение, а также Булевы значения true и false. Оператор присваивания имеет вид знака =, в синтаксисе языка применяется также присваивание с одним из арифметических знаков, например X+=2 означает X=X+2. Для задания счётчиков цикла применяется операция инкрементации i++ или декрементации i--.
· Программа линейной структуры должна содержать в себе три части: ввод данных (prompt), обработка данных (вычисление и присваивание), вывод результатов на экран (document.write)
· Любую задачу программист решает в несколько этапов – описание переменных, создание математической модели решения, создание алгоритма-программы, ввод программы в среде программирования, тестирование и отладка программы.
4. Контрольная работа «Линейные алгоритмы»
Вариант
Задание 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
Вариант
Задание 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 для обработки сигналов светофора
а)
б)
В году: Цвет синий, размер – 5
… часов или … минут Цвет красный, размер – 6
в) Сколько ни считай Оформить по желанию
Метод alert
Ok
Выводит панель с сообщением и кнопками «Оk» и «Cancel»(отмена). Признак confirm – знак ?
Результат в броузере:
<script>