☭DEVELOPER/#2 웹개발(자바기반 풀스택)

[JAVASCRIPT] 4. 마우스 오버 효과

조반짝 2023. 6. 23. 16:07
728x90
반응형

01 e.preventDefault()

a태그 링크를 걸리지만 기본 명령어를 무시하고 원하는 명령어를 넣어보기

e.preventDefault(); 기존 명령어를 삭제함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            font-size: 30px;
            color: #333;
            text-decoration: none;
            background-color: blueviolet;
            width: 120px;
            height: 50px;
            display: block;
            color: #fff;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <a href="https://www.naver.com/" target="_blank">네이버</a>
    <script>
        const link = document.querySelector("a");
        // querySelector 하나만 선택

        //link에 클릭이벤트 넣기
        link.addEventListener("click",function(e){
            // link.addEventListener("click",()=>{};) 위에 함수랑 똑같이 사용가능
            e.preventDefault();
            console.log("이벤트를 없애셨군요");
        });
        
            
    </script>
</body>
</html>

02 마우스 오버 효과

● mouseenter :  = mouse hover

박스 핑크로 변했다가 마우스 떼면 아쿠아색으로 바꿔주기

scale 키웠다가 원래 크기로 변경해주기

같은 방법(너비 높이 값 지정)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스 오버효과와 마우스 아웃 효과 이벤트</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        const box = document.querySelector("#box");

        box.addEventListener("mouseenter",function(){
            box.style.backgroundColor = "hotpink";
            box.style.transition = "all 0.5s";
            box.style.width = "400px";
            box.style.height = "400px";
        });
        box.addEventListener("mouseleave",()=>{
            box.style.backgroundColor = "aqua";
            box.style.width = "200px";
            box.style.height = "200px";
        });
        // box.addEventListener("mouseenter",function(){
        //     box.style.transform = "scale(2)";
        // });
        // box.addEventListener("mouseleave",()=>{
        //     box.style.transform = "scale(1)";
        // });


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

 

03 반복된 요소에 이벤트 한꺼번에 연결하기

● querySelectorAll 요소를 한꺼번에 지정

let : 변하는 값 

e.preventDefalut(); 기본으로 갖고있는 명령어를 멈춤

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복된 요소에 이벤트 한꺼번에 연결하기</title>
</head>
<body>
    <ul class="list">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li><a href="#">item4</a></li>
    </ul>

    <script>
        const List = document.querySelectorAll(".list li");
        //querySelectorAll 요소 한꺼번에 지정
        for(let el of List){
            el.addEventListener("click",function(e){
                e.preventDefault();
                //기본으로 갖고있는 명령어를 멈춤
                console.log(e.currentTarget.innerText)
                //target => e.currentTarget
                //.innerText : 선택한 선택자의 텍스트를 불러오는 명령어(li 안에 있는 텍스트 값을 가져오겠다.)
            });
        }
        //for()문 => 반복문 if()문 => 조건문
    </script>
</body>
</html>

04 클릭이벤트를 발생할 때 증가, 감소하는 프로그램

1씩 증가

1씩 감소

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클릭이벤트를 발생할 때 증가, 감소하는 포로그램</title>
    <style>
        a{
            text-decoration: none;
            background-color: black;
            width: 50px;
            height: 50px;
            display: inline-block;
            color: white;
            font-size: 20px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <a href="#" class="btnPlus">증가</a>
    <a href="#" class="btnMinus">감소</a>

    <script>
        //변수 지정
        const btnPlus = document.querySelector(".btnPlus")
        const btnMinus = document.querySelector(".btnMinus")
        //let 변하는 값 지정
        let count = 0;
        
        //btnPlus를 클릭했을 때
        btnPlus.addEventListener("click",(e)=>{
            e.preventDefault();
            // count = count + 1;
            count++; //1씩 증가
            console.log(count);
        });

        //btnMinus를 클릭했을 때]
        btnMinus.addEventListener("click",(e)=>{
            e.preventDefault();
            count--; //1씩 감소
            console.log(count)
        });

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

05 박스 돌리기

a태그 영역 지정

#box 편집

왼쪽으로 회전

오른쪽으로 회전

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클릭 시 사각형 회전하기</title>
    <style>
        a{
            width: 150px;
            height: 50px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            color: #fff;
            text-decoration: none;
            margin-top: 50px;
        }
        #box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <a href="#" class="btnLeft">왼쪽으로 회전</a>
    <a href="#" class="btnRight">오른쪽으로 회전</a>

    <div id="box"></div>

    <script>
        const btnLeft = document.querySelector(".btnLeft");
        const btnRight = document.querySelector(".btnRight");
        const box = document.querySelector("#box");
        let count = 0; //1씩 증가하고 1씩 감소하기 위한 변수 값
        const deg = 45; //45도씩 회전하기  위한 변수값
        // 45도 증가

        btnLeft.addEventListener("click",(e)=>{
            e.preventDefault();
            count--;
            box.style.transform = `rotate(${count * deg}deg)`;
        });
        btnRight.addEventListener("click",(e)=>{
            e.preventDefault();
            count++;
            box.style.transform = `rotate(${count * deg}deg)`;
        });


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

06 백틱 넣어주기 

myName 안에 이름이 들어가야한다.

백키 넣어주기

' , " 괄호안에 있는 값을 그대로 출력함

` 은 변수안에 있는 값을 대신 출력함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const myName = "나이름";
        console.log(`내이름은 ${myName} 입니다.`)
    </script>
</body>
</html>

 

728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 48_Parallax  (0) 2023.06.26
비주얼 스튜디오 코드 47_ 반응형 레이아웃  (0) 2023.06.26
비주얼 스튜디오 코드 46_ flex  (0) 2023.06.23
비주얼 스튜디오 코드 45_웹표준) 컨텐츠  (0) 2023.06.23
[JAVASCRIPT] 자바스크립트 이벤트 연결하기  (0) 2023.06.22

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글[JAVASCRIPT] 4. 마우스 오버 효과

관련글

티스토리툴바