JS

낙타표기법(camelCase) 사용 (변수 생성시 구분을 위함)

ex) helloWorld, parkYoungWoong

 

JS 데이터 종류

문자 데이터: const stringData='Hello world'
숫자 데이터: const numberData=1234
불린 데이터: const booleanData=true/false
Null 데이터: let numberData=123, numberData=null
객체 데이터: const objecData={ key: ~~, name:~~~, age:~~~}  console.log(objectData.name)
배열 데이터: const arrayData=[9,8,7,6]  console.log(arrayData[0])

 

JS 변수와 예약어

const 변수: 값을 다시 할당할 수 없는 변수
let 변수: 값을 다시 할당할 수 있는 변수
예약어: 특별한 의미를 가지고 있어서 변수나 함수의 이름으로 사용할 수 없는 단어
ex) let, const, function, if, new, import

 

JS 함수

function: JS 명령을 묶어 반복 사용할 때, 인수와 매개변수 사용
function hello(name){
     const message='hello '+name+'!'
     console.log(message)
     return //함수 종료
}
hello('yoonpyo') // 'hello yoonpyo!'

DOM 기초

HTML 요소를 찾아 변수에 저장
const els=document.querySelectorAll('CSS 선택자')
const el=document.querySelector('CSS선택자')

el.style.backgroundColor='red //HTML 요소에 css 지정

btnEladdEventListner ->이벤트를 등록하는 가장 권장되는 방식
ex) btnEl.addEventListner('click', function(){  })

el.innerHTML='클릭했어요!' -> HTML 요소의 내용으로 문자를 추가

els.forEach(function (el, index) { } ) -> 찾은 HTML 요소의 개수만큼 함수를 실행