이번에는 java script 의 location , history , navigator 에 대해서 알아 봅시다. location location 은 페이지를 넘기는데 사용 됩니다. 대표적으로 location.href = " 이동할 페이지 " 를 사용하죠 이동할 페이지는, 내가 만든 문서도 가능하고, 구글, 네이버, 다음 처럼 이미 다른사람이 만들어 놓은 곳도 가능합니다. location.reload 는 페이지의 새로 고침을 의미 합니다. ※ 주의 : 새로고침을 마구잡이로 사용하면 안됌 history history 는 java script 의 기록을 의미합니다. location.go(-1) 을 하면, 뒤로가기를 의미 합니다. ※ 주의 : 브라우저 창에서 1번이라도 이동을 해야 뒤로 갈 수 있습니다 loc..

이번에는 java script 를 이용해서, 설정한 시간이 지나면 자동 실행되는 함수. setTimeout . 실행할 함수를 넣는 곳에 매개변수를 전달하는 방법을 알아 봅시다. 타임아웃 타임아웃은 특정시간 뒤에 실행되는 함수입니다. setTimeout( 실행할함수, 시간설정(밀리초) ) 를 사용합니다. 중단은, setTimeout 을 설정할 때 앞에 변수를 사용해주고, 뒤에서 clearTimeout( 중단할Timeout ) 을 사용합니다. clearTimeout 을 만나는 순간, 설정한 Timeout 이 중단되기 때문에, 특정 조건 ex) if문 , 버튼 클릭 등에 사용합니다. 이 전 글에서 본 Interval 과 비슷하죠? 매개변수 넣기 자 그러면, setTimeout 안에 실행할함수에 매개변수를 넣어..

이번에는 java script 를 이용해서 팝업을 띄우는 방법 과, 인터벌 ( 일정 주기로 실행되는 함수 ) 에 대해서 알아 봅시다. 팝업 팝업은, 특정 주소로 새로운 브라우저 창을 열어주는 것을 의미 합니다. window.popup 을 사용하면 됩니다. 특정 버튼을 클릭 했을 때, 특정 태그를 클릭 했을 때 등등 .... 원하는 페이지를 팝업으로 띄워주면 됩니다. 팝업을 띄워줄 때, width(넓이), heigth(높이), 위치 (left, top) 을 설정할 수 있습니다. 이미 존재하고 있는 페이지가 아닌, 내가 만들은 파일을 띄우고 싶다면, 경로를 적어주면 됩니다. 만약, 새로운 창을 열고, 현재 창을 닫고 싶다면 이어서 window.close() 를 써주면 됩니다. 팝업에 대해서는 이 정도면 알면..

이번에는 java script 의 form 객체 와 날짜 에 대해서 알아 봅시다. form 객체 form 객체는 DOM 의 하위에 있습니다. form 태그에 name 을 주면 document.form이름 으로 접근이 가능합니다. 그리고, form 안에 있는 요소들 ex) input 태그 에 접근 할 때는, 가져오고싶은 태그에 name을 작성한 뒤, 위에서 가져온 form 에 . name을 붙여서 접근할 수 있습니다. ※ console.log 를 사용한 것은, 원하는 태그가 가져와 졌는지 확인하기 위해서. 이런 form 객체를 이용해서, 아이디, 비밀번호, 이메일 등의 유효성을 검사 합니다. 유효성을 검사할 때는, 정규식표현법.test(검사할값) 을 사용합니다. 예제. 정규식 표현법은 찾아보면 많이 나오기..

이번에는 java script의 이벤트를 중단하는 방법과 dataset 에 대해서 알아 본 후, 토글탭을 만들어 봅시다. 이벤트중단 기존 태그가 가지고 있는 이벤트를 제거하기 위해서는, event.preventDefault() 를 사용하면 됩니다. 여기서 말하는 태그가 가지고 있는 이벤트란, 예를 들면 태그를 클릭했을 때, 페이지가 이동되는 것을 뜻 합니다. 태그가 이렇게 있을 때, 클릭했을 경우, 바로 해당 페이지로 넘어가는게 아니라, 여기서 뭔가 작업을 처리하고 정해진 곳으로 넘어가야 한다면, 부모에 해당하는 에 click 이벤트를 주고 event.preDefault() 를 사용합니다. dataset dataset 은, 태그에 데이터를 가지고 있도록 해주는 속성 입니다. 태그에 data-이름="값" ..

이번에는 java script 의 여러개의 버튼이 있을 때, 이벤트위임을 어떻게 활용하는지 알아 봅시다. 여러개의 버튼 이벤트 위임 작용 위처럼, 버튼이 하나가 아니라 여러개일 경우를 생각해 봅시다. 이벤트 위임을 사용하기 위해서는 해당 버튼들을 모두 자식으로 가지고 있는 최상위 부모 section 에 이벤트를 걸어주면 되겠죠? 그런데, section 에 이벤트를 걸고보니까, 버튼이 여러개에요 이럴 경우에는, if 문을 사용해서 어떤 버튼 인지 구분해주면 됩니다. 바로 classList 의 contains 함수를 사용합니다. 그러면 서로 다른 className 을 가지고 있는 버튼을 구분할 수 있겠죠? 이 외에, 도 이벤트 위임 이 되고 있으니, 원하는 버튼 외에는 작동하지 않도록 esle 에 retur..