Web-программирование и базы данных. Учебный практикум
.pdfВ примере вводятся два числа, суммируются и выводится результат. В примере используется встроенная функция Number, которая текстовую строку превращает в число.
Структура «ветвление»
В алгоритмической структуре «ветвление» действия выполняются либо в одной, либо в другой ветви алгоритма в зависимости от результата проверки условия.
В языке JavaScript структура «ветвление» реализуется с помощью условных операторов: полного if (..) { .. }else {..} и кра-
ткого if (..) {}.
Тип условного |
Условный оператор |
|
Пример |
оператора |
|
||
|
|
|
|
|
|
|
|
|
if (<условие>) { |
if (a>1) { |
|
полный |
<операторы ветви «да»> |
|
b=1; |
} else { |
} else { |
||
|
} <операторы ветви «нет»> |
} |
b=2; |
|
if (<условие>) { |
if (a>1) { |
|
краткий |
} <операторы ветви «да»> |
} |
b=1; |
|
|
|
|
Массив — индексированная совокупность элементов, используемых под одним именем и различающихся индексами.
Массив можно создать следующим образом:
var <имя массива> = newArray(<количество элементов>). Для заполнения элемента массива или извлечения из него
информации используются индексы.
Пример использования индексов. var days_of_week= new Array(7); days_of_week[0]=”Понедельник” days_of_week[1]=”Вторник” days_of_week[2]=”Среда”
11
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]).
Структура «цикл» в JavaScript
В языке JavaScript структура «цикл» реализуется с помощью операторов цикла с предусловием while (условие) {..}, постусловием do {..} } while (условие) и параметром for.
Тип цикла |
Структура цикла |
Пример |
|
|
|
|
|
|
while <условие> { |
i= 1; |
|
предусловие |
<операторы в цикле> |
while < i<100> { |
|
} |
i=i+1; |
||
|
|
} |
|
|
|
|
|
|
do { |
i= 1; |
|
|
do { |
||
постусловие |
<операторы в цикле> |
||
i=i+1; |
|||
|
} while (<контр-условие>); |
||
|
} while (i<100); |
||
For |
for (<нач. знач.>; <усло- |
var myarray = newArray(10); |
|
вие>; <шаг>) { |
for (i=0; i<10; i=i+1) { |
||
(С парамето- |
<операторы в цикле> |
myarray[i]=i; |
|
ром) |
} |
||
|
} |
alert(myarray); |
12
Отладка JavaScript-скриптов с помощью браузера
Сценарий JavaScript будем записывать между двумя строками минусов, используя программу Блокнот. Файл необходимо сохранять с расширением “htm”. При двойном щелчке мыши запускается браузер.
Файлы с упражнениями по JavaScriрt полностью готовы для запуска и внутри себя содержат текстовые указания в комментариях HTML(<!-- здесь комментарий -->). Эти текстовые указания не выводятся в окно браузера. В некоторых файлах дополнительная текстовая информация указывается непосредственно в HTML-коде без знаков комментариев. В этом случае она будет показываться в окне браузера.
<html>
<head>
<title>Заголовок web-страницы</title> <script language=’JavaScript’> function MyFunction () {
//---------------------------------------------------
//---------------------------------------------------
}
</script>
</head>
<body>
Содержимое web-страницы
<input type=”button” value=”Щелкни” onClick=”MyFunction “> </body>
</html>
13
Упражнения по основам языка JavaScript
Упражнение 1.1. Метод Alert() для вывода сообщений
<!-- |
комментарий |
--> |
<!-- |
Задачник по программированию на языке JavaScript--> |
|
<!-- |
(язык JavaScript – скриптовый язык на стороне клиента--> |
|
<!-- |
составил Буренин С.Н. |
--> |
<!-- для вывода сообщений в JavaScript в окне может использоваться |
||
методAlert() --> |
|
|
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
добавьте в текст в операторе alert свои фамилию и имя --> |
|
<!-- |
Попробуйте работу программы |
--> |
<html>
<head>
<title>Заголовок web-страницы</title> <script language=’JavaScript’> function MyFunction () {
//---------------------------------------------------
alert(«Ваша первая программа на JavaScript работает!»); //---------------------------------------------------
}
</script>
</head>
<body> < p >
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
В этом упражнении показана работа с методомAlert(), который позволяет выводить сообщения в окне.
14
<!-- |
ЗАДАНИЕ: --> |
|
--> |
|
|
<!-- |
Попробуйте работу программы |
|
|||
<!-- |
Изучите и измените программу -- |
> |
|
||
<!-- |
Попробуйте работу программы |
--> |
|
||
<html> |
|
|
|
|
|
<head> |
|
|
|
|
|
<title>Заголовок web-страницы</title> |
|
|
|||
<script language=’JavaScript’> |
|
|
|
||
function MyFunction () { |
|
|
|
||
//--------------------------------------------------- |
|
»); |
|
|
|
alert(«Вы делаете ... |
|
|
|
||
alert(«... грандиозные успехи!!!»); |
|
|
|||
//--------------------------------------------------- |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
</head> |
|
|
|
|
|
<body> |
|
|
> |
|
|
<! --------------------------------------------------- |
|
вывод |
|
осуществляться |
|
Последовательный |
сообщений может |
||||
с помощью последовательного применения методовAlert() |
|||||
<! --------------------------------------------------- |
|
1.2. |
|
> |
применение |
Упражнение |
Последовательное |
||||
методов Alert() |
|
|
|
|
|
<P>
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
В этом упражнении показана работа с последовательным применением методаAlert().
15
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- Изучите и измените программу |
--> |
|
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
||
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
?»); |
confirm(«Вы действительно хотите ... |
||
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Для возможности подтвердить какое-либо действие служит метод Con- |
||
firm() |
> |
|
<! --------------------------------------------------- |
|
|
Упражнение 1.3. Метод Confirm() для подтверждения |
||
действия |
|
|
<P>
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
В этом упражнении показана работа метода Confirm() для подтверждения какого-либо действия или отказа от него.
16
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
prompt(«Как Вас зовут?»,»»); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
Для возможности вписать ответ на вопрос служит метод prompt() |
||
<! --------------------------------------------------- |
|
> |
Упражнение 1.4. Метод Prompt() для ответа на вопрос |
||
<P> |
|
|
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> |
||
</p> |
|
|
</body> |
|
|
</html> |
|
|
В этом упражнении показана работа метода Prompt (), который дает возможность задавать вопрос и обеспечивает возможность ввода ответа на этот вопрос.
17
<!-- |
ЗАДАНИЕ: --> |
--> |
|
<!-- |
Попробуйте работу программы |
|
|
<!-- |
Изучите и измените программу -- |
> |
|
<!-- |
Попробуйте работу программы |
--> |
|
<html> |
|
|
|
<head> |
|
|
|
<title>Заголовок web-страницы</title> |
|
|
|
<script language=’JavaScript’> |
|
|
|
function MyFunction () { |
|
|
|
//--------------------------------------------------- |
|
|
|
var s1=»Добро пожаловать ...», s2 |
|
|
|
s2=»... в мир JavaScript!.» |
|
|
|
alert(s1); |
|
|
|
alert(s2); |
|
|
|
//--------------------------------------------------- |
|
|
|
} |
|
|
|
</script> |
|
|
|
</head> |
|
|
|
<body> |
> |
|
|
<! --------------------------------------------------- |
|
данным |
|
Переменная — это имя, присваиваемое определенным |
|||
во время работы сценария JavaScript.<br> |
|
||
Для объявления переменных можно использовать оператор var.<br> |
|||
Имя переменной не может начинаться с цифры, содержать |
|||
пробелы!!!<br> |
|
|
|
Переменным можно присваивать значения, в том числе начальные.<br> |
|||
В |
данном примере рассматриваются строковые значения |
данных |
|
(в виде текста). |
> |
|
|
<! --------------------------------------------------- |
|
|
|
Упражнение 1.5. Работа с переменными |
|
||
<P>
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
В этом упражнении показана работа с переменными. Сначала производится присваивание переменным значения, а затем содержимое этих переменных выводится в окно методом
Alert().
18
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var s1=»Добро пожаловать «, s2=»в мир JavaScript!.» |
||
alert(s1+s2+ « Это интересно!»); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
При выводе строковые переменные и данные можно соединять в одну |
||
строку |
> |
|
<! --------------------------------------------------- |
|
|
Упражнение 1.6. Соединение строковых переменных |
||
<P>
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
Вэтом упражнении показано соединение нескольких строк
водну. Сначала производится присваивание переменным значений, а затем соединение этих текстовых переменных выводится в окно методомAlert().
19
<!-- |
ЗАДАНИЕ: --> |
--> |
<!-- |
Попробуйте работу программы |
|
<!-- |
Изучите и измените программу -- |
> |
<!-- |
Попробуйте работу программы |
--> |
<html> |
|
|
<head> |
|
|
<title>Заголовок web-страницы</title> |
|
|
<script language=’JavaScript’> |
|
|
function MyFunction () { |
|
|
//--------------------------------------------------- |
|
|
var s1, s2, s3 |
|
|
s1=”Добро пожаловать “ |
|
|
s2=”в мир JavaScript!.” |
|
|
s3=s1+s2+» Это интересно!» |
|
|
alert(s3); |
|
|
//--------------------------------------------------- |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
> |
|
<! --------------------------------------------------- |
|
|
До вывода можно выполнить операцию над строковыми переменными |
||
и данными |
> |
|
<! --------------------------------------------------- |
|
|
Упражнение 1.7. Операции над строковыми перемен- |
||
ными |
|
|
<P>
<input type=”button” value=”Щелкни” onClick=”MyFunction()”> </p>
</body>
</html>
Вэтом упражнении показано соединение нескольких строк
водну. Сначала производится присваивание переменным значений, затем производится соединение этих текстовых переменных в одну. Результирующая строка выводится в окно ме-
тодом Аlert().
20