Js Lab2

Лабораторна робота №2
Тема: Рядки, масиви, об’єкти
Завдання 1. Напишіть функцію, яка приймає 2 рядки та порівнює їх довжину. Виділіть, за

допомогою CSS, рядок з більшою к-стю символів.
Лістинг програми:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
</head>
<body>
<p>Введіть перший рядок: <input type="text" id="first"></p>
<p>Введіть другий рядок: <input type="text" id="second"></p>
<input type="button" value="Порівняти" onclick="check()"><br>
<script>
function check(){
let string1 = first.value;
let string2 = second.value;
if(string1.length > string2.length){
first.style.backgroundColor = "green";
second.style.backgroundColor = "white";
}
else {
second.style.backgroundColor = "green";
first.style.backgroundColor = "white";
}
}
</script>
</body>
</html>
Результат виконання:
Завдання 2. Напишіть функцію, яка переводить у верхній регістр перший символ

переданого рядка. Наприклад: (javascript -> Javascript)
<!DOCTYPE html>
<html lang="en">
<head>
<title>2</title>
</head>
<body>
<input type="text" id="string">
<input type="button" value="Ok" onclick="change()">
<script>
function change() {
let string1 = string.value;
let firstSymb = string1[0].toUpperCase();
let string2 = firstSymb + string1.slice(1);
string.value = string2;
}
</script>
</body>
</html>
Завдання 3. Напишіть функцію, яка підраховує кількість голосних літер у переданому

рядку. Кількість літер виведіть в окремий елемент.
<!DOCTYPE html>
<html lang="en">
<head>
<title>3</title>
</head>
<body>
<input type="button" value="Ok" onclick="check()">
<p>Кількість голосних:</p>
<div id="printCount"></div>
<script>
function check() {
let string1 = string.value.toUpperCase();
let lit = "АЕЄИІЇОУЮЯ";
let count = 0;
for (let i = 0; i < string1.length; i++) {
if (lit.includes(string1[i])) {
count++;
}
}
printCount.innerHTML = count;
}
</script>
</body>
</html>
Завдання 4. Напишіть функцію для перевірки спаму в переданому рядку. Додайте різних
CSS ефектів при наявності та відсутності спаму. Спам-слова обирайте самостійно.
Наприклад: 100% безкоштовно, збільшення продажів, тільки сьогодні і тд…
<!DOCTYPE html>
<html lang="en">
<head>
<title>4</title>
<style>
#block {
border: 2px solid black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="Ok" onclick="check()"><br>
<div id="block"></div>
<script>
function check() {
let change = string.value.toLowerCase();
if (change.includes('знижка') || change.includes('привіт')) {
block.style.backgroundColor = "red";
}
else {
block.style.backgroundColor = "green";
}
}
</script>
</body>
</html>
Завдання 5. Напишіть функцію скорочення рядка. Функція приймає рядок та його

максимальну довжину. Якщо довжина рядка більша, ніж максимальна, необхідно
відкинути зайві символи, додавши замість них трикрапку.
<!DOCTYPE html>
<html lang="en">
<head>
<title>5</title>
</head>
<body>
<p>Введіть рядок:
<input type="text" id="string1">
</p>
<p>Введіть кількість:
</p>
<input type="button" value="Ok" onclick="check()">
<script>
function check() {
string1.value = cut(string1.value, string2.value)
}
function cut(string, count) {
if (string.length > count) {
return string.slice(0, count) + "...";
}
else {
return string;
}
}
</script>
</body>
</html>
Завдання 6. Створіть 2 інпута, для рядка та для окремого символу. Виведіть індекси, за
якими знаходиться цей символ у рядку. Також виведіть, скільки разів зустрічається даний
символ. Наприклад: (fucntionFind(‘Hello World’,’o’) à 2 рази, індекси: 4,7)\
<!DOCTYPE html>
<html lang="en">
<head>
<title>6</title>
</head>
<body>
<p>Введіть рядок:
</p>
<p>Введіть символ:
</p>
<input type="button" value="Знайти" onclick="check()">
<p id="rez1"></p>
<p id="rez2"></p>
<script>
function check() {
let string = string1.value;
let symb = string2.value;
rez1.innerHTML = "Зустрічається "
rez2.innerHTML = "Позиції: ";
let count = 0;
for (let i = 0; i < string.length; i++) {
if (string[i] == symb) {
count++;
rez2.innerHTML += i + ",";
}
}
rez1.innerHTML += (count + " разів");
string = rez2.innerHTML;
string = string.slice(0, string.length - 1);
rez2.innerHTML = string;
}
</script>
</body>
</html>
Робота з об’єктами
<!DOCTYPE html>
<html lang="en">
<head>
<title>obj</title>
</head>
<body>
<p><input type="text" id="str1"> : <input type="text" id="str2"> : <input
type="text" id="str3"></p><br>
<input type="button" value="Ok" onclick="clock()"><br>
<p id="rez"></p>
<script>
let time = {
hour: 15,
minute: 20,
second: 12
}
function changeHours(time, hoursToChange) {
time.hour += hoursToChange;
while (time.hour >= 24) {
time.hour -= 24;
}
}
function changeMinutes(time, minutesToChange) {
time.minute += minutesToChange;
while (time.minute >= 60) {
time.minute -= 60;
time.hour += 1;
}
}
function changeSeconds(time, secondsToChange) {
time.second += secondsToChange;
while (time.second >= 60) {
time.second -= 60;
time.minute += 1;
}
}
rez.innerHTML = time.hour + ":" + time.minute + ":" + time.second;
function clock() {
changeHours(time, str1.value*1);
changeMinutes(time, str2.value*1);
changeSeconds(time, str3.value*1);
rez.innerHTML = time.hour + ":" + time.minute + ":" + time.second;
}
</script>
</body>
</html>

Js Lab2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Js Lab2

Uploaded by

Copyright:

Available Formats

Лабораторна робота №2

Тема: Рядки, масиви, об’єкти

Завдання 1. Напишіть функцію, яка приймає 2 рядки та порівнює їх довжину. Виділіть, за

Завдання 2. Напишіть функцію, яка переводить у верхній регістр перший символ

Завдання 3. Напишіть функцію, яка підраховує кількість голосних літер у переданому

Завдання 5. Напишіть функцію скорочення рядка. Функція приймає рядок та його

<input type="button" value="Знайти" onclick="check()">

You might also like