개념 - 실습
📌학습 내용
📖 실습
💡 버튼 클릭 -> 랜덤 배경색을 변경하게 하기
- 헥사코드: #과 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
📌느낀 점
🤍
Author And Source
이 문제에 관하여(개념 - 실습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@naheeyu/210909저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)