** 🔎 포커스 이벤트 ** 포커스는 마우스로 a태그 또는 input태그를 클릭하거나 tab키를 누르면 생성됩니다. 앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없습니다. 마우스가 없다면 사용자는 키보드만 가지고 웹사이트를 이용해야 합니다. 이때 사용자가 키보드만으로 사이트를 이용하더라도 불편함 없이 사용할 수 있도록 하려면 제이쿼리가 잘 작동해야 하는데 이를 "키보드 접근성"이라고 합니다. 키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 a또는 input태그에 등록하고, 키보드가 없을 경우를 고려하여 키보드 이벤트까지 등록해야 합니다. ** ✨ focus() / blur() / focusin() / focusout() ** --------------------------------------------------------------- focus() 이벤트는 대상 요소로 포커스가 이동하면 이벤트 핸들러를 실행시키고, blur() 이벤트는 대상 요소에서 포커스가 사라지거나 다른 요소로 이동하면 이벤트 핸들러를 실행시킵니다. focusin() 이벤트는 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 핸들러를 실행시키고, focusout() 이벤트는 대상 요소의 하위 요소 중 입력 요소에서 다른 외부 요소로 이동했을 때 이벤트 핸들러를 실행시킵니다.

      [기본형]
      - $('이벤트 대상'). focus(function(){ 코드 }); -> 단독
      - $('이벤트 대상').on("focus", function(){ 코드 }); -> 그룹
      - $('이벤트 대상').focus(); -> 강제
      * blur() 이벤트는 이벤트명만 다르고 기본형은 동일합니다.

      - $('부모요소'). focusin(function(){ 코드 }); -> 단독
      - $('부모요소').on("focusin", function(){ 코드 }); -> 그룹
      - $('부모요소').focusin(); -> 강제

** 👧🏻 키보드로 마우스 이벤트 대응하기 ** 키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 경우 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것을 뜻합니다. ** 🧑🏻 마우스 이벤트에 대응하는 키보드 이벤트 ** mouseover를 등록할때에는 focus이벤트를 함께 등록하고 mouseout을 등록할때에는 blur이벤트를 함께 등록합니다.

** 🚗 change 이벤트 ** change 이벤트는 선택한 폼 요소의 값(value)을 새 값으로 바꿉니다. 그리고 다른 요소로 포커스가 이동하면 이벤트를 발생시킵니다.

    [기본형]
    $('요소').change(function(){ 코드 }) -> 단독
    $('요소').on("change", function(){ 코드 }) -> 그룹
    $('요소').change() -> 강제

** 🪐keydown() / keyup() / keypress() ** keydown(), keypress() 이벤트는 키보드에서 키가 눌리면 이벤트를 발생시킵니다. 두 이벤트의 차이점은 keydown()은 모든 키에 대해 이벤트를 발생시키지만(한/영키 제외) keypress()는 기능키(F1~F12, esc, spacebar, alt, shift, ctrl 등등...)에 대해서는 이벤트를 발생시키지 않습니다. 또한, 키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유의 키 값을 구할 수 있으며 이를 이용하여 단축키같은 기능을 만들 수 있습니다.

      [기본형]
      $(document 또는 "요소").keydown(function(){ 코드 });-> 단독
      $(document 또는 "요소").on("keydown", function(){ 코드 });-> 그룹
      $(document 또는 "요소").keydown() -> 강제

** 🎉 제이쿼리 강제 이벤트 ** '이벤트가 강제로 발생했다'는 말은 '사용자에 의해' 이벤트가 발생한 것이 아니라 '핸들러에 의해' 이벤트가 발생한 것을 의미합니다. 즉, 사용자의 동작 없이 이벤트 핸들러가 실행되는 것을 뜻합니다. 강제 이벤트는 단독 이벤트 메서드를 사용하거나 trigger()이벤트 메서드를 사용하면 이벤트를 강제로 발생시킬 수 있습니다. 강제 이벤트는 먼저 이벤트 핸들러가 등록된 이후에 강제 발생시킬 수 있습니다.

      [기본형]
      - $("이벤트가 등록된 대상").이벤트명();
      - $("이벤트가 등록된 대상").trigger();

** 🎈 이벤트 제거 메서드 ** 이벤트를 제거하는 메서드로는 off()가 있습니다. on메서드로 등록한 이벤트나 단독이벤트를 삭제할 때 사용합니다.

      [기본형]
      $("이벤트가 등록된 대상").off("제거할 이벤트 종류");

** 💿 로딩 이벤트 ** 로딩 이벤트는 사용자가 브라우저에서 html 문서를 요청하여 html 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다. 로딩 이벤트에는 ready()와 load()이벤트가 있습니다. 만약 페이지가 완전히 로드되기전에 에러가 발생한다면 error()메서드도 쓸 수 있습니다. ** ✔ ready()이벤트 메서드 ** ready()이벤트 메서드는 사용자가 사이트를 방문할때 요청한 html문서객체(document)의 로딩이 끝나면 이벤트를 발생시킵니다. ready()이벤트의 주인은 document 객체 입니다.

      [기본형]
      $(document).ready(function(){ 코드 });
      $(document).on("ready", function(){ 코드 });

** ✔ load()이벤트 메서드 ** load()이벤트 메서드는 외부에 연동된 소스(img, iframe, video)의 로딩이 끝나면 이벤트를 발생시킵니다. ready보다는 조금 느리게 실행됩니다. load()이벤트의 주인은 window 객체 입니다.

      [기본형]
      $(window).load(function(){ 코드 });
      $(window).on("load", function(){ 코드 });

** 👀 마우스 이벤트 ** 마우스 이벤트는 사용자가 사이트에서 마우스를 이용하여 취하는 모든 행위를 말합니다. 예를 들어 지정한 요소위에 마우스를 올리거나 클릭하는 등의 행위를 말합니다. ** 1. click() / dblclick() 이벤트 메서드 ** click() 이벤트는 사용자가 마우스로 어떤 요소를 클릭했을 때 이벤트가 발생하고, dblclick() 이벤트는 사용자가 요소를 더블클릭했을 때 이벤트가 발생합니다.

      [기본형]
      $("요소").click(function(){ 코드 }) -> 단독이벤트
      $("요소").on("click", function(){ 코드 }) -> 그룹이벤트
      $("요소").click() -> 강제이벤트
      * dblclick()(더블클릭)메서드는 이벤트명만 다르고 기본형은 동일합니다.

** ✔ a, form 태그에 클릭이벤트 적용 시 기본이벤트 차단하기 ** a태그에 클릭이나 더블클릭을 등록하면, 클릭할 때마다 a태그의 링크 주소로 이동하는 문제가 발생합니다. 이 문제를 해결하려면 a태그에 기본 이벤트를 차단해야 합니다. form 요소의 제출 버튼 (submit)도 action에 등록된 주소로 이동시키는 문제가 발생합니다. 등록한 이벤트를 정상 작동하게 하려면 기본 이벤트를 먼저 차단해주어야 합니다.

      [기본형]
      1. return false를 이용하는 방식
      $('a 또는 form').이벤트 메서드(function(){
        자바스크립트 코드;
        return false;
      })

      2. preventDefault를 이용하는 방식
      prevent = 막다, Default = 기본값
      $('a 또는 form').이벤트 메서드(function(event 또는 e){
        event.preventDefault();
        자바스크립트 코드;
      })

** 2. mouseover() / mouseout() / hover() ** mouseover()는 요소 위에 마우스가 올라가면 이벤트를 발생시키고, mouseout()는 요소 밖으로 마우스가 벗어나면 이벤트를 발생시킵니다. hover()는 요소에 마우스가 올라갔을 때와 벗어났을 때의 이벤트를 각각 발생시키고, 이때 각각 다른 이벤트 핸들러를 실행시킵니다.

      [기본형]
      $("요소").mouseover(function(){ 코드 }) -> 단독
      $("요소").on("이벤트명", function(){ 코드 }) -> 그룹
      $("요소").mouseover() -> 강제
      * mouseout()은 이벤트 명만 다르며, 기본형은 모두 위와 같습니다.

      [hover 기본형]
      hover이벤트는 단독 이벤트 기본형만 있습니다.
      따라서 그룹 이벤트로는 등록이 불가능합니다.
      -----------------------------------------------------------------------
      - $("요소").hover(
          function(){ 마우스가 오버 되었을 때 실행될 코드 },
          function(){ 마우스가 아웃 되었을 때 실행될 코드 }
        )
      - $("요소").hover(); -> 강제

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 🌳 속성 조작 메서드 ** 2. attr() / removeAttr() attr()메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때, 또는 요소의 속성값을 불러오고 싶을 때 사용합니다. removeAttr()메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.

      [기본형]
      - $("요소선택").attr("속성명")
      : 선택한 요소의 해당 속성값을 가져옵니다.
      - $("요소선택").attr("속성명", "새 값")
      : 선택한 요소의 지정한 속성에 새 값을 적용합니다.
        만약 해당 속성이 없다면 추가합니다.
        메서드의 ()안에 {}객체를 넣으면 여러 속성을 한 번에 적용할 수 있습니다.
      - $("요소선택").removeAttr("속성명")
      : 선택한 요소에서 지정한 속성을 삭제합니다.

3. addClass() / removeClass() / toggleClass() / hasClass() addClass()는 선택한 요소에 새로운 클래스를 생성하고 removeClass()는 선택한 요소에 지정한 클래스명을 삭제하고 toggleClass()는 지정한 클래스 명이 없으면 생성하고 있으면 삭제합니다. hasClass()는 선택한 요소에 지정한 클래스명이 있으면 true를 반환하고, 없으면 false를 반환합니다.

      [기본형]
      - $("요소선택").addClass("클래스명");
      : 저장한 요소에 새로운 클래스 명을 추가합니다.
      - $("요소선택").removeClass("클래스명")
      : 지정한 요소에서 해당 클래스 명을 삭제합니다.
      - $("요소선택").toggleClass("클래스명")
      : 해당한 요소에 클래스명이 있으면 삭제하고 없으면 추가합니다.
      - $("요소선택").hasClass("클래스명")
      : 지정한 요소에 클래스 명이 있으면 true 없으면 false를 반환합니다.

4. val() val()메서드는 입력양식 요소의 value 속성값을 가져오거나 새 값을 적용할 때 사용합니다.

      [기본형]
      - $("요소선택").val();
      : 선택한 폼 요소의 value 값을 받아옵니다.
      - $("요소선택").val("새 값");
      : 선택한 폼 요소의 value 값을 새 값으로 바꿉니다.

5. prop() prop()메서드는 선택한 폼 요소(셀렉트 박스, 체크 박스, 라디오 버튼)의 상태 속성 값을 가져오거나 새롭게 설정할 때 사용합니다. 그리고 선택한 요소의 태그명(tagName), 노드타입(nodeType), 셀렉트 박스의 선택된 옵션의 인덱스 값을 반환하기도 합니다. 또, 폼 요소에 기본적으로 지정되어 있던 값을 받아오기도 합니다.

      [기본형]
      - $("요소 선택").prop("checked / selected")
        : 선택한 폼 요소의 상태가 체크된 상태인지 또는 선택된 상태인지 알 수 있습니다.
          예를 들어 checked 되어 있는 상태면 true를 반환하고,
          체크된 상태가 아니라면 false를 반환합니다.
      - $("요소 선택").prop("checked / selected", true / false)
        : 폼 요소를 선택하여 체크 또는 선택 상태를 바꿉니다.
      - $("요소 선택").prop("tagName / nodeType / selectedIndex / defaultValue")
        : 선택한 요소의 태그명이나 노드 타입, 셀렉스 박스의 선택된 option의 인덱스 값,
          태그에 지정되어 있던 기본값을 받아옵니다.
          폼 요소에 defaultValue를 사용하게 되면, value 속성값이 바뀌더라도
          초기에 설정해두었던 value 값을 가져옵니다.

