[HTML,CSS,JS] 자바 스크립트 적용 및 유효성 검증

1. 메인 영역의 텍스트 타이핑 효과
2. 헤더 영역의 디자인 변경 효과
   -> 웹 브라우저 스크롤 시 헤더 영역에 새로운 클래스를 추가해 디자인을 변경
3. 스크롤 이동 효과
   -> 헤더 메뉴 클릭 시 페이지 내부의 다른 영역으로 부드럽게 스크롤 이동

</section>
    <script src="script.js">
        ...
    </script>
</body>
</html>

---

텍스트 타이핑 효과

main의 span 태그 내 backend-developer 텍스트 지움

const spanE1 = document.querySelector("main h2 span");

const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer',
'UX Designer', 'Back-End Developer'];

let index = 0;

/* 'w','e','b', '','P' ... 와 같은 형태로 쪼개짐*/
let currentTxt = txtArr[index].split("");

function writeTxt(){
    spanE1.textContent += currentTxt.shift();
    if(currentTxt.length !== 0){
        setTimeout(writeTxt, Math.floor(Math.random * 100));
    } else{
        currentTxt = spanE1.textContent.split("");
        setTimeout(deleteTxt, 3000);
    }
}
writeTxt();

배열의 요소를 앞에서부터 한개씩 출력
-> Array 객체의 shift()

shift() 메서드는 파괴적인 메서드로, 배열에서 맨 앞의 요소를 추출하고 추출한 요소를 원본 배열에서 삭제

currentTxt.length가 0이 아니라는 것은 아직 출력한 단어가 남아있다는 것
-> 이후 setTimeout 메서드로 일정 시간이 지난후 writeTxt()함수 다시 호출

else 문이 호출되었다는 건 결국 currentTxt 배열이 비었다는 뜻
-> 위의 경우 3초뒤 텍스트를 지우는 함수인 deleteTxt()함수(이후 구현) 호출

텍스트 삭제 효과

텍스트 삭제시에는 뒤에서부터 요소를 추출해 한 글자씩 줄어드는 것 처럼 구현

function deleteTxt(){
    currentTxt.pop();
    spanE1.textContent = currentTxt.join("");
    if(currentTxt.length !== 0){
        setTimeout(deleteTxt, Math.floor(Math.random() * 100));
    }else{
        index = (index+1) %txtArr.length;
        currentTxt = txtArr[index]. split("");
        writeTxt();
    }
}

작성한 코드 기준으로 currentTxt 변수에는 ['W', 'e', 'b', ' ', 'P', 'u', 'b', 'l' ,'i', 's', 'h', 'e', 'r']이 할당
-> pop 메서드를 통해 배열 요소를 끝에서 부터 한개씩 삭제

이후 join() 메서드로 현재 배열에 있는 요소를 하나의 문자열로 합침
-> Web Publishe 라는 문자열이 span 요소의 텍스트로 할당

값이 남아있다면 deleteTxt() 함수 호출
-> 다 삭제되면 else문 실행

텍스트 타이핑 효과 개선하기

텍스트 타이핑 효과는 나중에 사용자가 다시 호출할 일이 없는 코드
-> 즉시 실행 함수 형태로 코드를 감싸주면 작성한 코드 정리 가능

(function(){
    const spanE1 = document.querySelector("main h2 span");

    const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer',
    'UX Designer', 'Back-End Developer'];

    let index = 0;

    let currentTxt = txtArr[index].split("");

    function writeTxt(){
        spanE1.textContent += currentTxt.shift();
        if(currentTxt.length !== 0){
            setTimeout(writeTxt, Math.floor(Math.random() * 100));
        } else{
            currentTxt = spanE1.textContent.split("");
            setTimeout(deleteTxt, 3000);
        }
    }

    function deleteTxt(){
        currentTxt.pop();
        spanE1.textContent = currentTxt.join("");
        if(currentTxt.length !== 0){
            setTimeout(deleteTxt, Math.floor(Math.random() * 100));
        }else{
            index = (index+1) %txtArr.length;
            currentTxt = txtArr[index]. split("");
            writeTxt();
        }
    }
writeTxt();
})();

---

스크롤 이동 시 헤더 영역에 스타일 적용

헤더 영역 텍스트가 흰색이여서 스크롤을 내리다가 글씨가 흰색인 영역이나 배경이 흰색인 영역에서 헤더 영역이 잘 안보임
-> 헤더 영역에 새로운 클래스를 추가해서 웹 브라우저가 수직 방향으로 스크롤되면 스타일을 적용하는 방법으로 해결

header.active{
	background-color:rgba(0,0,0);
    animation:fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

script.js

const headerE1 = document.querySelector("header");
window.addEventListener('scroll', function(){
    const browerScrollY = window.pageYOffset;
    if(browerScrollY > 0){
        headerE1.classList.add("active");
    }else{
        headerE1.classList.remove("active");
    }
});

pageYOffset 값이 0보다 크면 스크롤 됐다고 판단후 if 문으로 active 클래스를 추가하거나 삭제
-> 위경우 스크롤 시 이벤트가 계속 발생

const headerE1 = document.querySelector("header");
window.addEventListener('scroll', function(){
    this.requestAnimationFrame(scrollCheck);
});
function scrollCheck(){
    let browerScrollY = window.scrollY ? window.scrollY : window.pageYOffset;
    if(browerScrollY > 0){
        headerE1.classList.add("active")
    }else{
        headerE1.classList.remove("active");
    }
}

---

애니메이션 이동 효과 구현하기

window 객체의 scrollTo() 메서드의 behavior 속성 사용 시 애니메이션 효과를 적용해 스크롤을 부드럽게 이동 가능

const animationMove = function(selector){
    /* selector 매개 변수로 이동할 대상 요소 노드 가져오기 */
    const targetE1 = document.querySelector(selector);

    /* 현재 웹 브라우저의 스크롤 정보 */
    const browserScrollY = window.pageYOffset;

    /* 이동할 대상 위치 (y값)*/
    const targetScrollY = targetE1.getBoundingClientRect().top + browserScrollY;

    /* 스크롤 이동 */
    window.scrollTo({top : targetScrollY, behavior:'smooth'});
};

<header>
        <div class = "container">
            <h1>
                <button data-animation-scroll = "true" data-target="#main">Aaron</button>
            </h1>
            <nav>
                <ul>
                    <li> <button data-animation-scroll="true" data-target="#about">About</button></li>
                    <li> <button data-animation-scroll="true" data-target="#features">Features</button></li>
                    <li> <button data-animation-scroll="true" data-target="#portfolio">Portfolio</button></li>
                    <li> <button data-animation-scroll="true" data-target="#contact">Contact</button></li>
                </ul>
            </nav>
        </div>
    </header>

스크롤 이동 연결

const scrollMoveE1 = document.querySelectorAll("[data-animation-scroll = 'true']");
for(let i = 0; i< scrollMoveE1.length; i++){
    scrollMoveE1[i].addEventListener('click', function(e){
        const target = this.dataset.target;
        animationMove(target);
    });
}

---

유효성 검증

HTML코드와 CSS 코드가 유효성에 적합한지 확인

HTML 유효성 검사 : https://validator.w3.org/#validate_by_input

CSS 유효성 검사 : https://jigsaw.w3.org/css-validator/#validate_by_input

프로젝트 완성본 git 주소 : https://github.com/wookjongkim/frontend_project1.git