Создание Web-документа с включением сценария на JavaScript

Создание Web-документа с включением сценария на языке JavaScript рассмотрим на примере 3.1.

Пример 3.1 «Расчет зарплаты членов бригады»

Пусть требуется рассчитать заработок членов бригады из пяти человек (включая бригадира). Бригада заработала 10000 рублей. Доплата бригадиру 1000 рублей. При написании программы на языке JavaScript будем использовать следующие идентификаторы:

a – заработок члена бригады;

b - заработок бригадира;

S - суммарный заработок бригады;

D – доплата бригадиру.

Заработок члена бригады будем находить по формуле a= (S-1000)/5, заработок бригадира по формуле b=a+1000.

Внимание: При написании кода программы на языке JavaScript следует учитывать запись строчных и прописных символов. Например, переменные К и к различны.

Код программы на языке HTML с включением сценария на языке JavaScript может иметь вид, показанный ниже на Листинге III.3.

Рис. III.3 Код программы для расчета зарплаты

< HTML> < HEAD> < TITLE> Расчет зарплаты < /TITLE> < /HEAD> < BODY> < script> <! --//var S=10000; D=1000document.write (" Заработок члена бригады ", a=(S-1000)/5, " ", " рублей " )document.write(" Заработок бригадира", b=a+1000, " рублей" )//--> < /script> < /Body> < /HTML> Результат работы программы отображен ниже:

Заработок членов бригады 1800 рублей Заработок бригадира 2800 рублей

Задание III.7. «Расчет зарплаты членов бригады при получении суммы в рублях»

Цель задания: Научиться создавать простейший сценарий на языке

Задание: Создать Веб – документ, включающий сценарий на языке JavaScript, для расчета зарплаты членов бригады. Условия задания приведены в примере 3.1.

Выполнение:

1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Набрать программу в соответствии с Примером 3.1.

3. Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.1.

4. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя JS1.

5. Сохранить программу в своей папке с расширением.htm, присвоив файлу имя JS1.

6. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS1.htm.

Таблица 3.1 Варианты задания

Вариант	Сумма заработка S, руб.	Доплата бригадиру D, руб.

Создание Веб – документа на языке HTML с включением сценария на языке JavaScript

Создание Веб – документ на языке HTML с включением сценария на языке JavaScript рассмотрим на примере 3.2.

Пример 3.2 Расчет зарплаты членов бригады при получении суммы в у.е.

Пусть требуется рассчитать заработок членов бригады из пяти человек. Бригада за выполненную работу получила 500 у.е. Курс валюты составляет 30 рублей за 1 у.е. Доплата бригадиру 1000 рублей. При написании программы на языке JavaScript будем использовать следующие идентификаторы:

a –заработок члена бригады;

b - заработок бригадира;

S - суммарный заработок бригады в у.е.;

D – доплата бригадиру в рублях;

k – курс валюты, рублей за 1 у.е.

Заработок члена бригады будем находить по формуле a= (S*k-1000)/5, заработок бригадира по формуле b=a+1000.

Код программы на языке HTML с включением сценария на языке JavaScript может иметь вид, показанный ниже на Листинге III.4.

Листинг III.4 Код программы расчета зарплаты, сумма которой

Выплачена в у.е.

< HTML> < HEAD> < TITLE> Расчет зарплаты < /TITLE> < /HEAD> < BODY> < script> <! --//var S=500; D=1000; k=30; n=5 document.write (" Заработок членов бригады", a=(S*k-D)/n, " ", " рублей" )document.write (" Заработок бригадира", b=a+D, " рублей" )//--> < /script> < /Body> < /HTML>

Задание III.8. «Расчет зарплаты членов бригады при получении суммы в у.е.»

Цель задания: Научиться создавать сценарий на языке JavaScript

Задание: Создать Веб – документ, включающий сценарий на языке JavaScript, для расчета зарплаты членов бригады, если суммарный заработок бригады получен в у.е. Условия задания приведены в примере 3.2.

Выполнение:

