728x90 전체 글156 [vsCode] visual studio code에서 코드 자동 정렬 하기 비주얼 스튜디오 코드(Visual Studio Code)에서 코드 자동 정렬하기 1. Window : Ctrl + K + F 2. Mac : Command(⌘) + K + F 샘플 예제 ↓ 2021. 2. 1. [Javascript] 부모 태그 찾기 .parentElement 자바스크립트에서 부모 태그 찾기 - 기준태그.parentElement 샘플 예제 ↓ [HTML] - 제목 내용 1 title1 content1 2 title2 content2 3 title3 content3 [Javascript] var tbody = document.querySelector('section>table>tbody'); var totalCheck = document.querySelector('#total-check'); //상단 checkbox 체크시 전체 체크박스 체크 및 해제! totalCheck.addEventListener('click',e=>{ var checkboxList = document.querySelectorAll('.checkbox-class'); checkboxList.. 2021. 1. 31. [Javascript] 노드의 이름 nodeName 자바스크립트에서 자신 (노드 / 엘리먼트 / 태그명) 알아내기 - 기준태그.nodeName (결과 : 자신의 대문자 태그명) 부모 (노드 / 엘리먼트 / 태그명) 알아내기 - 기준태그.parentElement.nodeName (결과 : 부모의 대문자 태그명) 샘플 예제 ↓ //기준 태그를 input태그로 정하기로 한다. 1. 자신의 태그 이름 알아내기 //기준 엘리먼트 SELECT let exam_element = document.querySelector('#example-element'); console.log(exam_element.nodeName); 결과 : INPUT 2. 부모의 태그 이름 알아내기 //기준 엘리먼트 SELECT let exam_element = document.querySelec.. 2021. 1. 31. [Javascript] ClassList .contains/.add/.remove/.toggle 자바스크립트에서 특정 태그내 1. 여러개의 클래스 명 가져오기 - 태그명.classList (반환값 : 리스트로 반환 ['클래스1','클래스2','클래스3',value : '클래스1 클래스2 클래스3']) 2. 클래스 리스트 중 포함여부 확인 - 태그명.classList.contains(찾는 클래스명) (반환값 : true, false) 3. 클래스 추가 - 태그명.classList.add(추가할 클래스명) (반환값 : 없음) 4. 클래스 삭제 - 태그명.classList.remove(삭제할 클래스명) (반환값 : 없음) 5. 클래스 토글 - 태그명.classList.toggle(없으면 추가, 있으면 삭제할 클래스명) (반환값 : true, false) 샘플 예제 ↓ Javascript ClassList.. 2021. 1. 31. [Javascript] 이벤트 Event 웹 개발을 하다보면 부모 엘리먼트 내에 여러개의 버튼을 포함해야 하는 경우가 많다. 물론 모든 버튼에 각각 클릭 이벤트 따로 할당하여 서로 다른 기능을 아래의 예제와 같이 각각 부여해도 원하는 기능을 구현할순 있지만, 저얼~~~때 좋은 방법은 아니다. //엘리먼트 각각의 이벤트 설정 그러면 각각의 엘리먼트에 이벤트를 할당하지 않고, 어떻게 여러개의 버튼을 한개의 이벤트 내에 할당할수 있을까? 바로 아래 예제와 같이 부모엘리먼트에 이벤트를 할당하는 것이다. //부모 엘리먼트를 통한 이벤트 할당 아래 그림을 보면, 버튼이라는 엘리먼트를 감싸고 있는 부모 엘리먼트를 그림으로 만들어 보았다. 즉, 사용자가 버튼을 클릭시, button-> li -> ul -> section -> body -> html 순으로 이.. 2021. 1. 31. [Javascript] Wrapping Class (래핑 클래스) 자바스크립트에서는 변수 선언을 할때 자료형을 지정하지 않는다. 왜냐하면 자바스크립트에서는 모든 변수가 참조형이기 때문이다. var num1 = 10; var num2 = new Number(10); 위 예제에서 num1과 num2는 선언 방법이 다를뿐 같은 데이터를 초기화 하고있다. 즉, 10이라는 데이터의 공간을 만들고, 10이라는 데이터의 공간의 이름을 num1이라고 부르는 것이다. var str1 = '문자열'; var str2 = new String('문자열'); 마찬가지로 str1 과 str2 또한 같은 문자열 데이터를 초기화 하고 있다. 아래와 같이 함수도 가능하긴 하지만, 잘 사용하지는 않는다. var sum1 = function(a,b){ return a+b; }; var sum2 = ne.. 2021. 1. 29. 이전 1 ··· 13 14 15 16 다음 728x90
