[SSAC 3기] - 4주차-(3)

😻Javascript

바닐라 자바스크립트란 플러그인이나 라이브러리를 사용하지 않은 순수 자바스크립트를 말합니다. (I like it)

1. selecter(선택자)
   ① id로 접근 (한개만 가능)

   let select =  document.getElementByld("id").innerHTML.trim() = "안녕";

   • innerHTML 사용시 vsc창에서 탭, enter 공간까지 다 포함하게됨
     이를 해결하기위해 trim() 을 사용하여 공백을 제거해준다.

   ② class로 접근 (여러개 가능)

   let select2 = document.getElementsByClassName("class")[0].innerText;

   • 배열이기때문에 [0] 처럼 인덱스를 꼭 해줘야함
   • innerHTML은 태그까지 다 출력 (html 형식 그대로 - 공백, 탭 포함)
     innerText는 텍스트만 출력

   ③ name으로 접근 (여러개 가능)

   let select3 = document.getElementsByName("name")[0].value;

   • 배열이기때문에 [0] 처럼 인덱스를 꼭 해줘야함

   ④ tagname으로 접근 (여러개 가능)

   let select4 = document.getElementsByTagName("div");

   • 배열이기떄문에 [0] 처럼 인덱스를 꼭 해줘야함

   ⑤ css 선택자를 기준으로 1번째 요소

   let select5 = document.querySelector();

   ⑥ css 선택자에 맞는 모든 요소를 nodelist로 변환

   let select6 = document.querySelectorAll();

   
   

2. 자식, 후손, 부모 선택하는 방법

    <div class="parent">
        <div class="child1">
            자식1
        </div>
        <div clas="child2">
            자식2
        </div>
    <div>

① 자식 선택

    let children = documentsByClassName("parent ")[0].children

② 후손 선택

    let children2 = documentsByClassName("parent")[0].children[0].children;

③ 부모 선택

    let parent = document.getElementsByClassName("child1")[0].parentElement;

😹jQuery

HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리를 말합니다. (i don't like it)

1. selecter(선택자)
   ① 아이디로 접근

   let select = $('#id');

   ② 클래스로 접근

   let select = $('.class');

   ③ 태그로 접근

   let select = $('p');

   ④ 속성으로 접근

   let = select1 = $('[ value ]');
    let = select2 = $('[ value = 'zero' ]');

   
   

2. 자식, 부모 선택하는 방법

      <div class="parent">
          <div class="child1">
              자식1
          </div>
          <div clas="child2">
              자식2
          </div>
      <div>

①자식 선택

    let children = $(".parent").chidren();

②부모 선택

    let parent = $(".childern").parent();

---------------------------------이하 추후 업데이트예정

📚과제

<실습 - 제이쿼리를 이용하여 스케줄러(todo) 만들기 (추가,삭제,수정)>

1. "날짜"와 "할일"을 입력하는 input 창을 만든다.
2. 입력 버튼을 누를 시 해당 "날짜"에 "할일"을 추가한다.
3. 입력 옆에 있는 삭제 버튼을 누를시 해당 날짜의 전체 일정을 삭제 한다.
4. 달력에 있는 수정 버튼을 누를 시, 수정을 위한 input과 수정 버튼을 표시한다.
5. 4의 수정 버튼을 누를 시 스케쥴을 수정하고, input 창을 안 보이게 한다.
6. 스케쥴 옆에 있는 삭제 버튼을 누르면 해당 스케쥴만 삭제되게 한다.

🦈수업후기

javascript 에 대한 사전지식이나, 예습을 하지 못하신 교육생들은 아마 따라오기 힘든 수업이 아니였나 싶고, 수업이 좀 산만?! 했던 것 같다. (다들 동감할듯,,)

그리고 제이쿼리는 필요없다고 항상 배제하고 바닐라js, 와 리액트에만 초점을 두었었고, 단순히 부트스트랩처럼 가져다 쓰는 것으로만 알고 있었지만 이번기회에 제이쿼리로 직접 실습해보면서 js와의 차이점을 이해 하였고, 주로 누가, 어떻게 쓰는지에 대해 알게 되었다.

jquery,, js랑 자꾸 혼또니 혼돈이,,,😭