함수

자바 스크립트에서 함수란?
간단히 말해서 값을 계산하거나 작업을 수행하게 하는 코드들의 집합이다.

함수는 함수명과 매개변수, 중괄호 안의 작업을 실행할 코드로 구성되어 있다.
위에서 살펴보면, 함수명은 myFunction이고 p1, p2로 매개변수를 받고 있다. 중괄호 안의 코드는 함수의 매개변수를 받아 코드를 실행하고, return을 이용하여 결과값을 반환한다.

매개변수에 각각 4와 3을 대입한 후, 함수를 실행시키면 결과값이 myFunction에 반환되어 페이지에 12가 뜬다.

document.getElementById("ID명").innerHTML 은 자바 스크립트 코드를 html 문서 안에 삽입하게 하는 메소드이다.

참고로, 매개변수는 없어도 된다.
함수를 ()없이 부를 경우, 위에서처럼 함수 결과값이 아닌, 함수 객체값이 출력된다.
아래 예시를 보자.

함수명만 입력했더니, 함수의 객체값이 그대로 출력된 것을 확인할 수 있다.
함수의 반환값을 변수에 저장해서, 다른 변수에 쓰거나

아니면 함수의 매개변수에 값을 대입해서 사용할 수도 있다.

지역변수

함수 안에서 선언되는 변수를 지역변수라고 한다. 지역 변수들은 오로지 함수 안에서만 사용할 수 있다.

보다시피, 함수 안에서 선언된 지역 변수는 다른 함수에서 사용할 수 없다.
(undefined = 값이 아예 할당되어 있지 않음)

객체

간단히 말해 변수와 함수의 집합체이다. 차(the car)를 예시로 비유해 보자. 차는 객체이다. 차의 구성요소(무게, 색깔 등등...)는 변수이다. 차의 기능(멈추기, 달리기...etc)은 메소드이다.
객체는 주로 const로 선언된다.

객체는 객체명과 중괄호 안의 코드로 구성된다. 중괄호 안의 코드는 name:value 형식으로 적혀져 있고, 콤마로 각 name:value 쌍이 구분되어 있다.

객체의 name을 통해 그에 대응되는 value 값을 불러올 수 있다.
이런 식으로

const car = {weight:500, color:"White"};
document.getElementById("ID명").innerHTML = car.weight;

또는, 아래와 같이도 접근할 수 있다.

car["weight"]

메소드는 객체의 중괄호 안에 위에서 설명한 함수의 형식으로 쓰인다. 다른 점은 function을 먼저 선언하는 게 아닌, 메소드명을 먼저 선언하고, name:value 형식처럼 콜론을 붙인 뒤에 function()을 사용했다. ()안에는 매개변수가 들어올 수 있다.

객체의 name:value 값을 사용할 수 있다.
객체의 메소드는 외부에서 객체.메소드명을 통해 불러내서 코드를 실행시킬 수 있다.

만약 메소드명에 ()를 쓰지 않는다면, 앞에서 설명한 바와 같이 메소드의 결과값이 아닌, 메소드의 코드가 출력된다.

this

this에 대해서 잠시 공부하고 넘어가도록 하겠다(ㅈㄴ 중요하기에)
this는 객체를 지칭한다.
this는 어디에서 쓰이는 지에 따라 무엇을 지칭하는 건지 달라지는데, 객체의 메소드에서는 메소드가 위치한 객체를 가리킨다.

위의 사진에서 this는 메소드를 포함하고 있는 객체 boy를 가리키고 있다.
this에 대해서는 나중에 더욱 자세히 다뤄볼 예정이니 지금은 그냥 건너가기로 하겠다.

이벤트

어떠한 동작이 발생할 때, 이에 대한 결과값을 자바 스크립트 코드로 작성해서 특정 동작이 발생할 때마다 코드가 실행되는 것을 뜻한다.
예를 들어보자.

onclick이라는 이벤트(버튼이 클릭됨)가 발생하면, 자바스크립트의 코드가 실행되어 결과값이 출력된다.

this를 이용해서 쓸 수도 있다. (여기서 this는 현재 자바스크립트 코드가 위치한 html문서를 뜻할 것이다.)

그냥 가져오려는 메소드명만 입력해서 사용할 수도 있다.
이벤트에 대해 자세히 알기 위해서는 html에 대한 이해가 어느 정도 필요하므로, 일단 여기까지 하고 나중에 html에 대해 배울때 자세히 올리도록 하겠다.