1. 'Hello' : 문자(String) 데이터
2. 123: 숫자(number) 데이터
3. true / false : 불린(boolean) 데이터
4. null : Null데이터
5. {} {키1: 값1, 키2 : 값2} : 객체(Object) 데이터, Key: value 형태로 데이터 저장
ex) const user = {
name: 'java',
age: 85
}
console.log(user.name)
console.log(user[name])
점 표기법 혹은 대괄호 표기법으로 데이터를 사용
6. [] [값1, 값2, 값3] : 배열(Array) 데이터, 데이터를 나열해서 저장
ex) const fruits = ['apple', 'banana']
console.log(fruits[0])
console.log(fruits[1])
대괄호 표기법으로 데이터를 사용
7. const 변수 = 데이터 : 변수에 새로운 데이터를 다시 할당 x
8. let 변수 = 데이터 : 변수에 새로운 데이터를 다시 할당 o
9. function 함수이름(){
//명령들...
}
함수이름()
: js 명령을 묶어 반복 사용할 때
10. function 함수이름(변수){
//명령들...
}
함수이름(데이터)
: 인수(데이터)와 매개변수(변수) 사용
11. function 함수이름(변수){
if(조건) {return}
//명령들...
}
함수이름(데이터)
: 함수를 종료
12. const els = document.querySelectorAll('css선택자')
const el = document.querySelector('css선택자')
: html 요소를 찾아 변수에 저장
13. const el = document.querySelector('css선택자')
el.style.backgroundColor = 'red';
: html 요소에 css 지정 (css속성은 낙타 표기법으로 작성)
14. const el = document.querySelector('css선택자')
el.innerHTML = '<span>Hello</span>'
: html 요소의 내용으로 문자를 추가(문자는 html 코드로 해석)
15. const el = document.querySelector('css선택자')
el.addEventListener('click',function(){
console.log('클릭했어요!')
})
: html 요소를 클릭하면 함수를 실행
16. const els = document.querySelectorAll('css선택자')
els.forEach(function(el, index){
console.log(index, el)
})
: 찾은 html 요소의 개수만큼 함수를 실행