HTML은 웹 문서의 구조를 만드는 마크업 언어, CSS는 웹 문서를 디자인하는 스타일시트 언어이다.
HTML과 CSS만 가지고도 정적인 페이지는 만들 수 있다. CSS를 잘 다룬다면 어느정도 예쁜 웹 문서도 만들 수 있다. 하지만 과거와는 달리, 현대의 웹 사이트는 정적이지 않다. 유저와 끊임 없이 상호작용하여 동적으로 작동한다. 이처럼 웹 페이지가 유저와 상호작용 할 수 있도록 하는 대표적인 프로그래밍 언어가 바로 JavaScript이다.
JavaScript라는 프로그래밍 언어에 적응하려면 변수와 함수라는 중요한 개념을 먼저 이해해야 한다.
변수
변수는 모든 프로그래밍 언어를 학습할 때 가장 기본인 동시에 가장 중요한 개념이다.
변수는 컴퓨터와 개발자 사이에 새롭게 규정한 명사이다.
예를 들어, 사람들에게 '아래 그림은 어떤 과일인가요?'라고 질문한다면 사람들은 사과라고 답할 것이다.
출처: https://m.khan.co.kr/national/national-general/article/202309271907035#c2b
하지만 컴퓨터는 이 과일을 알아볼 수 없다. 컴퓨터와 개발자 사이에 이 과일을 '사과'라고 부르겠다는 약속이 필요하다.
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이다.
JavaScript
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에 값을 출력하는 코드
실습
JavaScript
// 구구단 2단 출력
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18변수를 이용하여 좌항에 있는 숫자 2를 전부 3으로 바꾸는 방법은?
함수를 호출할 때 전달한 값에 따라 그 숫자에 해당하는 구구단을 출력하는 gugudan 함수를 구현. (별도의 return문을 작성하지 않는다.)
function gugudan() {
// 전달인자를 할당할 변수(매개변수)가 필요합니다.
// 여기에 코드를 작성하세요.
console.log();
// () 안에 함수 내부로 전달할 값(전달인자)을 넣고 코드를 실행하세요.
gugudan();
