[JS] 버튼 클릭했을떄, 스크롤 하기(feat.정규표현식(Regular Expression)
0
📌 버튼 클릭했을떄, 스크롤 하기
📌 이메일이 입력이 되어 있는지 확인
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button#test{ position: fixed; top: 100px; left: 100px; } </style> </head> <body> <button id="test" onclick="f1()">click me</button> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1 id="target">다른내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <h1>내용</h1> <input id="email" type="text"/> <p>필수 입력 값입니다</p> <button onclick="register()">회원가입</button> <script> const register = ()=>{ // 이메일이 입력이 되어 있는지 확인 let emailReg = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; let emailInput = document.querySelector('#email'); console.log(emailInput.value); let emailErrP = document.querySelector('p'); if(emailInput.value === ''){ emailErrP.textContent = '이메일은 필수 입력 값입니다.'; emailErrP.style.color = 'red'; emailErrP.style.display = 'block'; }else if(emailInput.value.length <= 6){ // 6글자 이하일때 실행됨 emailInput.value = ''; emailInput.focus(); emailErrP.textContent = '6글자보다 더 많이 입력해야 합니다.' emailErrP.style.color = 'red'; emailErrP.style.display = 'block'; }else if(!emailReg.test(emailInput.value)){ // 이메일패턴과 사용자가 입력한 패턴이 일치하지 않을 때 emailInput.value = ''; emailInput.focus(); emailErrP.textContent='이메일 양식을 입력해 주세요'; emailErrP.style.color = 'red'; emailErrP.style.display = 'block'; }else{ emailErrP.textContent = '멋진 아이디 이네요!'; emailErrP.style.color = 'green'; emailErrP.style.display = 'block'; } } const f1 = ()=>{ console.log('실행됨'); let target = document.querySelector('#target'); console.log([target]); scrollTo({left:0, top:target.offsetTop, behavior:"smooth"}); } </script> </body> </html>
📌 각각 인자로
x, y값을 줘도 되고,{left : x, top:y, behavior: 'smooth' | 'instant' | 'auto'}를 한번에
객체로 담아서 줘도 된다
✏️
scrollTo()
절대적인 위치로 이동
✏️scrollBy()
상대적인 위치로 이동
index.html
<div onclick="moveToMySkills()" class="icon-btn"> <img src="../images/arrow-down-sign-to-navigate.png" /> </div>
<section id="skills"> <div id="skills-wrap"> <div id="skills-txt"> <h2> My Skills </h2> </div> <div id="skills-content"> <img src="../images/html-5.png" alt="" /> <img src="../images/css.png" alt="" /> <img src="../images/java-script.png" alt="" /> </div> </div> </section>
index.jsconst moveToMySkills = ()=>{ let skills = document.querySelector('#skills'); // skills.offsetTop에 위치가 들어있다. scrollTo({left:0, top:skills.offsetTop, behavior:'smooth'}); }
📌 정규표현식(Regular Expression)
- 문자열이
특정 패턴의문자열인지판단할 때 사용하는 방법.특정한 조건의 문자를'검색'하거나'치환'하는 과정을 매우 간편예를 들어 이메일, 휴대폰번호, 주민번호 ex) '010-1234-5678'(문자열로 저장해야한다)
❗️ 정규식은 / 문자로 감싸지며 내부에 정규문자 또는 메타문자가 위치하게 된다.
/패턴/ /tomato/ ex) 이메일 /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/✏️ 그떄그때 필요할때마다
이메일패턴 정규표현식또는패스월드 정규표현식검색하면서 사용하면됨
❗️ String 객체
- search() : 정규식 패턴과 대응하는 문자열의 인덱스를 반환한다. 없는 경우에는 -1을 반환한다.
- replace() : 정규식 패턴과 대응하는 문자열을 다른 문자열로 치환한다.
- split() : 정규식 패턴을 기준으로 전체 문자열을 나눈다.
나를위한 노트필기 📒🔎📝