📌 09_요소 탐색
DOM (Document Object Model)
구조에서 원하는 요소까지 이동하고 찾아가는 것
1. 준비 (테이블 생성)
border-collapse
표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정
-border-collapse: collapse;(기본값)
-border-collapse: separated;
[출처] https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse
2. 원하는 요소까지 이동하고 찾아가기
1) 기준 요소 잡기
↳ td에 가서 2번째 인덱스(eq)의 css(배경을, 초록색으로) 바꿔주세요.
eq(): 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다.css(): 선택한 요소에 CSS 속성 값을 설정합니다.
//속성 값을 가져오는 경우
$("div").css("background-color");
//속성 값을 변경하는 경우
$("div").css("background-color", "red");
//여러 개의 속성 값을 변경하는 경우
$("div").css({"background-color" : "red", "width" : "500px"});
//콜백함수를 사용하는 경우
$("div").css("background-color", function(){});
2) 1번을 기준으로 요소를 이동하기
.prev() 이전 요소 선택
.next() 다음 요소 선택
.parent() 선택한 요소의 부모 요소, 상위 요소 가져오기
.parents() 선택한 요소의 조상 요소를 모두 선택, 상위 요소
.children() 선택한 요소의 자식 요소 모두 선택
.find() 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택
📌 10_addClass, removeClass
1. 준비
2. #box css
3. #startBtn css
3-1) #startBtn css 추가
3-2) #startBtn 마우스 올렸을 때 효과 추가
↳ 마우스 오버하면 컬러가 바뀜
3-3) #startBtn 이미지 효과 추가
↳ 아직 아무것도 바뀌지 않는다.
↳ scalse(0) 은 보이지 않게 하는 것이기 때문이다.
3-4) #startBtn box.open 효과 추가
4. script에 이벤트 효과 addClass 적용시키기
↳ #startBtn을 클릭하면 , #box에 open하는 기능을 추가해라.
.addCalss()
.removeClass()
-> 두 함수는 class의 내용을 수정하는 함수
↳ 스타트! 버튼을 클릭하면
↳ 이미지를 클릭하면
↳ 스타트 버튼이 다시 나온다.
개발자모드 확인
↳ class 가 class="open" 으로 바뀐다
📌 11_moment.js
https://stats.js.org/
- 자바스크립트기반 오픈소스 인기 순위
moment.js
- 자바스크립트의 내장객체 Date()의 복잡성을 단순, 다양하게 사용하기 위한 자바스크립트 기반의 오픈소스
- https://momentjs.com/
momentjs
이거 만들거임(움직이는 시계)
1. 준비
1) 오픈소스 다운
↳ 마우스 우클릭 → moment-with-locales.js 다운받기
2) 오픈소스 임포트
2. 년월일시분초
1) 자바스크립트로 만드는 방법
2) momentjs로 제작
↳ alert로 제대로 나오는지 확인하기
↳ 현재 9월인데 8월로 나옴. +1 해줘야함.
2-1) momentjs로 자바스크립트와 똑같은 화면 구현하기
↳ ✅ moment.locale("ko"); - 모멘트 데이터에 한글을 넣어주는 기능
12_날짜데이터 자동생성
1. 준비
2. 날짜데이터 생성
✳️ myMonth 월
1) 12칸 생성
↳ 옵션 빈칸이 12개가 생성된다.
2) select 옵션 안에 숫자(텍스트) 넣기
3) select 옵션 안에 value값 넣기
→ value값을 추가해주면 다이나믹하게 구현할 수 있게된다.
4) 자식.appendTo(부모)로 출력하기
✳️ myYear 년도
1) 현재년도 -5년 ~ 현재년도+5년까지 출력
2) 현재년도가 보여지도록 selected하기
- .attr()
↳ if 만약 for문의 y가==현재년도가 같다면 attr()를 이용해 selected 해준다.
↳ 현재년도인 2022년도에 selected 되어있는 걸 확인할 수 있다.
- .prop()
↳ .prop()을 사용하면 개발자모드에서 selected가 보이지 않는다.
✳️ myDate 일
text(): 일반적인 요소의 문자열값을 얻어올 때val():<input>,<select>,<textarea>등 폼과 관련된 값(컨드롤 요소)을 얻어올 때
1) '일'생성하는 함수 호출
2) id=myYear에서 사용자가 선택한 년도 가져오기
3) id=myMonth에서 사용자가 선택한 월 가져오기
4) endOf() : 해당 년도와 해당 월의 마지막 일을 얻어옴
5) select에 '일' 추가
↳ 여기까지 끝내게 되면 사용자가 선택한 년도의 월의 일수가 나오게 된다. (28일 29일 30일 31일)
6) 결과확인
7) 사용자가 년, 월을 변경했을 때 (change이벤트가 발생했을 때) date값을 다시 호출
↳ ❓ 근데 1일부터 30일까지 누적이 되는 오류가 발생한다.
8) 기존의 '일' 출력된 값을 지우기
↳ createDate 맨위에 기존의 '일'출력된 값을 .empty()로 지워준다.
↳ 누적되지 않고 8월 일수만 나온다.
📌 13_아날로그시계
1. css 설정
1-1) CSS추가 : 시계 전체 원형 이미지 출력
1-2) CSS추가 : 시분초 이미지 출력 출력
↳ 여기까지만 하면 시침 이미지가 아직 보이지 않는다.
1-3) CSS추가 : 시분초 이미지가 출력되는 위치 지정
↳ 위치를 지정해줘야 시침 이미지가 보인다.
↳ class="hand"를 추가해준다.
↳ 이제 시침이 보여진다.
↳ 아직 시침이 움직이지 않는다.
2. 시침 돌리기
↳ 360도를 60초에 나눠서 돌려야 함 (6도씩)
1) 함수 선언
↳ 시분초가 들어가있는 함수를 만들어준다.
↳ 위에 최초 함수 호출을 해주어야 사용이 가능하다.
2) 초, 분, 시 이미지 각도 꺾기 (한바퀴 360도)
sec 초
min 분
↳ (min*6)+(sec*0.1)는 분침이 360도를 6도씩 움직일 때 시침은 60분을 60초로 나눠 0.1도씩 움직이는 부분을 표현한 것이다.
hour 시
↳ (30*hour+0.5*min)는 60분에서 30도를 나눈 값 0.5를 곱한다.
5) 1초마다 주기적 또는 반복적으로 함수 호출
↳ 1초마다 호출
6) 결과확인
↳ 움직이는 아날로그 시계 완성~
