75일차(3)
-
Day75 - [js]노드 클래스의 제어
이번에는 java script 를 사용해서 class 를 제어하는 법에 대해서 알아 봅시다. 노드 클래스의 제어 위의 버튼은 class 이름이 'btn' , id 이름이 'btn' 입니다. 그리고 이 버튼을 사용할 때 저희는 거의 document.getElementById("btn") 을 사용했죠? 그리고, 안에 속성 id , innerHTML , value , style 은 그냥 .id = "btn" 등으로 사용 했었습니다. 그런데, 생각해보면 btn.class = "btn" 이렇게 사용해본 적은 없죠? 실제로 아래와 같이 코드를 짜면 에러가 납니다. var btn = document.getElementById("btn"); btn.class = "btn"; 그 이유는, class 속성을 제어하는 이름..
2021.06.02 -
Day75 - [js]노드의 전체선택 , 선택삭제
이번에는 java script 를 이용해서 체크박스를 이용한 전체선택 및 선택삭제 에 대해서 알아 봅시다. 전체선택 위 그림에서, 왼쪽위를 누르면 아래의 체크박스에도 선택이 되도록 할 건데요 먼저, 틀을 만들어 줄게요 번호 이름 내용 1 홍길동 안뇽하세용~ 2 강감찬 안뇽하세용~ 3 홍길자 안뇽하세용~ 4 신사임당 안뇽하세용~ 5 이순신 안뇽하세용~ 방금 노드회전 할 때 알아본 함수들을 이용하면 됩니다. 전체선택 체크 박스를 클릭하면, 아래의 체크박스들을 가져와서, checked 속성을 true 로 바꿔주면 됩니다. 이 때, 만약 전체선택 체크 박스가 클릭되어 있는 경우에 다시한번 누른 경우인지 확인해서 if else 문으로 만들어 주면 됩니다. 선택삭제 위의 체크박스들이 선택되어 있는 행을 삭제할 건데..
2021.06.02 -
Day75 - [js]노드회전
이번에는 java script를 사용해서 노드가 회전하는 걸 만들어 봅시다. 노드회전 위와 같이 있을 때, 이동에 있는 버튼들을 클릭하면 버튼에 해당하는 위치로 이동하도록 만들어 볼거에요 먼저 테이블을 만들어 주세요. 이동 번호 이름 내용 ↑ ↓ 1 홍길동 안뇽하세용~ ↑ ↓ 2 강감찬 안뇽하세용~ ↑ ↓ 3 홍길자 안뇽하세용~ ↑ ↓ 4 신사임당 안뇽하세용~ ↑ ↓ 5 이순신 안뇽하세용~ 위와 같은 기능을 구현하려면, 안에 있는 의 위치를 변경해주면 되겠죠? 그러면 이제부터 노드를 회전시키기 위한 함수들을 알아 봅시다. parentElement : 순수한 부모요소(노드) parent : 부모요소(노드) text 포함 특정 태그(노드)에 접근해서 부모요소를 가지고오면 됩니다. 뒤에, Element가 붙는..
2021.06.02