AI 웹개발 취업캠프 [정보통신산업진흥원] - 7월 27일
0
주제 (1)
html 문서 앞 script 태그 내에 js코드를 작성한 후
문서가 로드 되기 전에 script의 element를 가져오지 못한 상태임에도
console.log로 디버그하여 개발자도구에 확인해 보았을 때는
왜 element를 가져왔는 지에 대한 이유 알아보기
참고 코드
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“UTF-8">
<title>JavaScript DOM Element</title>
<script> // ---> head 부분에 script를 위치해주면 오작동!
//HTML 태그 이름을 이용한 선택
console.log(‘aaa’)
var selectedItem = document.getElementsByTagName(“li”); // 모든 <li> 요소를 선택함.
console.log(selectedItem)
console.log(selectedItem.length)
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = “red”; // 선택된 모든 요소의 텍스트 색상을 변경함.
console.log(selectedItem.item(i));
}
</script>
</head>
<body>
<h1>HTML 태그 이름을 이용한 선택</h1>
<ul>
<li>첫 번째 아이템이에요!</li>
<li>두 번째 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
<li>네 번째 아이템이에요!</li>
<li>다섯 번째 아이템이에요!</li>
</ul>
<script> // ---> body 밑에 script를 위치해주면 정상 작동!
var selectedItem = document.getElementsByTagName(“li”); // 모든 <li> 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = “red”; // 선택된 모든 요소의 텍스트 색상을 변경함.
}
</script>
</body>
</html>내가 생각한 답
원래는 HTML 파싱이 끝나면 DOM 구조가 파악됨.
그리고 script를 다운로드하고 실행.
그런데 HTML 파싱이 끝나기 전에 script가 먼저 실행되는 경우
DOM 구조 파악이 덜 된 상태이기 때문에 원하는 element를 받아오지 못하고,
뒤늦게 HTML 파싱이 끝나 DOM 구조가 파악되어
콘솔 디버그에서는 element를 받아왔다고 결과를 내는 것 아닐까 추측.주제 (2)
내가 구현해야 할 기능들을 명세하고
명세한 내용에 web API에 어느 기능들을 사용해야 하는지 미리 자료조사하여
어떻게 구현할 지 글로 표현하여 작성하여 제줄하기
- 관심 목록에 담은 물품을 제거할 때
var removedItem = document.getElementById("item");
parent.removeChild(removedItem);
- 상품을 넣었거나 삭제했음을 알려주기 위해 사용
alert()
- 이전 페이지로 돌아가기
window.history.back()
- 이전에 검색 기능을 생각해보지 않았으나
사용자의 편의성 추가를 위해 이 기능을 추가할 생각중아직 자바스크립트가 익숙하지 않고
web api의 어떤 기능을 내 서비스에 적용해야 될 지도 감이 잘 안온다..
자바스크립트와 web api를 좀 더 공부하면 해결될 문제일 지
아니면 나 스스로가 내 서비스에 뭘 넣어야 될 지 몰라서 그런건지
모르겠다.
좀 더 고민이 필요하다.
본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.
유후랄라 개발일기