학습내용
오늘 작일 학습내용을 review하고 console 창에서 배열이 어떻게 작용되는지, 함수는 어떻게 쓰며, 쓰이는지에 대해 학습했다.
학습5일차인 지금은 기본html틀 정도는 바로 작성이 가능하다(강사님도 강조하신 부분). 기본 틀을 만들고 웹페이지의 타이틀이 되는 WEB을 h1사이즈로 표기하여 링크를 걸어준 뒤 li* 3을 이용해 목차3개를 작성하여 각태그에 맞는 링크를 걸어준다.
아래는 소제목 개념으로 h2사이즈의 welcome을 기입하고 인삿말을 기입. 그리고 웹의 background 컬러와 font 컬러를 익히 알고있는 night 모드처럼 변경하기위한 버튼을 제작하는 코드를 적는다.
오늘 왜인지 button이 작동을 하는데 backgroundColor만 변경 되지가 않아 강사님 코드와 내 코드를 비교하며 한참을 시간을 쏟는데, 아니나 다를까 'backgroundcolor'가 아니라 'backgroundColor'였다.
혹여 이걸 읽는 당신이, 이 두가지를 다르다고 생각하는 내가 바보같다고 생각한다면 지극히 정상이다. 여기서 우리는 다시금 대소문자 구별과 컴마, 백틱, 괄호에 유의할것을 잊지 말아야한다. 제발....
다음은 복습내용 반복문.
var로 topics라는 배열을 만든다. html, css, js라는 element를 넣고
for문의 괄호 안에 조건과 Boolean, 증감을 채워본다. 그리고 중괄호 안쪽에 document.write를 이용하여li를 작성하는 코드 작성
아랫부분은 같은 li지만 $표시가 붙어있는 줄은 요즘 js에 들어온 문법이라고 강사님이 가르쳐주신 부분이다. 저렇게하면 구분하기가 쉽고 가독성도 좋아진다고 한다. 이 역시 백틱과 작은따옴표의 구분에 유의
다음은 콘솔창에서 강사님이 열심히 가르쳐주신 부분인데...내 브라우저의 콘솔창이 엔터를 눌러도 실행이 되지않고 되려 줄바꿈이 실행되는 탓에 수업을 놓쳤다. 그래도 에디터로 수업하시는 부분은 캐치.
이 부분은 강사님께서 일부러 정신없이 적어놓으신것이다. 원래 적으신건 가운데 abc();함수가 적용되지 않았다. 123abc45abc56abc 이런식으로 정신없이 밑으로 내려갔다.
그렇게 가독성이 떨어지는 코드를 function으로 함수를 지정하여 최대한 깔끔히 정리하는 방법을 보여주시기 위한 예시.
즉 가운데 abc();는 맨 위의 function abc(){~} 에서 ~부분에 저장되어있는 데이터를 불러다주는 역할을 한다. console.log(2);와 console.log(3);사이에 abc();를 기입한다면 2 a b c 3 이런식으로 출력이 될것이다.
강사님이 function의 기능을 예시로 보여주고 return에 대해 설명하기 위해 작성해본 코드.
function에 부가세계산 이라는 함수를 지정한다. 이 부가세계산은 가격과 부가세율 이라는 element를 가진다.
그리고 부가세를 가격 * 부가세율 이라는 연산식으로 구성하여 return값으로 부가세를 준 코드. return값은 주석에 달린것 처럼 함수의 종료 조건이라고 한다.
아래쪽의 console.log의 괄호 안에 2000과 0.1이라는 수가 지정되었다. 그럼 함수는 2000을 가격, 0.1을 부가세율로 받아들여 return값으로 부가세를 나타내는것이다.
return이 왜 종료조건이냐면, 호기심에 함수 내에 let 부가티 = 3333;이라는 수를 지정했다. 그리고 return(부가세+부가티);로 수정했더니 3533이라는 결과가 나온다. 3333에 200을 더한것이니 맞는 결과가 나온 셈이다.
아래의 SUM은 간단한 이해를 위해 작성한것이다. sum이라는 함수를 지정하고 val1,val2를 element로 지정한다. 그리고 함수 내에 return 값으로 val1 val2 를 준다. 마지막엔 sum(100,200) 10의 값이 alert(알림창)로 나오게 설정한 것이다. sum안의 val1로 입력되는 100, 그리고 val2로 입력되는 200이 곱해져 200000이 나오고, 10을 곱하였으니 200000이 출력되어 alert로 나온것이라고 해석하면 되겠다.
위에 설명한 함수를 이용하여 index.html의 button 코드를 변경했다.
Dark와 Light라는 함수를 제작하고 안에 button의 설정값을 입력한 뒤 for문으로 작동할때 컬러를 제한시킨다..
그렇게 해서 아래쪽에 있는 본문 밑에 if문 안에는 길고 복잡한 코드가 들어가는것이 아닌 위에서 작성한 함수를 불러오기만 하면 되는것이다.
먼저 목차와 웹제목에 id를 a라고 붙여준다 a1~a6이다.
그리고let으로 as를 붙여준다. 이때 as는 a's 의 뜻으로 해석하자.
목차와 웹제목에 id를 a라고 줬으면 a들을 이용해 함수를 만들자.
function으로 Dark 버튼의 함수부터 만들어본다.
폰트색과 배경색을 지정해주고 a들에게 적용될 수 있도록 하여 함수를 완성한다.
아래쪽 버튼 관련 코드에서 적어놓은 버튼 코드는 이제 필요없다. 날려주고 if문으로 조건을 걸어둔 내용 안에 함수를 불러오기만 하면 끝이다.
어려웠던 점
위에서 부가가치세 계산코드를 Sum으로 짤때, alert에 붙어있는 10이 마지막으로 적용되는 듯 하다. return이 종료조건이라고 알고있는데, alert는 결과창에 뜨는 마지막 결과물이라 최종적으로 10 이 적용이 된것일까?
해결방법
다음 수업때 질문으로 해결
학습소감
날이 갈수록 어려워 지지만 학교에서 공부를 손놓고 살아도 짬짬히 배워본 코딩 덕에 그나마 할만한 것 같다. 전공자 이기는 하지만 지식이 없다고 봐도 무방하기 때문에, 비전공자 분들의 어려움이 예상이 간다. 지금 이럴줄 알았으면 대학교 다닐때 조금이라도 집중을 더 할걸 싶은 야속한 생각도 든다. 호박에 줄긋는다고 수박이 되는건 아니지만 말이다.
