이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
자바스크립트, 비교 연산자・불리언・조건문
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 제어할 태그 선택하기 이 포스팅은 PC로 작성되었습니
gogogameboy.tistory.com
이번에는 지난 포스트에서 배운 것들을 이용해서 좀 더 실용적이고 쓸만한 것을 만드는 실습을 해보겠습니다.
상황에 따라 다른 효과를 주는 버튼
자바스크립트, 제어할 태그 선택하기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 웹브라우저 제어 이 포스팅은 PC로 작성되었습니다. 모
gogogameboy.tistory.com
위의 생활코딩 강의 영상에서 보신대로 이 포스트에서 만들었던 버튼을 업그레이드 시켜보겠습니다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
if( ) 안에 쓰여있는 document.querySelector('#night_day').value === 'night' 라는 코드는
「 id 값이 'night_day'인 태그의 value 값이 'night'인 경우에 { } 안의 소스 코드를 실행한다. 」 라는 뜻입니다.
그 다음의 else{ } 는 if( ) 안에 쓰여있는 document.querySelector('#night_day').value === 'night' 라는 코드로 인해서 id 값이 'night_day'인 태그의 value 값이 'night'가 아닌 경우에 else{ } 안의 소스 코드를 실행하게 됩니다.
위의 소스 코드로 완성된 파일을 올려두겠습니다.
이전의 포스트에서 그냥 '비교 연산자, 불리언, 조건문'만 배웠을 때에는 도대체 뭐에 쓰는 것인지도 모르겠어서 머리만 아프고 '내가 잘 공부하고 있는 건가?' 라는 의구심이 들었는데, 이렇게 뭔가 하나를 만들고, 이것을 이해하게 되니 정말 뿌듯하고 재미있는 것 같습니다.
다음 포스트
자바스크립트, 중복되는 코드 제거
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 조건문의 활용 이 포스팅은 PC로 작성되었습니다. 모바
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > JavaScript' 카테고리의 다른 글
| 자바스크립트, 배열과 반복문 (0) | 2021.01.29 |
|---|---|
| 자바스크립트, 중복되는 코드 제거 (0) | 2021.01.28 |
| 자바스크립트, 비교 연산자・불리언・조건문 (0) | 2021.01.26 |
| 자바스크립트, 제어할 태그 선택하기 (0) | 2021.01.24 |
| 자바스크립트, 웹브라우저 제어 (0) | 2021.01.24 |
댓글