Цель работы
Научиться создавать динамические эффекты средствами JavaScript.
Задания
Задание 1
Создать программу на JS, изменяющую цвет слова в тексте при наведении курсора мыши (событие Onmouseover, свойство style.color).
Решение
Html
<p>
    <span>Lorem</span> ipsum dolor sit, amet consectetur adipisicing elit. 
    Omnis laboriosam odio voluptate quis dicta, dolores, ducimus alias nemo accusantium 
    animi libero consequuntur harum sed, tempore mollitia ipsum? Nam ullam sed beatae 
    delectus architecto, porro voluptates eaque dolor nihil minima temporibus, rem 
    exercitationem! Quos impedit blanditiis ad error placeat doloribus sunt.
</p>
Java Script
document.querySelector('span').onmouseover = () => {
    document.querySelector('span').style.color = 'red'
}

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis laboriosam odio voluptate quis dicta, dolores, ducimus alias nemo accusantium animi libero consequuntur harum sed, tempore mollitia ipsum? Nam ullam sed beatae delectus architecto, porro voluptates eaque dolor nihil minima temporibus, rem exercitationem! Quos impedit blanditiis ad error placeat doloribus sunt.

Задание 2
Создать программу на JS, изменяющую размер шрифта слова щелчком мыши (событие Onclick, свойство style.fontSize).
Решение
Html
<p>
    <span>Lorem</span> ipsum dolor sit, amet consectetur adipisicing elit. 
    Omnis laboriosam odio voluptate quis dicta, dolores, ducimus alias nemo accusantium 
    animi libero consequuntur harum sed, tempore mollitia ipsum? Nam ullam sed beatae 
    delectus architecto, porro voluptates eaque dolor nihil minima temporibus, rem 
    exercitationem! Quos impedit blanditiis ad error placeat doloribus sunt.
</p>
Java Script
document.querySelector('span').onclick = () => {
    document.querySelector('span').style.fontSize = '3.5vh'
}

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis laboriosam odio voluptate quis dicta, dolores, ducimus alias nemo accusantium animi libero consequuntur harum sed, tempore mollitia ipsum? Nam ullam sed beatae delectus architecto, porro voluptates eaque dolor nihil minima temporibus, rem exercitationem! Quos impedit blanditiis ad error placeat doloribus sunt.

Задание 3
Создать программу на JS замены картинки на другую при щелчке мышью с помощью метода getElementById и свойства src.
Решение
Html
<img id="img1" src="html.svg">
Java Script
document.getElementById('img1').onclick = () => {
    document.getElementById('img1').src = "java-script.svg"
}

Задание 4
Создать программу на JS, заменяющую текст изображением, с использованием метода getElementById и свойства innerHTML.
Решение
Html
<p id="paragraph1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
    Numquam harum cumque sunt voluptatibus laborum nesciunt suscipit 
    architecto perspiciatis delectus amet, omnis veniam, deserunt commodi 
    rerum hic dolorem sequi impedit perferendis dolore aperiam.
</p>
Java Script
document.getElementById('paragraph1').onclick = () => {
    document.getElementById('paragraph1').innerHTML = ('<img src="java-script.svg">')
}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam harum cumque sunt voluptatibus laborum nesciunt suscipit architecto perspiciatis delectus amet, omnis veniam, deserunt commodi rerum hic dolorem sequi impedit perferendis dolore aperiam.

Задание 5
Создать эффекты увеличения размера рисунка (свойство width) при наведении на него курсора мыши и возврата к первоначальному размеру при уходе курсора с рисунка (событие onmouseout).
Решение
Html
<img id="img1" src="html.svg">
Java Script
let img = document.getElementById('img1')

img.onmouseover = () => {
    img.style.width = (120 + "px")
    img.style.height = (120 + "px")
}
                                
img.onmouseout = () => {
    img.style.width = (100 + "px")
    img.style.height = (100 + "px")
}
Задание 6
Нарисовать цветную рамку произвольного стиля вокруг любого абзаца при двойном щелчке (событие dblclick) на абзац.
Решение
Html
<p id="paragraph1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
    Numquam harum cumque sunt voluptatibus laborum nesciunt suscipit 
    architecto perspiciatis delectus amet, omnis veniam, deserunt commodi 
    rerum hic dolorem sequi impedit perferendis dolore aperiam.
</p>
Java Script
document.getElementById('paragraph1').ondblclick = () => {
    document.getElementById('paragraph1').style.border = '1vh solid lightblue'
}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam harum cumque sunt voluptatibus laborum nesciunt suscipit architecto perspiciatis delectus amet, omnis veniam, deserunt commodi rerum hic dolorem sequi impedit perferendis dolore aperiam. Ex nesciunt aliquid, dolorem necessitatibus, voluptatum exercitationem illum incidunt molestias quis modi optio alias vitae fugiat illo perspiciatis minima accusantium harum culpa veritatis a, fuga eos. Reprehenderit nesciunt nobis iure autem ullam quod necessitatibus eveniet qui blanditiis, ab doloremque itaque iusto voluptates voluptate, rerum veritatis minima vitae, fuga impedit fugit? Architecto sed aliquam maiores non, corrupti natus incidunt aut aliquid exercitationem nam. Iste molestiae excepturi ea unde vel.