공부하는 비오

super 부모요소에서 상속받으면서, 부모요소에서는 가지고 있지 않는 기능은 자식요소에서만 실행. super를 사용하지않으면 상속받는 대신 모든 코드를 새로 사용해야하지만, super를 사용한다면, 부모요소를 그대로 가져오므로 중복을 피할 수 있으면서, 자식요소에만 사용할 인자(value)들이나 메서드를 추가 할 수 있음. class Obj_par{ constructor(val1, val2){ this.val1 = val1; this.val2 = val2; } method1( ){메서드 코드;} } class Obj extends Obj_par{ constructor(val1, val2, val3){ super(val1, val2); this.val3 = val3; } method1( ){super.me..

JavaScript 2020. 8. 1. 00:04

클래스(Class) 클래스를 사용해 객체를 생성할 수 있다. class Object{ constructor( key1, key2){ this.key1 = key1; this.key2 = key2; } method( ){ 메서드 코드 } } new Object( ); 클래스를 사용해 객체를 생성하고자 할 때는, function대신 constructor을 사용하여 객체를 만든다. 메서드를 만들 때도 prototype이나 function이라는 단어를 사용하지않고, method의 이름으로 생성한다. new Object를 적어줘야 객체가 생성되는건 동일. ex. 이전 글(https://biio-studying.tistory.com/69)에서와 유사한 객체 생성, 그 결과가 동일함을 확인 할 수 있다. Person..

JavaScript 2020. 7. 30. 22:46

객체생성자(constructor) 함수를 이용해 객체 생성. function Object (key1, key2){ this.key1 = key1, this.key2 = key2, this.method = function( ){ 메서드코드 } } new Object( ) ; ex. 내장객체를 통해 객체생성자의 개념을 살펴보자. console.log(Date)를 통해, Date()는 함수(function( ){ })임을 알 수 있음. 즉 d1.getFullYear()은 Date(객체)의 key(속성)이나 method(메서드)를 불러오는 것. ex. 함수 Person을 만든 후, 그냥 Person( )을 호출하면 아직 생성되지 않은 것을 확인 할 수 있음. new Person( ); 을 사용해야 객체생성. 프..

JavaScript 2020. 7. 29. 23:47

this? this가 속해있는 method를 가리킴. this를 사용하면 객체의 이름이 바뀔 경우에도 메서드의 내용 변경없이 사용 가능.

JavaScript 2020. 7. 29. 21:26

이미 객체를 공부하긴 했지만, React를 공부하기 전 한번더 공부해보자. (feat. 생활코딩) 객체? 서로 연관된 변수의 함수를 그룹핑하고 이름을 붙인 것. 객체 생성 var Object = { key : 'value', method: function( ){ } } key == 객체변수 method == 객체함수 (객체에 속해있는 함수를 메서드라고 함) 객체변수의 속성 변경 가능 Object.key = 'value2' 객체변수 정보 삭제 가능 delete Object.key ex. 객체에서 반복문 사용하기 for(var 변수 in Object){ }; 변수 == key Object[변수] == value ex. **console.log 대신 console.group 을 사용하면 좀더 깔끔하게 확인 할..

JavaScript 2020. 7. 28. 23:55

위 화면과 같이 To Do List를 만들어보자. (css는 이 포스트에서 다루지 않고 기능적인부분(javascript)만 정리.) [ 기능 ] 빈 칸에 내용을 작성하고 '추가'를 누르면, 그 내용을 아래쪽 표에 추가. 체크 한 후 '선택삭제'를 누르면, 체크한 항목만 삭제. '마지막 항목 삭제'를 누르면, 마지막 항목 삭제. '전체 삭제'를 누르면, 리스트 전체 삭제. colgroup을 사용하여, 각 column의 너비를 설정. document .getElementById('btnAdd') .addEventListener('click',addList); #btnAdd를 눌렀을 때, addList함수를 실행함. function addList( ) contents == .text-basic 선택 if(co..

JavaScript 2020. 7. 22. 11:45

새로운 요소 추가하기 createElement( ) ex. document.createElement('p'); 텍스트 추가하기 createTextNode( ) ex. document.createTextNode('Hello'); 선택한 요소에 자식요소 추가하기 appendChild( ) ex. document.body.appendChild(자식요소); ex. div요소를 만들고, 텍스트노드 3을 만든 후, div의 하위요소를 3을 넣음. 그 후, #wrap의 하위요소로 div 넣음. textNode대신 innerHTML을 사용할 수 있음. **innerHTML == 하위요소의 html을 변경할 때 사용. 둘다 같은결과.

JavaScript 2020. 7. 22. 10:27

자식요소 모두 가져오기 .children id가 listBody인 요소의 자식요소를 다 가져옴. 부모요소 가져오기 .parentElement .parentNode listChild[2]의 부모요소 가져오기. 부모요소에 포함된 모든 하위요소를 가져옴.

JavaScript 2020. 7. 21. 12:42