Today I Learned
- querySeletor를 이용해 제어할 태그를 선택하는 법을 배웠다.
- 조건문과 반복문 그리고 새로운 데이터타입인 Boolean을 배웠다. (이전까지 배운 데이터 타입은 Number와 String)
- <input type="button" value="night'>, <input type="button" value="day'>코드로 두가지의 버튼을 만들고 onclick과 querySelector, style을 이용해 페이지 전체의 배경색과 글자색을 각각 변경할 수 있게 됐다.
- 위 방식에 조건문 if와 else를 이용해 한 버튼으로 클릭했을때 번갈아가며 작동할 수 있게 추가로 버튼을 만들었다.
- 각자의 언어에서 같은 단어라도 사용하는방법이 다르다. CSS의 style에선 "background-color" 이렇게 사용했지만 JavaScript의 style에선 "backgroundColor"로 사용했다. 심지어 "backgroundcolor" 이렇게 소문자로 코딩해도 작동이 되지 않았다. 여기서 언어로써의 차이를 느낄 수 있었다. 이전에는 backgroundcolor가 무슨 언어야? 라고 물어봤다면 지금은 어떻게 사용하는지에 따라 다르기에 위의 질문만으로는 답변을 할 수 없다는걸 깨달았다.
- HTML과 CSS는 웹사이트에 표현하는게 목적인 컴퓨터 언어이기 때문에 시간의 흐름에 따라 코딩을 할 필요가 없지만 JavaScript는 실행되는 순서가 있는 프로그래밍 언어라는 점에서 큰 차이가 있다.
- 리팩토링을 배우는데 강의에서는 버튼 하나에 타겟을 설정해 메서드를 줄였다.
<input type="button" value="night" onclick="
var target=document.querySelector('body');
if(this.value==='night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value='day';
- 강의에서는 한가지 버튼에만 적용했지만 난 내가 만든 3가지 버튼에 모두 적용하고 싶었다. <body>태그 안에 3개 버튼중 한가지 버튼에 var target으로 설정을 해놨으나 이건 해당 input에만 적용되며 다른 input에는 적용되지 않아 <body>태그 전체에 한번에 설정을 해보려 했고, 결국
실패보류했다.
Realization
- 사실 아직도 태그와 속성과 선택자등 코드에 들어가는 언어가 이게 태그인지 속성인지 아니면 뭐라고 불러야하는지 헷갈리지만 배우다보면 점점 구분지을수 있을 것 같다는 생각에 안도했다.
- 몇일 전 이 강의를 듣기전 이정도면 지금 아는걸로도 할 수 있을것 같은데? 하고 두들겨봤지만 실패했다. 내가 궁금한것들을 검색하여 찾고, 적용시킬수 있는 검색과 응용력이 중요하다고 절실히 느꼈다. 그를 위해선 강의를 정확히 이해하고 짚고 넘어가야 한다.
- 강의를 들으며 코딩을 하다가 문득 궁금한점이 생겨 해결하는 과정이 재밌다. 아직 해결하진 못했지만 나중에 꼭 돌아와서 해결했을때를 생각하면 너무 즐겁다.
- 점점 본격적으로 언어에 대해 배우고 있는것이 느껴진다. 그만큼 쓸거리도 늘어나서 내용정리를 잘 해야겠다. 무작정 강의를 많이 듣는것보다 직접 두들겨보고 이해하는것이 중요.
- '백견이 불여일타' 라는 말이 있더라. 백번 보는것보다 한번 직접 쳐보는것이 낫다는 뜻으로 전적으로 공감한다. 강의에서 알려주는대로만 코딩하는것보다 관련해서 내가 궁금한것을 직접 코딩해보고 수정하며 알아가는 과정이 공부에 정말 큰 도움이 된다.
'TIL' 카테고리의 다른 글
| TIL 2023-01-14 (0) | 2023.01.14 |
|---|---|
| TIL 2023-01-05 (0) | 2023.01.05 |
| TIL 2023-01-03 (0) | 2023.01.04 |
| TIL 2022-12-30 (0) | 2022.12.30 |
| TIL 2022-12-28 (0) | 2022.12.29 |
댓글