Java Script

Цель работы

Ознакомиться с возможностями jQuery для создания графических и визуальных эффектов и анимации.

Задания

Задание

Выполните задания предыдущих лабораторных работ №8 и №9 с использованием jQuery.

Лабораторная работа №8

Задание 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>

jQuery

$('span').mouseover(() => { 
    $('span').css('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>

jQuery

$('span').click(() => { 
    $('span').css('font-size','5vh')
})

Задание 3

Создать программу на JS замены картинки на другую при щелчке мышью с помощью метода getElementById и свойства src.

Решение

Html

<img id="img1" src="html.svg">

jQuery

$('#img1').click(() => {
    $('#img1').attr('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

$('#paragraph1').click(() => {
    $('#paragraph1').html('<img src="java-script.svg">')
})

Задание 5

Создать эффекты увеличения размера рисунка (свойство width) при наведении на него курсора мыши и возврата к первоначальному размеру при уходе курсора с рисунка (событие onmouseout).

Решение

Html

<img id="img1" src="html.svg">

Java Script

$('#img1').mouseover(() => {
    $('#img1').css({
        width: '6vh',
        height: '6vh'
    })
})
                            
$('#img1').mouseout(() => {
    $('#img1').css({
        width: '4vh',
        height: '4vh'
    })
})

Задание 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

$('#paragraph1').dblclick(() => {
    $('#paragraph1').css('border', '0.5vh 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.

Лабораторная работа №9

Задание 1

Создать программу на JS, позволяющую перетащить мышью область текста и картинку.

Решение

Html

<img id="img1" src="java-script.svg">
<textarea id="text1">Lorem ipsum</textarea>

Java Script

// для изображения
const img = $('#img1')
let canMoveImg = false

img.mousedown(() => dragImg())
                        
function dragImg() {
    canMoveImg = true
}
                                                                
img.on('mousemove', e => {
    if(canMoveImg){
        img.css('top', `${e.pageY - 50}px`)
        img.css('left', `${e.pageX - 50}px`)
    }
})
                                                                
img.mouseup(() => canMoveImg = false)
                        
// для текстовой области
const text = $('#text1')
let canMoveText = false

text.mousedown(() => dragText())
                        
function dragText() {
    canMoveText = true
}
                                                                
text.on('mousemove', e => {
    if(canMoveText){
        text.css('top', `${e.pageY - 50}px`)
        text.css('left', `${e.pageX - 50}px`)
    }
})
                                                                
text.mouseup(() => canMoveText = false)

Выполнить код

Задание 2

Создать программу на JS, организующую движение картинки по прямой линии.

Решение

Html

<img id="img1" src="java-script.svg">

Java Script

$('#img1').click(() => {
    $("#img1").animate({left: "+=200"}, 1000)
})

Задание 3

Создать программу на JS, организующую движение картинки по кривой линии и возврат ее в исходное состояние.

Решение

Html

<img id="img1" src="java-script.svg">

Java Script

$('#img1').click(() => {
    let id = $('#img1')
    let x = 0
    let z = 400
    let interval = setInterval(move, 1)
                            
    function move(){
        if(x >= 400){
            z--
            id.animate({
                top: Math.sqrt(100*z) + 'px',
                left: z + 'px'
            }, 1)
                                        
            if(z == 0)
                clearInterval(interval)
        }
        else{
            x++
            id.animate({
                top: Math.sqrt(100*x) + 'px',
                left: x + 'px'
            }, 1)
        }
    }
})

Задание 4, Задание 5*

Нарисовать график функции, выбрав функцию с помощью радио кнопки (y=x², y=x³, y=sin(x), y=cos(x)).
Реализовать выбор цвета графика функции с помощью списка.

Решение

Html

<input type="radio" name="graph" id="square" value="1"> y = x²
<input type="radio" name="graph" value="2"> y = x³
<input type="radio" name="graph" value="3"> y = sin(x)
<input type="radio" name="graph" value="4"> y = cos(x)
Выбрать цвет графика<input type="color" class="graphColor">
<input id="print" type="button" value="Принять">

Java Script

$('#print').click(() => {
    let color = $('.graphColor').val()
                            
    let graph = $('[name="graph"]')
    for(let i = 0; i < graph.length; i++)
        if(graph[i].checked)
            graph = graph[i].value
                            
    let x = 0, z
    let interval = setInterval(move, 1)
                            
    function move(){
        if(x < 100){
            x++
            let functions = new Array(
                Math.pow(x,2),
                Math.pow(x,3),
                Math.sin(x),
                Math.cos(x),
            )
                                
            let exprY = functions[Number.parseInt(graph) - 1]

            $("<span/>",{
                "style": {
                    'position: absolute; top:' + exprY 
                    + 'px; left: ' + x + 'px; width: 5px; height: 5px;'
                    + 'border-radius: 50%; background:' + color + ';'
                }
            }).appendTo("#wrap")
        }
        else
            clearInterval(interval)
}

Выполнить код

Задание 6

Создайте меню, используя средства HTML/CSS/JS.

Решение

Html

<div class="menu-temp">
    <div class="item">
        <span class="item-title">Пункт 1</span>
        <div class="sub-menu">
            <span class="sub-item">Подпункт 1</span>
            <span class="sub-item">Подпункт 2</span>
            <span class="sub-item">Подпункт 3</span>
        </div>
    </div>

    <div class="item">
        <span class="item-title">Пункт 2</span>
        <div class="sub-menu">
            <span class="sub-item">Подпункт 1</span>
            <span class="sub-item">Подпункт 2</span>
            <span class="sub-item">Подпункт 3</span>
        </div>
    </div>
                                
    <div class="item">
        <span class="item-title">Пункт 3</span>
        <div class="sub-menu">
            <span class="sub-item">Подпункт 1</span>
            <span class="sub-item">Подпункт 2</span>
            <span class="sub-item">Подпункт 3</span>
        </div>
    </div>
</div>

CSS

.menu-temp{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}
                            
.menu-temp span{
    padding: 1vh 1vw;
}
                            
.item{
    display: flex;
    flex-direction: column;
    position: relative;
}
                            
.item-title{
    text-align: center;
    width: 10vw;
    border-left: 1px solid #00000049;
    border-right: 1px solid #00000049;
    transition: background-color .21s ease-in-out;
}
                            
.item:hover .item-title{
    background-color: #00000004;
    transition: background-color .17s ease-in-out;
}
                            
.sub-menu{
    display: flex;
    overflow: hidden;
    height: 0;
    opacity: 0;
    flex-direction: column;
    transition: all .31s ease;
}
                            
.sub-item{
    text-align: center;
    width: calc(100% - 2vw);
    transition: background-color .21s ease-in-out;
}
                            
.sub-item:hover{
    background-color: #00000007;
    transition: background-color .17s ease-in-out
}

Java Script

let item = $('div#item')
for(let i = 0; i < item.length; i++){
    item.eq(i).children().eq(1).fadeOut(0)
    item.eq(i).on('mouseover', showMenu)
    item.eq(i).on('mouseout', hideMenu)
}
                        
function showMenu(){
    if(this.childElementCount > 1)
        $(this).children().eq(1).fadeIn(120)
    else
        return false
}
                        
function hideMenu(){
    if(this.childElementCount > 1)
        $(this).children().eq(1).fadeOut(120)
    else
        return false
}

Предыдущая лабораторная