Министерство образования и науки Республики Казахстан
Колледж Международной академии бизнеса
Отчет по учебной практике
По дисциплине: «WEB - дизайн»
Студента: Заугольникова Дмитрия
Специальность: 1305000 «Информационные системы (по областям применения)»
Группа: 31 ИС
Проверил преподаватель
Ельчибаева Р.Б. _________
Алматы 2015
Содержание
|
1. Практическая работа №1. Размещение скриптов в HTML-документе |
|
|
1.1 Задание 1 |
5 |
|
1.1.1 Вид окна |
5 |
|
1.1.2 Вид скрипта |
5 |
|
1.2 Задание 2 |
6 |
|
1.2.1 Вид окна |
7 |
|
1.2.2 Вид скрипта |
7 |
|
1.3 Задание 3 |
8 |
|
1.3.1 Вид окна |
8 |
|
1.3.2 Вид скрипта |
8 |
|
2. Практическая работа №2. Операторы управления, функции. Объекты ядра JavaScript. |
10 |
|
2.1 Задание 4 |
10 |
|
2.1.1 Вид окна |
11 |
|
2.1.2 Вид скрипта |
12 |
|
2.2 Задание 5 |
13 |
|
2.2.1 Вид окна |
13 |
|
2.2.2 Вид скрипта |
14 |
|
2.3 Задание 6 |
14 |
|
2.3.1 Вид окна |
15 |
|
2.3.2 Вид скрипта |
16 |
|
2.4 Задание 7 |
16 |
|
2.4.1 Вид окна |
17 |
|
2.4.2 Вид скрипта |
17 |
|
2.5 Задание 8 |
19 |
|
2.5.1 Вид окна |
19 |
|
2.5.2 Вид скрипта
|
19 |
|
3. Практическая работа №3. Объекты клиентских приложений. Обработка событий |
21 |
|
3.1 Задание 9 |
21 |
|
3.1.1 Вид окна |
21 |
|
3.1.2 Вид скрипта |
22 |
|
3.2 Задание 10 |
23 |
|
3.2.1 Вид окна |
23 |
|
3.2.2 Вид скрипта |
24 |
|
3.3 Задание 11 |
24 |
|
3.3.1 Вид окна |
25 |
|
3.3.2 Вид скрипта |
25 |
|
3.4 Задание 12 |
25 |
|
3.4.1 Вид окна |
26 |
|
3.4.2 Вид скрипта |
26 |
|
3.5 Задание 13 |
27 |
|
3.5.1 Вид окна |
27 |
|
3.5.2 Вид скрипта |
28 |
|
3.6 Задание 14 |
28 |
|
3.6.1 Вид окна |
29 |
|
3.6.2 Вид скрипта |
30 |
|
4 Практическая работа №4. Объединение JavaScript и CSS |
32 |
|
4.1 Задание 15 |
32 |
|
4.1.1 Вид окна |
32 |
|
4.1.2 Вид скрипта |
33 |
|
4.2 Задание 16 |
33 |
|
4.2.1 Вид окна |
34 |
|
4.2.2 Вид скрипта |
35 |
|
4.3 Задание 17 |
36 |
|
4.3.1 Вид окна |
37 |
|
4.3.2 Вид скрипта |
37 |
|
5. Практическая работа №5. Слои. Движущиеся элементы |
38 |
|
5.1 Задание 18 |
38 |
|
5.1.1 Вид окна |
39 |
|
5.1.2 Вид скрипта |
39 |
|
5.2 Задание 19 |
40 |
|
5.2.1 Вид окна |
41 |
|
5.2.2 Вид скрипта |
41 |
|
5.3 Задание 20 |
42 |
|
5.3.1 Вид окна |
42 |
|
5.3.2 Вид скрипта |
43 |
1. Практическая работа №1. Размещение скриптов в html-документе
1.1 Задание 1
1. Создайте простой HTML-документ.
2. Добавьте два абзаца с произвольным текстом.
3. Организуйте между двумя абзацами вывод приветсвенного
сообщения в диалоговом окне, задав необходимые команды внутри
тэга <script>.
4. Добавьте команду вывода аналогичного приветсвенного сообщения
в окно браузера после закрытия диалогового окна.
5. Сохраните документ с именем Ex1.html в рабочей папке.
1.1.1 Вид окна
1.1.2 Вид скрипта
<HTML>
<HEAD>
<TITLE>
Ex1
</TITLE>
</HEAD>
<BODY>
<p1>
Случайный текст
</p1>
<br>
<script language="JavaScript">
alert("Hello World!")
</script>
<p2>
Случайный текст
</p2>
</BODY>
</HTML>
1.2 Задание 2
1. Создайте простой HTML-документ.
2. Добавьте два абзаца с произвольным текстом.
3. Организуйте между двумя абзацами вывод приветственного
сообщения в диалоговом окне, задав необходимые команды
JavaScript во внешнем файле. Для этого:
• создайте новый текстовый файл,
• поместите в него код JavaScript,
• сохраните файл с именем main.js следующим образом: укажите
тип файла “Все файлы”, кодировку “UTF-8”.
4. Добавьте ссылку на внешний скриптовый файл из рабочего HTML-
документа.
5. Сохраните документ с именем Ex2.html в рабочей папке.
1.2.1 Вид окна
1.2.2 Вид скрипта
<HTML>
<HEAD>
<TITLE>
Ex2
</TITLE>
</HEAD>
<BODY>
<p1>
Произвольный текст
</p1><br>
<script language="JavaScript" src="meow.js">
</script>
<p2>
Произвольный текст
</p2>
</BODY>
</HTML>
1.3 Задание 3
1. Создайте простой HTML-документ.
2. Сохраните документ с именем Ex3.html в рабочей папке.
3. Добавьте в документ код JavaScript так, чтобы в диалоговом окне
появлялось поле с надписью "Введите сюда своё имя" и со
значением по умолчанию в поле "Введите имя". Для этого
используйте метод promt(...) объекта window. Для хранения
введенного значения заведите новую переменную.
4. Организуйте вывод введенного значения имени в окно браузера в
виде: "Ваше имя <…..>".
5. Дополните код, чтобы в новом диалоговом окне появилось надпись
"Начать заново? " При положительном ответе появлялось диалоговое
окно: "Не надоело? ", при отказе – "Ну и правильно!". Используйте
для написания методы alert(…) и confirm(…) объекта window.
1.3.1 Вид окна
1.3.2 Вид скрипта
<html>
<head>
<title>
Ex3
</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
n=window.prompt("Введите своё имя","Введите имя");
document.write("Ваше имя "+n);
if (confirm("Начать заново?"))
{
alert("Не надоело?");
}
else {
alert("Ну и правильно!");
}
</script>
</body>
</html>
2. Практическая работа №2. Операторы управления, функции. Объекты ядра JavaScript.
2.1 Задание 4
1. Рассмотрите пример скрипта:
<html>
<head>
<title>if</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
var x, y;
x=parseInt(prompt("Введите значение х",'')); // метод parseInt()
переводит строку в целое
y=parseInt(prompt("Введите значение у",'')); // число
if(x<y)
{
alert("Максимальное число - y")
}
else {
alert("Максимальное число - x")
}
</script>
</body>
</html>
2. Допишите скрипт так, чтобы при введении пользователем
одинаковых чисел, открывалось сообщение "Введенные числа
равны!".
3. Напишите скрипт, в котором пользователя просят ввести
правильный пароль. При вводе правильного пароля, в окне браузера
появляется сообщение о том, что пароль верен. При вводе
неправильного пароля – выпадает сообщение о неправильно
введенном пароле. Для выполнения задания введите переменную
password, в которую сохраните верное значение пароля.
4. Сохраните документ с именем Ex4.html в рабочей папке.
2.1.1 Вид окна
2.1.2 Вид скрипта
<html>
<head>
<title>Ex4</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
var x, y, pass;
pass=12345;
pass1=prompt("Введите пароль",'');
if(pass==pass1){
alert("Пароль введен правильно");
}
else{
alert("Пароль введен неправильно!");
}
x=parseInt(prompt("Введите значение х",''));
y=parseInt(prompt("Введите значение у",''));
if(x<y)
{
alert("Максимальное число -y")
}
elseif(x=y) {
alert("Введенные числа равны!")
}
else{
alert("Максимальное число -x")
}
</script>
</body>
</html>