[zero 1주차] JS, TS study

**스터디의 목적은 과제 형태를 지양하며,
개개인의 코드 개선과 활용성을 증대 시키는 것을 목적으로 진행하고 있습니다.**

1. 자바스크립트 학습 주제

DOM의 개념과 요소, DOM API 이해

1) 자료 정리

이종국 정리
https://veil-shock-17c.notion.site/JS_DOM-e89cd36e4ff54e8a9dc311a1c1ee48d9
https://veil-shock-17c.notion.site/Critical-Rendering-Path-50f8f66cc61b4bd59d0bccbeb37e0573

이인재 정리
https://velog.io/@dldlswognqh/DOM

김다빈 정리
https://dabiny.notion.site/38-31b29be1710445a48d69dce595bc2829
https://dabiny.notion.site/39-DOM-a5b1fb593e144b36a5c2e7c8cb0b37dd

김유민 정리
https://devyuminkim.github.io/devlog/dev-js-dom.html

2) 구현 실습 (개인 코드 활용만 업로드)

addEventListner : click, mouseover 기능 삽입
getElementById를 통한 버튼 구성

Button1 : 클릭 시, "버튼이 클릭 되었습니다." alert 발생
Button2 : 커서가 근처에 갔을 때 "동작이 감지되었습니다." alert 발생
Button3 : button의 id값을 받아와서 changeColor Blue
Button4 : button의 id값을 받아와서 changeColor Green

code
https://velog.io/@kook03/%EA%B0%84%EB%8B%A8-%EC%8B%A4%EC%8A%B5

getElementClassName을 통한 list 상속

ul과 li 리스트 안에 동일한 fruits class를 정함.
getElementClassName을 통해 Element를 'fruits'으로 할당하고 해당되는 클래스의 모든 값들을 forEach를 통해 순회 후 이벤트인 색상을 레드컬러로 줌. 추가 변수인 fruits__apple을 만들어서 마찬가지로 순회 후 블루컬러를 주는 이벤트를 만듦.

code
https://dabiny.notion.site/39-DOM-a5b1fb593e144b36a5c2e7c8cb0b37dd

2. 타입스크립트 학습 주제

타입스크립트의 기본 개념, Class, interface

자료 정리

이인재 정리
https://velog.io/@dldlswognqh/series/TypeScript

이종국 정리
https://veil-shock-17c.notion.site/Typescript-da923ed0f12c42f7963cc593c8f734ef

김유민 정리
https://devyuminkim.github.io/devlog/dev-ts.html