yoon's Devlog

이전 게시물에서 insertAdjacentElement, insertAdjacentHTML과 append를 비교하며 간략하게 사용법에 대해 알아보았다. 정확한 사용법을 알아보기 위해 공식 문서를 살펴보자. https://developer.mozilla.org/en-US/docs/Web/API/Element/append Element.append() - Web APIs | MDN The Element.append() method inserts a set of Node objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes. developer.mo..

본 포스팅의 핵심은 insertAdjacentHTML, insertAdjacentElement, append의 매개변수를 정확히 알고 사용법을 구별하는 것이다. insertAdjacentHTML() 메서드는 HTML 같은 특정 텍스트를 파싱하고, 특정 위치에 원하는 HTML요소를 추가한다. 사용법은 다음과 같다. element.insertAdjacentHTML(position,text); position에는 앞서 배운 다음의 것들만 사용 가능하다. beforebegin (element의 부모가 존재해야 함) afterbegin beforeend afterend (element의 부모가 존재해야 함) 아래 예제는 append, insertAdjacentElement, insertAdjacentHTML의 활..

innerHTML은 HTML의 요소로 삽입하는 방법 중 하나이다. 다음 예제를 살펴보자. 예제 innerText vs innerHTML hello 추가하기 결과 코드를 뜯어 살펴보자. 1) innerText와 innerHTML의 비교 //대입한 문자열을 html 형식으로 해석해서 자식 요소로 두기 document.querySelector("#one").innerText = "daum"; //HTML 속성으로 들어감 document.querySelector("#two").innerHTML = "daum"; 이 부분에서의 결과물은 다음과 같다. 보다시피 innerText로 한 것은 문자열로, innerHTML로 한 것은 링크로 나타나는 모습이다. 여기서, innerHTML로 하면 "

앞의 게시물에서 다뤘던 CSS 부분을 보도록 하겠다. 이전 예제 제거할 p 요소를 클릭하세요. p 요소 추가하기 p1 p2 p3 p4 p5 여기서 주의깊게 볼 부분은 이 부분이다. 위 예제의 결과는 다음과 같다. 우선 커서부터 살펴보자. 1. cursor 그동안 예제를 풀며 click에 대한 이벤트 리스너를 많이 활용했었는데 커서 변경을 한번도 하지 않았었다. 하지만 실제 웹페이지에서는 클릭 위치를 커서 변경을 통해 많이 보여준다. 위 에제에서 커서 모양이 손가락 모양으로 바뀐 것을 볼 수 있다. 따라서 cursor: pointer 가 위 모양의 커서로 만들어줌을 확인할 수 있다. 다양한 커서 모양과 활용은 이곳에서 확인하면 좋을 것 같다. http://www.homejjang.com/09/cursor...

this는 자신이 속한 객체의 참조값을 가리킨다. global area에서 this는 Window, 즉 웹 브라우저의 창을 가리킨다. 다음 예제는 오브젝트에서 this를 사용해본 모습이다. 예제1 - object에서 this 사용하기 javascript에서 this 예약어에 대한 이해 결과 this.name으로 각각 car1과 car2객체의 name값이 출력된 모습을 확인할 수 있다. 따라서, this는 각각 car1과 car2를 가리킴을 알 수 있다. 디버깅을 해보자. 다음과 같이 car1.drive(); 구문에 breakpoint를 두고 디버깅을 시작하면, 아직 car1 시행전이므로 global영역으로 this는 Window이다. car1으로 들어가면, local 영역으로 들어가 다음과 같이 this..

이전 게시물에서 요소를 삽입할 때 append()메서드를 사용했었다. append 사용 시, 가장 마지막에 요소가 추가됨을 확인할 수 있었는데, 이번에는 다양한 위치에서 요소를 삽입하는 방법에 대해 공부해보려 한다. 그 중에서도 beforebegin, afterbegin, beforeend, afterend에 대해 다뤄볼 예정이다. 사용법은 insertAdjacentElement() 메서드를 활용한다. [insertAdjacentElement] targetElement.insertAdjacentElement(position, element); position 'beforebegin': targetElement 외부 앞 (트리 요소의 부모가 있는 경우에만 작동) 'afterbegin': targetElem..

C언어와 동일하기 떄문에 예제만 살펴보고 넘어가보도록 하겠다. 예제1 - 단일 if문 if문을 활용하여 isFun 이 참일 때 p에' "좋아요!" 출력하기 예제2 - 비교연산자를 활용하여 if문 사용해보기 문제는 주석에 체크하기 예제3 - else문 문제는 주석에 체크하기 예제4 - else if 문 문제는 주석에 성적 확인

자바스크립트에서 반복문을 수행하는 방법으로 for문에 대해 공부해봤었다. 이번에는 반복문을 수행하는 또 다른 방법인 forEach문에 대해 공부해보도록 하겠다. forEach문은 함수를 인자로 전달한다 . 다음 예제의 주석을 읽어보자. nums.forEach(function(item, index){}); 예제1 forEach의 함수 내 인자로는 item과 index를 활용한다. 결과 예제2 - forEach 함수를 이용하여 버튼 클릭 시 p 요소의 innerText값 변경하기 배열의 forEach()함수를 활용한 반복 작업 p1 p2 p3 p4 p5 바꾸기