1. 학습한 내용

1)함수 function

함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인 것이다

function name() {} {}의 코드를 가지는 그룹을 name() 로 한다.

이러한 함수의 장점으로는 코드가 간결해져서 가독성이 좋아지고, 오류가 났을때의 유지보수가 편해진다.

예를들어

위의 사진과 같은 다크모드 on/off 를 하는 버튼이 있을때 이를

『backgroundcolor 를 'black' 으로, color 를 "white' 로, 모든'a'를 as로 치환. as의 color를 'white' 로 』를 night() 로 묶어내고

『backgroundcolor 를 'white' 로, color 를 "black' 으로, 모든'a'를 as로 치환. as의 color를 'black' 으로 』를 day() 로 묶어냈을때

버튼의 코드가 위와같이 보기쉽게 정리가 된다.

또한 위와 같이 함수를 만들었을시에 val1과 val2의 값을 입력했을때
sum(100,200)*10 은 출력은 되지않는다.
왜냐하면 이는 val1+val2 를 실행하기만 하는 함수이기 때문에
이를 출력하는 코드가 필요하기때문에

alert(sum(100,200)*10));

을 실행하면 3000 이 화면에 출력이 된다.

이를 활용하면 이전에 사용하였던

정해진 값이 입력된 상태에서만 나오던
이 코드를 더 다양하게 활용을 할수있게 되는데.

이와같이 부가세계산을 함수로 만들게 되면
부가세계산(가격,부가세율) 에서 가격과 부가세율을 입력하는 값에 따라서 결과가 다르게 나타난다.

하지만 이 함수 또한 실행을 하기만 하고 출력을 하지않기때문에
제일 아래의
console.log(부가세계산(2000,0.2)) 코드를 실행하게되면
1000 이라는 값이 나오게된다.

2)객체지향 object

객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인것이다.

이전의 array 와 다른점을 말하자면.
array는 비슷한 종류끼리 묶어내서 그 그룹의 이름을 지정한것이다.
하지만 객체지향은 그룹내에서 각자에 이름을 지정하는것으로
array는 대괄호[] 로 묶어내고
object는 중괄호{} 로 묶어낸다.

사진과 같이 member의 그룹안에 각자 developer , designer 를 지정하는것으로
member.developer 는 member만을 의미하는게 아닌 member 안의 developer 인 egoing 을 말하는것이고
member.designer 는 마찬가지로 member안의 designer 인 duru를 의미하게 된다.

2. 학습내용 중 어려웠던 점

오늘의 학습도중에 어려웠던것은
처음의 function 을 배우는 부분에서 어려움이 있었는데.
그 중 하나는 당황을 많이 했던것인데 function이 작동하지 않았던 점이고
두번째로는 function을 사용하였을때 작동을 하지않았던 점이다.

3. 해결방법

그 중 첫번째는 내가 당황을 하여 실수를 한것이었는데, script 내부에 써야하는것인데 style 을 쓰고 되지않는다고 당황을 하여 문제가 되었던 점이다. 이를 통해서 마음이 급해지면 시야가 좁아진다는것을 실감하였고, 사소한것이지만 좋은 경험이 되었다.

그리고 두번째인 function 의 경우에는 night() 와 day() 함수를 만들어낼때 작동을하지 않았던 것인데.
그 이유로는 처음에는 기존의 버튼에 있던 명령어를 그대로 전부 옮겼었을때 작동이 하지않았다.
왜 그러한가 했을때

처음 function 을 사용하지않은 버튼의 내용의 경우
as= document.querySelectAll('a') 의 경우에는
한번만 내부에 적었더라도 if문장과 else문장 두곳 모두에 적용이 되었는데 옮기는 과정에서 night 와 day 둘 모두 as 를 사용하지만 night()에는 as의 설정이 되어있는데 day()에는 as가 설정이 되어있지 않아서 오류가 난것이었다.

또한 button.value = "day mode"
button.value = "night mode"
의 경우에도
button 을 지정하는것은 button 을 넣은 해당 문장에서 있는것이기 때문에
이것이 night(), day() 함수로 빠지게되면 대상이 사라져버려서
오류가나게 되어서 이를 다시 버튼쪽으로 빼게되었다.

4. 학습소감

오늘은 JavaScript 수업의 3분할중 3번째를 듣게되었다.
아직 깊숙하게 배우지는 못하고 겉핥기로만 배우게 되었지만 몰랐던 지식을 많이 알게되어서 기뻤다.

내가 실행이 되지않는 이유라고 생각했던것이 사실 내가 아직 모르는 다른 방법으로는 실행을 시킬수있는 방법이 있을수도 있다고 생각하며, 이를 알아내는것은 나 자신이 개인적으로 찾아봐야할 과제일것이다.