본문 바로가기
728x90

전체 글156

[Javascript] 다른 자바스크립트 파일 불러오기 Export / Import [자바스크립트] 다른 자바스크립트 파일 불러오기 Export / Import main.js에 play.js파일 불러오기 기본 형태 : Export //Export (내보내기) //상수, 변수, 클래스, 함수, 객체 가능 export (내보낼모듈명); //Exports (내보내기) //상수, 변수, 클래스, 함수, 객체 가능 exports (내보낼 모듈명1); exports (내보낼 모듈명2); exports (내보낼 모듈명2); 기본 형태 : Import //Import //한개 모듈 내보내기 했을 경우 import 내보낸모듈명 from '모듈의 절대 or 상대 경로'; //두개 모듈 이상 내보내기 했을 경우 import {모듈1, 모듈2 ...} from '모듈의 절대 or 상대 경로'; //모듈을 다.. 2021. 6. 7.
[Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() [자바스크립트 / Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() 기본 형태 //CSS Selector를 통해 엘리먼트 구분하기 //해당 엘리먼트와 셀렉터가 같다면 true | 다르다면 false 반환 element.matches(CSS Selector); : boolean 샘플 예제 결과 출력 2021. 6. 2.
[Javascript] 타이머 / 카운트다운 / 멈추기 setInterval / clearInterval [자바스크립트 / Javascript] 타이머 / 카운트 다운 / 멈추기 setInterval : 일정 시간 (millisecond) 마다 반복하여 함수 실행 clearInterval : 일정 시간 마다 반복되는 setInterval 실행 종료 기본 형태 //1000밀리세컨드 (1초) 마다 콜백함수 실행 let play = setInterval(콜백함수,1000); //play 멈추기 clearInterval(play); 샘플 예제 실행 결과 2021. 5. 27.
[Javascript] 이벤트 버블링 방지 stopImmediatePropagation [자바스크립트 / Javascript] 이벤트 버블링 방지 stopImmediatePropagation stopImmediatePropagation과 비슷한 역할을하는 stopPropagation이 있는데 이들은 비슷하면서도 다른 성격을 가지고 있다 stopPropagation 같은 경우에는 상위 관련 다른 모든 이벤트 버블링 차단 기능을 수행하고 stopImmediatePropagation 같은 경우에는 상위 및 현재 레벨에 걸려있는 관련 이벤트 모두 동작하지 않도록 중단하는 역할을 하는데 하단의 예제를 통해 자세히 알아보도록 하자 기본 형태 //이벤트 상위 전파 중단 event.stopPropagation(); //이벤트 상위, 현재 레벨에 걸린 다른 이벤트 또한 동작 중단 event.stopImme.. 2021. 5. 25.
[Javascript] 클래스 추가 / 삭제 / 포함 여부 확인 classList.(add/remove/contains) [자바스크립트 / Javascript] 클래스의 추가 / 삭제 / 포함 여부 확인 classList.(Add/Remove/contains) 기본 형태 //클래스 추가 element.classList.add(추가할 클래스); //클래스 삭제 element.classList.remove(삭제할 클래스); //클래스 포함 여부 확인 [포함시 : true | 미 포함시 : false 리턴] element.classList.contains(포함 여부 확인할 클래스); 샘플 예제 안녕하세요 메모를 메모하다 티스토리에 오신 것을 환영합니다 https://goodmemory.tistory.com 출력 결과 2021. 5. 24.
[Javascript] 자식 엘리먼트 / 노드 / 태그 추가 append [자바스크립트 / Javascript] 자식 엘리먼트 / 노드 / 태그 추가하기 .append() 기본 형태 //자식 노드 추가 부모노드.append(자식1,자식2,...); 샘플 예제 실행 결과 2021. 5. 24.
[Javascript] 엘리먼트 속성 추가하기 setAttribute 바닐라 자바스크립트 엘리먼트 / 노드 / 태그 속성 추가 하기 setAttribute 기본 형태 //엘리먼트에 속성 추가 element.setAttribute(속성명,속성값); 샘플 예제 기본 체크 박스 체크된 박스 출력 결과 2021. 5. 24.
[Javascript] 엘리먼트 / 노드 / 태그 생성 createElement [자바스크립트] 엘리먼트 / 노드 / 태그 생성 Create Element / Node / Tag 기본 형태 //엘리먼트 생성 document.createElement(태그이름); 샘플 예제 실행 결과 2021. 5. 24.
[Javascript] 엘리먼트 앞 / 뒤에 특정 엘리먼트 삽입하기 insertBefore, insertAdjacentElement 자바스크립트 엘리먼트 (노드) 앞 뒤에 특정 엘리먼트 (노드) 삽입 하기 insertBefore / insertAdjacentElement 기본 형태 //기준 엘리먼트에 삽입할 엘리먼트를 옵션에 맞는 위치에 삽입 //옵션은 beforebegin, afterbegin, beforeend, afterend가 있고 //기준 노드의 앞, 뒤 추가는 beforebegin, afterend를 사용 //기준 노드의 자식 노드로 앞, 뒤 추가는 afterbegin, beforebegin을 사용한다 기준노드.insertAdjacentElement(옵션, 삽입할노드); //기준 노드 앞에 추가할 노드 삽입 부모노드.insertBefore(추가할노드, 기준노드); 샘플 예제 : insertAdjacentElement Hel.. 2021. 5. 24.
[Javascript] todo리스트 / 쇼핑 리스트 샘플 코드 (front-end) [Javascript / 자바스크립트] Todo List / Shop List 샘플 코드 머릿말 프론트앤드 Js로 DOM 제어 복습 도중 Todo List를 추가 / 삭제 가능한 어플을 만들어 보았다 참고로 기능 구현 목적으로 만들어 디자인은 구리다 사용 기술 html / css / javascript 이고 다른 플러그인은 사용하지 않았다 프로젝트에 사용된 DOM 제어 Js 기술 엘리먼트 선택자 element.querySelector / element.getElementById 부모 엘리먼트 선택자 element.parentElement 엘리먼트 노드 생성 document.createElement('생성 원하는 태그명') 엘리먼트 노드 삭제 element.remove() 엘리먼트 속성 추가 및 삭제 등 .. 2021. 5. 24.
728x90

티스토리툴바