JS 개념 - 실습

📌학습 내용

📖 실습

💡 버튼 클릭 -> 랜덤 배경색을 변경하게 하기

• 헥사코드: #과 6글자의 숫자와 알파벳 조합 ex) #000fff ...
  숫자: 0 ~ 9
  알파벳: a ~ f

# + 0 = #0
#0 + f = #0f
#0f + a = #0fa
#0fa + b = #0fab
#0fab + a = #0faba
#0faba + c = #0fabac

textContent; JS를 이용해 html에 텍스트 적용
hex.textContent = color; 넣어줌으로써 텍스트로 헥사코드 표기하게 하였음

(1) 메서드의 인수로 함수를 포함

(2) 함수 먼저 정의하고 인수로서 함수명을 전달
실무에서 많이 쓰임

💡 랜덤 인용문 출력하기

💡 사용자가 input에 입력한 정보를 화면에 출력하기

입력한 정보가 없다면 에러 문구를 띄우기

출력될 정보와 오류 문구를 입력해둔 코드가 사용자에게는 평소 화면에서 보이지 않아야 하고
submit되면 자동적으로 브라우저를 새로고침하는 form의 기능을 비활성화 해줘야 함
오류 문구가 나타났을 경우에는 일정 시간이 지나면 사라지는 효과를 적용해야 함

참고
.querySelector()
CSS 선택자로 요소를 선택하게 해줌. 주의점은 선택자에 해당하는 첫번째 요소만 선택한다는 것.
.querySelector(tag)
.querySelector(#id)
.querySelector(.class)

.preventDefault()
tag가 가진 본래의 기능을 없애줌

.classList.add('')
클래스 추가
.classList.remove('')
클래스 삭제

setTimeout(콜백함수, 시간)
시간은 ms단위로
1000ms = 1초

💡 좌우 이미지 슬라이드 효과

버튼을 눌렀을 때 이미지 순서대로 변경되게
prev: 0 -> 3 -> 2 -> 1 -> 0
next: 0 -> 1 -> 2 -> 3 -> 0

참고
.querySelectorAll('')
특정 이름을 가진 해당 요소는 모두 선택하게 함.

.target
사용자가 클릭한 영역을 가져옴

.classList.contains('')
클래스 존재 유무 확인

.src
이미지 경로 변경하는 프라퍼티
https://wecanit.tistory.com/17

📖 JS 코드의 시각적 이해

https://pythontutor.com/
참고하여 조건문, 반복문 등의 구조를 이해할 것

📌어려운 점

프라퍼티와 메소드 사용법이 비슷하니까 헷갈림

📌해결방법

https://www.codeit.kr/community/threads/22083

📌느낀 점

🤍