web лабки / 13 лаб
.docx
Студент 410-і групи Бойко Є.А.
Лабораторна робота № 13
Тема: Мова створення сценаріїв JavaScript: синтаксиз, основні елементи.
Мета роботи :
ознайомлення з мовою складання сценаріїв JavaScript;
ознайомлення з базовим синтаксисом, основними елементами JavaScript;
придбання навичок створення HTML - документів з використанням JavaScript.
Завдання 1
Скріншот
Код
<!DOCTYPE html>
<html>
<head>
<title>Бойко 13</title>
</head>
<body>
<div id="zad3_0">
<p>Сума двух чисел</p>
<script>
let q = 7;// 1 змінна
let w = 7;// 2 змінна
document.write("7 + 7 = ", +q + +w);//обчислюємо значення виразу та виводимо на сторінку
</script>
<p>складання рядків в один</p>
<script>
let a = "Привет,";// 1 змінна
let s = " Как дела?";// 2 змінна
document.write("Привет, + Как дела = ", a + s);//обчислюємо значення виразу та виводимо на сторінку
</script>
<p>до рядка додати число</p>
<script>
let e = 12052001;// 1 змінна
let d = " мое день рождение";// 2 змінна
document.write("12052001 + мое день рождение = ", +e + d);//обчислюємо значення виразу та виводимо на сторінку
</script>
</div>
<div id="pr1">
<p>Приклад 1</p>
<p></p>
<script>
document.write( "(25*x*2+17*y)/5+888 при x=v*2.5-n, y=v*0.3 ")//вывод текста
let v = prompt("Введіть значення v:");// 1 змінна
let n = prompt("Введіть значення n:");// 2 змінна
document.write( "Відповідь = " + Math.round((25*(v*2.5-n)*2+17*(v*0.3)/5+888)));//обчислюємо значення виразу та виводимо на сторінку
</script>
<p>Приклад 2</p>
<p></p>
<script>
document.write( "(87*y/8+2*x/5-33)*6 при x=7*v-5, y=5*v-7 ")//вывод текста
document.write( "Відповідь = " + Math.round((87*(5*v-7)/8+2*(7*v-5)/5-33)*6)); //обчислюємо значення виразу та виводимо на сторінку
</script>
</div>
<div>
<p>Ваше ім'я :</p>
<script>
let name = prompt("Введіть ім'я:");// 1 змінна
document.write(" ", name);// виводим 1 змінну
let g = prompt("Введіть будь-яке число");// 2 змінна
let k = prompt("Введіть будь-яке друге число");// 3 змінна
alert (+g + +k);//вивод
</script>
</div>
<style>
p {
color: rgb(49, 151, 116);
text-shadow:black -17px -8px 6px;
}
body{
font-size: 20px;
font-style: italic;
font-weight: bold;
background-color: #FFA07A;
text-shadow:black -17px -8px 6px;
}
div {
float: left;
width: 33%;
text-align: center;
padding-top: 33px;
padding-bottom: 100px;
}
</style>
</body>
</html>
Завдання 2 (общее)
<!DOCTYPE html>
<html>
<head>
<title>общее</title>
</head>
<body>
<script>
document.write(Date());
</script>
<br> <hr>
<p>javascript може написати прямо в html вихідний потік - в тілі документа </p>
<script>
document.write("<h1>Цей тег для заголовка<h1>");
document.write("<p>Цей тег для позначення параграфа</p>")
</script>
<p>
Ви можете використовувати метод <strong>document.write</strong> в тілі вихідному html.
Якщо ви використовуєте цей метод після завантаження документа (наприклад у функції), весь документ буде перезаписаний.
</p>
<br> <hr>
<div id="test"></div>
<script>
let test =5;
alert(test);</script>
</body>
</html>
Скріншот
Висновок: На лабораторній роботі було ознайомлення з мовою складання сценаріїв JavaScript, ознайомлено з базовим синтаксисом, основними елементами JavaScript, придбано навички створення HTML - документів з використанням JavaScript.
Контрольні запитання
1)DOM – об’єктна модель документа.
2)За допомогою програмованої об'єктної моделі JavaScript стає повноцінним інструментом по створенню динамічного HTML (DHTML):
• JavaScript може змінити всі HTML елементи на сторінці
• JavaScript може змінити всі атрибути HTML на сторінці
• JavaScript може змінити всі стилі CSS на сторінці
• JavaScript може реагувати на всі події на сторінці
3) Змінна складається з імені і виділеної області пам'яті, яка йому відповідає.
Для оголошення або, іншими словами, створення змінної використовується ключове слово
var:
var message;
4) Взаємодіяти з користувачем можна через оператори: alert, prompt, confirm.
alert виводить на екран вікно з повідомленням і припиняє виконання скрипта, поки користувач не натисне «ОК».
confirm виводить вікно з питанням question з двома кнопками: OK і CANCEL.
prompt повертає те, що ввів відвідувач - рядок або спеціальне значення null, якщо введення скасоване.