![생활코딩 14일차 [21.01.29]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbN7gmg%2FbtqVbusclk0%2FAAAAAAAAAAAAAAAAAAAAAAyx2p9Fk9J2dXKV3bZVp8r4zq7zZUpj6G_ZO95_xyQE%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3DEoz2EwjT4j0e61E%252BCFmOX3qaZ8g%253D)
<함수의 활용>
우리가 만들어온 웹 페이지로 돌아와서, night day 버튼을 함수를 이용해서 만들어보자.
(*나는 JS의 <script> 태그를 <body>문에서만 쓰는 줄 알았는데, <head>문에서도 사용 가능)
앞에서 배운 function 문법을 통해 <head> 문에서 함수를 작성해주자.
이렇게 하고 웹 페이지에서 버튼이 잘 작동되나 확인해보자.
night 모드임에도 button의 value 값은 여전히 night이다. 문제가 무엇일까?
함수를 소환(?)하는 과정에서 매개변수와 인자를 지정해주지 않았기에 위의 함수가 그대로 호출되었고, 위에서 적힌 함수 코드에서 this는 자기 자신을 가리키는 것이 아니다. 다른 것을 가리킨다고 했다.(현재 과정에서는 무엇인지 몰라도 된다고 함)
그렇기에 매개변수와 인자를 설정해 본문에서 자기 자신을 소환해보자.
함수를 설정할 때, self 라는 매개변수를 설정해주었다. (다른 문자로 매개변수를 설정해도 무관)
그리고 input 구문에서 input을 의미하는 this를 인자로 설정하여 위의 오류를 없앴다.
<객체 예고>
객체 : 함수나 코드를 정리할 때 유용한 도구. 일종의 폴더(?)라고 생각하면 편함. 예를 들어 컴퓨터의 로컬 디스크 폴더에서 파일마다 구별성을 주기 위해서 각 파일의 이름을 엄청나게 길게 작성해야 할 것이다. 하지만 폴더가 있다면 (객체를 이용한다면) 분류하기가 훨씬 용이하다.
document.querySelector() : 이것도 객체였다. 그리고 객체를 이용한 함수였다. 객체를 이용한 함수는 함수라 부루지 않고, 메쏘드라 한다.
자, 우리 웹 페이지의 코드를 보자.
하이라이트 표시된 코드 한 줄은 body의 글자 색상을 white로 한다는 의미의 코드 한 줄이다. 한 줄이어도 이를 더 보기 쉽게 나타내려면
함수를 이용하면 된다.
이렇게 설정하면 한 눈에 파악하기 용이하다. backgroundColor도 마찬가지로 함수를 설정하여 수정해보자.
이런 식으로 함수를 여러 개 사용하여 한 눈에 알아보기 쉽게 코드를 짤 수 있다.
우리는 또 개발자 입장에서 가정을 해보자. 만약 저런 함수가 1억 개가 있다면 우리는 함수의 이름을 짓는 데에 적잖게 골머리를 썩을 것이다.
이렇게 복잡한 이름들을 정리하기 쉽게 하는 것이 '객체'이다. (아주 중요한 개념이다.)
객체의 이론적 개념을 알아보기 전 어떠한 형식으로 나타내어 있는지 보자.
이러한 형식으로 body. 객체가 표현된다.
<객체>
Array(배열) : 연관된 정보를 순서대로 정리하기 위한 개념
Object(객체) : 연관된 정보를 순서 없이 정리하기 위한 개념 (이름이 있는 정리정돈 상자)
- Basic (문법)
① Object (객체) 설정하기
객체를 설정할 때는 객체의 이름과 중괄호{ } 를 이용한다.
객체를 소환할 때는 객체이름.key값 을 이용한다.
② Object (객체) 추가하기
객체를 추가할 때는 객체이름.key값 = "항목 이름" ; 이다.
data scientist 를 추가할 때는 왜 대괄호를 쓸까? 중간에 띄어쓰기가 있는 단어는 대괄호와 따옴표를 이용해 띄어쓰기를 살려준다. 그리고 대괄호를 이용했기 때문에, 객체이름.정렬이름 이 아니라 객체이름["key값"] 을 사용한다.
- Iterate (객체에서 반복해서 꺼내기)
꺼내는 방법 : for ( var key in 객체 ) { 실행하고자 하는 코드 }
key값 출력하기 : ( key )
항목 출력하기 : ( 객체[key] )
- Property (key값, value ..) & Method (함수)
Property : key값이나 value값 등을 말한다.
Method : 객체에서 쓰는 함수를 Method라고 한다.
Method의 문법 :
coworkers.함수이름 = function (){
구현하고 싶은 코드
}
coworkers.함수이름();
존나 어렵다. 복습이 시급하다.
<객체의 활용>
객체를 활용해서 함수를 정리하고, 이를 토대로 우리의 웹 페이지 코드를 정리해보자.
'Web > java script' 카테고리의 다른 글
| 생활코딩 16일차 [21.02.01] - JavaScript 마무리 (0) | 2021.02.01 |
|---|---|
| 생활코딩 15일차 [21.01.30] (0) | 2021.02.01 |
| 생활코딩 13일차 [21.01.28] (0) | 2021.01.28 |
| 생활코딩 12일차 [21.01.27] (0) | 2021.01.27 |
| 생활코딩 11일차 [21.01.26] (0) | 2021.01.26 |