Практическая работа «Метод 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>

Контрольные вопросы

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 (A² +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. Этапы решения задачи

Решая любую задачу, программист выделяет следующие основные этапы:

1. Описание переменных. Выделение исходных данных, результатов, промежуточных

результатов.

2. Построение математической модели решения задачи, последовательности действий.

3. Построение алгоритма и написание программы на языке программирования.

4. Ввод программы в среде программирования.

5. Тестирование программы с различными исходными данными, анализ результатов,

отладка программы.

Задача «Бронза». Для приготовления бронзы надо взять: 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. Контрольная работа «Линейные алгоритмы»