Лабораторная работа №1 по дисциплине: «WEB-программирование» Основы языка программирования JavaScript
Министерство
образования и науки ЛНР
Луганский государственный Университет имени Владимира Даля
Стахановский инженерно-педагогический институт
Кафедра информационных систем
Лабораторная
работа №1
по
дисциплине: «WEB-программирование»
Стаханов
2021
Лабораторная работа 1
Тема: Основы языка программирования JavaScript
Цель: научиться работать с переменными, строками, изучить функции обработки событий на веб-страницах, изменения содержимого веб-страниц, отслеживания координат мыши.
Порядок выполнения лабораторной работы
1. Выбрать согласно порядковому номеру в журнале вариант задания.
|
Вариант |
Номер задания |
|
1 |
1,5,6,8,10,12,15,17,18,19 |
|
2 |
2,5,7,9,11,13,14,16,18,19 |
|
3 |
3,5,6,8,10,12,15,17,18,19 |
|
4 |
4,5,6,9,11,13,14,16,18,19 |
|
5 |
1,5,7,8,10,13,14,16,18,19 |
|
6 |
2,5,6,9,10,12,15,17,18,19 |
|
7 |
3,5,7,8,11,13,14,16,18,19 |
|
8 |
4,5,6,9,10,12,15,17,18,19 |
|
9 |
1,5,7,8,11,13,14,16,18,19 |
|
10 |
2,5,6,9,10,12,15,17,18,19 |
2. Выполнить задания, в названии файла указать фамилию, номер лабораторной работы, номер задания, например, Иванов_1-10.
3. Составить отчет.
Ход работы
3. Создайте переменные c=15 и d=2. Просуммируйте их, а результат присвойте переменной result. Выведите на экран значение переменной result.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var с = 15;
var d = 2;
var result = с + d;
alert(result);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.1. – Результат
5. Создайте переменные a=17 и b=10. Отнимите от a переменную b и результат присвойте переменной c. Затем создайте переменную d, присвойте ей значение 7. Сложите переменные c и d, а результат запишите в переменную result. Выведите на экран значение переменной result.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var a1 = 17;
var b1 = 10;
var c1 = a1 - b1;
var d1 = 7;
var result = c1 + d1;
alert(result);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.2. – Результат
6. Создайте переменную str и присвойте ей значение 'Привет, Мир!'. Выведите значение этой переменной на экран.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var str = 'Привет, Мир!';
alert(str);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.2. – Результат
8. Создайте переменную name и присвойте ей ваше имя. Выведите на экран фразу 'Привет, %Имя%!'.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var name = 'Настя!';
alert('Привет, ' + name);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.3. – Результат
10. Спросите имя пользователя с помощью методы prompt. Выведите с помощью alert сообщение 'Ваше имя %имя%'.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var name1 = prompt('Ваше имя?');
alert('Ваше имя ' + name1);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.4. – Результат
12. Создайте переменную str и присвойте ей значение 'abcde'. Обращаясь к отдельным символам этой строки выведите на экран символ 'a', символ 'c', символ 'e'.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var str3 = 'abcde';
alert(str3[0]);
alert(str3[2]);
alert(str3[4]);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.5. – Результат
15. Создайте переменную, присвойте ей число. Возведите это число в квадрат. Выведите его на экран.
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var num3 = 5;
alert(num3 * num3);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.6. – Результат
17. Переделайте этот код так, чтобы в нем использовались операции ++ и --. Количество строк кода при этом не должно измениться.
var num = 10;
num = num + 1;
num = num + 1;
num = num - 1;
alert(num);
Листинг программы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var num5 = 10;
num5++;
num5++;
num5--;
alert(num5);
</script>
</head>
<body>
</body>
</html>
Рисунок 1.7. – Результат
Задание 18
Объект document имеет ряд полезных функций, например, getElementById(id), которые позволяют получить доступ к элементам веб-страницы и менять их содержание.
Создать страницу согласно образцу (рис.1), используя данную функцию, предусмотреть такие изменения при наведении указателя мыши:
- изменение цвета прямоугольника (цвет выбрать на свое усмотрение!);
- изменение размера шрифта (размер шрифта выбрать самостоятельно!);
- изменение типа шрифта (тип шрифта выбрать самостоятельно!);
- замещение текста.
Листинг программы:
<html>
<body>
<style> div {
background-Color:orange;
padding:20px;
}
</style>
<script>
function primer()
{
s=document.getElementById('ris');
s.style.backgroundColor='pink';s.style.fontFamily='Bonzai';
s.innerHTML='<br>Òåïåðü ÿ ðîçîâåíüêèé'
}
</script>
<div id="ris" onMouseOver="primer()">Hello word
</div>
</body>
Рисунок 1.8. – Результат
Задание 19
1. Создать страницу согласно образцу, используя стили и блок div, ширина которого не должна превышать 40% окна. Цвет заливки и границы блока задать самостоятельно.
Листинг программы:
<html>
<body>
<center>
<script>
n=0;
function ok()
{
n=n+1
s=document.getElementById('timer');
s.innerHTML=n+' sec';
}
m=window.setInterval(ok,1000);
</script>
<script>
function khai(eve)
{
s=document.getElementById('PEK'); s.innerHTML='X='+eve.pageX+' Y='+eve.pageY;
}
document.captureEvents(Event.MOUSEMOVE); document.onmousemove=khai;
</script>
<div id="timer"></div>
<div id="PEK"></div>
<style>
div {
width:500px;height:30px; /* Ðàçìåðû */
outline:2px solid ;
background-Color:green ; padding:25px;
}
</style></center>
</body>
</html>
Рисунок 1.8. – Результат
Вывод: изучена работа с переменными, строками, функции обработки событий на веб-страницах, изменения содержимого веб-страниц, отслеживания координат мыши.
Министерство образования и науки
Лабораторная работа 1 Тема:
Рисунок 1.1. – Результат 5
Рисунок 1.2. – Результат 6
Создайте переменную name и присвойте ей ваше имя
Рисунок 1.4. – Результат 12
Рисунок 1.5. – Результат 15
Листинг программы: <!DOCTYPE html
Листинг программы: <html> <body> <style> div { background-Color:orange; padding:20px; } </style> <script> function primer() { s=document
ElementById('timer'); s.innerHTML=n+' sec'; } m=window
Вывод: изучена работа с переменными, строками, функции обработки событий на веб-страницах, изменения содержимого веб-страниц, отслеживания координат мыши
© ООО «Знанио»
С вами с 2009 года.
