Skip to content

Домашняя 5 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kubadaleko wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Домашняя 5 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions 1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework</title>
</head>
<body>
<!--
Обязательное задание.

Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
стирать, код с решением задачи пишем под комментарием.
-->

<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title" data-number="100">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text" data-number="50">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
<a href="#" id="super_link" class="card-link">Card link</a>
<a href="#" class="card-link" data-number="50">Another link</a>
</div>
</div>

<script>
"use strict";

/*
1. Найти по id, используя getElementById, элемент с id равным "super_link" и
вывести этот элемент в консоль.
*/

console.log(document.getElementById('super_link'));

/*
2. Внутри всех элементов на странице, которые имеют класс "card-link",
поменяйте текст внутри элемента на "ссылка".
*/

const div = document.querySelectorAll('.card-link');
div.innerText = 'ссылка';
console.log(div);

/*
3. Найти все элементы на странице с классом "card-link", которые лежат в
элементе с классом "card-body" и вывести полученную коллекцию в консоль.
*/

console.log(document.querySelector('.card-body .card-link'));

/*
4. Найти первый попавшийся элемент на странице у которого есть атрибут
data-number со значением 50 и вывести его в консоль.
*/

console.log(document.querySelector('[data-number ="50"]'));

/*
5. Выведите содержимое тега title в консоль.
*/

console.log(document.title);

/*
6. Получите элемент с классом "card-title" и выведите его родительский узел
в консоль.
*/

const elem1 = document.querySelector('.card-title');
console.log(elem1.parentNode);


/*
7. Создайте тег `p`, запишите внутри него текст "Привет" и добавьте созданный
тег в начало элемента, который имеет класс "card".
*/

const cardElem = document.querySelector('.card');
cardElem.insertAdjacentHTML('beforebegin', '<p>Привет</p>');


/*
8. Удалите тег h6 на странице.
*/

const h6El = document.querySelector('h6');
h6El.remove();


</script>
</body>
</html>
119 changes: 119 additions & 0 deletions 2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework</title>
</head>
<body>
<!--
Обязательное задание.

Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
стирать, код с решением задачи пишем под комментарием.
-->

<p class="dropdown">Привет :)</p>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="menu dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

<script>
"use strict";

/*
1. Ко всем элементам, имеющим класс "dropdown-item" добавить еще один класс
"super-dropdown", необходимо использовать методы forEach и querySelectorAll и
свойство classList у элементов.
*/

const allSel = document.querySelectorAll('.dropdown-item');
allSel.forEach(el => el.classList.add('super-dropdown'));


/*
2. У элемента с классом btn необходимо убрать класс "btn-secondary", если он
присутствует у этого элемента, либо добавить, если такого класса у элемента
не было.
*/

const btnElem = document.querySelector('.btn');
btnElem.classList.toggle('btn-secondary');


/*
3. Необходимо удалить класс "dropdown-menu" у элемента, у которого
присутствует класс "menu".
*/

const menuElem = document.querySelector('.menu');
menuElem.classList.remove('dropdown-menu');

/*
4. Используя метод insertAdjacentHTML добавьте после div'a с классом
"dropdown" следующую разметку:
<a href="#">link</a>
*/

const dropdownElem = document.querySelector('.dropdown');
dropdownElem.insertAdjacentHTML('afterend', '<a href="#">link</a>');


/*
5. У элемента с id "dropdownMenuButton" замените id на "superDropdown".
*/

const dropdownMenuButton = document.getElementById('dropdownMenuButton');
dropdownMenuButton.id = 'superDropdown';


/*
6. Добавьте атрибут data-dd со значением 3 элементу у которого существует
атрибут "aria-labelledby" равный "dropdownMenuButton" используя dataset.
*/

const productEl = document.querySelector('[aria-labelledby = "dropdownMenuButton"]');
productEl.dataset.dd = '3';

// Почему у Вас dropdownMenuButton - в двойных ковычках? Почему пишет ошибку если поставить одинарные?
// Почему без ковычек все ок и можно ли ковычки не ставить?
// Равно и тут - productEl.dataset.dd = 3; 3 в ковычки нужно?


/*
7. Удалите атрибут type у элемента с классом "dropdown-toggle".
*/

document.querySelector('.dropdown-toggle').removeAttribute('type');


/*
8. Выведите в консоль все имеющиеся атрибуты и их значения тега у которого
есть все два класса btn и dropdown-toggle.
Вывод каждого атрибута и значений должен выглядеть следующим образом (пример):
Атрибут "class" содержит значение "btn btn-secondary dropdown-toggle"
*/

