쥰's 블로그

Element를 CRUD 해볼 것이다. 우선 입력할 창을 만들어 입력한 값을 받아온다. 이번에는 입력한 값을 출력하는 노드를 생성한다. 입력누르면 div태그가 늘어남 값을 넣으면 넣은 값들이 밑에 출력되면서 입력창은 초기화 된다. 넣을 때 마다 class가 추가된다. apppend는 나중에 친 값이 맨 밑에 출력되지만 ( containerEl.appendChild(divEl); ) prepend는 나중에 친 값이 맨 위로 출력되도록 한다. ( containerEl.prependChild(divEl); ) 휴지통을 클릭하면 삭제되는 것을 해볼 것이다. 구글아이콘에 들어가 delete 아이콘을 가져왔다. 그리고..

마우스를 올렸을 때 클래스가 추가 되는 것을 해볼 것이다. 마우스를 버튼에 올리거나 내릴 때 콘솔 창에 출력된다. 마우스를 올리면 클래스가 추가 되는 것을 볼 수 있다.

form을 검색해보는 코드를 짤 것이다. ● 모든 FORM 찾기 ● 개별 form 접근 ● 개별 form 내의 요소 접근 콘솔창에서 커서를 올리면 이렇게 배열의 위치가 나타나게 된다. form 안에 값을 적을 수도 있다. ● name 부여 후 form 내의 요소 접근 폼에 이름을 부여하게 되면 doucument.forms 가 아닌 document.joinForm(document.이름)으로 가능하다. 이렇게 배열로 사용하는 것도 가능하지만 input에 name을 붙여도 가능하다

먼저 리스트를 만들어서 적용해 본다. ● getElementById('id') .getElement 는 하나의 요소 찾고 .getElements는 여러 요소 찾는다. ● querySelector('selector') 밑에 다른 스타일을 추가해본다. ● querySelectorAll 글자색에 스타일을 줘봤다. ● getElementsByTagName - for in 문 사용 인덱스 번호를 볼 수 있음 - for of 문 사용 ● Array.from() - 배열함수 사용형태로 변환 왠만하면 이 두개로 노드 검색이 다 된다. - document.querySelector - document.querySelectorAll

● WINDOW_RESIZE 윈도우 화면을 줄이면 resize됐다는 출력이 나온다. 윈도우 화면의 길이를 나타내준다. ● window.innerWidth : 브라우저 윈도우 두께를 제외한 실질적 가로 너비 ● window.outerWidth : 브라우저 윈도우 두께를 포함한 전체 가로 너비 이번에는 공하나를 만들어준다. 이 공을 화면의 크기에 맞게 바뀌는 코드를 작성해 볼 것이다. ● DOMContentLoaded DOMContentLoaded 이벤트는 웹 페이지의 모든 요소들이 로드되어 화면에 표시될 준비가 되었을 때 발생하며 이미지, 외부 CSS 등의 리소스는 여전히 로딩 중일 수 있다. 따라서 보다 빠른 동작을 원할 때 이 이벤트를 사용할 수 있다. DOMContentLoaded 는 반드시 docu..

● SCROLL 스크롤을 내리면 콘솔창에 스크롤이 움직였다고 출력된다. 이렇게 가로, 세로 스크롤을 움직이면 정보가 나오게 된다. - 가로 스크롤 움직였을 때 -세로 스크롤 움직였을 때 window.scrollX - 현재 문서의 수평 스크롤 위치 - 뷰포트에서 가장 왼쪽 부분의 가로축 위치를 기준 - 스크롤이 오른쪽으로 이동할수록 값 증가 window.scrollY - 현재 문서의 수직 스크롤 위치 - 뷰포트에서 가장 위쪽 부분의 세로축 위치를 기준 - 스크롤이 아래쪽으로 이동할수록 값 증가 - 현재 스크롤 위치 알기 이렇게 하면 현재 스크롤의 위치를 알 수 있다. (쓰노틀링 처리를 하지 않으면 많은 양의 값이 출력된다.) - 전체 스크롤 높이 값 전체 스크롤 높이 값을 알 수 있다.

● CHECK EVENT 상태변화가 일어날때 체인지로 나타나게 된다. 체크됐을 때 true로 되어 있는 것을 볼 수 있다. 이번에는 체크상태를 출력하는 코드를 만들어 본다. - 체크했을 때 - 체크 해지 했을 때

● KEYUP 키를 누르다가 뗐을 때 이벤트를 감지하는 코드이다. 누른 키가 출력되는 코드이다. console.log('keyup...', event.keycode); 를 추가하면 입력한 값을 콘솔에 출력하도록 할 수 있다. 단점은 영문의 대문자와 소문자를 구별하지 못한다는 것이다. 이렇게 입력하면 대문자 A의 숫자만 나오고 소문자와 구별하지 못하며 shift도 같이 출력되는 것을 볼 수 있다. 이번에는 입력한 값의 숫자를 바로 나타내는 방법이다. ● keydown 키를 눌렀을때 이벤트 발생한다. keydown 역시 대소문자를 구분하지 못한다. ● keypress keypress는 대소문자를 구별하며 shift를 기능적인 부분으로 인식하지 않아 대소문자로 구별 가능하다. 이번에는 애니메이션에 keydow..

● 마우스 클릭시 이벤트 처리 d1tg.addEventListener('이벤트종류', function(){}) 는 이벤트감지 코드이다. 네모 칸을 클릭하면 클릭 카운트를 나타내도록 코딩해봤다. 네모를 클릭한 뒤 test1을 클릭하게 되면 연결된 네이버 페이지로 넘어가면서 새로고침이 된다. 즉, 작업을 하다가 날라갈 수 있기 때문에 javascript:void(0) 으로 막아 놓아야 한다. javascript:void(0) 했을 시 새로고침 안됨 두번째로 버튼 태그인 btn1에 alert을 넣어 놓고 스크립트 태그안인 btn1tg에 alert을 넣었을 경우 우선순위는 버튼태그의 alert을 먼저 실행한 뒤 스크립트안의 alert이 실행 되는 것을 볼 수 있다. < 스크립트 안의..

콜백함수(call back) 함수를 호출하는 시점이 바뀌어진 형태의 함수 기존방식 : 사용자(개발자)가 함수를 직접정의 -> 정의된 함수를 호출(call)하여 결과를 반환받는 방식 CallBack : 콜백함수의 인자로 수행로직(()=>{}, function(){})을 전달하여 콜백함수로부터 처리된 결과를 반환받는 형태 CallBackFunc(func, n1, n2) { func(n1,n2){ n1,n2 } } 로직을 function callbackFunc(n1,n2,func)의 'func'이 받음 여기서 로직은 '이렇게 처리해주세요~' 하는 것 ( const r1 = callbackFunc(20,4,sum); ) 을 말한다. - 배열함수 사용 위 배열들을 오름차순으로 정렬하는 것을 추가해본다. 먼저 버블..