[인프런x코드캠프] 훈훈한 Javascript_6日

 

 

 

 

오늘은 반복문과 js파일에서 html의 값들을 변경하는 내용을 배웠다.

 

기본적인 for문, while문은 java와 동일해서 넘어갔다.

for-in , for-of에 대해서도 학습했다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

for-in : java의 향상된 for문과 비슷 => 객체에만 사용 가능

ex) for( let key in documentObj ) {} : documentObj에 있는 key 값들이 key라는 변수에 담겨진다.

 

for-of : 배열에만 사용 가능

ex) for( let tag of documentArr) {} : documentArr에 있는 요소들이 tag라는 변수에 담겨진다.

 

 

 

 

js파일에서 getElementId, textContent, innerHTML을 통해서 html의 값들을 조작할 수 있다.

 

getElelmentId : 태그의 ID를 통해 태그의 값을 조작 가능

ex) document.getElementIs("#태그의 아이디").textContent = "출력하고자 하는 내용"

 

textContent : 태그에 값이 있어도 덮어 씌울 수 있다.

html : <div id="first">기존 값</div>

js : document.getElementId("#first").textContent = "씌워주는 값";

결과는 <div id="first">씌워주는 값</div> 로 나타난다.

 

innerHTML: html에서 쓰는 문자열을 그대로 쓰면 된다.

ex) messageContainer.innerHTML = "<h3>목표시간에 도달하여 타이머가 종료되었습니다.</h3>";

결과는 messageContainer에 문자열이 그대로 html에 반영된다.

 

 

 

 

점점 D-day-counter의 형태가 완성되어가고 있다.

아직은 어렵지 않지만 막힘이 없지는 않. 완강 후에 강의 없이 처음부터 만들어보는 연습을 해야할 것 같다.