Javascript

브라우저 콘솔

자바스크립트를 실행하는데 가장 훌륭한 도구는 웹 브라우져 입니다. 브라우저를 열어 오른쪽 버튼을 눌러 '검사'를 누르면 개발자 도구가 열립니다.

이 개발자 도구의 Console 탭으로 이동합니다. 이곳이 Javascript 코드를 입력할 수 있는 곳입니다.

기본 문법

프로그래밍 언어는 '값'과 '값을 변경하는것' 두가지로 이루어져 있습니다.

숫자

1
3.14
-5

1 + 1
5 * 10
1 < 2

Javascript에서는 위와 같은 식도 값으로 처리 합니다.

글자

`이것도 문자열`
'이것도 문자열'
"이것도 문자열"

위의 세가지 모두 문자열을 표현하는 방법입니다. 세 문자열은 완전히 동일한 값입니다.

` 쌍은 가장 최근에 만들어진 문자열 문법으로 여러줄의 문자열을 지원하거나 변수의 값을 넣을 수 있는 등 추가적인 기능이 있습니다.

'이건 줄내림을 지원하지 않아
잘못된 문법이지만'

`이건 줄내림을 지원해서
사용 가능합니다.`

참/거짓

true
false

자료 구조

구조화된 값 - Object

const book = {
    title: 'JavaScript: The Good Parts',
    author: 'Douglas Crockford',
    pages: 174
}

book.title
> 'JavaScript: The Good Parts'

좀 더 체계적으로 값을 저장하는 방법도 있습니다. object.을 이용해 하위 속성을 접근할 수 있습니다.

목록 - Array

const strings = ['C', 'G', 'D', 'A']
strings[0]
> 'C'
strings[1]
> 'G'

Object의 Array를 만들수도 있습니다.

const attends = [{
    name: 'Alice',
    email: 'alice@...'
}, {
    name: 'Bob',
    email: 'bob@...'
}]

변수, 상수

값들에는 이름을 지어줄 수 있습니다. 이런 값이 지정되어있는 이름을 변수라고 합니다.

const unitPrice = 1100
const unitAmount = 10

const totalPrice = unitPrice * unitAmount

const는 변하지 않는 상수를, let은 변하는 변수를 정의하는데 사용합니다.

let expense = 100
expense = 200  // 이건 문제가 없습니다.

const income = 150
income = 250  // 이건 오류가 발생합니다.

값이 변하는 변수는 의도치 않은 동작을 만들 가능성이 상대적으로 높습니다. 가급적 값이 변경되지 않는 상수를 사용하는것이 좋습니다.

함수 (기능)

호출

alert()

함수에 값 넣기

alert('안녕')

정의

const bark = () => {
    alert('멍멍')
}

입력 받기

const hello = (name) => {
    alert(`Hello, ` + name)
}

alertName('이지은')

함수 정의 구문의 괄호 안에 이름을 넣으면 함수 바깥에서 부터 값을 가져와 함수 안에서 사용할 수 있습니다.

반환

const double = (number) => {
    return number * 2
}

double(4)

return 문을 사용하면 함수 안에 있는 값을 함수 외부로 가져갈 수 있습니다.

DOM

Javascript를 이용해 현재 페이지의 내용을 변경할 수 있습니다.

document.querySelector('#text').textContent = '다른 내용'

이렇게 Javascript로 내용을 바꾼다면 매번 새로운 HTML 보낼 필요가 없습니다.

웹사이트의 카로우셀 등이 이런 방식으로 동작합니다.