7/27 과제 제출 - AI 서비스 완성! AI 웹개발 취업캠프 [NIPA/정보통신산업진흥원]

Alicia·2023년 7월 29일

AI_Web_nipa

목록 보기

5/31

주제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>
        //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>
</body>
</html>

document.getElementsByTagName 함수를 통해 태그가 li 속성을 갖는 요소들을 획득한 모습인데요, 자세히 보면 이 컬렉션은 일반적인 배열이 아닌 HTMLCollection 이라는 프로토타입을 기반으로 구현되었다는 것을 알 수 있습니다.

❓

console.log(selectedItem)에서 출력된 결과인 HTMLCollection []은 브라우저 개발자 도구에서 컬렉션을 확장하여 보여주는 방식으로, 실제로 HTMLCollection 객체의 속성과 메서드를 보여주기 위해 사용되는 것입니다. HTMLCollection 객체는 DOM 요소들의 컬렉션을 나타내며, 해당 컬렉션에는 length 속성과 인덱스를 사용하여 각 요소에 접근할 수 있습니다.

따라서 HTMLCollection 객체는 브라우저 개발자 도구에서 자세한 정보를 보여주기 위해 사용되는 내용이며, HTMLCollection 객체 자체는 DOM 요소들의 컬렉션을 나타내는 객체입니다. 따라서 여기서 HTMLCollection 객체에 담긴 요소들은 실제로 웹 페이지에서 존재하는 li요소들입니다.

실제로 HTMLCollection 는 배열이 아닌 `유사 배열 객체` 인데요, HTMLCollection 과 배열과의 가장 큰 차이는 바로 "살아 있다" 는 점입니다.

🚨 살아 있는 객체?

살아 있는 객체라는 표현을 사용한 까닭은 내부의 DOM 노드들이 정적으로 존재하는 것이 아닌, 마치 살아 있는 것처럼 노드 객체의 상태 변화를 실시간으로 감지하고 반영하는 객체이기 때문입니다.

일반적인 배열과는 다르게 HTMLCollection 은 내부 원소(노드)에 변화가 생기면 이를 즉시 반영합니다.

주제2 : 내가 구현해야할 기능들을 명세하고 명세한 내용에 web API에 어느 기능들을 사용해야하는지 미리 자료조사하여 어떻게 구현할지 글로 표현하여 작성하여 제줄하기

메뉴 hover시 -> 서브메뉴 활성화 mouseenter 이벤트와 mouseleave 이벤트를 각각 메뉴 요소에 등록하여 서브메뉴를 보여주거나 숨기는 동작을 처리

form 입력 후 로그인 버튼 클릭시 로그인 활성화, 검색 기능 활성화

document.getElementById("login-button").addEventListener("click", function() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  // 간단한 예시로 사용자명과 비밀번호가 일치하면 로그인 활성화 처리
  if (username === "user123" && password === "password123") {
    // 로그인 활성화 처리 (예: 로그인 성공 메시지 표시)
    alert("로그인 성공!");
    // 추가적인 기능 활성화 등 로그인 이후 동작 처리
  } else {
    alert("로그인 실패. 사용자명과 비밀번호를 확인해주세요.");
  }
});