// Не могли-бы разьяснить данный пример подробнее? Я у Вас посмотрел в решении, но
// понял не все.

// Это из Вашего решения -
// const attributes = document
// .querySelector('.btn.dropdown-toggle')
// .attributes;

// for (const attribute of attributes) {
// console.log(`Атрибут "${attribute.name}" содержит значение "${attribute.value}"`);
// }


</script>
</body>
</html>
155 changes: 155 additions & 0 deletions 3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework</title>
</head>
<body>
<!--
Обязательное задание.

Выполнить все задачи в теге script. Комментарии, в которых написаны задачи, не
стирать, код с решением задачи пишем под комментарием.
-->

<p class="super_element">Привет</p>

<img src="https://placeimg.com/50/50/animals" alt="">
<img src="https://placeimg.com/50/50/arch" alt="">
<img src="https://placeimg.com/50/50/nature" alt="">
<img src="https://placeimg.com/50/50/people" alt="">
<img src="https://placeimg.com/50/50/tech" alt="">
<img src="https://placeimg.com/50/50/tech/grayscale" alt="">
<img src="https://placeimg.com/50/50/tech/sepia" alt="">

<br>

<button>Кнопка</button>
<button class="super_element">Кнопка с классом btn</button>
<button>Кнопка</button>

<br>

<textarea></textarea>

<br>

<ul>
<li>
<button>Кнопка 1</button>
</li>
<li>
<button>Кнопка 2</button>
</li>
<li>
<button>Кнопка 3</button>
</li>
<li>
<button>Кнопка 4</button>
</li>
</ul>

<script>
"use strict";

/*
1. Необходимо вывести сообщение в консоль "все теги прогрузились", когда все
теги будут созданы браузером.
*/

document.addEventListener('DOMContentLoaded', () => {
console.log('все теги прогрузились');
});


/*
2. Необходимо вывести сообщение в консоль "страница загрузилась", когда все
ресурсы страницы будут загружены.
*/

window.addEventListener('load', () => {
console.log('страница загрузилась');
});


/*
3. При клике на какой-либо тег на странице в консоль должно выводиться
сообщение наподобии:
Класс "super_element" присутствует в элементе "div".
сообщение должно определять присутствует или отсутвтует класс "super_element"
у элемента, а также выводить в нижнем регистре верный тег в данной строке, по
которому был совершен клик.
Необходимо использовать делегирование.
*/

// Смотрю Ваше решение и все понимаю вроде

// document.addEventListener('click', event =>
// тут вешаем слушателя клика на весь документ
// {
// const containStr = event.target.classList.contains('super_element')
// ? 'присутствует' : 'отсутствует';
// тут получаем в переменную и одновременно проверяем есть ли 'super_element'

// console.log(`Класс "super_element" ${containStr} в элементе "${event.target.tagName.toLowerCase()}".`);
// });
// тут выводим результат клика в консоль

// - это вроде как хорошо, но если его не посмотреть,
// то не могу написать свое. Это плохо...(



/*
4. Сделайте, чтобы при наведении на textarea в консоли появлялось сообщение:
"Вы навели на textarea."
*/

const el = document.querySelector('textarea');
el.addEventListener('mouseover' , event => {
console.log('Вы навели на textarea');
});


/*
5. Необходимо повесить событие клика на тег ul. В обработчике события в
консоль необходимо выводить текст, который записан внутри элемента кнопки,
по которой был произведен клик.
Если клик был не по кнопке, то ничего выводить не нужно.
Необходимо использовать делегирование.
*/

document.querySelector('ul').addEventListener('click' , event => {
if(event.target.tagName !== 'BUTTON')
return;
console.log(event.target.textContent);
});


/*
6. Вопрос: Почему в console.log пишется сначала текст из 5 задания и только
потом выводится текст из 3 задания, если мы кликаем по кнопкам в ul?
Ответ необходимо написать здесь же, под этим комментарием, своими словами.
*/

// Это связано с погружением, в 3 задании обработка всего документа а в 5 конкретного
// тэга. Поэтому сначала пишется текст из 5 задания и только
// потом выводится текст из 3 задания.


/*
7. С помощью JS необходимо изменить цвет заднего фона каждого второго тега li.
*/

const liElem = document.querySelectorAll('ul li:nth-child(even)');
liElem.forEach(element => element.style.background = 'red');

// Но сначала я написал следующее -
// document.querySelector('li:nth-child(even)').style.background = 'red';
// Не сработало потому-что я в данном случае получаю только один тэг?



</script>
</body>
</html>