** 🌳 수치 조작 메서드 ** 수치 조작 메서드는 요소의 속성을 조작할 때, 특히 요소의 위치나 넓이 높이 등 수치를 조작할 때 사용합니다. 1. 요소의 넓이 높이 메서드 선택한 요소의 넓이와 높이를 조작할 때 사용하는 메서드 입니다. 순수한 컨텐츠 넓이 높이만 조작하거나 padding까지를 포함한 넓이 높이를 조작하거나 ``border까지를 포함한 넓이 높이를 조작하는 메서드들로 이루어져 있습니다.`

      [기본형]
      - $("요소선택").width(값), $("요소선택").height(값)
      : 요소의 순수한 넓이와 높이값을 반환하거나 바꿀 때 사용합니다.
        ()를 비워두면 값을 가져오고, 값을 입력하면 해당 넓이/높이로 바꿉니다.
      - $("요소선택").innerWidth(값), $("요소선택").innerHeight(값)
      : padding 영역을 포함한 넓이 높이를 반환하거나, 해당 값으로 바꿀 수 있습니다.
      - $("요소선택").outerWidth(값), $("요소선택").outerHeight(값)
      : border 영역을 포함한 넓이 높이를 반환하거나, 해당 값으로 바꿀 수 있습니다.

2. 요소 위치 메서드 요소 위치 메서드에는 position()메서드와 offset()메서드가 있습니다. position()메서드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로 / 세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용합니다. position()메서드는 absolute와 비슷하게 동작합니다. offset()메서드는 document(문서)를 기준으로 선택한 요소의 가로/세로로 떨어진 위치 좌푯값을 반환하거나 변경할 때 사용합니다. offset()메서드는 relative와 비슷하게 동작합니다.

      [기본형]
      $("요소선택").position().left / right / top / bottom
      $("요소선택").offset().left / top

3. 스크롤바 위치 메서드 scrollTop()메서드는 브라우저의 스크롤바가 수직으로 이동한 위칫값을 받아오거나 변경할 때 사용합니다. scrollLeft()메서드는 브라우저의 스크롤바가 수평으로 이동한 위칫값을 받아오거나 변경할 때 사용합니다.

      [기본형]
      $(window).scrollTop(); 또는 $(window).scrollTop(새 값);
      $(window).scrollLeft(); 또는 $(window).scrollLeft(새 값);

** ⭐⭐객체 편집 메서드⭐⭐ ** 객체 편집 메서드는 선택한 요소를 복제하거나 새 요소를 생성하는 메서드와 새로 생성한 요소를 의도한 위치에 추가하고 선택한 요소를 삭제하는 메서드들로 이루어져 있습니다. 1. ⭐ before() / insertBefore() / ⭐ after() / insertAfter() before() / insertBefore()는 선택한 요소의 이전 위치에 새 요소를 생성하고, after() / insertAfter()는 선택한 요소의 다음 위치에 새 요소를 생성합니다.

      [기본형]
      - $("요소선택").before("새 요소")
      - $("새 요소").insertBefore("요소선택")
      - $("요소선택").after("새 요소")
      - $("새 요소").insertAfter("요소선택")

2. ⭐ append() / appendTo() / ⭐ prepend() / prependTo() append() / appendTo()는 선택한 요소 안의 마지막 위치에 새 요소를 생성하고 추가합니다. prepend() / prependTo()는 선택한 요소 안의 첫번째 위치에 새 요소를 생성하고 추가합니다.

      [기본형]
      - $("부모요소").append("새요소");
      - $("새요소").appendTo("부모요소");
      - $("부모요소").prepend("새요소")
      - $("새요소").prependTo("부모요소");

⭐ 3. clone() / empty() / remove() clone() 메서드는 선택한 요소를 복제합니다. 인자값이 true일 경우 이벤트까지 복제하고 false일 경우 선택한 요소만 복제합니다. 기본값은 false 입니다. empty() 메서드는 선택한 요소의 하위 요소를 전부 삭제 합니다. remove() 메서드는 선택한 요소를 삭제합니다.

      [기본형]
      - $("요소선택").clone(true/false);
      - $("부모요소").empty();
      - $("요소선택").remove

replaceAll() / replaceWith() ⭐ replaceAll() / replaceWith() 메서드는 선택한 요소를 새 요소로 바꿀 때 사용합니다. 주로 선택한 모든 요소를 한꺼번에 바꾸고 싶을 때 사용합니다.

      [기본형]
      - $("새 요소").replaceAll("요소선택");
      - $("요소선택").replaceWith("새 요소");

5. unwrap() / wrap() / wrapAll() / wrapInner() ⭐ unwrap() 메서드는 선택한 요소의 부모요소를 삭제합니다. wrap() 메서드는 선택한 요소를 각각 새요소로 감쌉니다. wrapAll() 메서드는 선택한 요소를 한꺼번에 새요소로 감쌉니다. wrapInner() 메서드는 선택한 요소의 모든 하위 요소를 새 요소로 감쌉니다.

    [기본형]
    - $("요소선택").unwrap();
    - $("요소선택").wrap("새 요소");
    - $("요소선택").wrapAll("새 요소");
    - $("요소선택").wrapInner("새 요소");

** ⭐ 제이쿼리 이벤트 등록 메서드 ** 이벤트란 사이트에서 방문자가 하는 모든 행위를 말하고, 이벤트 핸들러는 사용자의 동작에 따라 실행되는 코드를 말합니다. 이벤트 등록 메서드에는 하나의 이벤트만 등록할 수 있는 '단독 이벤트 등록 메서드'와 2개 이상의 이벤트를 등록할 수 있는 '그룹 이벤트 등록 메서드'가 있습니다. 단독 이벤트는 한 가지 동작에 대한 이벤트만 등록할 수 있습니다. 이때 해당 태그에 .이벤트명() 메서드를 사용합니다. 그룹 이벤트는 이벤트 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있습니다. 이때 .on()메서드를 사용합니다. on() 메서드 안에는 이벤트 명을 문자열로 전달하거나 객체를 전달할 수 있습니다.

      [단독 이벤트 기본형]
      $("이벤트 대상").이벤트 종류(function(){ 자바스크립트 코드 })
      -----------------------------------------------
      [그룹 이벤트 기본형]
      1. on()메서드 등록방식 1
      ---------------------------------------------------------------------------------------------
      $("이벤트 대상").on("이벤트 종류1 이벤트 종류2 이벤트 종류3..", function(){ 자바스크립트 코드 })
      -----------------------------------------------
      2. on()메서드 등록방식 2
      ---------------------------------------------------------------------------------------------
      $("이벤트 대상").on({
        "이벤트 종류1 이벤트 종류2...." : function(){ 자바스크립트 코드 }
      })
      --------------------------------------------------
      => 1번과 2번 이벤트 등록 방식은 여러 동작에 대해 하나의 이벤트 핸들러를 동작시키고자 할 때 사용하는 기본형입니다.
      -------------------------------------------------------
      3. on()메서드 등록방식 3
      ---------------------------------------------------------------------------------------------
      $("이벤트 대상").on({
        "이벤트 종류1" : function(){ 자바스크립트 코드 },
        "이벤트 종류2" : function(){ 자바스크립트 코드 },
        "이벤트 종류3" : function(){ 자바스크립트 코드 },
      })
      -----------------------------------------------------------------
      => 사용자의 동작마다 각각의 실행시킬 이벤트 핸들러가 다를 경우 사용합니다.

** 🌳 컨텐츠 탐색 선택자 ** 컨텐츠 탐색 선택자는 요소 또는 속성의 포함여부에 따라 특정 요소를 선택하는 선택자입니다.

      [선택자 종류]
      1. $("요소선택:contains('텍스트')")
      : 선택한 요소 중 '텍스트'를 포함하는 태그를 불러온다.
      -
      2. $("요소선택").contents()
      : 선택한 요소의 하위 요소 중 가장 가까운 하위요소를 불러온다.
      -
      3. $("요소선택:has('요소명')") 또는 $("요소선택").has('요소명')
      : 선택한 요소 안에 '요소명'인 자식 태그가 있으면 선택한다.
      -
      4. $("요소선택:not(:'제외요소')") 또는 $("요소선택").not(:'제외요소')
      : 선택한 요소 중 제외요소를 제외한 나머지 요소를 불러온다.
      -
      5. $("요소선택").filter('필터 요소')
      : 선택한 요소중 지정한 요소만 필터링하여 가져온다.
      -
      6. $("요소선택").find('찾을 요소')
      : 선택한 요소 안에 있는 찾을 요소를 찾아 선택한다.
      -
      7. $("요소선택").closest('요소선택2')
      : 선택한 요소의 상위 요소 중 가장 가까운 부모 요소를 선택한다.
      -
      8. $("요소선택").탐색선택자().end()★
      : 필터링 되기 이전 요소가 선택된다.

** 🌳 .is()메서드 ** is()메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true, 일치하지 않으면 false를 반환하는 메서드입니다. 주로 입력요소인 input과 같은 태그에 많이 사용하는 메서드 입니다.

      [기본형]
      $("요소선택").is(":checked / :selected / :visible / :hidden / :animated")

      - :checked 
      : 선택한 체크박스 또는 라디오 버튼이 체크된 상태면 true, 아니면 false를 반환한다.
      - :selected
      : 선택한 셀렉트 박스의 option태그가 선택된 상태면 true를 아니면 false를 반환한다.
      - :visible 
      : 선택한 요소가 눈에 보이는 상태면 true, 아니면 false를 반환한다.
      - :hidden
      : 선택한 요소가 숨겨진 상태면 true, 아니면 false를 반환한다.
      - :animated
      : 선택한 요소가 애니메이션 동작상태면 true, 아니면 false를 반환한다.

** 🌳 객체 조작 메서드 ** 자바스크립트에서 태그는 객체로 취급된다. 객체를 생성하고, 복제하고 삭제하고 속성 변환하는 다양한 객체 조작 메서드가 있습니다. 객체 조작 메서드에는 '속성 조작 메서드'와 '수치 조작 메서드', '객체 편집 메서드'가 있습니다. 속성 조작 메서드는 요소의 속성을 조작할때 사용하고 수치 조작 메서드는 요소의 넓이와 높이같은 수치를 바꿀때 사용하고 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할때 사용합니다. ** 🌳 속성 조작 메서드 ** 속성 조작 메서드는 요소의 속성을 조작할때 사용하는 메서드입니다.

      [기본형]
      1. .html() 또는 .html('새요소')
      : .html()메서드는 선택한 요소를 가져와 문자열로 변환하고
        .html('새요소')는 하위 요소를 전부 제거하고 새 요소로 바꾼다.
        바닐라 자바스크립트의 innerHTML 프로퍼티와 동일하다.

      2. .text()또는 .text("새 텍스트")
      : .text()는 선택한 요소의 텍스트를 가져오고,
        .text("새 텍스트")는 요소의 하위요소를 전부 제거하고 새 텍스트로
        채운다. 바닐라 자바스크립트의 innerText 프로퍼티와 동일하다.

** 🌳 제이쿼리 배열 관련 메서드 ** 태그를 불러오면 태그들은 모두 배열과 비슷한 공간안에 담기게 됩니다. 이 배열안을 순회하면서 특정 기능을 만들고 싶을 때 배열관련 메서드를 사용합니다.

      1. ⭐ each() / $.each()
      each() / $.each() 메서드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옵니다.
      [기본형]
      1. $('요소선택').each(function(매개변수1, 매개변수2){
        코드;
      })
      2. $.each($('요소선택'), function(매개변수1, 매개변수2){
        코드;
      })
      : 배열에 저장된 요소의 개수만큼 메서드를 반복 실행합니다.
        메서드를 실행할때마다 매개변수 1, 매개변수 2에는
        배열에 저장된 요소와 인덱스 값이 배열에 오름차순으로 대입됩니다.
      3. $('요소선택').each(function(){
        $(this)
      })
      4. $.each($('요소선택'), function(){
        $(this)
      })
      : 배열에 저장된 요소의 개수만큼 메서드를 반복 실행합니다.
        메서드를 실행할 때마다 this에는 배열에 저장된 요소가 오름차순으로 대입됩니다.

      2. ⭐ $.map(), $.grep()메서드
      ==========================================================================
      $.map() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행합니다.
      그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환합니다.
      $.map() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하면서
      인덱스 오름차순으로 배열의 데이터를 불러옵니다.
      메서드의 반환 값이 true일 경우, 데이터가 새 배열에 저장되고 새 배열을 반환합니다.
      $.map(), $.grep()메서드는 기존 배열은 유지한 채 새롭게 가공된 배열을 반환받고 싶은 경우 많이 사용합니다.
      .each()메서드는 기존 배열 자체를 가공하는 메서드 입니다.
      -
      [기본형]
      1. $.map()메서드
      -------------------------------------------------------------------------
      $.map(("요소") 또는 Array, function(매개변수1, 매개변수2){
        return 데이터 ;
      })
      : 배열에 저장된 요소 또는 데이터만큼 메서드를 반복 실행하면서 메서드가 실행될때 마다
        매개변수 1,2에 각각 배열의 데이터와 인덱스 값이 오름차순으로 대입됩니다.
        반환된 데이터는 새 배열에 저장되고, 새롭게 가공된 배열 객체를 반환합니다.
      -
      2. $.grep()메서드
      -------------------------------------------------------------------------
      $.grep(("요소") 또는 Array, function(매개변수1, 매개변수2){
        return true 또는 false ;
      })
      : 배열에 저장된 요소 또는 데이터만큼 메서드를 반복 실행하면서 메서드가 실행될때 마다
        매개변수 1,2에 배열의 데이터와 인덱스 값이 오름차순으로 대입됩니다.
        반환된 데이터가 true면 인덱스 오름차순으로 데이터를 새 배열에 저장하고,
        새롭게 가공된 배열 객체를 반환합니다.

      3. $.inArray() / $.isArray(), $.merge() 메서드
      ================================================================
      $.inArray() 메서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 값을 반환합니다.
      $.isArray() 메서드는 지정한 데이터가 배열 객체면 true를, 아니면 false를 반환합니다.
      $.merge() 메서드는 두 배열 객체를 하나의 객체로 묶습니다.
      -
      [기본형]
      $.inArray(data, Array, start index);
      $.isArray(object);
      $.merge(Array1, Array2);
      -
      4. $.index()메서드
      =================================================================
      지정한 선택 요소를 찾아 인덱스 값을 반환합니다.
      -
      [기본형]
      $('요소').index('찾을 요소');

** 🌻 제이쿼리 배열 관련 메서드 ** 속성 탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함여부를 따져 요소를 선택하는 선택자 입니다. 예를 들어 선택한 img 태그 중 alt 속성값이 '메인 비주얼'인 요소를 찾고자 할 때 유용하게 사용이 가능합니다.

      [선택자 종류]
      1. $('요소 선택[속성]')
      : 선택한 요소의 해당 속성이 있는 모든 태그 요소를 선택합니다.
      -
      2. $('요소 선택[속성 = '값']')
      : 선택한 요소의 속성과 값이 일치하는 태그 요소를 선택한다.
      -
      3. $('요소 선택[속성 ^= '값']')
      : 선택한 요소 중 '값'으로 시작하는 태그 요소를 찾아 선택합니다.
        이때 '값'은 한 단어로 일치해야 합니다.
      -
      4. $('요소 선택[속성 $= '값']')
      : 선택한 요소 중 '값'이라는 단어로 끝나는 태그 요소를 찾아 선택합니다.
        이때 '값'은 한 단어로 일치해야 합니다.
      -
      5. $('요소 선택[속성 *= '값']')
      : 선택한 요소 중 '값'을 포함하는 태그 요소를 찾아 선택합니다.
        이때 '값'은 한 단어로 일치하지 않아도 찾아냅니다.
      -
      6. $('요소 선택:hidden')
      : 선택한 요소 중 css로 숨겨둔 요소를 선택하여 가져옵니다. (display, visibillity, overflow)
      -
      7. $('요소 선택:visible')
      : 선택한 요소 중 화면에 보이는 요소를 선택하여 가져옵니다.
      -
      8. $(':text')
      : input 태그 중 type속성 값이 text인 요소를 가져옵니다.
        : 뒤에는 input의 type 속성값들을 쓸 수 있습니다.
      -
      9. $(':selected')
      : selected 속성이 적용된 태그를 가져옵니다.
      -
      10. $('cheacked')
      : cheacked 속성이 적용된 태그를 가져옵니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 🥚 제이쿼리 ** 제이쿼리는 자바스크립트를 기반으로 만들어진 라이브러리 언어 입니다. 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합입니다. - 제이쿼리는 기존 자바스크립트가 가지고 있던 브라우저 호환성 문제를 해결한 언어로 특히 문서 객체 호환성을 높인 언어 입니다. 그리고 제이쿼리를 이용하면 편리하게 애니메이션을 구현할 수 있어 개발자 사이에서 굉장히 인기있던 언어였습니다. - 제이쿼리는 문서 작성에 앞서 먼저 제이쿼리 파일을 연결해야 사용이 가능합니다. 제이쿼리 파일은https://cdnjs.com/libraries/jquery/1.12.4 사이트에서 압축 파일을 다운받아 쓰거나, cdn 방식으로 연결하여 사용합니다. 만약 옛날 버전의 라이브러리를 연동했다면 호환성을 위해 호환성 파일인 https://cdnjs.com/libraries/jquery-migrate 미그레이트 파일을 함께 연결해주는 것이 좋습니다.

      파일 연결 순서 
      --------------------------------------------------------------
      1. 제이쿼리 파일 연결
      2. 미그레이트 파일 연결 (선택사항, 호환성이 우려될 경우)
      3. 내가 사용할 js 파일을 연결

** 🍳 제이쿼리의 기본 구조 ** 제이쿼리는 html처럼 기본구조가 정해져 있습니다. 기본 구조를 쓴 후에 안에 사용할 코드들을 작성해야 합니다. 제이쿼리의 기본형을 쓸 때 제일먼저 $를 씁니다. $는 곧 제이쿼리를 의미하며 $ 뒤에는 ()가 붙습니다. ()는 함수(함수의 호출문)를 의미하고, $()는 '제이쿼리 함수'라는 의미 입니다.

      [기본형]
      1.
      $(function(){
        제이쿼리 코드;
      });
      ----------------------------------
      2.
      $(document).ready(function(){
        제이쿼리 코드;
      });

** 🍙 제이쿼리의 선택자 ** 제이쿼리에서 태그를 불러올 때 자바스크립트처럼 querySelector나 getElementBy~가 필요하지 않습니다. css에서 사용하던 선택자를 그대로 사용하고, 아래에 있는 문법을 이용하여 불러옵니다.

      [기본형]
      $('클래스명 또는 아이디명 또는 태그명')

** 🍛 제이쿼리 자주 쓰는 문법 **

      1. 선택한 요소의 지정한 스타일을 적용합니다.
      $('선택자').css("css속성", "값");
      2. 선택한 요소의 속성을 바꿉니다.
        해당 속성이 없을 경우에는 속성을 추가해줍니다.
      $('선택자').attr("속성명","값")

** 🍽️ 메서드를 여러 개 연결하는 체이닝 기법 ** 하나의 태그에 여러 메서드를 연결하고자 할 때 아래와 같은 방식을 사용할 수 있습니다. 태그를 불러와서 여러 메서드를 뒤에 줄줄이 붙여서 쓰는 방식입니다. 이 방식을 마치 체인이 연결된 것과 비슷하다고 하여 체이닝 기법이라고 부릅니다.

      [기본형]
      $('요소').css("속성","값").attr("속성","값")

** 🔎 부모 요소 선택자 ** 선택한 요소를 감싸고 있는 부모 요소를 뜻합니다.

      [기본형]
      $("요소").parent()

** 🔎 하위 요소 선택자 ** 하위 요소 선택자는 선택한 부모 요소를 기준으로 안쪽에 있는 하위 요소를 선택할 때 사용합니다. css 후손 문법과 동일합니다.

      [기본형]
      $("부모요소 자식요소")

** 🔎 자식요소 선택자 ** 자식요소 선택자는 부모요소의 자손요소를 선택할 때 사용합니다. css 문법과 동일하게 사용하거나 메서드를 이용할 수 있습니다.

      [기본형]
      1. $("부모요소 > 자손요소")
      2. $("부모요소").children("자손요소")
      : 1번 2번은 선택한 요소를 기준으로 지정한 자식 요소만 불러옵니다.
      --------------------------------------------------------------
      3. $("부모요소").children()
      : 선택한 요소를 기준으로 모든 자식 요소들을 불러올 때 사용합니다.

** 🔎 css를 한 번에 여러개 적용하는 css 메서드 문법 ** css를 한 번에 적용하려면 css 메서드 안에 객체를 넣어 사용할 수 있습니다. 만약 css 속성들을 변수에 넣고 싶다면, 자바스크립트 문법 그대로 변수를 생성하여 객체를 참조시키고 css 메서드에 변수를 전달할 수도 있습니다.

      [기본형]
      1.
      $("요소 선택").css({
        속성 : 값,
        속성 : 값,
      })
      -----------------------------------
      2.
      let 변수 = {
        속성 : 값,
        속성 : 값,
      }
      $("요소 선택").css(변수)

** 🔎 형(prev) / 동생(next) 요소 선택자 ** 형 요소 선택자는 선택한 요소를 기준으로 바로 위에 있는 형 태그 하나를 선택하고, 동생 요소 선택자는 선택한 요소를 기준으로 바로 아래에 있는 동생 태그 하나를 선택합니다.

      [기본형]
      1. $("요소").prev(); -> 요소 윗줄의 형 요소를 선택
      2. $("요소").next(); -> 요소 아랫줄의 동생 요소를 선택
      2. $("형 + 동생"); -> css 동위 선택자 문법

** 🔎 전체 형(prev) / 동생(next)요소 선택자 ** 전체 형 요소 선택자는 선택한 요소를 기준으로 윗쪽의 모든 형 요소를 선택하고, 전체 동생 요소 선택자는 선택한 요소를 기준으로 모든 동생 요소를 선택합니다.

      [기본형]
      $("요소선택").prevAll()
      $("요소선택").nextAll()

** 🔎 전체 형제 요소 선택자 ** 전체 형제 요소 선택자는 선택한 요소의 모든 형, 동생 요소를 선택합니다.

      [기본형]
      $("요소").siblings();

** 🔎 범위 제한 형/동생 요소 선택자 ** 범위 제한 형/동생 요소 선택자는 선택한 요소를 기준으로 지정한 범위 내의 전체 형 요소를 선택하거나 전체 동생 요소를 선택합니다.

      [기본형]
      $("요소").prevUntil("형요소")
      : 기준 요소부터 형 요소 사이의 형 요소들을 선택합니다.
      -----------------------------------------------
      $("요소").nextUntil("동생요소")
      : 기준 요소부터 동생 요소 사이의 동생 요소들을 선택합니다.

** 🔎 상위 요소 선택자 ** 상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 특정 요소를 선택하고 싶을 때 사용합니다.

      [기본형]
      $('자식요소').parents();
      : 선택한 요소를 기준으로 상위 요소를 모두 선택합니다.
      ------------------------------------------------
      $('자식요소').parents('부모요소');
      : 선택한 요소를 기준으로 특정 상위 요소를 선택합니다.

** 🔎 가장 가까운 상위 요소 선택자 ** 선택한 요소를 기준으로 가장 가까운 상위 요소를 선택할 때 사용합니다. ()를 비워두면 .parent와 동일한 효과를 가지고, ()안에 부모 선택자가 들어있으면 .parents와 동일한 효과를 가집니다.

      [기본형]
      $('자식요소').closest('요소 선택');

** 🔎 탐색 선택자 ** 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 선택하여 좀 더 정확하게 태그를 선택할 수 있습니다. 대표적인 탐색 선택자에는 배열의 인데스 번호를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중에 지정된 속성과 값을 선택하는 '속성 탐색 선택자'가 있습니다. ** ⭐ 위치 탐색 선택자 ** 기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 더 정확하게 선택할 수 있습니다.

      [선택자 종류]
      1. $('요소 선택:first') 또는 $('요소 선택').first()
      : 선택된 요소 중 첫 번째 요소를 선택합니다.
      -
      2. $('요소 선택:last') 또는 $('요소 선택').last()
      : 선택된 요소 중 마지막 요소를 선택합니다.
      -
      3. $('요소 선택:odd'), $('요소 선택:even')
      : odd는 선택한 요소 중 짝수번째에 위치한 요소만 선택하고,
        even은 선택한 요소 중 홀수번째에 위치한 요소만 선택합니다.
      -
      4. $('요소 선택:first-of-type'), $('요소 선택:last-of-type')
      : 부모 태그 안의 형제 관계가 서로 다른 태그일 경우 
        이 중 첫번째나 마지막 위치의 태그를 선택합니다.
      -
      5. $('요소 선택:nth-of-type(숫자)') 또는 $('요소 선택:nth-child(숫자)')
      : 선택한 요소의 형제 중 특정 위치의 형제 요소를 선택할 때 사용합니다.
      -
      6. $('요소 선택:only-child')
      : 부모 요소 내의 자식 요소가 한 개뿐인 자식요소를 선택할 때 사용합니다.
      -
      7. ⭐ $('요소 선택:eq(index)') 또는 $('요소 선택').eq(index)
      : 선택한 요소 중 특정 인덱스 번호를 참조하는 요소를 선택합니다.
      -
      8. $('요소 선택:gt(index)'), $('요소 선택:lt(index)')
      : gt()는 요소 중 해당 인덱스 보다 큰 인덱스 번호를 참조하는 요소들을 선택,
        lt()는 요소 중 해당 인덱스 보다 작은 인덱스 번호를 참조하는 요소들을 선택합니다.
      -
      9. $('요소 선택').silce(index)
      : 선택한 요소 중 인덱스 번호부터 마지막 인덱스 번호까지 모든 요소를 잘라옵니다.
        만약 범위를 지정하고 싶다면 .silce(index, index) 형태를 사용합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 💡 속성이 있는 노드 추가하기 ** html 태그에서는 여러가지 속성을 사용하여 웹 요소를 제어합니다. 따라서 새로운 요소를 만들면 그와 관련된 속성노드도 만들어서 자식노드로 연결해야 합니다.

      1. 요소 노드 만들기
      : .createElement()메서드를 사용하여 태그의 형태를 먼저 만듭니다.
      2. 속성 노드 만들기
      : 요소 노드를 만드는 .createElement()메서드를 사용하여 요소노드를 만들었다면
        그 다음으로는 속성 노드를 만드는 .createAttribute()메서드를 사용해야 합니다.
        속성명을 만든 이후에는 속성 값을 추가해야 합니다.
        속성값을 추가할때에는 속성노드.value 프로퍼티를 이용합니다.
        💛
        [기본형]
        let 변수 = document.createAttribute('속성명');
        변수.value = '값';
      3. 속성 노드 연결하기
      : 속성 노드는 요소 노드의 자식으로 연결해야 합니다.
        새로 만든 속성 노드를 요소 노드에 추가하려면 setAttributeNode()메서드를 이용해야 합니다.
        만약 추가할 속성이 요소노드에 이미 들어가 있다면 기존 속성 노드를 새 속성 노드로 대체합니다.
        💛
        [기본형]
        부모노드(태그껍데기, 요소명).setAttributeNode(속성노드);
      4. 자식 노드 연결하기
      : 위 단계까지는 속성과 속성값을 연결한 상태이고, 요소 노드와는 연결되지 않은 상태 입니다.
        그래서 속성과 요소 노드를 연결하려면 .appendChild()메서드를 사용해야 합니다. 

    <script>
      function addContant() {
        //p요소 노드 생성
        let newP = document.createElement("p"); //<P></p>
        let text = document.createTextNode("바사삭!😋 고소한 향기가 솔솔~"); //텍스트노드 생성
        newP.appendChild(text); //부모노드에 자식노드 연결
        //img 요소 노드 생성
        let newImg = document.createElement("img"); //<img/>
        let srcNode = document.createAttribute("src"); //src 속성 노드 만들기 (값 없음)
        let altNode = document.createAttribute("alt"); //alt 속성 노드 만들기 (값 없음)
        srcNode.value = "./img/chicken.jpg"; //src 속성에 값 추가
        altNode.value = "치킨"; //alt 속성에 값 추가
        // <img src = '경로' alt = '값' />
        newImg.setAttributeNode(srcNode); // img태그에 속성 연결
        newImg.setAttributeNode(altNode); // img태그에 속성 연결
        //id = info에 newP,newImg 속성 추가하기
        document.getElementById("info").appendChild(newP);
        document.getElementById("info").appendChild(newImg);
      }
    </script>

** 💡 도전! 실습 라이트 박스 효과 만들기 ** 앞에서 배운 내용을 토대로 클릭하면 내용의 속성이 바뀌는 라이트 박스 효과를 만들어보겠습니다. ✔️ css

    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .row {
        width: 1520px;
        height: auto;
        margin: 160px auto;
      }
      .row > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        list-style: none;
      }
      /* 라이트 박스 영역 */
      #light_box {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
      }
    </style>

✔️ html

 <body>
    <div class="row">
      <ul>
        <!-- 1 -->
        <li>
          <img
            src="./img/img_tumb-1.png"
            alt="썸네일이미지"
            data-src="img/img-1.jpg"
            class="pic"
          />
        </li>
        <!-- 2 -->
        <li>
          <img
            src="./img/img_tumb-2.png"
            alt="썸네일이미지"
            data-src="img/img-2.jpg"
            class="pic"
          />
        </li>
        <!-- 3 -->
        <li>
          <img
            src="./img/img_tumb-3.png"
            alt="썸네일이미지"
            data-src="img/img-3.jpg"
            class="pic"
          />
        </li>
        <!-- 4 -->
        <li>
          <img
            src="./img/img_tumb-4.png"
            alt="썸네일이미지"
            data-src="img/img-4.jpg"
            class="pic"
          />
        </li>
        <!-- 5 -->
        <li>
          <img
            src="./img/img_tumb-5.png"
            alt="썸네일이미지"
            data-src="img/img-5.jpg"
            class="pic"
          />
        </li>
        <!-- 6 -->
        <li>
          <img
            src="./img/img_tumb-6.png"
            alt="썸네일이미지"
            data-src="img/img-6.png"
            class="pic"
          />
        </li>
      </ul>
    </div>
    <!-- 라이트 박스 -->
    <div id="light_box">
      <img src="./img/img-1.jpg" alt="큰 이미지" id="light_box_img" />
    </div>

✔️ js

    <script>
      let pic = document.getElementsByClassName("pic"); //썸네일 6장
      let lightBox = document.getElementById("light_box"); //라이트 박스 영역
      let lightBoxImg = document.getElementById("light_box_img"); //라이트 박스의 큰이미지
      //썸네일 6장의 이벤트를 걸어줍니다.
      for (let i = 0; i < pic.length; i++) {
        pic[i].addEventListener("click", showLightBox);
      }
      //썸네일을 클릭하면 실행할 이벤트
      function showLightBox() {
        let bigLocation = this.getAttribute("data-src"); //썸네일 이미지의 큰 이미지 경로
        //라이트 박스 안의 큰 이미지의 경로를 data-src의 경로로 바꿉니다.
        lightBoxImg.setAttribute("src", bigLocation);
        //라이트 박스 영역을 나타냅니다.
        lightBox.style.display = "flex";
      }
      //라이트 박스를 감춥니다.
      lightBox.onclick = function () {
        lightBox.style.display = "none";
      };
    </script>

** 💡 DOM에서 노드 추가 삭제하기 ** DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 node list를 사용해야 합니다. 노드 리스트란 DOM에 접근할 때 querySelectorAll()메서드를 사용하면 노드를 한꺼번에 가져올 수 있습니다. 이때, 노드의 정보를 여러 개 저장한 것이 바로 노드 리스트라고 합니다. 배열과 비슷하게 생겼으며, 비슷하게 동작합니다. 노드 리스트에는 인덱스와 요솟값이 저장되고 lenght속성에 몇 개의 노드가 저장되어 있는지 표시됩니다. 노드 리스트는 배열처럼 생겼기 때문에 배열 문법을 이용하면 특정 순번째에 있는 태그를 가져올 수도 있습니다.

      [기본형]
      document.querySelectorAll('요소')[index]

** 💡 텍스트 노드를 사용하는 새로운 요소 추가하기 ** 1. 요소 노드 만들기 : DOM에서 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것입니다. 이때 사용하는 메서드는 .createElement()메서드 입니다. - [기본형] document.createElement(노드명) 노드명은 태그의 이름입니다. 2. 텍스트 노드 만들기 : 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 '자식노드'로 만들어서 연결해야 합니다. 텍스트 노드를 만드는 메서드는 .createTextNode() 메서드를 사용해야 합니다. - [기본형] document.createTextNode('텍스트') 3. 자식 노드 연결하기 : 1번에서 만들었던 노드와 2번에서 만들었던 텍스트 노드는 노드가 만들어질 상태일 뿐이며 아직 부모노드와 자식노드로 연결되지 않은 상태입니다. .appendChild()메서드를 사용하면 텍스트 노드나 속성노드를 만든 후 요소 노드에 연결할 수 있습니다. 이때 .appendChild()메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가됩니다. - [기본형] 부모노드.appendChild(자식노드)

** 💡 addEventListener()메서드 ** 앞에서 배운 이벤트 핸들러는 한 요소에 하나의 이벤트 핸들러만 연결할 수 있었습니다. 하지만 검색창의 돋보기 버튼 처럼 click과 enter 이벤트를 함께 연결해야할 경우 addEventListener()메서드를 사용할 수 있습니다. 즉, 하나의 요소에 여러개의 이벤트를 연결하고자 할 경우 사용합니다.

      [기본형]
      요소.addEventListener('이벤트명', 함수(핸들러), 캡쳐 여부);
      - 이벤트명 : 이벤트의 유형을 지정합니다.
                  단, click이나 keydown처럼 on이라는 키워드는 쓰지 않습니다.
      - 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 입력합니다.
                여기에서 함수를 정의할 때에는 event 객체를 인수로 받습니다.
                매개변수 자리에 이벤트 객체가 생성됩니다.
      - 캡쳐 여부 : 이벤트를 캡쳐할지 여부를 지정하며, 기본값은 false이고
                    true나 false 중 선택할 수 있습니다.
                    true면 캡쳐링, false면 버블링하겠다는 의미입니다.
                    이벤트의 캡쳐링은 DOM의 부모노드에서 자식노드로 이벤트를 전달하는 것이고,
                    버블링의 DOM은 자식노드에서 부모노드로 이벤트를 전달하는 것을 말합니다.
                    만약 버블링할 경우 이 자리는 생략이 가능합니다.

** 🛁 버블링과 캡쳐링 ** 버블링이란 DOM의 자식노드에서 부모노드로 이벤트를 전달하는 것을 말하며, 기본값으로 들어가 있는 기능입니다. 단, 모든 이벤트가 전부 버블링되는 것은 아닙니다. 캡쳐링은 반대로 DOM의 부모노드에서 자식노드로 이벤트를 전달하는 것을 말하며, 기본값은 false로 캡쳐링이 되지 않고, addEventListenener의 마지막 인자값 자리에 true를 넣었을 경우에만 발생합니다. ** 💦 버블링 ** 버블링의 원리는 아주 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모요소의 핸들러가 동작합니다. 가장 최상위에 있는 조상 요소를 만날때까지이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. ** ⭐ event.target ** 부모요소의 핸들러는 이벤트가 정확히 어디에서 발생했는지에 대한 정보를 얻을 수 있습니다. 이벤트가 발생한 가장 안쪽의 요소는 target 요소라고 부르고 event.target을 사용하여 접근할 수 있습니다. - event.target은 this(= event.currentTarget)와 아래와 같은 차이점이 있습니다. - event.target은 실제 이벤트가 시작된 '타켓'요소 입니다. 버블링이 진행되어도 변하지 않습니다. - this는 '현재 요소', 현재 실행중인 핸들러가 할당된 요소를 뜻합니다. ** ⛔ 버블링 중단하기 ** 이벤트 버블링은 타겟 이벤트에서 시작해서 html 요소를 거쳐 document객체를 만날때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이때 모든 이벤트 핸들러가 실행됩니다. 그런데 핸들러에게 이벤트를 완전히 처리한 이후에 버블링을 중단하도록 명령할 수 있습니다. event.stopPropergation()매서드를 사용하면 됩니다. ** 📷 캡처링 ** 이벤트에는 버블링 이외에도 캡처링(capturing)이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이지는 않지만 종종 유용한 경우가 생깁니다. 표준 DOM 이벤트 흐름에는 3단계가 있습니다. 1. 캡처링 단계 = 이벤트가 하위요소로 전파되는 단계 2. 타켓 단계 = 이벤트가 실제 타켓 요소에 전달되는 단계 3. 버블링 단계 = 이벤트가 상위 요소로 전파되는 단계 캡쳐링은 이벤트리스너의 마지막 인수자리에 true를 설정하면 진행됩니다. 이때 최상위 요소부터 타겟 요소까지 순차적으로 아래로 내려오며 이벤트를 실행시킵니다.

      [기본형]
      요소.addEventListener('이벤트명', 함수, true)
      또는
      요소.addEventListener('이벤트명', 함수, {capture : true})

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 👻 DOM으로 태그 가져오기 ** 1. getElementById()메서드 html에서 id는 태그의 고유한 이름을 지정할 때 사용합니다. getElementById()메서드를 사용하면 해당 이름을 가지고 있는 태그를 선택해서 가져옵니다. 즉, 태그를 하나만 가져오는 것 입니다. 이미 매서드에 id를 가져온다는 사실이 명시되어 있으므로 #은 쓰지 않고 불러옵니다.

      [기본형]
      document.getElementById('아이디명')

2. getElementByClassName()메서드 getElementByClassName()메서드는 지정한 class선택자 이름이 들어있는 html요소에 접근한다. 메서드 이름에 클래스 이름을 가지고 오겠다고 명시 되어 있으므로 .은 붙이지 않는다. 또한 반드시 문자열의 형태로 가져온다. getElementByClassName()메서드로 태그를 불러오면 클래스 이름이 같은 DOM요소들을 HTMLCollection객체에 저장한다. HTMLCollection객체는 배열과 비슷한 형태로 저장하고, 배열처럼 인덱스 번호도 부여된다. 그리고 배열처럼 사용할 수 있다. 하지만 배열은 아니다. 만약 배열로 사용하려면 배열로 변환해 주어야 한다.

      [기본형]
      document.getElementByClassName('클래스명')

3. getElementByTagName()메서드 class나 id로 이름이 지정되지 않는 일반 태그들을 불러올때 사용하는 메서드이다. 특정 태그들을 한꺼번에 불러올때 주로 사용하며 HTMLCollection객체에 저장된다.

      [기본형]
      document.getElementByTagName('태그명')

4.querySelector()메서드 , querySelectorAll()메서드 위에 있는 getElementBy~메서드의 반환값(저장장소)는 HTMLCollection객체이다. 여기에는 HTML요소('p'나 'a'같은 형태)만 저장된다. DOM트리의 텍스트나 속성노드까지 자유롭게 접근하고 제어하려면 querySelector()메서드, querySelectorAll()메서드를 사용해야 한다. id선택자처럼 반환값이 1개라면 querySelector()메서드를 사용하고, class선택자나 태그명 선택자처럼 반환값이 여러 개라면 querySelectorAll()메서드를 사용한다. querySelector()메서드 또는 querySelectorAll()메서드로 선택자를 표현할때에는 #또는 .을 붙여서 사용해야 하고 반드시 문자열로 표현해야 한다. 태그는 기호없이 불러오면 된다. querySelector, querySelectorAll로 데려오는 모든 반환값(=태그)는 NodeList 라는 공간에 저장되고 노드 리스트는 노드를 한꺼번에 저장한 것으로 배열과 비슷한 형태로 생겼다. 하지만 마찬가지로 배열은 아니다.

      [기본형]
      - querySelector는 제일 먼저 등장하는 태그 1개를 가져온다.
      document.querySelector('#아이디명');
      document.querySelector('.클래스명');
      document.querySelector('태그명');
      - 해당 클래스명이나 태그를 모두 가져올때
      document.querySelectorAll('.클래스명');
      document.querySelectorAll('태그명');

** 👻 웹요소의 내용 수정하기 ** html태그안에 들어있는 src나 alt와 같은 속성들은 attribute(node)라고 표현하고 자바스크립트의 객체에서 사용하는 속성들은 property라고 한다. 자바스크립트에서는 웹 요소의 내용을 수정할 수 있다. 가장 쉬운 방법은 innerText나 innerHTML프로퍼티를 이용하는 것이다. 이름만 봐도 알 수 있듯이 innerText는 텍스트 내용을 수정하고 innerHTML은 태그까지 반영하여 내용을 수정한다.

      1. innerText
      ------------------------------
      요소.innerText = 내용;
      2. innerHTML
      -----------------------------
      요소.innerHTML = 내용;

** 👻 태그의 속성 수정하기 ** 웹 요소를 문서에 삽입할때 태그 속성을 함께 사용하면 DOM트리에 속성 노드가 추가되면서 속성값이 저장된다. 이때 속성에 접근하려면 getAttribute()메서드를 사용하고, 속성을 수정하려면 setAttribute()메서드를 사용한다.

      [기본형]
      요소.getAttribute('속성명'); 
      : 해당 요소의 속성에 접근하여 지정된 값을 가져온다.
      요소.setAttribute('속성명','바꿀 값');
      : 해당 요소의 속성에 접근하여 지정된 값을 새 값으로 바꾼다.

** 👻 이벤트 객체 ** 이벤트 객체는 이벤트 핸들러 안에 포함된 객체로 이벤트가 발생하면 생성된다. event객체에는 이벤트에 대한 다양한 정보를 가지고 있다. 예를 들어 이벤트가 발생된 대상(태그)에 접근할때 this라는 키워드를 사용할 수 있다.

      [이벤트 객체의 프로퍼티]
      - altKey : 이벤트가 발생했을때 alt가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
      - ctrlKey : 이벤트가 발생했을때 ctrl이 눌렸는지에 대한 여부를 boolean값으로 반환한다.
      - shiftKey : 이벤트가 발생했을때 shiftKey가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
      - button : 마우스에서 누른 키 값을 반환한다.(왼쪽 :0, 휠 :1, 오른쪽 :2)
      - charCode : keypress이벤트가 발생했을때 어떤 키를 눌렀는지 유니코드값으로 키의 정보를 반환한다.
      - clientX, clientY : 이벤트가 발생한 요소의 X좌표 위치와 Y좌표 위치를 반환한다.
      - pageX, pageY : 현재 문서를 기준으로 이벤트가 발생한 X좌표 위치와 Y좌표 위치를 반환한다.
      - screenX, screenY : 현재 화면을 기준으로 이벤트가 발생한 X좌표 위치와 Y좌표 위치를 반환한다.
      - target : 이벤트가 최초로 발생한 대상을 반환한다.
      - timeStamp : 이벤트가 발생한 시간을 반환한다.
      - type : 발생한 이벤트의 이름을 반환한다.
      - which : 키보드와 관련된 이벤트가 발생했을때 키의 유니코드 값을 반환한다.

      [메서드]
      - preventDefault() : 기본이벤트를 취소할때 사용한다.
      - stopPropergation() : 기본이벤트를 취소할때 사용한다.

** 👻 DOM을 이용한 이벤트 처리 ** HTML 요소에 이벤트 핸들러를 연결해놓으면 태그 속성과 자바스크립트 소스가 섞이게 됩니다. 그래서 자바스크립트를 수정하려면 HTML 태그와 속성을 하나씩 찾아보아야 합니다. 하지만 DOM을 이용하여 이벤트 핸들러를 처리하면 태그와 자바스크립트 소스가 분리되면서 보기 좋게 사용할 수 있습니다. 앞에서 배운 이벤트 처리 방법은 HTML이 주인이 되어 자바스크립트의 함수를 불러와 실행했습니다. 하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML요소를 가져와 이벤트 핸들러를 연결합니다.

    [기본형]
    <script>
    HTML웹요소.on이벤트명 = 함수명; => ⭐ 소괄호를 붙이지 않습니다.
    </script>

** 👻 DOM을 이용한 이벤트 처리로 상세글 페이지 만들어보기! **

** 👻 문서 객체, DOM(Document object model) ** 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위해서 입니다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 합니다. DOM(문서객체)는 HTML태그 구조를 하나씩 읽어내려가면서 요소와 요소간의 포함관계를 구조화하여 저장합니다. 이때 하나 하나의 태그 포함관계나 요소를 NODE라고 표현합니다. 이 노드들을 시각화하여 하나로 표현하면 마치 나무 뿌리와 닮았다고 하여 'DOM트리'라고 부릅니다. 문서 객체 모델을 한 마디로 정의하자면 '자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법'이라고 말할 수 있습니다. HTML언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML문서에서 사용하는 XML DOM도 있습니다. DOM은 웹 문서를 하나의 객체로 정의합니다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의합니다. 예를 들어 웹 문서 전체는 document 객체이고, 안에 있는 이미지는 image 객체입니다. 이처럼 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다.

** ⭐ DOM 트리 ** 자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지 알고 있어야 합니다. DOM트리의 최상위 객체로는 Document가 있고 곧 HTML 문서 전체를 뜻합니다. 이 안에 자손으로 <head>,<body>가 있고 head안에는 meta나 title, link등의 태그가 들어있습니다. body안에는 header와 footer, main, div, section 등등의 태그들이 서로 부모 자식 관계를 갖습니다. 이것을 시각화하여 정리한 것을 'DOM트리'라고 부릅니다. 이렇게 부모와 자식구조로 태그들의 구조를 표현하면 마치 나무형태가 되어 'DOM트리'라고 하고 트리에서 가지가 갈라져 나온 항목을 '노드(node)'라고 합니다. dom트리의 시작 부분인 html노드를 나무 뿌리에 해당한다고 하여 '루트(root)노드'라고 부릅니다. 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룹니다. 따라서 각 노드 사이의 관계를 부모와 자식, 형제로 표현할 수 있습니다. 부모노드(parent)에는 자식노드(child)가 있고, 부모노드가 같은 형제노드(sibling)노드가 있습니다.

      ⭐ [DOM을 구성하는 기본 원칙]
      1. 모든 HTML태그는 요소(element)노드 입니다.
      2. HTML태그에서 사용하는 텍스트 내용은 자식노드인 텍스트(text)노드 입니다.
      3. HTML태그의 속성은 자식노드인 속성(attribute)노드 입니다.
      4. 주석은 주석(comment)노드 입니다.

** ⭐ DOM 요소에 접근하고 속성 가져오기 ** 웹 문서에서 사용한 여러 이미지 가운데 하나만 골라서 크기를 바꾸려면 콕 집어서 가져올 수 있어야 합니다. 이렇게 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'라고 표현합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 💖 객체 생성자 함수 ** 내장 객체를 생성할 때에는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성합니다. 객체 생성자 함수는 객체를 생성한 후에 그 객체를 반환합니다. 객체 생성자 함수는 일종의 빵틀과 비슷합니다. 객체의 틀을 하나 만들어두고 동일한 형식의 객체를 여러개 찍어내고 싶을 때 사용합니다.

      [기본형]
      function 함수명(매개변수1, 매개변수2...){
        this.속성명 = 값;
        this.함수명 = function(){자바스크립트 코드;}
      }
      -
      let 참조변수(인스턴스네임) = new 함수명();
      ↓
      let 참조변수 = {속성:새 값, 함수명:function(){메서드 내용}}

//객체 생성자 함수
      function CheackWeight(name, height, weight) {
        this.userName = name;
        this.userHeight = height;
        this.userWeight = weight;
        this.minWeight;
        this.maxWeight;
        //사용자의 이름, 키, 몸무게를 나타내는 메서드
        this.getInfo = function () {
          let str = "";
          str += "👧🏻 이름: " + this.userName + "<br/>";
          str += "키: " + this.userHeight + "<br/>";
          str += "몸무게: " + this.userWeight + "<br/>";
          return str;
        };
        //정상몸무게, 표준 오차 몸무게를 구하여 평균 체중인지 아닌지 출력해줍니다.
        this.getResult = function () {
          //정상체중의 최저 몸무게
          this.minWeight = (this.userHeight - 100) * 0.9 - 5;
          //정상체중의 최고 몸무게
          this.maxWeight = (this.userHeight - 100) * 0.9 + 5;
          //사용자이 몸무게 >= 최저몸무게 && 사용자의 몸무게 <= 최고 몸무게
          if (
            this.userWeight >= this.minWeight &&
            this.userWeight <= this.maxWeight
          ) {
            return "정상체중입니다.";
          } else if (this.userWeight < this.minWeight) {
            return "저체중입니다.";
          } else {
            return "과체중입니다." + "<br/>";
          }
        };
      }
      let dotKim = new CheackWeight("김땡땡", 168, 67);
      let dotLee = new CheackWeight("이땡땡", 172, 64);
      console.log(dotKim);
      console.log(dotLee);
      document.write(dotKim.getInfo());
      document.write(dotKim.getResult());
      document.write("---------------------------------------------" + "<br/>");
      document.write(dotLee.getInfo());
      document.write(dotLee.getResult());
      //각 객체마다 메서드를 고유하게 저장하고 있으므로 false
      document.write(dotKim.getResult === dotLee.getResult);

** 💛 메모리 절약을 위한 프로토타입 사용하기 ** 객체 생성자 함수에서 프로토타입 없이 메서드를 등록하면 해당 객체 생성자 함수로부터 생성된 객체는 모두 동일한 메서드를 고유하게 가지게 됩니다. 즉, 객체가 2개가 생성되면 모체 안에 있는 메서드들을 새롭게 자바스크립트 메모리 공간에 고유하게 또 저장합니다. 이 방법은 메모리의 공간을 낭비하게 되고, 이 메모리를 효율적으로 사용하려면 prototype을 사용하여 메서드를 등록하면 됩니다. prototype을 등록하는 방법은 모체가 되는 객체 생성자 함수 안에 prototype이라는 키워드를 사용하여 메서드를 등록하면 됩니다. 이렇게 하면 모체로부터 생성된 객체는 메서드를 고유하게 가지지 않고, 필요할때마다 모체에서 꺼내쓸 수 있습니다.

      [기본형]
      function 함수명(매개변수1, 매개변수2...){
      this.속성명 = 값;
      함수명.prototype.메서드명 = function(){
        자바스크립트 코드;
      }
      }
      let 변수명 = new 함수명(인수1, 인수2...);

** 💜 자바스크립트의 또 다른 여러 내장함수 ** 1. encodeURI() : 문자를 유니코드 값으로 인코딩 합니다. (영문, 숫자, 일부 기호 : ;,/:?@&=+$ 제외) 2. encodeURIComponent() : 문자를 유니코드 값으로 인코딩 합니다. 3. decodeURI() : 유니코드 값을 디코딩하여 다시 문자화 합니다. 4. decodeURIComponent() : 유니코드 값을 디코딩하여 다시 문자화 합니다. 5. parseInt() : 문자열 데이터를 정수형 데이터로 반환합니다. Number()와 비슷합니다. ex) parseInt("15px") > 15를 반환 ex) parseInt("5.12") > 5를 반환 6. parseFloat() : 문자열 데이터를 실수형 데이터로 반환합니다. ex) parseFloat("5.12") > 1.12를 반환 ex) parseFloat("65.5%") > 65.5를 반환 7. isNaN() : is not a number의 약자로 숫자가 아닌 문자가 포함되어 있으면 true를 반환합니다. 8. eval() : 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리합니다.

** ⭐ 자바스크립트의 이벤트 ** 대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택하는 등의 행위를 했을 때 실행됩니다. 이처럼 버튼을 클릭하거나 선택하는 등의 모든 행위를 이벤트라고 합니다. 즉, 브라우저 안에서 사용자가 하는 모든 행위를 곧 이벤트라고 표현합니다. 그리고 이벤트가 발생했을 때 실행하는 함수를 '이벤트 처리기' 또는, '이벤트 핸들러'라고 부릅니다. ** ⭐ 이벤트의 종류 **

[마우스 이벤트]
      1. ⭐ click : 사용자가 html 요소를 클릭할 때 이벤트가 발생합니다.
      2. dbclick : 사용자가 html 요소를 더블클릭할 때 이벤트가 발생합니다.
      3. mousedown : 사용자가 html 요소 위에서 마우스 버튼을 누르는 순간 이벤트가 발생합니다.
      4. mouseup : 사용자가 html 요소 위에서 마우스 버튼을 눌렀다 떼는 순간 이벤트가 발생합니다.
      5. ⭐ mousemove : 사용자가 요소 위에서 포인터를 움직일때마다 이벤트가 발생합니다.
      6. ⭐ mouseover : 사용자가 요소 위에 마우스를 올렸을 때 이벤트가 발생합니다.

      [키보드 이벤트]
      1. ⭐ keydown : 사용자가 키보드의 키를 누르는 동안 이벤트가 발생합니다. (한글제외)
                    키보드의 모든 키에 대한 코드 값을 반환하기도 합니다.
      2. keypress : 사용자가 키보드의 키를 누르는 동안 이벤트가 발생합니다.
                    문자키를 제외한 키의 코드 값을 반환합니다.
                    (기능키(f1~f12, ctrl, alt등등...)는 제외)
      3. keyup : 사용자가 키보드의 키를 눌렀다 뗐을 때 이벤트가 발생합니다.

      [문서 로딩 이벤트]
      1. abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생합니다.
      2. ⭐ error : 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
      3. ⭐ load : 문서가 로딩이 끝나면 이벤트를 처리합니다.
      4. resize : 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
      5. scroll : 문서 화면이 스크롤 되었을 때 이벤트가 발생합니다.
      6. unload : 문서에서 벗어날 때 이벤트가 발생합니다.

      [폼 이벤트]
      1. ⭐ blur : 특정 폼 요소에서 포커스를 잃었을 때 이벤트가 발생합니다. (a태그 포함)
      2. ⭐ change : 목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다.
                      (input, selet, checkbox, textarea 태그에서 사용이 가능합니다.)
      3. focus : 특정 폼 요소에서 포커스가 놓였을 때 이벤트가 발생합니다.
      4. reset : 폼이 리셋되었을 때 이벤트가 발생합니다.
      5. submit : submit 버튼을 클릭했을 때 이벤트가 발생합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 🔴 익명 함수 표현식 ** 일반함수정의문의 경우 함수명을 선언하고 그 이름을 사용하여 호출했습니다. 이 방법은 함수 이름을 알고 있으면 어디에서나 호출하여 사용할 수 있어 많이 사용합니다. 이 밖에도 따로 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법도 있습니다. 익명함수는 이름이 없는 함수를 말합니다. 즉, 익명함수를 선언할 때에는 이름을 붙이지 않습니다. 그래서 이 함수를 변수에 넣어두었다가 변수명을 이용하여 호출합니다. 익명함수는 호이스팅 기술을 지원하지 않습니다. 반드시 함수를 먼저 만든 후에 호출해야 합니다.

      [기본형]
      let 변수명 = function() {자바스크립트 코드;}
      변수명(); -> 익명 함수 호출문

** 🔴 함수에서 return문의 역할 ** return문은 함수에서 결괏값을 반환하는 역할을 합니다. 그리고 함수에서 return문이 등장하면 반복문의 break문과 비슷하게 코드가 강제 종료됩니다. 즉, 함수의 결괏값을 반환하면서 강제 종료 시키는 문장입니다.

      [기본형]
      1. 일반 함수 정의문
      --------------------------------------
      function 함수명(){
      자바스크립트 코드 1; 
      return 데이터(값); > 데이터 값을 반환 후 종료
      자바스크립트 코드 2; > 실행하지 않고 무시된다.
      }
      2. 익명함수(함수표현식)
      --------------------------------------
      let 변수 = function(){
      자바스크립트 코드 1; 
      return 데이터(값); > 데이터 값을 반환 후 종료
      자바스크립트 코드 2; > 실행하지 않고 무시된다.
      }

** 🔴 실제로 한번 사용해볼까요? **

      //익명 함수 호출문 사용해보기
      let sum = function (a, b) {
        return a + b;
      };
      document.write(`함수 실행결과 : ${sum(10, 20)} <br/>`);
      //익명함수를 이용하여 사용자의 국어, 수학 점수를 받아 화면에 출력해보겠습니다.
      let testAvg = function (arrData) {
        //국어 점수와 수학 점수의 평균 점수를 구합니다.
        let sum = 0;
        //arrData에 들어있는 데이터 갯수만큼 반복한다.
        for (let i = 0; i < arrData.length; i++) {
          //1. prompt(arrData[i] + "점수를 입력해주세요", "0점") 실행
          //2. prompt로 받아온 문자형 숫자를 Number()로 형 변환
          //3. 형 변환 된 숫자를 sum과 더함
          sum += Number(prompt(arrData[i] + "점수를 입력해주세요", "0점"));
        }
        //avg = 합산점수 나누기 배열의 데이터 갯수(과목 수)
        let avg = sum / arrData.length;
        return avg;
      };
      let arrSubject = ["국어", "수학"];
      let result = testAvg(arrSubject);
      document.write(`평균 점수는 : ${result}점 입니다.`);

** 🟡 화살표 함수 ** ES6버전부터는 익명 함수를 표기할 때 좀 더 쉽고 직관적으로 만들 수 있는 '화살표 함수'가 생겼습니다.

      [기본형]
      let 변수 = (매개변수) => {코드};
      -
      1. let 변수 = () => {코드};
      : 매개변수가 없을 경우 매개변수 자리에 ()를 작성합니다.
      -
      2. let 변수 = 매개변수 => {코드};
      : 매개변수가 1개인 경우 ()를 생략할 수 있습니다.
      -
      3. let 변수 = 매개변수 => 코드;
      : 매개변수가 1개이면서 실행시킬 코드가 1줄인 경우 매개변수의 ()도 생략할수 있고,
        코드 자리의 {}도 생략할 수 있습니다.
        이때, return도 생략된 것으로 간주합니다.
      -    
      4. let 변수 = (매개변수1, 매개변수2) => {코드};
      : 매개변수가 2개 이상일 경우 ()를 꼭 작성하고 콤마(,)로 구분합니다.
      -
      5. let 변수 = 매개변수 => {코드1, 코드2}
      : 작성할 코드가 2줄 이상인 경우 {}를 써야하고 만약 값을 반환해야 할 경우 return도 작성합니다.

** 🟢 매개변수에 기본값 지정하기 ** ES6버전부터는 함수에 매개변수를 선언할 때 기본값을 지정하는 기능이 생겼습니다. 함수는 매개변수의 갯수와 인수의 갯수가 동일해야합니다. 만약 매개변수의 갯수와 인수의 갯수가 다르면 함수는 정상적으로 실행되지 않습니다. 하지만 경우에 따라 함수의 인수를 3개까지 보낼 수 있는 함수에서 인수를 1개만 보내거나 2개만 보낼 경우, 매개변수에 기본값을 지정해주면 함수를 안전하게 실행시킬 수 있습니다.

      [기본형]
      function 함수명(매개변수1 = 값1, 매개변수2 = 값2,매개변수3 = 값3){
      자바스크립트 코드;
      }
      함수명(인수1);
      함수명(인수1, 인수2);
      함수명(인수1, 인수2, 인수3);

** 🔵 함수의 스코프 ** 함수 스코프란 함수가 선언된 위치에 따라 달라지는 '유효범위'를 의미합니다. 함수안에는 또 다른 함수를 넣을 수 있습니다. 이때 안에 있는 함수를 '지역함수', 지역함수를 감싸고 있는 스크립트 영역에 선언된 함수를 '전역함수'라고 합니다. 프로젝트의 규모가 크면 여러 명의 개발자가 투입되는데, 만약 같은 이름의 전역 변수나 전역 함수를 사용하면 충돌이 발생합니다. 또한 다른 개발자가 이미 개발해놓은 라이브러리나 플러그인의 변수 또는 함수의 이름과 자신이 사용하는 변수나 함수의 이름이 같은 경우에도 충돌이 발생할 수 있습니다. 이럴 때 지역함수를 이용하면 자신의 코드를 안전하게 지킬 수 있습니다.

      [기본형]
      <script>
        function 함수명1() { > 전역함수
          function 함수명2() { 코드 } > 지역함수, 함수명2의 유효범위는 함수명 1의 안쪽이다.
          함수명2(); > 유효범위 안, 호출이 가능
        }
        함수명1(); > 전역함수 호출
        함수명2(); > 유효범위를 벗어남, 호출이 불가능
        </script>

** 🟣 즉시 실행 함수 ** 일반적으로 함수는 선언하고 필요할때마다 호출해서 실행하는 방법을 많이 사용합니다. 하지만 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있습니다. 이게 바로 즉시 실행 함수 입니다. 즉시 실행 함수를 사용하면 브라우저가 로딩되는 순간 바로 실행합니다. 기본형에서 function(){}() 마지막에 붙어있는 ()은 함수의 호출문 입니다. 즉시 실행 함수는 익명함수의 형태를 가지고 있습니다. 즉, 함수 표현식입니다. 그렇기 때문에 ()뒤에 세미콜론을 붙여주어야 합니다.

      [기본형]
      (function(매개변수){
        자바스크립트 코드;
      }(호출문));
      또는 
      (function(매개변수){
        자바스크립트 코드;
      })(호출문);

** 🟤 재귀 함수 호출 ** 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 '재귀 함수 호출'이라고 합니다. 재귀 함수 호출을 사용하면 반복문처럼 여러 번 함수를 호출할 수 있습니다.

      [기본형]
      function 함수명() {
        자바스크립트 코드;
        함수명(); > 재귀 함수 호출, 위쪽의 코드를 실행한 후 또 함수를 호출합니다.
      }
        함수명(); > 바깥에서 한 번 호출합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 👻 매개변수 없이 함수의 인수 받아오기 ** 함수 정의문에서 arguments를 사용하면 매개변수를 사용하는 것처럼 함수 호출문의 인수를 받아올 수 있습니다. 함수 정의문의 매개변수가 없는 상태에서 인수를 전달하여 함수를 호출하면 그 값은 arguments에 배열로 저장됩니다.

      [기본형]
      function 함수명(){
        arguments;
      }
      함수명 (인수1, 인수2, 인수3...);

      function addNum() {
        arguments;
        let num = 0;
        for (let i = 0; i < arguments.length; i++) {
          num += arguments[i];
        }
        return document.write(`num는 : ${num} <br/>`);
      }
      addNum(10, 20);
      addNum(10, 20, 30, 40, 50, 60);
      addNum(1460, 520, 310, 240, 4550, 640);

** 👻 로그인 알고리즘 만들기 **

      const userId = "yujun1004";
      let userPw = "1234";
      function login(id, pw) {
        //아이디가 일치하는지 확인합니다.
        if (id == userId) {
          //아이디가 일치하면 패스워드를 확인합니다.
          if (pw == userPw) {
            document.write(`${input_id}님 방문을 환영합니다.❤`);
          } else {
            //비밀번호가 일치하지 않았을 때 실행합니다.
            alert("비밀번호가 일치하지 않습니다.😓");
          }
          //아이디가 일치하지 않았을 때 실행합니다.
        } else {
          alert("존재하지 않는 아이디 입니다.😓");
        }
      }
      //사용자가 입력한 아이디와 비밀번호
      let input_id = prompt("아이디를 입력해주세요.");
      let input_pw = prompt("비밀번호를 입력해주세요.");
      //로그인 함수 실행
      login(input_id, input_pw);

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 👻 const ** const역시 let과 마찬가지로 변수를 선언할 때 사용하는 예약어입니다. const로 선언한 변수는 상수변수(costant variable)입니다. 상수는 프로그래밍 안에서 변하지 않는 값을 의미합니다. 즉, 변하지 않는 값을 선언할 때 const를 이용하여 선언합니다. const로 할당한 변수는 재선언과 재할당이 불가능합니다. 그래서 반드시 변수를 만들때 이름과 초기값을 함께 선언해야 합니다. 주로 태그를 불러와 담을 때 많이 사용합니다. 상수 변수에 객체나 배열을 포함하고 있는 경우 , 이 객체나 배열안의 데이터가 바뀌고 편집되는 것은 오류가 나지 않습니다.

  [기본형]
  const 변수명 = 값;

** 👻 자바스크립트에서 변수를 사용하는 방법 ** 자바스크립트는 유연성이 많아 편리한 언어입니다. 다양하게 코드를 사용할 수 있습니다. 하지만 편리성은 프로그램이 커지면서 가독성이나 디버깅을 하기 어렵게 만듭니다. 자바스크립트 문법은 벗어나지 않으면서 가독성이나 디버깅 하기 쉽도록 변수를 사용하려면 아래와 같이 사용합니다. 1. 전역변수는 최소한으로 사용합니다. : 전역변수는 프로그램 어디서든 접근할 수 있으므로 편리하게 사용할 수 있습니다. 하지만 예상하지 못한 곳에서 오류가 발생할 확률이 높아집니다. 그래서 되도록 전역변수는 최소한으로 사용해야합니다. 2. var변수는 함수의 첫 줄(시작부분)에 선언합니다. : var를 사용한 변수는 어디에서 선언하든 상관없지만 내부에서 호이스팅이 생기므로 오류가 발생할 수 있습니다. 그래서 var변수는 함수 시작 부분에 선언하는 것이 변수를 확인하기도 편하고 오류를 줄일 수 있습니다.

function example(){
        var first = '값'; // 호이스팅이 일어나지 않도록 첫 줄에 선언
        document.write(first);  
      }

3. for문에서 카운터 변수를 쓸 때에는 var예약어 대신 let을 사용합니다. : for문에서 사욜할 변수는 그 블록안에서만 사용할 것이므로 가끔 var를 이용하여 사용 하기도 합니다. 하지만 이렇게 쓴다고 해서 var가 지역변수가 되는 것이 아닙니다. var 변수는 함수레벨의 스코프를 가지기 때문에 var 대신 let을 사용하는 것이 좋습니다.

    ex) for(let i = 0; i < arr.length; i++){코드}
        for(let i in arr){코드} -> 배열안을 순회하는 for문

4. ES6 버전의 자바스크립트 문법을 사용할 때에는 var보다는 let을 사용합니다. : var변수는 재선언, 재할당이 가능하고 호이스팅 기술도 지원되므로 같은 변수를 실수로 재선언하거나, 프로그램을 합치다보면 변수가 중복될 수도 있어 이런경우 문제가 발생합니다. 그래서 재선언을 할 수 없는 let을 사용하면 코드가 더 안전해집니다.

      let str; //선언
      str = "서울"; //할당
      str = "경기도"; //재할당
      let str2 = "강원도"; //선언과 동시에 할당
      //const
      const num = 2025; // 선언과 동시에 할당
      //const num; 오류남. 값이 필요. 이름만 지을수 없음
      //num = 2026; //재할당 불가능
      //const num = 2026; //재선언 불가능
      //콘솔창에var_let_const04.html:36 Uncaught TypeError: Assignment to constant variable.에러메세지
      //상수변수라서 값을 바꿀 수 없다는 뜻
      //const로만든 변수에 배열 저장하기
      const arr1 = [30, true, "강아지", "고양이", 250];
      // arr1 = '강아지'; //배열을 문자열로 바꾸려고 했기 때문에 오류남
      //배열의 인덱스번호 3번에 위치한 데이터를 다른 500으로 바꾸기
      arr1[3] = 500;
      console.log(arr1);
      const userInfo = {
        //속성(프로퍼티):값
        age: 30,
        marraige: true,
        name: "김땡땡",
        content: "하이루",
        anni: 250,
        //메서드-함수를 담고있는 이름
        intro: function () {
          document.write(
            `안녕하세요. 제 이름은 ${this.name}이고, 나이는 ${this.age}입니다.`,
            "<br/>"
          );
        },
      };
      //1. intro 메서드 실행
      userInfo.intro();
      //2. age룰 40으로 바꾸기
      userInfo.age = 40;
      //속성명 불러올때 .age, .name 등등
      //3. intro메서드 실행하기
      userInfo.intro();

** 👻 도전! 실습 1 **

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>함수실습</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        margin: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body id="the_body">
    <!-- onclick : 클릭이벤트. 클릭을 할때마다 함수가 실행됨 -->
    <button onclick="changeColor();">배경색 바꾸기</button>
    <!-- 버튼이 클릭될 때 마다 function의 함수가 실행될 수 있게 함수호출문 실행 -->
    <div class="box" id="the_div" onclick="changeColor();"></div>
    <script>
      //배경색 바꾸기 버튼을 누르면 클릭할 때마다 배경색을 바꾸는 함수
      let color = ["white", "gold", "pink", "lavender", "skyblue"]; //바꿀 배경색
      //getElementById : html문서에서 해당 id이름을 가진 태그를 불러옴.
      //getElementById()안에는 아이디명을 문자열로 가져오고 #은 붙이지 않는다.
      //전역변수로 써도 상관없음
      const bodyTag = document.getElementById("the_body");
      // const divTag = document.getElementById("the_div");
      let i = 0; //버튼을 클릭할 때마다 바꿀 인덱스번호 초깃값
      function changeColor() {
        i++; // 인덱스 번호 증가
        //만약 i가 배열갯수와 동일해지면 다시 i를 0으로 바꿈
        if (i >= color.length) {
          i = 0;
        }
        //body태그의 style(css)중 backgroundColor(카멜표기법으로 씀)를 배열의[i]번째의 컬러로 변경.
        bodyTag.style.backgroundColor = color[i];
      }
    </script>
  </body>
</html>

** 👻 매개변수가 있는 함수 ** 함수를 호출할때마다 실행결과를 다르게 하고 싶다면 매개변수를 이용할 수 있습니다. 매개변수는 '파라미터'라고도 부르고, 함수를 호출할때 인자(수)값을 넘겨받아 함수 안에서 활용할 수 있는 특별한 변수입니다. 함수에 전달된 인자값은 매개변수에 순차적으로 대입됩니다.

  [기본형]
  function 함수명(매개변수1, 매개변수1....){}
   자바스크립트 코드
  }
  함수명(인자값1, 인자값2...);

** 👻 함수(function) ** 데이터를 저장할 때에는 '변수'를 사용한다. 변수에는 데이터를 저장만 할 수 있고 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때 마다 호출하여 사용할 수 있습니다. 즉, 코드를 저장하고 재사용할 수 있습니다. 함수는 프로그래밍 코드를 저장하는 공간이라고 할 수 있습니다. 자바스크립트 해석기가 함수를 만나면 해당 함수를 메모리 공간에 '기억'을 합니다. 즉, 함수를 만나는 순간 실행하지 않고 기억만 해두다가, 함수를 호출하게 되면 그 시점에 해당 함수를 실행합니다.

   [기본형]
   1. 일반 함수 정의문 <- 문장
  --------------------
   function 함수명(){실행시킬 자바스크립트 코드;}
   함수명(); -> 일반함수를 호출하는 호출문. 해당 줄에서 함수를 실행합니다.
   2. 함수 표현식(익명 함수) <- 연산식
  --------------------
   var 참조변수 = function(){실행시킬 자바스크립트 코드;}
   변수명(); -> 익명함수를 호출하는 호출문. 해당 줄에서 함수를 실행합니다.

** 👀 함수와 변수의 차이점 **

   변수
   - 1개의 데이터만 저장 가능합니다.
   - var 또는 let, const와 같은 키워드를 사용합니다.
   - 문자형, 숫자형, 논리형과 같은 데이터를 저장할 수 있습니다.
   - 객체를 참조할 수 있습니다.

   함수
   - 자바스크립트 코드를 저장한다.
   - function이라는 키워드를 사용하여 선언한다.
   - 출력문, 제어문 등의 코드를 저장할 수 있고, 코드가 실행된 결괏값을 반환합니다.

** 👀 함수의 호이스팅 ** 호이스팅의 사전적인 의미로 '끌어올리다'라는 뜻이 있습니다. 일반 함수 정의문의 경우 함수 호출 시 호이스팅(hoisting)기술을 지원합니다. 호이스팅이란 해당 함수를 자바스크립트의 최상단위치로 끌어올려서 기억하는 것을 말합니다. 호이스팅을 적용하면 함수정의문보다 호출문이 먼저나와도 함수정의문을 끌어올려 함수를 호출합니다. 하지만 익명함수는 호이스팅기술을 지원하지않습니다. 따라서 반드시 함수가 먼저 등장한 이후에 호출할 수 있습니다.

** 👀 지금까지의 내용을 실제로 작성해봅시다! **

      //함수 호출 <- 호이스팅 o (일반함수라서 함수부터 불러도 함수정의문을 먼저 인식(호이스팅)하고 출력)
      myFnc();
      //일반함수 (함수명에 이름을 부여했으니깐) - 함수호출문보다 아래에 있어도 정상작동한다.
      function myFnc() {
        count++;
        document.write("hello" + count, "<br/>");
      }
      //함수 호출
      myFnc();
      document.write("--------------구분선--------------", "<br/>");
      // theFnc(); <- 호이스팅 x (함수정의를 먼저해야함_여기부터 오류발생해서 아래 theFnc 전부 실행x)
      //익명함수 (function 뒤에 이름이 있냐/없냐) - 익명함수는 함수가 선언된 이후에만 호출할 수 있다.
      var theFnc = function () {
        count++;
        document.write("bye" + count, "<br/>");
      };
      //함수 호출
      theFnc();
      //함수가 없을 경우 두 수를 더하는 식 만들기
      var num1 = 10;
      var num2 = 3;
      var result = num1 + num2;
      document.write(result, "<br/>");
      //위 식을 함수로 저장하여 호출하기
      function addNum() {
        var num1 = 10;
        var num2 = 3;
        var result = num1 + num2;
        document.write(result, "<br/>");
      }
      //함수호출문을 이용하여 원하는 횟수만큼 함수 실행하기
      addNum();
      addNum();
      addNum();
      addNum();

** 🌼 var를 이용한 변수의 특징 ** 자바스크립트 ES6버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생겼습니다. var와 let, const는 호이스팅기술과 스코프에 큰 차이가 있습니다. ** 🌷 변수의 적용범위 '스코프' 알아보기 ** 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 유효범위를 '스코프(scope)'라고 합니다. 즉, 변수가 어디까지 유효한 지 가리키는 범위를 말합니다. 자바스크립트 함수에서 변수를 사용할 때 에는 이 영역에 주의해야 합니다. 한 함수안에서만 사용하고 다른 함수에서는 사용할 수 없는 변수가 있는가하면, 어느 함수에서나 다 사용할 수 있는 변수가 있습니다. 한 함수안에서만 사용할 수 있는 변수를 '지역변수' 또는 '로컬변수'라고 부르고, 어느 함수에서나 다 사용할 수 있는 변수를 '전역변수' 또는 '글로벌변수'라고 부릅니다. 지역변수는 {}안에서만 유효합니다. 이런 스코프(유효범위)를 '블록레벨'의 스코프라고하고, 전역변수는 '함수레벨의 스코프'를 가진다라고 표현합니다. ** 🌷 함수 안에서만 쓸 수 있는 지역변수 ** 지역변수는 함수 안에서 선언하고, 함수 안에서만 사용합니다. 지역변수를 선언하려면 예약어 var와 함께 변수 이름을 지정합니다. 지역변수는 해당 함수의 바깥으로는 나올 수 없습니다. 아래 예제처럼 함수 안에서 선언된 변수를 함수 밖에서 출력하려고하면 유효범위를 벗어나서 오류가 발생합니다. ** 🌷 스크립트에서 자유롭게 쓸 수 있는 전역변수 ** 전역변수는 적용 범위를 제한하지않고 쓸 수 있습니다. 즉, 전역변수는 지역변수와 달리 스크립트 소스 전체에서 사용할 수 있습니다. 전역변수로 사용하려면 함수 밖에서 선언하거나, 함수안에서 var라는 키워드 없이 선언해야합니다. 함수안에서 선언하더라도 var라는 예약어가 없으면 전역변수로 사용됩니다. 전역변수는 함수 안팎으로 사용할 수 있음 + 그 변수명을 나 말고 다른 개발자가 쓸 수도 있습니다.

** 🌻 지금까지의 내용을 실제로 작성해봅시다! **

      var num1 = 30; // 전역변수(함수 바깥에 있으므로)
      function addNum() {
        var sum = 10 + 20; //지역변수. 변수 sum의 적용범위는 addNum이다.
        //함수 안에서 sum의 값을 콘솔창에 출력하라고했으므로, 유효범위 안에 있어 정상적으로 30이라는 값을 보여준다.
        console.log("함수안에있는 지역변수 sum : " + sum); //30
        //전역변수(함수 안에있지만, var가 없으므로)
        result = 100 + 200;
        result2 = sum + num1;
      }
      addNum();
      //모두 전역변수이므로 정상실행
      console.log("전역변수 result : " + result); //300 / result는 function addNum()안에서 정의한건데, var 없다고 밖에서 출력해도 출력됨.
      console.log("전역변수 result2 : " + result2);
      // "Uncaught ReferenceError: sum is not defined" -> 변수 sum은 정의된적이 없다는 오류
      //console.log(sum); //지역변수 var sum이 유효범위를 벗어났기 때문에 콘솔창에 오류가 발생한다.

** 🌈 var의 호이스팅 ** 자바스크립트에서 변수를 사용할 때 조심해야 할 개념이 있습니다. 바로 호이스팅(hoisting)입니다. 호이스팅이랑 '끌어올린다'라는 뜻으로 상황에 따라 변수의 선언(var 변수명)과 할당(변수에 값을 넣는 것)을 분리하여, 선언 부분을 스코프에 가장 윗쪽으로 끌어올리는 것을 말합니다. 끌어올린다고해서 실제 소스코드를 끌어올리는 것은 아니고, 소스를 그런 방식으로 해석한다는 의미입니다. ** 🌂 변수의 재선언과 재할당 ** var를 이용한 변수는 호이스팅 이외에도 '재선언'과 '재할당'을 할 수 있습니다. 재선언이란 var 키워드를 앞에 붙여서 여러 번 동일한 이름을 쓰는 것을 재선언이라고 합니다. 즉 var i = 0; 이후에 var i; 이런식으로 동일한 이름을 var를 붙여 여러 번 선언하는 것을 말합니다. 재선언을하면 이전에 만들었던 변수는 사라집니다. 재할당이란 변수에 값을 다시 새로 넣는 것을 말합니다. 즉, var i = 0; 이후에 i = 10;처럼 값을 새로 할당하는 것을 말합니다. 재할당을 하면 이전에 있던 값은 사라집니다.

      /* 호이스팅 */
      var x = 10; //전역변수(함수 바깥)
      // function displayNumber() 안에있는 var y = 20; 은 콘솔y보다 윗쪽에 var y; 랑 같음 (그래서 출력했을 때 undefined나옴)
      function displayNumber() {
        //var y; 호이스팅에 의해 y가 선언된 것으로 취급함.
        console.log("x는 : " + x); //10
        console.log("y는 : " + y); //y선언한적없다고 오류나야하지만, 호이스팅때문에 위로 올라가서 y값 있다고 생각 △아직 값 정한적없어서 undefined
        //y의 호이스팅이 일어남. 값이 나중에 할당된 것으로 취급함.
        var y = 20; //var 대신 let으로 바꾸면 오류 - let은 호이스팅x
      }
      displayNumber(); //함수호출
      /* 재선언과 재할당 */
      function addNum(num1, num2) {
        //매개변수 num1,2
        return num1 + num2;
      }
      var sum = addNum(10, 20);
      console.log(sum); //30
      sum = 50;
      console.log(sum); //50 <- 바로 윗줄에서 sum=50이라고 값을 '재할당'함
      var sum = 100; //변수를 다시 선언함(재선언)
      console.log(sum);

** ✨ let과 const ** var예약어를 사용하는 변수는 함수영역의 스코프(전역)을 가지고, 재할당과 재선언을 할 수 있습니다. 그래서 var예약어를 잘못 사용하면 예상하지 못한 프로그래밍 오류가 발생할 수 있습니다. 그래서 ES6버전부터는 var를 보완한 let과 const를 사용합니다. ** 🎈 let을 이용한 변수의 특징 ** ES6 이전의 자바스크립트 프로그램에서는 var예약어로만 변수를 선언했습니다. var예약어를 빠뜨리면 의도하지 않게 전역변수가 되기도 하고, 프로그램 길이가 길어지다보면 실수로 사용하는 변수를 재선언하거나, 값을 재할당 해버리는 경우가 생기기도 합니다. 그래서 ES6버전부터는 let과 const가 추가되었고, 되도록이면 var예약어는 사용하지않는것을 권장합니다. var와 let,const의 가장 큰 차이는 스코프 범위입니다. var는 함수영역(레벨)의 스코프를 가지지만 let과 const는 블록영역의 스코프를 가집니다. ** 🎈 블록안에서만 사용할 수 있는 변수 ** let예약어로 선언한 변수는 변수를 선언한 블록({}로 묶은 부분)에서만 유효하고, 블록을 벗어나면 사용할 수 없습니다.함수밖에서 선언하면 전역함수로 사용가능) let예약어를 사용한 변수는 '재할당은 가능하지만, 재선언은 불가합니다.' var예약어를 사용한 변수는 선언하기 이전에 실행하더라도 호이스팅때문에, 아직 할당되지 않았음을 의미하는 'undefined'값을 가질 수 있습니다. 하지만 let예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류를 발생시킵니다. ReferenceError에서 Cannot access 'y' before initialization at displayNumber 오류는 displayNumber라는 함수에서 변수 y가 선언되지않았고, 초기화되지 않아 사용할 수 없음을 알려줍니다.

   [에러종류] -콘솔창에서 확인가능
   - ReferenceError : 존재하지 않는 변수를 참조할 때 발생하는 에러
   - SyntaxError : 문자열에 따옴표나 기호가 잘못됐을 때 발생하는 에러. 문법 에러
   - TypeError : 자바스크립트 엔진이 스코프검색은 성공했지만, 
     해당 대상이나 결괏값에 적합하지 않거나 불가능한 시도를 할 경우 발생하는 에러 (ex. true + 10 을 실행해라 / 호출 잘못했을 때)

      //calcNum();
      function calcNum() {
        let sum = 0; // let sum의 유효범위 -> function calcNum() 함수 전체
        // function calcNum안에 for문이 있어서 let sum은 for문 안에서도 유효함
        // let i의 유효범위 -> for문
        for (let i = 1; i <= 10; i++) {
          // sum의 유효범위는 함수전체이므로 for문안으로 들어올 수 있음.
          sum += i; // sum = sum + i
        }
        console.log("sum은 : " + sum);
        //console.log("i는 : " + i); <- let i는 for문에서만 유효함 / 'Uncaught Reference Error: i is not defined'
        sum = 100; //재할당
        console.log("재할당 : " + sum);
        /* Uncaught SyntaxError: Identifier 'sum' has already been declared (at var_let_const03.html:54:13)
        -> sum이라는 변수는 이전에 선언되었기 때문에 재선언될 수 없다. */
        //let sum = 100; //재선언X
      }
      //호이스팅
      var x = 10;
      function displayNumber() {
        console.log("x는 : " + x);
        // Uncaught ReferenceError: Cannot access 'y' before initialization at displayNumber ~. (y선언된적없음) <- 콘솔창 눌러보면 어디서오류났는지 알려줌
        //y를 먼저 선언하고 초기화하기 전에는 해당 변수를 사용할 수 없다.
        console.log("y는 : " + y); // 아래가 var였으면 'undefined'인데, let이라 아예 오류남 (호이스팅x)
        let y = 20;
      }
      displayNumber();

** ⛅ 브라우저 객체에 대해 알아봅시다 ** 자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 다양한 기능과 효과를 만들 수 있습니다. 웹 브라우저 창에 문서가 표시되는 순간 사용자는 알 수 없지만 브라우저는 html 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체들을 생성합니다. 웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체가 생성됩니다. 이 하위 객체란 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하는 각각의 다른 객체들을 말합니다. ** 🌼 브라우저의 계층 구조 ** 브라우저의 가장 최상위 객체는 window 입니다. window 객체는 '브라우저'를 의미하며 이 안에 다양한 하위 객체를 포함합니다. 하위 객체의 종류로는 아래와 같습니다. 1. location (주소줄) 2. document (문서영역) 3. navigator (운영체제) 4. history (방문기록) 5. screen (해상도) ** 🌻 window의 프로퍼티(속성) ** window 객체는 웹 브라우저의 상태를 제어하고, 자바스크립트의 최상위에 존재합니다. window 객체의 프로퍼티를 사용하려면 반드시 window. 을 먼저 붙여줘야 합니다.

     [종류]
      1. document : 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다.
      2. frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우, 그 요소를 반환하고 
                        포함되어 있지 않은 경우 null을 반환합니다.
      3. innerHeight : 내용 영역의 높이를 나타냅니다.
                        즉, 스크롤을 포함한 문서의 전체 높이를 말합니다.
                        padding이나 border을 제외한 height의 컨텐츠 영역을 말합니다.
      4. innerWidth : 내용 영역의 넓이를 나타냅니다. 
                      padding이나 border을 제외한 width의 컨텐츠 영역을 말합니다.
      5. localStorage : 췝 브라우저에서 데이터를 저장하는 로컬 스토리지를 나타냅니다.
      6. location : window 객체의 위치 또는 현재 url 정보를 나타냅니다.
      7. name : 브라우저 창의 이름을 가져오거나 수정합니다.
      8. ★ outerHeight : border나 padding을 포함한 문서의 총 높이를 의미합니다.
      9. ★ outerWidth : border나 padding을 포함한 문서의 총 넓이를 의미합니다.
      10. ★ pageXOffset : 스크롤 했을 때 수평으로 이동하는 픽셀수를 의미합니다. (=scrollX)
      11. ★ pageYOffset : 스크롤 했을 때 수직으로 이동하는 픽셀수를 의미합니다. (=scrollY)
      12. parent : 현재 창이나 서브 프레임의 부모를 말합니다.
      13. ★ screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      14. ★ screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      15. sseionStorage : 로컬 스토리지처럼 웹 브라우저에 데이터를 저장하는 세션 스토리지를 반환합니다.

** 🌻 window의 프로퍼티(속성) ** window 객체는 웹 브라우저의 상태를 제어하고, 자바스크립트의 최상위에 존재합니다. window 객체의 프로퍼티를 사용하려면 반드시 window. 을 먼저 붙여줘야 합니다.

      [종류]
      1. document : 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다.
      2. frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우, 그 요소를 반환하고 
                        포함되어 있지 않은 경우 null을 반환합니다.
      3. innerHeight : 내용 영역의 높이를 나타냅니다.
                        즉, 스크롤을 포함한 문서의 전체 높이를 말합니다.
                        padding이나 border을 제외한 height의 컨텐츠 영역을 말합니다.
      4. innerWidth : 내용 영역의 넓이를 나타냅니다. 
                      padding이나 border을 제외한 width의 컨텐츠 영역을 말합니다.
      5. localStorage : 췝 브라우저에서 데이터를 저장하는 로컬 스토리지를 나타냅니다.
      6. location : window 객체의 위치 또는 현재 url 정보를 나타냅니다.
      7. name : 브라우저 창의 이름을 가져오거나 수정합니다.
      8. ★ outerHeight : border나 padding을 포함한 문서의 총 높이를 의미합니다.
      9. ★ outerWidth : border나 padding을 포함한 문서의 총 넓이를 의미합니다.
      10. ★ pageXOffset : 스크롤 했을 때 수평으로 이동하는 픽셀수를 의미합니다. (=scrollX)
      11. ★ pageYOffset : 스크롤 했을 때 수직으로 이동하는 픽셀수를 의미합니다. (=scrollY)
      12. parent : 현재 창이나 서브 프레임의 부모를 말합니다.
      13. ★ screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      14. ★ screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      15. sseionStorage : 로컬 스토리지처럼 웹 브라우저에 데이터를 저장하는 세션 스토리지를 반환합니다.

** 🌱 window 객체 메서드 ** window 객체의 메서드는 대화 창(prompt같은 창)을 표시하거나 브라우저 창의 크기나 위치를 알아내고자 할 때 사용합니다. window의 메서드는 기본 객체이기 때문에 window.을 생략할 수 있습니다.

      [종류]
      1. alert() : 경고 메세지나 알림 내용을 표시하는 창입니다. (요새는 잘 쓰지 않음)
      2. blur() : 현재 창에서 포커스를 해제합니다.
      3. close() : 현재 창을 닫습니다.
      4. confirm() : 확인 취소 창을 말합니다.
      5. focus() : 현재 창에 포커스를 부여합니다.
      6. moveBy() : 현재 창을 지정한 크기만큼 이동합니다. (팝업창의 위치)
      7. moveTo() : 현재 창을 지정한 좌표로 이동시킬 때 사용합니다.
      8. open() : 새로운 창을 엽니다.
      9. postMessage : 메세지를 다른 창으로 전달할때 사용합니다.
      10. print() : 현재 문서를 인쇄할 때 사용합니다.
      11. prompt() : 사용자가 입력한 텍스트를 반환합니다.
      12. resizeBy() : 지정한 크기만큼 현재 창의 크기를 조절합니다.
      13. resizeTo() : 동적으로 브라우저 창의 크기를 조절합니다.
      14. sizeToContent() : 내용에 맞게 창의 크기를 조절합니다.
      15. stop() : 로딩을 중지합니다.

☀️ 도전 실습 ! open 메서드로 팝업창 만들기 open메서드를 이용하면 팝업창을 열 수 있습니다.

     [기본형]
     open('url경로', "새 창 이름", "새 창 옵션")

** ⭐ 일정한 간격으로 코드를 실행해봅시다 ** 일정한 간격으로 코드를 실행하는 코드로는 setInterval()과 setTimeout()메서드가 있습니다. setInterval()은 일정한 시간 간격으로 코드를 반복 실행합니다. setTimeout()은 일정한 시간 이후에 코드를 한 번 실행하고 자동으로 종료합니다. ** ⭐ setInterval() / clearInterval() ** setInterval()은 일정한 시간 간격으로 코드를 무한히 반복실행합니다. setInterval()을 멈추고 해제하고 싶다면 clearInterval()을 사용합니다. 변수에 넣어서 사용해야 합니다.

      [기본형]
      1. var 참조변수 = setInterval(function(){코드}, 시간간격(ms));
      2. var 참조변수 = setInterval('코드', 시간간격(ms))
      3. clearInterval(참조 변수);

** ⭐ setTimeout() / clearTimeout() ** setTimeout() 메서드는 일정 시간이 지나면 코드를 한 번 실행하고 종료합니다. setTimeout() 메서드를 조금만 응용하면 setInterval 메서드처럼 사용할 수 있습니다. clearTimeout()은 setTimeout()메서드를 종료할 때 사용합니다. setTimeout()처럼 한번만 실행하는 메서드를 계속 호출하여 끝없이 실행시키는 것을 '재귀 함수 호출'이라고 합니다.

      [기본형]
      1. var 참조변수 = setTimeout(function(){코드}, 시간간격(ms));
      2. var 참조변수 = setTimeout('코드', 시간간격(ms))
      3. clearTimeout(참조 변수);

      var addNum = 0;
      var subNum = 1000;
      //2초마다 코드를 반복 실행하겠습니다.
      //auto1 > setInterval을 가지고 있는 변수
      var auto1 = setInterval(function () {
        addNum++;
        console.log("addNum :" + addNum);
      }, 2000);
      //2초마다 코드를 반복 실행하며 subNum을 1씩 감소시킵니다.
      //auto2 > setInterval을 가지고 있는 변수
      var auto2 = setInterval(function () {
        subNum--;
        console.log("subNum :" + subNum);
      }, 2000);
      //setTimeout은 코드를 한 번 실행하고 종료합니다.
      var addNum2 = 0;
      var auto3 = setTimeout(function () {
        addNum2++;
        document.write(`addNum2 : ${addNum2}`);
      }, 5000);

** 🌂 브라우저 객체 - history 객체 ** history 객체는 사용자가 방문한 사이트의 기록을 남기고, 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 메서드를 제공합니다.

    [기본형]
    history.속성;
    history.메서드(); > 메서드를 실행합니다.
    history.메서드(값); > 메서드를 실행할 때 값을 전달하여 실행시킵니다.

    [메서드]
    1. history.back();
    : 바로 이전에 방문했던 페이지로 이동합니다.
      history.back(3) 처럼 숫자가 들어가면 해당 숫자만큼 이전에 방문했던 페이지로 이동합니다.
    2. history.forward();
    : 앞으로 가기, 다음 방문 사이트로 이동합니다. ()안에 숫자가 들어가면 숫자만큼 앞으로 이동했던 페이지로 이동합니다.
    3. history.go(음수 또는 양수);
    : ()안에 음수가 들어가면 뒤로가기, 양수가 들어가면 앞으로 가기 입니다.

    [프로퍼티]
    history.length : 방문 기록에 저장된 목록의 개수를 반환합니다.

** 🌂 브라우저 객체 - location 객체 ** location 객체는 주소 표시줄에 있는 기능과 속성을 제공하는 객체입니다. 현재 url에 대한 정보와 새로고침 메서드 등이 있습니다.

      [기본형]
      - location.속성; > 현재 속성 값을 알고 싶을 때
      - location.속성 = 값; > 속성 값을 다른 값으로 변경할 때
      - location.메서드; > 기능을 실행할 때

      [프로퍼티]
      1. location.href
      : url 주소를 바꾸거나 현재 url 주소를 반환합니다.
      2. location.hash
      : url의 해시값(#에 명시된 값)을 반환합니다.
      3. location.hostname
      : url의 호스트 이름을 설정하거나 반환합니다.
      ex) https://www.naver.com:80/
      4. location.host
      : url의 호스트 이름(서버주소)과 포트번호를 반환
      5. location.protocol
      : url의 프로토콜을 반환합니다.

      [메서드]
      location.reload : 페이지를 새로고침 한다.

** 🌂 브라우저 객체 - navigator 객체 ** navigator객체는 현재 방문자가 사용하는 브라우저의 정보와 운영체제의 정보를 제공하는 객체입니다.

    [기본형]
    navigator.속성;

    [프로퍼티]
    1. navigator.appCodeName : 현재 브라우저의 코드명을 반환합니다. 현 시점의 모든 브라우저는 "Mozilla"를 반환합니다.
    2. navigator.appName : 현재 브라우저의 이름을 반환합니다.  현 시점의 모든 브라우저는 "Netscape"를 반환합니다.
    3. navigator.appVersion : 현재 브라우저의 버전 정보를 반환합니다.
    4. navigator.language : 현재 브라우저에 설정된 언어를 반환합니다. 한국어의 경우 ko를 반환합니다.
    5. navigator.product : 브라우저의 엔진 이름을 반환합니다. 크롬의 경우 'Gecko'를 반환합니다.
    6. navigator.platform : 컴퓨터의 운영체제 정보를 반환합니다. 
    운영체제가 window이고, 시스템 종류가 64비트라도 브라우저가 32비트로 설치가 되었으면 win32로 나옵니다.
    7. navigator.userAgent : 상단의 모든 속성을 종합적으로 반환합니다. 브라우저 운영체제 정보를 나타냅니다.

** 🌂 브라우저 객체 - screen 객체 ** screen 객체는 사용자의 디바이스 모니터의 정보를 제공하는 객체 입니다. 예를 들어 모니터의 넓이나 높이 또는 컬러 표현 방식을 제공합니다.

      [기본형]
      - screen.속성;
      - screen.메서드();

      [프로퍼티]
      1. avaliHeight : ui 영역(예를 들어 window 작업 표시줄이나 mac의 독)을 제외한 영역의 높이를 반환합니다.
      2. avaliWidth : ui 영역을 제외한 영역의 넓이를 반환합니다.
      3. colorDepth : 화면에서 픽셀을 랜더링 할 때 사용하는 색상 수를 나타냅니다.
      4. height : ui 영역을 포함한 높이를 반환합니다.
      5. width : ui 영역을 포함한 넓이를 반환합니다.
      6. orientation : 화면의 현재 방향을 나타냅니다.
      7. pixelDepth : 화면에서 픽셀을 랜더링 할 때 사용하는 비트 수를 나타냅니다.

      [메서드]
      1. lockOrientation() : 화면 방향을 잠글 때 사용합니다.
      1. unlockOrientation() : 화면 방향 잠금을 해제할 때 사용합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 👻 수학 객체를 이용하여 묵찌빠 게임을 만들어봅시다! **

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>묵찌빠 게임</title>
  </head>
  <body>
    <script>
      document.write("<h2>컴퓨터 묵찌빠 게임</h2>");
      var game = prompt("가위 바위 보!");
      var gameNum;
      switch (game) {
        case "가위":
          gameNum = 1;
          break;
        case "바위":
          gameNum = 2;
          break;
        case "보":
          gameNum = 3;
          break;
        default:
          alert("잘못 작성하였습니다.");
          location.reload(); //새로고침
      }
      var com = Math.ceil(Math.random() * 3);
      //랜덤하게 컴퓨터가 내는 가위바위 보
      document.write("<img src='./img/math_img_" + com + ".png' />");
      if (gameNum == com) {
        document.write("사용자 승리!");
      } else {
        document.write("다시 한번 가위 바위 보!");
      }
    </script>
  </body>
</html>

** 👨‍👨‍👧‍👧 배열(Array)에 대해 알아봅시다 ** 변수에는 데이터가 오직 한 개만 저장됩니다. 하지만 만약 데이터를 여러 개 저장하고 싶다면 배열로 한 번에 묶어 저장할 수 있습니다. 배열 안에 데이터를 여러 개 저장하게 되면 데이터의 첫 번째 순서부터 인덱스 번호를 부여합니다. 인덱스 번호는 데이터의 순서를 의미하며 0부터 시작하여 마지막 데이터까지 오름차순으로 인덱스 번호가 부여됩니다. 배열안에는 다양한 데이터 형식을 넣을 수 있습니다. 예를 들어 문자형, 숫자형, 논리형 데이터 뿐만 아니라 객체{}도 넣을 수 있습니다.

      [기본형]
      1. 
      var 변수명 = new Array();
      변수명[0] = 값;
      변수명[1] = 값;
      변수명[2] = 값;
      : 배열 객체를 먼저 생성한 후,
        한 개씩 데이터를 집어 넣는 방식입니다.
        가독성이 좋지 않아 잘 쓰지 않는 방식 입니다.
      2.
      var 변수명 = new Array(값1, 값2, 값3...);
      : 배열 객체를 생성하여 ()안에 값을 나열하는 방식입니다.
        잘 쓰지 않는 방식입니다.
      3. ★★★
      var 변수명 = [값1, 값2, 값3...];
      : []는 곧 배열을 의미합니다. 가장 많이 사용하는 방식입니다.

** 🙋‍♂️ 배열 객체에 저장된 데이터 불러오기 ** 배열 객체에서 여러개의 데이터가 저장되어 있고, 이 중에서 필요한 데이터가 있다면 꺼내 쓸 수 있습니다. 데이터를 불러오는 기본형은 아래와 같습니다.

      [기본형]
      (참조)변수명[인덱스번호]; 

** 🙋‍♀️ 배열객체의 메서드와 속성(프로퍼티) ** 1. join(연결문자)★ : 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환합니다. 2. revers()★ : 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환합니다. 3. sort()★ : 배열 객체의 데이터를 오름차순으로 정렬합니다. 4. slice(index1, index2) : 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 반환합니다. 이때 시작 인덱스 번호부터 끝 인덱스 번호의 앞의 데이터까지만 잘라서 반환합니다. 즉, slice(0,3) 이라고 하면 0번부터 2번까지의 데이터만 잘라 반환합니다. 5.splice(시작인덱스, 데이터 갯수, 새로 넣을 데이터) : 배열 객체에서 시작인덱스부터 지정한 데이터 갯수만큼 삭제하고 그 자리에 새로운 데이터를 넣을 때 사용합니다. 6. concat(배열1, 배열2) : 2개의 배열 데이터를 하나로 합쳐서 반환합니다. 7. pop() : 배열에 저장된 데이터 중 마지막 인덱스에 있는 데이터를 삭제합니다. 8. push(new data) : 배열에 저장된 데이터 중 마지막 인덱스에 새 데이터를 삽입합니다. 9. shift() : 배열에 저장된 데이터 중 첫 번째 인덱스에 있는 데이터를 삭제합니다. 10. unshift(new data) : 배열에 첫 번째 위치에 새 데이터를 삽입합니다. 11. length : 배열에 저장된 데이터의 총 갯수를 반환합니다.

      //배열 객체 생성
      var arr = [30, "hello", true, false, 50];
      document.write("<h2>배열 값 가져오기</h2>");
      //인덱스 번호 0번에 위치하는 데이터를 불러오기
      document.write(arr[0], "<br/>");
      //인덱스 번호 1번에 위치하는 데이터를 불러오기
      document.write(arr[1], "<br/>");
      //인덱스 번호 2번에 위치하는 데이터를 불러오기
      document.write(arr[2], "<br/>");
      document.write("-----------------------", "<br/>");
      //배열 안에 있는 데이터를 반복문으로 불러오기
      //arr.length : 배열 arr에 들어 있는 '데이터의 총 개수'
      for (var i = 0; i < arr.length; i++) {
        document.write(arr[i], "<br/>");
      }
      document.write("-----------------------", "<br/>");
      //for문으로 배열의 데이터 모두 불러오기2
      //i in arr 배열 arr 안에(in)있는 인덱스 번호 0번부터 모든 데이터를 불러오기
      for (i in arr) {
        document.write(arr[i], "<br/>");

     var arr_1 = ["사당", "교대", "방배", "서초"];
      var arr_2 = ["신사", "압구정", "옥수"];
      //arr_1에 저장된 값을 -로 연결하여 하나의 문자형 데이터로 반환합니다.
      var result = arr_1.join("-");
      console.log(result);
---------------------------------------------------------
      //arr_1을 기준으로 arr_2를 합쳐 하나의 배열로 반환합니다.
      result = arr_1.concat(arr_2);
      console.log(result);
---------------------------------------------------------
      //arr_1에 저장된 값 중에 1번 인덱스부터 3번의 전인 2번 인덱스까지 구간을 잘라 데이터를 반환합니다.
      //즉, 1번과 2번 인덱스의 데이터를 반환합니다.
      result = arr_1.slice(1, 3);
      console.log(result);
---------------------------------------------------------
      //arr_1에 저장된 값을 오름차순으로 반환합니다.
      //즉, 가나다 순으로 순서를 지정합니다.
      arr_1.sort();
      console.log(arr_1);
---------------------------------------------------------
      //arr_2에 저장된 값의 순서를 바꿔서 반환합니다.
      arr_2.reverse();
      console.log(arr_2);
---------------------------------------------------------
      var greenArray = ["교대", "방배", "강남"];
      var yellowArray = ["미금", "정자", "수서"];
      //greenArray의 2번 인덱스부터 1개의 데이터를 삭제하고 "서초", "역삼" 데이터를 추가합니다.
      greenArray.splice(2, 1, "서초", "역삼");
      console.log(greenArray);
---------------------------------------------------------
      //yellowArray의 맨 마지막 데이터를 잘라서 data1에 대입합니다.
      var data1 = yellowArray.pop();
      //yellowArray의 맨 첫번째 데이터를 잘라서 data2에 대입합니다.
      var data2 = yellowArray.shift();
---------------------------------------------------------
      //yellowArray의 맨 마지막번째 위치에 data2('미금')를 추가합니다.
      yellowArray.push(data2);
      console.log(yellowArray); //정자, 미금
      //yellowArray의 첫번째 위치에 data1('수서')를 추가합니다.
      yellowArray.unshift(data1);
      console.log(yellowArray); //수서, 정자, 미금

** 📝 문자열 객체에 대해 알아봅시다 ** 문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용합니다. 변수에 문자형 데이터를 넣으면 첫 번째 글자부터 인덱스 번호 0번을 부여 받습니다. 이때 문자 사이에 공백이 있어도 공백 또한 문자형 데이터이기 때문에 인덱스 번호를 부여 받습니다.

      [기본형]
      1. var 참조변수 = new String('문자형 데이터');
      2. var 참조변수 = "문자형 데이터";

** 📃 문자열 객체의 메서드와 속성 ** 1. charAt(index) : 문자열에서 인덱스 번호에 해당하는 문자를 반환합니다. 2. indexOf('찾을 문자') ★ : 문자열 왼쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환합니다. 만약 찾는 문자가 없다면 -1을 반환합니다. 3. lastIndexOf('찾을 문자') : 문자열 오른쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환합니다. 만약 찾는 문자가 없다면 -1을 반환합니다. 4. match('찾을 문자') : 문자열 왼쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자를 반환합니다. 만약 찾는 문자가 없다면 null을 반환합니다. 5. replace('바꿀 문자', '새 문자') : 문자열 왼쪽부터 바꿀 문자를 찾아 제일 먼저 찾은 문자를 새문자로 치환합니다. 6. search('찾을 문자') : 문자열 왼쪽에서부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환합니다. 만약 일치하는 문자가 없으면 아무것도 반환하지 않습니다. 7. slice(a,b) ★ : a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환합니다. 인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데, -는 문자열의 가장 마지막 번째 글자부터 세서 왼쪽으로 올라옵니다. 8. substring(a,b) ★ : a의 인덱스 부터 b 인덱스 이전 구간의 문자를 반환합니다. 인덱스 번호 자리에 -(마이너스)를 쓸 수 있는데, -는 인덱스번호 a의 앞글자부터 -숫자 개수만큼 잘라서 반환합니다. 9. substr(a, 문자개수) : 문자열에 a인덱스부터 지정한 문자 개수만큼 문자열을 반환합니다. 10. split('문자') ★ : 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환합니다. 11. toLowerCase() : 문자열에서 영문 대문자를 모두 소문자로 변환합니다. 12. toUpperCase() : 문자열에서 영문 소문자를 모두 대문자로 변환합니다. 13. lenght : 문자열에서 문자의 총 개수를 반환합니다. 14. concat("새로운 문자") : 문자열에 새로운 문자를 결합합니다. 15. charCodeAt(index) : 문자열 index에 해당하는 아스키 코드값을 반환합니다. 16. fromCharCode(아스키 코드 값) : 아스키 코드 값에 해당하는 문자를 반환합니다. 17. trim() : 문자열 앞 또는 뒤에 공백 문자열을 제거합니다.

      var str = "Hello Thank you good luck to you";
      ------------------------------------------------------------
      //문자열의 인덱스 번호 7번 위치에 있는 문자를 반환합니다.
      document.write(str.charAt(3), "<br/>"); //l
      ------------------------------------------------------------
      //문자열에서 제일 먼저 찾은 "you"의 y인덱스 값을 반환합니다.
      document.write(str.indexOf("you"), "<br/>"); //12
      ------------------------------------------------------------
      //문자열 맨 끝에서 제일먼저 찾은 "you"의 y인덱스 값을 반환합니다.
      document.write(str.lastIndexOf("you"), "<br/>"); //29
      ------------------------------------------------------------
      //문자열의 16번 인덱스부터 'you'를 찾아 y인덱스 값을 반환합니다.
      document.write(str.indexOf("you", 16), "<br/>"); //12

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** ✈️ 날짜 객체에 대해 알아봅시다 ** 날짜 객체는 날짜나 시간 관련 정보를 제공 받고 싶을 때 사용합니다. 날짜 객체 또한 변수 안에 선언할때 new 키워드를 붙이고 뒤에 Date()를 붙입니다. new Date();라고 쓰면 오늘 날짜의 현재 시간 정보가 남습니다. 만약 특정 날짜 정보를 제공하고 싶은 경우 Date()의 ()소괄호 안에 날짜를 입력합니다. 날짜는 문자형으로 입력하거나 숫자형으로 입력할 수 있는데, 만약 숫자로 입력할 경우 월에서 1을 빼주어야 합니다. 프로그래밍 언어에서 시작 숫자는 0이므로, 0이 곧 1월이 됩니다. 또한 문자형으로 작성할 경우 연도와 월,일을 /(슬래쉬)로 구분하고, 만약 숫자형으로 작성할 경우 연도와 월,일을 ,(콤마)로 구분합니다.

      [기본형]
      1. 오늘 날짜의 현재 시간 정보를 알고 싶을 때 사용
      - var 참조변수 = new Date();
      2. 특정 날짜 정보를 제공하고 싶을 때 사용
          연 / 월 / 일을 슬래쉬로 구분하여 작성합니다.
      - var 참조변수 = new Date('연/월/일'); //ex. var date = new Date('2000/5/31')
      - ★ var 참조변수 = new Date(연,월-1,일); //ex. var date = new Date(2000,4,31)

** ✈️ 날짜 관련 메서드 ** 날짜 관련 메서드는 날짜에서 특정한 연도나, 월, 요일, 시간 정보를 따로 빼서 가져오거나 바꾸고 싶을 때 사용합니다. 여기에서 날짜나 시간 정보를 가져오고 싶을 때에는 'get메서드'를 사용하고, 날짜나 시간정보를 바꾸고 싶을 때에는 'set메서드'를 사용합니다.

      [get]
      1. getFullYear() : 연도 정보를 가져옵니다.
      2. getMonth() : 월 정보를 가져옵니다.
      //-1된 값으로 표현됩니다. 0은 월요일입니다.
      3. getDate() : 일 정보를 가져옵니다.
      4. getDay() : 요일 정보를 가져옵니다. 
      //자바스크립트에서의 요일은 숫자로 표현됩니다. 
        0~6까지의 숫자로 표현이되며,
        0은 일요일, 6은 토요일 입니다.
      5. getHours() : 시 정보를 가져옵니다.
      6. getMinutes() : 분 정보를 가져옵니다.
      7. getSeconds() : 초 정보를 가져옵니다.
      8.★ getMilliSeconds() : 밀리초 정보를 가져옵니다.(1/1,000초 단위)
      9. getTime() : 1970년 1월 1일부터 경과된 시간을 밀리초 단위로 표시합니다.
      10. toGMTString(): GMT 표준 표기 방식으로 문자형 데이터로 시간을 반환합니다.

      [set]
      1. setFullYear() : 연도 정보만 수정합니다.
      2. setMonth() : 월 정보를 수정합니다.
      //-1된 값으로 수정 해야 합니다.
      3. setDate() : 일 정보를 수정합니다.
      //요일은 일자가 바뀌면 자동으로 바뀌므로 setDay는 없습니다.
      4. setHours() : 시 정보를 수정합니다.
      6. setMinutes() : 분 정보를 수정합니다.
      7. setSeconds() : 초 정보를 수정합니다.
      8. setMilliSeconds() : 밀리초 정보를 수정합니다.(1/1,000초 단위)
      9. setTime() : 1970년 1월 1일부터 경과된 시간을 밀리초 단위로 수정합니다.
      10. toLocaleString(): 운영 시스템 표기 방식으로 문자형 데이터로 시간을 반환합니다.

** 🛫 도전 실습! 2002년 월드컵의 요일 정보를 알아봅시다 **

      document.write("<h2>2002년 월드컵의 요일 정보를 구해보자!</h2>");
      var worldcup = new Date(2002, 4, 31); //월드컵은 2002년 5월 31일에 개최되었습니다.
      var theMonth = worldcup.getMonth() + 1; //월드컵 월 정보
      var theDate = worldcup.getDate(); //월드컵의 일 정보
      var theDay = worldcup.getDay(); //월드컵 일자의 요일 정보

      //요일을 숫자에서 문자로 변환하기
      switch (theDay) {
        case 0:
          theDay = "일요일";
          break;
        case 1:
          theDay = "월요일";
          break;
        case 2:
          theDay = "화요일";
          break;
        case 3:
          theDay = "수요일";
          break;
        case 4:
          theDay = "목요일";
          break;
        case 5:
          theDay = "금요일";
          break;
        case 6:
          theDay = "토요일";
          break;
        default:
          alert("해당하는 요일이 없습니다.");
      }

      document.write(
        "월드컵 개최일은" + theMonth + "월" + theDate + "일" + theDay
      );

** ⛅ 디데이 계산기를 만들어봅시다 ** ☀️ 현재 날짜부터 특정 날짜까지 며칠이 남았는지 구하는 공식 남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체 ☀️ 밀리초로 계산한 시간값 1초 = 1000(msc) 1분(60초) = 1000 * 60 > 60,000(msc) 1시간(60분) = 1000 * 60 * 60 > 3,600,000(msc) 1일(60분 * 24) = 1000 * 60 * 60 * 24 > 86,400,000(msc)

      var today = new Date(); //오늘 날짜
      var nowYear = today.getFullYear(); //현재 연도 정보
      var theDate = new Date(nowYear, 11, 31); //올해 말일 정보
      //남은 일수(밀리초) = 올해 말일(밀리초) - 오늘 날짜(밀리초)
      var diffDate = theDate.getTime() - today.getTime();
      //result = 반올림(남은일 수 / 하루)
      var result = Math.ceil(diffDate / (1000 * 60 * 60 * 24));
      document.write("연말 D-Day : " + result + " 일 남았습니다.");

** 🍀 수학 객체에 대해 알아봅시다 ** 자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학 객체가 있습니다. 더하기, 빼기, 곱하기, 나누기와 같은 간단한 연산식이 아닌 어려운 연산식을 쉽게 계산하도록 만들어진 객체입니다.

      [메서드와 상수 종류]
      1. Math.abs(숫자) : 숫자의 절대값을 반환한다.
      2. Math.max(숫자1, 숫자2, 숫자3...) : 숫자 중 가장 큰 값을 반환합니다.
      3. Math.min(숫자1, 숫자2, 숫자3...) : 숫자 중 가장 작은 값을 반환합니다.
      4. Math.pow(숫자, 제곱값) : 숫자의 거듭 제곱값을 반환합니다.
      5. Math.random() : 0 ~ 1 사이의 난수를 반환합니다.
      6. Math.round(숫자) : 소수점 첫째 자리에서 반올림하여 정수를 반환합니다.
      7. Math.ceil(숫자) : 소수점 첫째 자리에서 무조건 올림하여 정수를 반환합니다.
      8. Math.floor(숫자) : 소수점 첫째 자리에서 무조건 내림하여 정수를 반환합니다.
      9. Math.sqrt(숫자) : 숫자의 제곱근값을 반환합니다.
      10. Math.PI : 원주율 상수를 반환합니다.

      var num = 2.1234;
---------------------------------------------------
      var maxNum = Math.max(10, 5, 8, 30);
      document.write(maxNum, "<br/>"); //30
---------------------------------------------------
      var minNum = Math.min(10, 5, 8, 30);
      document.write(minNum, "<br/>"); //5
---------------------------------------------------
      var roundNum = Math.round(num);
      document.write(roundNum, "<br/>"); //2
---------------------------------------------------
      var floorNum = Math.floor(num);
      document.write(roundNum, "<br/>"); //2
---------------------------------------------------
      var ceilNum = Math.ceil(num);
      document.write(ceilNum, "<br/>"); //3
---------------------------------------------------
      var randomNum = Math.random();
      document.write(randomNum, "<br/>"); //0~1사이의 랜덤수
---------------------------------------------------
      var piNum = Math.PI;
      document.write(piNum, "<br/>"); //3.14159............

** 👀 랜덤 숫자를 출력해봅시다 ** Math.random()메서드를 사용하면 0과 1 사이의 랜덤한 난수를 반환합니다. 만약 0과 1사이가 아닌 임의로 지정한 숫자의 구간에서 난수를 정수로 반환 받고 싶다면 아래와 같은 공식을 사용합니다.

      [공식]
      Math.random() * 최댓값
      > 0부터 최댓값 사이의 난수를 실수로 반환합니다.
----------------------------------------------------- 
      Math.floor(Math.random * (최댓값 + 1))
      > 0부터 최댓값 사이의 랜덤한 수를 정수로 반환합니다.
-----------------------------------------------------
      Math.floor(Math.random()*(최댓값 - 최솟값 + 1)) + 최솟값;
      > 원하는 구간 사이의 랜덤한 수를 정수로 반환합니다.

      //0과 10사이의 난수를 반환하기
      var num1 = Math.random() * 10;
      document.write(num1, "<br/>");
-----------------------------------------------------
      //0과 10사이의 난수를 정수로 반환하기
      num1 = Math.floor(Math.random() * 11);
      document.write(num1, "<br/>");
-----------------------------------------------------
      //120부터 150까지의 난수를 정수로 전환받기
      num1 = Math.floor(Math.random() * 31) + 120;
      document.write(num1, "<br/>");

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

** 👻 객체에 대해 알아봅시다 ** 자바스크립트는 객체 기반 프로그래밍 언어를 말합니다. 즉, 객체 지향 언어라고 합니다. 객체를 구성하는 요소로는 속성(property)과 기능(method)로 이루어져 있습니다.

      [기본형]
      객체.속성명 = 값;
      : 특정 객체 속성의 값을 바꾸고 싶을 때 사용합니다. 
      객체.속성명;
      : 특정 객체에 할당되어 있는 속성값을 알고 싶을 때 사용합니다.
      객체.메서드();
      : 특정 객체의 기능을 실행시킬 때 사용합니다.

** 🍀 객체의 종류에 대해 알아봅시다 ** 자바스크립트의 객체는 크게 내장객체, 브라우저 객체모델(BOM, Browser Object Model), 문서 객체(DOM, Document Object Model)가 있습니다. 내장 객체란, 자바스크립트 엔진 안에 내장되어 필요한 경우에 생성하여 사용할 수 있습니다. (꺼내쓰는 것과 같습니다.) 내장 객체의 종류로는 날짜 객체, 문자 객체, 배열 객체, 수학 객체가 있습니다. 브라우저 객체란, 말 그대로 브라우저를 의미합니다. 브라우저에 계층 구조로 내장되어 있습니다. 브라우저 객체의 종류로는 window객체, location객체, screen객체, history객체, navigator객체가 있습니다. 문서 객체란, 말 그대로 html 문서 구조를 말합니다. html 태그는 최상위 객체로 안쪽에 다양한 하위 객체들을 포함할 수 있습니다. 하지만 자바스크립트의 문서 객체는 브라우저간의 호환성이 낮다는 단점이 있어, jQuery라는 언어가 개발 되었습니다. 현재는 ES6버전으로 자바스크립트의 호환성을 높인 버전으로 업데이트 되어, 다양한 속성과 기능을 이용해 태그들을 제어할 수 있습니다.

** ✨ 내장 객체에 대해 알아봅시다. ** 내장 객체(built-in object)는 자바스크립트 엔진 안에 내장된 객체를 말하며, 필요한 경우 객체를 생성하여 사용할 수 있습니다. 내장 객체를 생성할 때에는 new라는 키워드를 이용하여 생성할 수 있습니다. ★ 모든 객체는 변수 안에 선언해야 합니다.

      [기본형]
      1. var 변수 = new object();
      변수.속성1 = 값;
      변수.함수(메서드) = 함수(){코드}
      -----------------------------------------------------------------------------
      object = 생성함수라는 뜻으로,
      커스텀하여 만들 객체를 선언할 때 사용합니다.
      ★
      2. var 변수 = {
        속성명1 : 값1,
        속성명2 : 값2,
        속성명3 : 값3,
        함수명 : 함수(){}
        }
      -----------------------------------------------------------------------------
      1번 기본형의 축약형으로, new object()가 곧 {}이다.
      {}중괄호 안에 속성과 메서드를 한꺼번에 선언하여 쓸 수 있습니다.

    <script>
      // 새로운 tv 객체 생성
      var tv = new Object(); // = {}
      // tv 객체에 color 속성과 price 속성을 추가
      tv.color = "white";
      tv.price = 30000;
      // tv 객체에 info 메서드를 추가
      tv.info = function () {
        //this 키워드는 해당 객체. 즉, tv 객체를 가리킵니다.
        document.write("tv색상 : " + this.color, "<br/>");
        document.write("tv가격 : " + this.price, "<br/>");
      };
      document.write("<h2>tv 객체의 info 메서드 호출</h2>");
      tv.info();
      //새로운 car 객체 생성
      var car = {
        color: "black",
        price: "500000",
        info: function () {
          //this 키워드는 해당 객체. 즉, car 객체를 가리킵니다.
          document.write("car 색상 : " + this.color, "<br/>");
          document.write("car 가격 : " + this.price, "<br/>");
        },
      };
      document.write("<h2>car 객체의 info 메서드 호출</h2>");
      car.info();
    </script>

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 ! ✖️ 앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)