주제.1
html 문서 앞에 <script> 태그 내에 js코드를 작성했고, 문서가 로드 되기 전에 script의 element를 가져오지 못한 상태에서 console.log로 디버그하여 개발자도구에 확인해보았을때는 왜 element를 가져와졌는지 이유에 대해서 알아보기.
HTML은 인터프리터 언어이기 때문에 위에서부터 아래로 순서대로 실행된다.
참고 코드
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“UTF-8">
<title>JavaScript DOM Element</title>
<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>
var selectedItem = document.getElementsByTagName(“li”); // 모든 <li> 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = “red”; // 선택된 모든 요소의 텍스트 색상을 변경함.
}
</script>
</body>
</html>참고 코드를 보면 head 다음에 js 코드가 작성되어 있다.
하지만 코드를 실행하고 개발자 도구를 열어보면
이것 처럼 <li> 요소가 <body> 안에 있는데 불어와져 있는걸 볼 수 있다..
왜일까??
브레이크 포인트를 걸어놓고 확인해 보자
새로 고침을 해보면 js 코드에서 브레이크를 걸어놔서 body가 안나온다
분명이 11번째 줄 지났을때 개발자 도구에서는 <body>에 있는 요소들이 출력이 안된다
하지만 getElementsByTagName 메소드는 HTMLCollection 이다.
아래 참고 링크 처럼 HTMLCollection 는 실시간으로 반영된다.
querySelector vs getElementsByClassName (NodeList vs HTMLCollection)
For this blog entry, I wanted to talk about DOM traversal, but quickly got derailed by some funky Jav...
dev.to
핵심 포인트는
이것 처럼 body 부분 로딩이 완료 되었을때 실시간 반영되어서 selectedItem 을 가져와서 개발자 도구에 실시간 반영된다.
주제.2 택1
- Web-API를 이용하여 본인의 웹사이트의 기능을 구현한 후 코드와 작동되는 화면을 영상 또는 스크린샷을 찍어서 첨부하기
- 내가 구현해야할 기능들을 명세하고 명세한 내용에 web API에 어느 기능들을 사용해야하는지 미리 자료조사하여 어떻게 구현할지 글로 표현하여 작성하여 제줄하기
2번 선택
위 사진처럼 URL 입력 후 [단축 하기] 버튼 눌렀을때
기능 명세
하단에 성공 유/무, 관련 데이터(단축 주소, 에러메세지, 등..), 버튼 눌렀을때 해당 URL 으로 이동
자료 조사
- 단축 URL API 찾기
- 입력칸에 value 가져오기
- 찾은 api로 데이터 보내고 결과 데이터 받기
- 받은 데이터 보여주기
- [단축 주소로 가기] 버튼 눌렀을때 새 탭 or 창으로 띄우기
1. 단축 URL API 찾기
https://lrl.kr/ 에서 제공 해주는 단축 URL API 사용
2. 입력칸에 value 가져오기
document.getElementById('(입력받을 input 폼 id)').value 으로 입력 url 가져옴
3. 찾은 api로 데이터 보내고 결과 데이터 받기
ES6에서 추가된 내장 API 인 Fetch API 사용
4. 받은 데이터 보여주기
DOM API 사용 하여 받아온 데이터를 DOM 제어해서 화면에 보여줌
5. [단축 주소로 가기] 버튼 눌렀을때 새 탭 or 창으로 띄우기
버튼 window.open() 메소드 사용해서 새 탭 이나 새 창으로 단축된 URL 띄우기
Window: open() method - Web APIs | MDN
The open() method of the Window interface loads a specified resource into a new or existing browsing context (that is, a tab, a window, or an iframe) under a specified name.
developer.mozilla.org
본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성되었습니다.
'코딩캠프 > AI 웹개발 취업캠프' 카테고리의 다른 글
| [AI 웹개발 취업캠프] 23.07.28 과제 (0) | 2023.07.29 |
|---|---|
| [AI 웹개발 취업캠프] 10Day - JS의 WebAPI(2) (0) | 2023.07.28 |
| [AI 웹개발 취업캠프] 9Day - JS의 WebAPI(1) (0) | 2023.07.27 |
| [AI 웹개발 취업캠프] 8Day - JS 기초(3) (0) | 2023.07.26 |
| [AI 웹개발 취업캠프] 7Day - JS 기초(2) (0) | 2023.07.25 |
