본문 바로가기

전체보기209

JavaScript : DOM을 통해 input 값 받아오기 속성설명.valuevalue값을 가질 수 있는 태그의 경우 그 값을 가져올 수 있다 (input태그).checkedinput태그의 checkbox / radio 타입에 사용되며 선택되었을 때 true, 아닐때 false를 반환한다. .selectedselect태그에서 선택된 항목의 경우 true, 아니면 false를 반환한다.    .valueinput태그를 통해서 사용자가 입력한 값을 .value를 통해 받아서 사용할 수 있다. 이름 취미 등록 .checkedcheckbox / radio 버튼이 체크되었을 때 true, 체크되지 않았을 때 false를 반환한다. 아래 예시는 for~of문을 사용해서 radio버튼의 객체를 순회한 다음, 버튼이 체크되었을 때 true가 된다는.. 2024. 7. 29.
JavaScript에서 this는 무엇을 가리키는걸까? JavaScript의 this는 인스턴스 자신을 가리키는 참조변수다. JavaScript의 this의 경우에는 다른 언어와 다르게 작동하는데, 어디에 위치하느냐에 따라서 가리키는 대상이 다르다. 위치에 따라 가리키는 대상을 작성해보았는데, JavaScript의 this의 경우에는 예측하기가 굉장히 어렵다. 위치대상전역 객체 공간window함수window함수 내의 함수 window객체 내의 함수객체객체1 내의 객체2 내의 함수객체2객체 내의 함수 내의 함수windowDOM이벤트 내의 함수이벤트의 대상DOM이벤트 내의  arrow함수window 버튼  call, apply, bind위에서 봤다시피 this는 JavaScript 내부 규칙에 따라 결정되기 때문에 예측하기가 어렵다. 함수에서 wind.. 2024. 7. 29.
JavaScript : DOM을 통해 속성을 조작해보자 AttributeDOM을 통해서 element에 있는 속성값을 반환, 설정 및 삭제가 가능하다.속성설명.attributes해당 요소의 속성들의 모음을 반환한다. .getAttribute()해당 요소의 지정된 속성 값을 반환한다..hasAttribute()해당 요소에 지정된 속성이 있으면 true, 없으면 false.hasAttributes()해당 요소에 속성이 있으면 true, 없으면 false.removeAttribute()해당 요소에서 지정된 속성 제거 .setAttribute()지정된 속성을 지정된 값으로 설정 또는 변경  Style .style을 통하여 요소의 인라인 스타일에 접근하여 설정할 수 있다. 스타일 설정의 경우 3가지의 형태로 설정이 가능하다.cssText를 .. 2024. 7. 27.
JavaScript : DOM에서 요소를 조작해보자 생성DOM을 사용해서 원하는 태그의 HTML요소를 만들 수도 있고, 텍스트 노드를 생성해서 HTML 문서에 삽입할 수도 있다. 아래 예제의 경우 (1) 태그를 만들어서 .textContent로 문자열을 집어넣고, 에 삽입하고, (2) 텍스트노드를 생성해서, 원래 있던 태그에 삽입했다.속성설명.createElement("태그네임")지정한 태그의 HTML요소를 만들어 반환한다..createTextNode()텍스트 노드를 생성한다.  추가위의 예제에서 보다시피 HTML태그에 추가할 수 있는 속성들을 DOM은 가지고 있다. 문자열을 삽입할 수도 있고, 생성된 요소를 위 혹은 아래부터 삽입할 것인지도 결정할 수 있다. 문자열 삽입속성설명.innerHTML 해당 요소에 문자열을 HTML 형태로 .. 2024. 7. 25.
JavaScript : DOM의 기본에 대하여 문서객체모델(DOM, Document Object Model)은 HTML 또는 XML 기반 문서와 상호 작용하고 표현하는 소프트웨이 프로그램 내부에 존재하는 기능이나 규칙의 집합(API)이다. DOM은 문서구조, 스타일, 내용 등을 변경할 수 있게 돕는다.  웹 브라우저가 HTML 문서를 읽으면 Docment객체로 시작하는 DOM tree가 만들어진다. tree를 구성하고 있는 객체 하나를 노드(node)라고 부르고, tree에서 자신보다 위에 있는 노드를 부모노드,  같은 계층에서 있는 노드를 형제노드 그리고 자신의 아래에 있는 노드를 자식노드라고 부른다. 아래 그림에서 보면, 환영합니다. OO호텔로 오신 것을 환영합니다. 몇 가지 공지사항에 대해 알려드리겠습니다. 입실.. 2024. 7. 25.
JavaScript의 Spread 연산자에 대해 알아보자 스프레드(spread) 연산자반복이 가능한(iterable) 객체에서 요소를 하나씩 분리하는데 사용하는 연산자다. 분리하여 나온 결과를 변수에 할당하거나 호출하는 함수의 매개변수 값으로도 사용이 가능하다. 스프레드 연산자를 이용해서 배열의 구조를 해체하고 다시 새로운 배열에 넣을수도 있다. ... 스프레드 연산자는 세 개의 점을 이용한 문법이다. 스프레드 연산자를 이용해서 반복이 가능한 객체들을 합치거나, 요소를 제거하거나 하는 등의 기능을 수행할 수 있다. 2024. 7. 24.

티스토리툴바