1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Набрать программу в соответствии с Примером 3.2.

3. Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.2.

4. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя JS2.

5. Сохранить программу в своей папке с расширением.htm, присвоив файлу имя JS2.

6. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS2.htm.

Таблица 3.2 Варианты задания

Вариант	Число членов бригады	Сумма заработка S, у.е.	Доплата бригадиру, D, руб.	Курс, руб. за 1 у.е.
				29, 2
				29, 4
				29, 5
				29, 6
				29, 65

				28, 5

				27, 5
				27, 2

Использование функций в сценариях.

Использование функций в сценариях рассмотрим на примере 3.3.

Пример 3.3 «Расчет зарплаты членов бригады, используя

Функцию в сценарии»

Пусть требуется рассчитать заработок членов бригады. Условия из примера 3.2. Для выполнения вычислений в примере используется функция. Функции дадим имя F1.

Код программы с использованием сценария на языке JavaScript при использовании функции F1 может иметь вид, представленный ниже на Листинге III.4.

Листинг III.4 Код программы с использованием функции

< HTML> < HEAD> < TITLE> Использование функции < /TITLE> < script> <! --//function F1(S, K, D, N){var a=(S*K-D)/Nreturn a}//--> < /script> < /Head> < BODY> < script> <! --//var S1=500; K1=30; n1=5; D1=1000; var a=F1(S1, K1, D1, n1); document.write(" Заработок членов бригады", a, " рублей" )document.write(" Заработок бригадира", b=a+D1, " рублей" )//--> < /script> < /Body> < /HTML>

При описании функции использованы формальные параметры S, k, D, n. Вызов функции осуществляется при помощи обращения F1(S1, k1, D1, n1). В обращении формальные параметры S, k, D, n заменены фактическими параметрами S1, k1, D1, n1. Вычисленное значение а возвращается в программу и при помощи метода write объекта document выводится на экран монитора.

Задание III.9. «Расчет зарплаты членов бригады при получении суммы в у.е. и использовании в программе функции»

Цель задания: Научиться создавать Web – документ со сценарием на языке JavaScript с использованием функции.

Задание: Вычислить зарплату в рублях членов бригады, если суммарный заработок бригады получен в у.е. Условия задания приведены в примере 3.2. При вычислениях использовать функцию.

Выполнение:

1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Набрать программу в соответствии с Примером 3.3.

4. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя JS3.

5. Сохранить программу в своей папке с расширением.htm, присвоив файлу имя JS3.

6. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS3.htm.

Использование форм для создания интерактивных

Документов

В интерактивных документах представляется возможность удобного формализованного ввода исходных данных и формализованного вывода результатов вычислений. Для этого используются формы. Для примера 3.3 в поля форм вводятся значения суммарного заработка S в у.е., курса валюты K в рублях за 1 у.е. k, доплаты бригадиру D в рублях , число членов бригады n, включая бригадира. Результаты вычислений помещаются в соответствующие поля форм после нажатия левой клавишей мыши по кнопке Вычислить.

Действия пользователя (например, нажатие на клавишу мыши или другие действия с элементами форм HTML) вызывают событие. В коде программы перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on. После этого следует имя события. Так, событие Click, обусловленное нажатием клавиши мыши, записывается как onClick. Параметрами обработки события могут быть операторы языка JavaScript. Так можно задать вызов функции, которая должна выполняться при возникновении события. Например, onClick = “F1(фактические параметры функции)”. Для работы с формой в языке принята следующая конструкция:

< FORM name=”form1”>

Описание формы

< /FORM>

Здесь form1 это заданное пользователем имя формы.

Так, для работы с формой при помощи которой вводятся фактические параметры функции и помещаются в параметры обработки события можно записать в виде кода программы, представленной на Листинге III.5

Листинг III.5 Код программы с формой.

