쑥쑥자라기🌱

html 요소에 style과 class를 제어해 보겠습니다. const box = document.getElementById("box"); box.style.backgroundColor = 'red'; box.style.color = '#fff'; box.style.width = '100px'; box.style.height = '100px'; 주의할 점은 일반적으로 css를 작성할 때 background-color 이런식으로 작성을 하는데 여기서는 backgroundColor 이런식으로 카멜케이스로 작성하면 됩니다. box.style['margin-left'] = '30px'; 익숙한 방법으로 작성을 하려면 이런식으로 작성하면 됩니다. box.style; CSSStyleDeclaration {...} ..

while문의 기본 구조는 이렇습니다. // while문 (while statement) while (조건부분){ 동작부분 } while이라는 키워드 다음에 조건 부분을 작성한 다음 동작 부분을 작성해줍니다. 구조만 보면 for문보다 훨씬 더 if문과 비슷한 모양입니다. 동작하는 방식도 if문과 닮았습니다. if문과 다른 점은 당연히 for문과 마찬가지로 반복문이니까 한번 실행하기 시작하면 조건 부분이 충족되지 않을 때까지 동작 부분을 계속 반복한다는 것입니다. 특별한 경우가 아니라면 while문과 for문은 대부분 서로 대체가 가능합니다. //while문 (while statement) let i = 1; while (i

Welcome World Red Blue Green A const blue = document.getElementById('blue'); blue.firstChild; text ('Blue') blue.firstElementChild; null firstChild는 자식 노드로 text가 나오고 firstElementChild는 자식 요소 노드는 없기 때문에 null이 나옵니다. const blueTextNode = blue.firstChild; blue라는 text 노드의 정보들을 보겠습니다. blueTextNode.nodeName; '#text' blueTextNode.nodeType; 3 buleTextNode.nodeValue; 'Blue' nodeName은 #text, nodeTye은 3(문서 ..

for (let i = 1; i

getElement와 getquerySelector 두 메서드는 반환 값이 조금 다릅니다. 'document.querySelectorAll('p'); NodeList(4) [p#first, p#second, p, p] document.getElementByTagName('p'); HTMLCollection(4) [p#first, p#second, p, p, first: p#first, second: p#second] querySelectorAll과 getElementByTagName은 동일한 동작을 하는 것처럼 보이지만 반환값은 NodeList와 HTMLCollection으로 다릅니다. 둘 다 유사 배열 객체면서 iterable(반복가능한)인데요. 그래서 for of로 순회했었습니다. const pLis..

// for문 (for statement) for (초기화부분; 조건부분; 추가동작부분){ 동작부분 } 프로그래밍에서 반복문은 컴퓨터에게 반복적인 작업을 해달라고 도움을 요청하는 것입니다. if문과 비슷한 모양이긴 하지만 if문은 어떤 조건 부분이 충족되면 동작 부분을 한 번만 수행하고 끝이 나지만 for문은 반복문인만큼 조건 부분이 충족이 되면 계속해서 동작 부분을 반복한다는 것입니다. 소괄호 안쪽을 보면 초기화부분, 조건 부분 그리고 추가 동작 부분 이 세부분을 세미콜론(;)으로 나누고 있는 것을 볼 수 있는데, 가장 먼저 초기화 부분은 for 반복문이 시작할 때 가장 먼저 그리고 딱 한번만 실행되는 부분입니다. 두 번째 조건 부분은 if문과 동일하게 이 부분에 작성된 코드를 불린 형태로 평가한 다음..

DOM은 Document Object Model의 약자. 문서 객체 모델입니다. DOM은 HTML 문서의 각 요소들을 트리 형식으로 표현해줍니다. 개발자는 자바스크립트를 이용해서 이를 생성하거나 수정하거나 삭제할 수 있습니다. 돔을 그림으로 표현하면 이렇게 트리 형식의 자료 구조가 됩니다. 이 하나의 객체를 노드라고 부릅니다. 트리에서 위쪽은 부모 노드 아래쪽을 자식 노드라고 합니다. 도큐먼트를 제외하고 최상단에 있는 html은 루트 노드가 됩니다. 크롬에서 개발자 도구를 열었을 때 보이는 부분이 바로 돔입니다. 콘솔 창을 열고 하나씩 접근해 보겠습니다. document.documentElement document.documentElement 하면 html에 접근할 수 있습니다. document.body..

if문을 활용하면 switch문을 if문으로 대체할 수도 있습니다. let myChoice = 2; switch(myChoice) { case 1: console.log('토끼를 선택한 당신, ...'); break; case 2: console.log('고양이를 선택한 당신, ...'); break; case 3: console.log('코알라를 선택한 당신, ...'); break; case 4: console.log('강아지를 선택한 당신, ...'); break; default: console.log('1에서 4사이의 숫자를 선택해 주세요.'); } if (myChoice === 1) { console.log('토끼를 선택한 당신, ...'); } else if (myChoice === 2) { ..