[JavaScript] 기본 구조, 문법 정리

'Hello world!'

문자(String) 데이터

 

123

숫자(Number) 데이터

 

true / false

불린(Boolean) 데이터

 

null

Null 데이터

 

{ }
{ 키1: 값1, 키2: 값2 }

객체(Object) 데이터

Key: Value 형태로 데이터 저장

 

const user = {
    name: 'Heropy',
    age: 85
}
console.log(user.name)
console.log(user['name'])

점 표기법 혹은 대괄호 표기법으로 데이터를 사용

 

[ ]
[값1, 값2, 값3]

배열(Array) 데이터

데이터를 나열해서 저장

 

const fruits = ['Apple', 'Banana']
console.log(fruits[0])
console.log(fruits[1])

대괄호 표기법으로 데이터를 사용

 

const 변수 = 데이터

변수에 데이터를 할당

새로운 데이터를 다시 할당하는 것이 불가하다.

 

let 변수 = 데이터

변수에 데이터를 할당

새로운 데이터를 다시 할당하는 것이 가능하다.

 

function 함수이름() {
    // 명령들..
}

함수이름()

JS 명령을 묶어 반복 사용할 때

 

function 함수이름(변수) {
    // 명령들..
}

함수이름(데이터)

인수(데이터)와 매개변수(변수) 사용

 

function 함수이름(변수) {
    if (조건) { return }
    // 명령들..
}

함수이름(데이터)

조건의 상황이면 return 키워드를 사용해 함수를 종료할 수 있다

 

const els = document.querySelectorAll('CSS선택자')
const el = document.querySelector('CSS선택자')

HTML 요소를 찾아 변수에 저장

 

const el = document.querySelector('CSS선택자')
el.style.backgroundColor = 'red'
// el.style.CSS속성 = '값'

HTML 요소에 CSS 지정 (CSS 속성은 낙타 표기법(backgroundColor 처럼 단어의 처음을 대문자로 표기)으로 작성)

 

const el = document.querySelector('CSS선택자')
el.innerHTML = '<span>Hello~</span>'
// el.innerHTML = 'HTML 코드'

HTML 요소의 내용으로 문자를 추가(문자는 HTML 코드로 해석)

 

const el = document.querySelector('CSS선택자')
el.addEventListener('click', function () { // 이름 없는 function을 사용했다. --> 익명함수
    console.log('클릭했어요!')
})
// el.addEventListener('click', 함수)

HTML 요소를 'click' 하면 함수를 실행

 

const els = document.querySelectorAll('CSS선택자')
els.forEach(function (el, index) { // el --> 요소 각각 , index --> el의 순서(숫자)
    console.log(index, el)
})
// els.forEach(함수)

찾은 HTML 요소의 개수만큼 함수를 실행