클릭 이벤트를 직접 주는 방법을 설명하고자 한다. onClick(); Method 일반적으로 addEventListener를 많이 사용해서 함수를 호출 하는 경우도 많지만 굳이 그렇게 사용하지 않고 직접적으로 호출 할 수 있다. 다음처럼 버튼 안에다가 onClick="함수명()" 이렇게 선언해주면 자동으로 자바스크립트 내의 함수를 호출 시킨다. 정말 잘 작동 되는것을 확인 할 수 있다. 개발자 모드에 들어가서 확인해보면 당연하게 함수를 잘 호출 하고 있다. 그리고 input 에도 사용 할 수 있다. To be continue..

자바스크립트를 중간에 멈추게 만들고 싶으면 console.stop(); 다음 이벤트를 사용하면 된다. Method 다음처럼 아래에 새로 만들어질 요소들이 있는데, console.stop(); 을 만나게 되면 아래로 넘어가지 않고 멈추지게 된다. 이제 여기서 진짜 콘솔스탑이 들어오게 되면 다음과 같이 작동을 하게되고 바로 끝나게 되는 프로세스가 나타난다. 그러면 다음과 같이 버튼이 하나 없어진것을 확인 할 수 있다. To be continue..

바로 들어가자 Method 간략하게 설명을 해보자면 contains 란 녀석은... 맞으면 실행, 틀리면 실행하지마 이런 역할을 하는 속성을 지녔다. contains contains 의 경우 삼항연산자를 굳이 사용하지 않아도 된다. 다음 처럼 if 문을 사용하여도 상관은 없다. on이 없으니까 innerHTML 에서 off 를 띄우고 on이 생기니까 참 값이니 on이 생긴다. To be continue..

일단 classList 가 무엇인지 알아야겠다. Method classList의 특성은 읽기 기능의 특성이라고 보면된다. 사용가능한 속성으로는 add, remove, toggle 이 세가지가 있다. add는 class 를 추가 하는것 remove는 class 제거 하는 것 toggle은 추가 제거 하는 것. add 사용법은 간단하다. 다음 적어 놓을 부분을 유심히 보면 되겠다. 저렇게 사용하면 개발자 모드본 결과 newButton.classList.add(); 로 인해 class 안에 class1, class22, class55 요소가 생성 된 것을 확인 할 수 있다. revmove는 간단해서 생략하겠다. toogle 토글 기능은 말 그래도 추가 하였다가, 제거 하도록 하는 기능이다. this.class..

둘의 쓰임은 비슷한 것 같다. 검색해보니까 다음과 같이 나왔다. Method 다음 예시를 보면 확실하게 쓰임이 다르지 않을 것을 확인 해 볼 수 있다. 그런데 One key difference between these two methods is that the append method is available on all modern browsers, while the appendChild method is only available on older browsers. Therefore, if you want your code to be compatible with older browsers, you may want to use the appendChild method instead of the append..

일단 자바스크립트의 innerHTML 사용법에 대해서는 이제는 확실히 좀 와닿는것 같다. Method 우선 다음과 같이 테이블을 생성해주는 버튼 그리고 테이블 을 만들어준다. 테이블의 구조는 굳이 다 잡아줄 필요는 없다. 그냥 여기까지만 적어주어도 무방하다. 그리고 자바스크립트 파일에는 버튼을 인식시켜줄 객체를 하나 만들어준다. 나는 makeTable 이라고 하겠다. 그리고 함수를 하나 만들어준다. 사용방법은 다음에 한번에 설명해 두었다. 이렇게 적용시켜 놓으면 만든대로 잘 작동 시킬 수 있다. To be continue..