Web-программирование и базы данных. Учебный практикум
.pdf
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var yourname |
|
|
yourname=prompt(“Как вас зовут”,””); |
|
|
alert(yourname +»! « + «Вы удивляете своими способностями!»); |
||
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Можно использовать введенные строковые данные |
||
<! --------------------------------------------------- |
|
> |
Упражнение 1.8. Вопрос и реакции на него |
||
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показано последовательное применение методов Prompt() и Alert(). Это позволит обеспечить в программе вопрос и реакцию на него.
21
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var yourname, something; |
|
|
yourname=prompt(“Как вас зовут”,””); |
|
|
something=prompt(«Впечатайте что-нибудь другое»,»»); |
||
alert(yourname + “ “ + something); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Пример вывода двух введенных строк |
> |
|
<! --------------------------------------------------- |
|
|
Упражнение 1.9. Два вопроса и реакция на них |
||
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показано последовательное применение двух методов Рrompt() и одного метода Аlert(). Это позволит обеспечить в программе два вопроса и реакцию на них.
22
Упражнение 1.10. Работа с числовыми переменными
<!-- |
ЗАДАНИЕ: --> |
|
<!-- |
Попробуйте работу программы |
--> |
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var s1, s2, s3 |
|
|
s1=2 |
|
|
s2=3 |
|
|
s3=s1+s2 |
|
|
alert(«первое число « + s1); |
|
|
alert(«второе число « + s2); |
|
|
alert(«результат сложения = « + s3 ); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<! --------------------------------------------------- |
|
> |
Кроме строковых данных и переменных существуют также |
||
числовые.<br> |
|
|
При выводе методом alert() числа автоматически превращаются в |
||
строки |
|
|
<! --------------------------------------------------- |
|
> |
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показана работа с числовыми переменными. Результаты вычислений выводятся методом Аlert(). Описание переменных с помощью var не обязательно.
23
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var a, b, c; |
|
|
a=prompt(«Введите первое число»,»»); |
||
a=Number(a) |
|
|
b=prompt(“Введите второе число”,””); |
|
|
b=Number(b) |
|
|
c=a+b; |
|
|
alert(“Сумма= “ + c ); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Числовые данные могут быть введены.<br> |
||
Если предполагаются вычисления, то сначала полученная текстовая |
||
информация должна быть преобразована в числовой вид функцией |
||
Number() <br> |
|
|
<br> |
|
|
АРИФМЕТИЧЕСКИЕ ОПЕРАЦИИ:<br> |
||
Сложение (+)<br> |
|
|
Вычитание (-)<br> |
|
|
Умножение (*)<br> |
|
|
Деление (/)<br> |
|
|
Остаток от деления (%)<br> |
> |
|
<! --------------------------------------------------- |
|
|
Упражнение 1.11. Ввод числовых переменных и работа |
||
с ними |
|
|
<P>
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
В этом упражнении показана работа с числовыми переменными. Исходные числа вводятся методом Рrompt () в виде текстовых строк. Далее текстовые строки превращаются в числа с помощью функции Number(). Производятся вычисления, и результат выводится с помощью методаAlert().
24
Упражнение 1.12. Условный оператор if
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var r |
|
|
r=confirm(“Вопрос? Если да, то нажмите ОК. Если нет, то нажмите |
||
Отмена»); |
|
|
if (r) { |
|
|
} |
alert(«Реакция на OK (да)»); |
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Оператор if<br> |
|
|
примечание; вместо if (r) ... можно написать if (r==true) ... |
||
<! --------------------------------------------------- |
|
> |
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показано, как реализовать действие для положительного ответа при использования метода Рonfirm().
25
Упражнение 1.13. Условный оператор if с использованием else
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var r |
|
|
r=confirm(“Вопрос? Если да, то нажмите ОК. Если нет, то нажмите |
||
Отмена»); |
|
|
if (r) { |
|
|
alert(«Реакция на OK (да)»); |
|
|
} else { |
|
|
alert(«Реакция на Отмена (нет)»); |
|
|
} |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Оператор if c else |
> |
|
<! --------------------------------------------------- |
|
|
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показано, как реализовать действия для положительного и отрицательного ответов при использовании метода Сonfirm().
26
Упражнение 1.14. Работа с массивом данных
--<! |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var i, b, c; |
|
|
var days_of_week= newArray(7); |
|
|
days_of_week[0]=”Понедельник” |
|
|
days_of_week[1]=”Вторник” |
|
|
days_of_week[2]=”Среда” |
|
|
days_of_week[3]=”Четверг” |
|
|
days_of_week[4]=”Пятница” |
|
|
days_of_week[5]=”Суббота” |
|
|
days_of_week[6]=»Воскресенье» |
|
|
i=prompt(«Введите номер дня недели (начиная с 1)»,»»); |
||
i=Number(i) |
|
|
i=i-1 |
|
|
alert(“Ответ: “ + days_of_week[i]); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
удобно работать с массивами |
> |
|
<! --------------------------------------------------- |
|
|
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
|
||
В этом упражнении показано описание массива и присвое- |
||
ние его элементов значений. |
|
|
27
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var i, b, c; |
|
|
var days_of_week= new Array(«Понедельник»,»Вторник»,»Среда»,»Чет |
||
верг»,»Пятница»,»Суббота»,»Воскресенье»); |
||
i=prompt(«Введите номер дня недели (начиная с 1)»,»»); |
||
i=Number(i) |
|
|
i=i-1 |
|
|
alert(“Ответ: “ + days_of_week[i]); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
У массива можно ввести начальные данные при его описании |
||
<! --------------------------------------------------- |
|
> |
<P> |
|
|
Упражнение 1.15. Вывод названия дня недели по номеру |
||
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показано, как по номеру извлекать информацию из массива. Необходимо помнить, что в массиве индексация идет с нуля.
28
--<! |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var i, b, c; |
|
|
var days_of_week= new Array(«Понедельник»,»Вторник»,»Среда»,»Чет |
||
верг»,»Пятница»,»Суббота»,»Воскресенье»); |
||
alert(days_of_week); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Вывод всех элементов массива |
> |
|
<! --------------------------------------------------- |
|
|
Упражнение 1.16. Вывод всех названий дней недели |
||
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
|
||
В этом упражнении показано, как выводить все элементы |
||
массива. |
|
|
29
Упражнение 1.17. Оператор цикла for от 0 до 9
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var myarray = newArray(10); |
|
|
for (i=0; i<10; i=i+1) { |
|
|
myarray[i]=i; |
|
|
} |
|
|
alert(myarray); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
операторциклаfor(начальноезначение;условие;шагвозрастания)<br> |
||
условие это булево выражение. Цикл выполняется, пока условие |
||
true<br> |
> |
|
<! --------------------------------------------------- |
|
|
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
Это упражнение знакомит с оператором цикла for. Сначала в цикле всем элементам массива присваивается значение, а затем однократным применением метода Аlert() выводится весь массив.
30