Front-End Developer/JavaScript

event listener사용해서 로그인창 구현해보기

자바스크립트만 집중적으로 연습해보고 싶을 때에는 부트스트랩같은 라이브러리를 적극적으로 사용해야겠다. HTML과 CSS에 소모되는 시간을 없애준다. 다음에는 좀 더 복잡한 유효성 검사식을 추가해봐야지.

누구나 애니메이션 만드는 공식

애니메이션 만드는 공식 one-way 애니메이션을 만드는 공식을 알아보자. one-way 애니메이션이란? A→B처럼 한방향으로 흘러가는 애니메이션 예를들어 아래와 같은 경우가 있겠다. 투명도를 0 → 1 로 만들고싶을 때 margin left 10px → 300px font size가 15px → 30px 모든것은 세가지 기본단계의 원리만 알면 된다. 첫번째 시작스타일 최종스타일 을 CSS로 만들어놓는다. 두번째 자스로 내가 원할 때 최종스타일로 변하라고 코드를 짠다 세번째 시작스타일에 transition을 추가한다. 예제 1 모달창이 toggle 될 때 transition 주기 첫번째 단계 시작스타일 만들기 .black-bg { visibility: hidden; opacity: 0; } 최종스타일 만..

함수: 기본중의 기본 정리하기

함수의 기본 함수는 사용을 위해 만들어놓는 것이고, 누군가 호출하지 않으면 아무일도 일어나지 않는다. function add(a,b){ return a + b ; } const result = add(1,2) console.log(result); >3 함수의 이름을 함수를 잘 나타내줘야하고, 인자값은 무슨 타입인지 잘 나타내줘야 한다.(숫자인지? 스트링인지? 배열인지?) 함수와 이름과 인자값은 다 내가 지금 입력하는거다!! 숫자를 인자값으로 받아올때는 보통 a,b라고 쓴다. function myName(firstName, lastName) { return `제 이름은 ${firstName}${lastName} 입니다.`; } let yourName = myName('허', '지현'); console.lo..

preventDefault속성으로 우클릭 제어하기

오른쪽 클릭을 막고싶을 땐 'contextmenu'라는 이벤트가 생길 때 preventDefault속성값을 넣어주면 된다. contextmenu란 일반적으로 유저와의 상호작용에서 생겨나는 메뉴창같은 것을 칭하고, 대표적으로 '오른쪽 클릭' 이 그것이다. https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event Element: contextmenu event - Web APIs | MDN The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse ..

(DOM)click이벤트로 HTML요소 텍스트와 CSS스타일 변경하기

const radioRow = document.querySelector('#cheat0-option1'); const radioRowReverse = document.querySelector('#cheat0-option2'); const radioColumn = document.querySelector('#cheat0-option3'); const radioColumReverse = document.querySelector('#cheat0-option4'); const flexDirection = document.querySelector('.day'); const dayBox = document.querySelector('.cheat0'); radioRow.addEventListener('click', ..

하드코드->forEach->이벤트 위임 [점점 나아지는 코드 맛보기]

버튼이 클릭될 때 마다 해당색깔로 상자의 background color가 변화되게 해보자. 전제조건 버튼을 다시 클릭하면 색깔이 없어져야한다. const colorBox = document.querySelector('.color'); const buttons = document.querySelector('.buttons'); buttons.addEventListener('click', (e) => { if (e.target.className === 'red-button') { colorBox.style.backgroundColor = 'red'; } else if (e.target.className === 'yellow-button') { colorBox.style.backgroundColor = 'ye..