본문 바로가기
728x90

프론트엔드111

[Javascript] Class 클래스 [get,set 구문 오류 필독] 자바스크립트에서의 클래스의 선언 및 활용 샘플 예제 ↓ class Person { //Class 내 생성자 constructor(name,age){ //this를 통한 내부 프로퍼티 초기화 this.name = name; this.age = age; } //static 변수 static blog = 'good-memory'; //static 함수 static speak = function (){ console.log('hello~'); } //getter get name (){ return this._name; } //setter set name (value){ this._name = value; } //Class 내 메소드 information(){ console.log(`my name is ${thi.. 2021. 2. 4.
[Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element Html은 HyperTextMarkupLanguage 의 약자로 프로그래밍 언어가 아닌 웹 개발시 웹페이지의 구조를 표현 하는 마크업 언어이다. 쉽게말해서, 웹개발자와 브라우저 사이에 의사 소통할수 있는 언어이다. 웹개발자 브라우저 우선 html을 출력부터 해보자. 메모장을 새로 만들기 하여, 다른 이름으로 저장하기를 누르고, 파일 이름을 index.html로 저장한다. index.html 파일을 만들었다면, 아래 예제를 실행해보기를 권장한다. 샘플 예제 ↓ 웹 개발자가 "메모를 메모하다"라는 문장을 브라우저에게 문장이라고 이야기해주려면, 아래와 같은 소스를 작성해야한다. 사용 태그 : p 메모를 메모하다 소스 작성을 완료 하였다면, 파일을 저장하고 더블클릭하여 실행하여, 웹페이지에서 출력 결과를 확인한.. 2021. 2. 3.
[Javascript] 이벤트 전파 방지 stopPropagation() 자바스크립트 부모로의 이벤트 전파 방지 Event.stopPropagation(); 간단 설명 ↓ 자바스크립트에서 자식 엘리먼트에서 이벤트 발생시, 부모 엘리먼트에 같은 이벤트가 설정되어있다면, 해당 이벤트에 할당된 기능도 함께 실행된다. 이는 이벤트 전파 현상으로 인한 건데, 상단의 그림과 같이 이벤트가 전파되어진다. 위와 같은 현상을 방지하기 위해서는 Event.stopPropagation()을 사용해야하는데, 아래 예제를 참고하도록 한다. 샘플 예제↓ [Html] [Javascript] let secElem = document.querySelector('#section-sample'); let divElem = document.querySelector('#div-sample'); let btn = .. 2021. 2. 3.
[Javascript] 이벤트의 추가 addEventListener() 자바 스크립트에서 이벤트의 추가 AddEventListener EventTarget.addEventListner(이벤트문자열 , 콜백함수); 간단 설명 ↓ 자바스크립트에서 이벤트의 추가 방법에는 여러가지가 있다. 사실 어떤 방법이 가장 좋다라는 정답은 없지만, 향후 유지보수 까지 생각한다면, 가독성이 좋고 같은 요소에 같은 여러개의 이벤트 등록이 가능한 addEventListener()의 사용을 권장한다. 이벤트는 상당히 많으나 하단의 예제에서는 쉬운 예를 위해 'Click' 이벤트로 작성해 보았다. 샘플 예제 ↓ [Html] [Javascript] let examBtn = document.querySelector('#exam-btn'); //클릭 이벤트 추가! addEventListener(이벤트명,콜.. 2021. 2. 2.
[Javascript] 이벤트 트리거 (Event Trigger) .dispatchEvent() Javascript - 이벤트 트리거 (event Trigger) .dispathEvent() 브라우저마다 기본 UI 스타일이 다른 엘리먼트가 존재한다. 예를들어 태그 같은 경우에도 Chorme과 IE10 에서의 출력 디자인이 다르다. 공통된 style의 제공을 위해 Input 태그가 아닌, 다른 버튼을 추가로 만들어 해당 버튼을 클릭시, 클릭 이벤트를 원하는 태그에 연결해주는 방식을 현업에서 많이 사용하고 있는데, 해당 방식을 Event Trigger 라고 한다. 샘플 예제 ↓ [HTML] [결과 출력 (트리거 적용 전)] [Javascript] let fileElem = document.querySelector('#file-element'); let fileBtn = document.querySele.. 2021. 2. 2.
[Javascript] 기본 이벤트 삭제 event.preventDefault() Javascript - preventDefault 자바스크립트에서는 편의를 위해 이벤트가 기본 설정되어 있는 태그가 존재한다. (예: a태그 클릭시, href 주소로 자동 이동 or 새로고침) 프로그램 작성자가 해당 기본 설정 기능의 사용을 원치 않는 경우에는 다음과 같은 명령어가 필요하다. event.preventDefault(); 샘플 예제 ↓ [Html] 기본 설정 이벤트 기능 삭제 예제 클릭! [Javascript] let aTag = document.querySelector('body>a'); aTag.addEventListener('click',function(e){ alert('클릭!'); }); [결과] 당연한 결과이지만, 아래 스크립트 추가를 통해 a태그의 기본 설정된 디폴트 이벤트를 없.. 2021. 2. 1.
[Javascript] 노드복사 importNode 노드의 복사 var node = document.importNode('복제 원하는 노드', boolean : 자식 노드 포함 여부); 반환 : [True인경우 : 자식 포함], [False인 경우 : 자식 미포함] 샘플 예제 ↓ [HTML] 번호 제목 내용 [Javascript] let temp = document.querySelector('template'); let tbody = document.querySelector('tbody'); //데이터 SET let db = [ {'id':'1','title':'title1','content':'content1'}, {'id':'2','title':'title2','content':'content2'}, {'id':'3','title':'title3','.. 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] 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.
728x90

티스토리툴바