728x90 프론트엔드111 [Javascript] 자바스크립트 클래스 상속에서 super의 두가지 의미 [Javascript / 자바스크립트] 객체지향 (클래스 / Class) 상속에서 super의 두가지 의미 1. 자식 클래스 내에서 부모클래스의 생성자 역할 2. 자식 클래스에서 부모 클래스의 메소드 접근 역할 기본 형태 class 부모클래스 { constructor(변수1,변수2){ this.변수1 = 변수1; this.변수2 = 변수2; } 메소드(){ //기능 ... } } class 자식클래스 extends 부모클래스 { constructor(변수1, 변수2, 변수3){ //super키워드로 부모클래스 생성자 호출 super(변수1,변수2); this.변수3 = 변수3; } 메소드2(){ //부모 클래스의 메소드 호출 super.메소드(); //추가할 자식 클래스만의 기능 ... } } 샘플 예제.. 2021. 6. 9. [HTML / Favicon] 파비콘 만들기 및 적용 방법! (브라우저 탭아이콘) [HTML / Favicon] 파비콘 만들기 및 적용 방법! 기본 형태 1. 파비콘 [favicon] 만들기 아래 웹 페이지에 접속 > icons 탭 클릭 > 원하는 아이콘 선택 후 다운로드 버튼 클릭 (svg 다운) https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2. 다운 받은 SVG 파일을 PNG로 변환 아래 웹 페이지에 접속 > SVG to PNG 탭 클릭 > 아이콘 드래그 & 드랍 후 변환 (PNG 다운) https://svgtopng.com/ Co.. 2021. 6. 9. [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. 이전 1 2 3 4 5 6 7 ··· 12 다음 728x90
