JavaScript-이론
HTML은 웹 문서의 구조를 만드는 마크업 언어, CSS는 웹 문서를 디자인하는 스타일시트 언어라는 것을 학습했습니다. HTML과 CSS만 가지고도 정적인 페이지는 얼마든지 만들 수 있습니다. CSS를 잘 다룬다면 어느 정도 예쁜 웹 문서도 만들 수 있습니다.
하지만 과거와는 달리, 현대의 웹 사이트는 정적이지 않습니다. 유저와 끊임 없이 상호작용하며 동적으로 작동합니다. 이처럼 웹 페이지가 유저와 상호작용할 수 있도록 하는 대표적인 프로그래밍 언어가 바로 JavaScript입니다. HTML과 CSS와는 달리, JavaScript는 개념을 이해해야 합니다.
JavaScript라는 프로그래밍 언어에 적응할 수 있도록 딱 두 가지 중요한 개념만 먼저 보겠습니다. 바로 변수와 함수입니다.
변수
변수는 모든 프로그래밍 언어를 학습할 때 가장 기본인 동시에 가장 중요한 개념입니다. 변수에 대해서 제대로 이해하지 못하면, 앞으로 학습할 내용을 이해하는 것은 거의 불가능하다고 할 수 있습니다. 변수는 컴퓨터와 개발자 사이에 새롭게 규정한 명사입니다.
만약 사과 그림을 보여주고 이 과일은 무엇인지 물어본다면 컴퓨터는 이 과일을 알아볼 수 없습니다. 컴퓨터와 개발자 사이에 이 과일을 ‘사과’라고 부르겠다는 약속이 필요합니다.
let apple = '사과';이 코드를 보다 정확히 설명하자면,개발자가 컴퓨터에게 새로운 변수 apple을 규정하고(변수 선언), 문자열 ‘사과’라는 값을 설명(값 할당)한 것과 같습니다. 변수를 선언할 때는 let 키워드를 사용합니다. 값을 할당할 때는 할당 연산자(=)를 사용합니다. 할당연산자는 수학 문제를 풀 때처럼 ‘같다’라는 의미가 아니라 변수에 값을 할당할 때 쓰는 연산자라는 것을 반드시 기억하세요.
함수
변수가 개발자와 컴퓨터 사이에 명사를 규정하는 작업이라면, 함수는 동사를 규정하는 작업입니다. countLength라는 함수를 만들어서 문자열의 글자수를 세는 함수를 만들면 아래와 같습니다.
function countLength (string) {
return string.length;
}countLength라는 함수를 만들었습니다. 이 코드는 개발자와 컴퓨터가 countLength라는 동사를 약속한 것과 같습니다.각 요소를 하나씩 설명해 보겠습니다.
function키워드: 함수를 선언하는 키워드입니다.countLength: 개발자와 컴퓨터가 약속한 함수의 이름입니다.(string): 함수에서 사용할 변수, 외부에서 값을 전달하면 string에 값이 할당되어 함수 내부에서 사용됩니다.return키워드: 함수 내부의 코드가 실행된 후 결과를 반환(return)하는 키워드입니다. 함수 내부에서 반환한 키워드를 함수 외부에서 사용할 수 있습니다.string.length: 외부에서 전달받은 문자열의 길이를 의미합니다.
다시 말해 countLength는 특정한 문자열을 입력하면, 그 문자열의 길이를 외부로 반환해주는 함수입니다. 예를 들어 ‘사과’를 전달하면 2, ‘바나나’를 전달하면 3이 반환됩니다. 그렇다면 외부에서 함수 내부로 전달하려면 어떻게 해야할까요?
// 함수의 호출
countLength('사과');이렇게 함수명 뒤에 ()를 붙이면 함수를 호출할 수 있습니다. 이때 ()안에 값을 넣으면 이 값이 함수 안에서 매개변수 string에 할당됩니다. 즉 위와 같이 호출하면, countLength 함수 내부에서 string이 ‘사과’가 되어 함수 내부의 코드가 한 번 실행됩니다. 이 함수는 입력된 문자열의 길이를 반환하는 함수이므로, 반환되는 값은 2입니다.
function countLength (string) {
return string.length;
}
// countLength 함수에 '사과'를 전달하고 반환된 값을 appleCount 변수에 할당
let appleCount = countLength('사과');
console.log(appleCount); // 2
// countLength 함수에 '바나나'를 전달하고 반환된 값을 bananaCount 변수에 할당
let bananaCount = countLength('바나나');
console.log(bananaCount); // 3
console.log(appleCount + bananaCount); // 5함수의 반환값은 변수에 할당해서 사용할 수 있습니다. appleCount 변수에는 숫자 2, bananaCount 변수에는 숫자 3이 할당되어 있으므로, 두 값을 더하면 5가 됩니다.
*console.log()는 console에 값을 출력하는 코드
실습 1. 구구단 출력하기
실습 2. 함수를 사용하여 구구단 출력하기
