본문 바로가기

Frontend/JavaScript55

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.
JavaScript 이벤트 버블링과 이벤트 캡쳐란? 이벤트 버블링한 요소에서 어떤 이벤트가 발생하면, 이벤트가 동작하고 이어서 연쇄적으로 상위요소에 전파되어 부모요소의 이벤트가 동작한다. 가장 최상단의 요소를 만날 때까지 이벤트 버블링이 이어진다. 아래 예제를 확인해보면, 제일 안쪽의 div를 눌렀는데 상위의 div들에 있는 이벤트까지 전부 시행되는 것을 볼 수 있다. See the Pen 이벤트버블링 by coding-ji (@coding-ji) on CodePen. 이벤트 캡쳐이벤트 캡쳐는 이벤트 버블링과는 반대로, 이벤트가 발생하면 그 하위요소에 전파되어 자식요소의 이벤트가 동작한다.  아래 예제를 확인해보면, 제일 안쪽의 div를 누르면 제일 상위의 div1의 이벤트부터 시행되어 아래로 이벤트가 전파되는 것을 볼 수 있다. capture를 tru.. 2024. 7. 23.
JavaScript 기본형과 참조형의 차이에 대해 알아보자 이전에 타입에 대해 이야기 하면서 짧게나마 기본형과 참조형 타입에 대해서 설명을 한 적이 있다. 기본형과 참조형의 차이는 메모리를 적재하는 방법에 차이가 있다. 기본형참조형NumberStringBooleanUndefinedSymbolNullObject(Array, Function, Date ..) 기본형 변수를 지정하게 되면 지정하는 공간을 할당한다 (주소 생성).해당 주소에 변수의 값을 적재한다. 변수의 값을 변경할 경우 해당 주소에 작성되어 있는 기존 값은 사라지고 새로 들어오는 값이 적재가 된다. 다른 변수를 참조해서 변수를 생성하는 경우 참조한 변수의 "값"을 생성한 변수의 주소로 "복사"한다. (값의 복사)값을 복사하기 때문에, 메모리들이 가리키고 있는 값이 서로 독립되어져 있다. 즉, 참조된 .. 2024. 7. 23.
JavaScript의 getter와 setter 에 대해서 객체(Object)안의 요소 중 접근자 프로퍼티로 getter(접근자)와 setter(설정자)가 있다. getter는 값을 획득하고, setter는 값을 설정하는 역할을 한다. 이 메서드들은 정보 은닉, 즉 변수에 직접적인 접근을 방지한다. 물론 getter와 setter를 만들었다고해서 변수를 직접적으로 조작을 못하는 것은 아니지만, getter와 setter를 통하여 의도에 맞게 사용할 수 있도록 돕는다. GetterGetter는 객체의 프로퍼티의 값을 반환하는 메서드다. 프로퍼티로 직접 접근하는 대신 getter를 통해 값을 가져올 수 있다. getter는 매개변수를 가지면 안된다. getter는 값이 실제로 필요한 상황이 오기 전까지 시행되는 것을 미루기때문에 cpu를 낭비하지 않는다는 장점이 있.. 2024. 7. 23.

티스토리툴바