< FORM name=" form1" > Получили $: < input type=" text" size=5 name=" S1" > < hr> Курс (рублей. за у.е.): < input type=" text" size=5 name=" K1" > < hr> Доплата(руб): < input type=" text" size=5 name=" D1" > < hr> Числочленов: < input type=" text" size=5 name=" N1" > < hr> < input type=" button" value=ВычислитьonClick=" document.form1.res.value=F1()" > < br> Зарплата члена бригады, руб: < input type=" text" name=res size=4> < br> Зарплата бригадира, руб: < input type=" text" name= res+D1 size=4> < br> < input type=" reset" value=Обновить> < /FORM>

Пример 3.4

Ниже на Листинге III.6 приведен код программы на языке HTML с включением сценария на языке JavaScript, в котором используется форма для ввода значений и производится обработка значений из формы. Условия задачи соответствуют примеру 3.3.

Листинг III.6 Код программы с включением формы

< HTML> < HEAD> < TITLE> Использование форм для ввода и обработки событий из формы< /TITLE> < script> <! --//function F1(){var S=Number(document.form1.S1.value)var K=Number(document.form1.K1.value)var D=Number(document.form1.D1.value)var N=Number(document.form1.N1.value)var a=(S*K-D)/N; return a}//--> < /script> < /Head> < BODY> < FORM name=" form1" > Получили, $: < input type=" text" size=5 name=" S1" > < hr> Курс(рублей. за у.е.): < input type=" text" size=5 name=" K1" > < hr> Доплата(руб): < input type=" text" size=5 name=" D1" > < hr> Числочленов: < input type=" text" size=5 name=" N1" > < hr> < input type=" button" value=ВычислитьonClick=" document.form1.res.value=F1()" > < br> Зарплата члена бригады, руб: < input type=" text" name=res size=4> < br> Зарплата бригадира, руб: < input type=" text" name= res+D1 size=4> < br> < input type=" reset" value=Обновить> < /FORM> < /Body> < /HTML>

Задание III.10. «Расчет зарплаты членов бригады при получении суммы в у.е. и использовании в программе форм»

Цель задания: Научиться создавать Web – документ со сценарием на языке JavaScript с использованием форм.

Задание: Создать форму для вычисления зарплаты в рублях членов бригады, если суммарный заработок бригады получен в у.е. Условия задания приведены в примере 3.2. Ввод исходных данных осуществить при помощи форм. При вычислениях использовать функцию. Предусмотреть размещение результатов вычислений в поля формы..

Выполнение:

1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Набрать программу в соответствии с Примером 3.4.

3.. Сохранить программу в своей папке с расширением.txt, присвоив файлу имя JS4.

5. Сохранить программу в своей папке с расширением.htm, присвоив файлу имя JS3.

6. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS4.htm.

7. Ввести в поля формы исходные данные. Числовые данные принять в соответствии с вариантом, заданным преподавателем. Данные приведены в таблице 3.2.

8. Нажать кнопку Вычислить и получить результаты вычислений в полях формы.

9. Нажать кнопку Очистить и ввести новые данные, соответствующие следующему варианту данных.

10. Нажать кнопку Вычислить и получить результаты вычислений для новых исходных данных в полях формы.

11. Сохранить программу и результаты вычислений в своей папке.

Вид формы до заполнения показан на рисунке III.5

Рисунок III.5 Вид формы до заполнения

Вид формы после заполнения полей формы данными и нажатия кнопки Вычислить показан на рисунке III.6.

Рис.III.6 Вид формы после заполнения данных и нажатия на кнопку Вычислить

Задание III.11. «Самостоятельная работа»

Рассчитать зарплату каждого члена бригады и бригадира при получении зарплаты за работу в у.е. Зарплату вычислить с учетом отчислений на подоходный налог в размере 12% от полученной зарплаты для членов бригады и 15% для бригадира. Вычислить суммарные отчисления в бюджет. Исходные данные принять в соответствии со своим вариантом из таблицы 3.2.

Для вычислений требуется составить программу:

а) с использованием функции;

б) с использованием форм.

Предыдущая 1 2 3 4 5 6 789 10 11 Следующая