JS 정리 1

정리

각 표기법

html, css에서 주로 사용

dash-case(kebab-case)
snake_case

js에서 주로 사용

camelCase
ParcelCase

데이터

string

let myName = "myeongyun"; - "" 사용
let email = 'qk1890@naver.com'; - ''사용
let hello = hello ${myName}?; - ${}사용

number

let number = 123;
let opacity = 1.57;

boolean

let checked = true;
let isShow = false;

undefined

let undef; - 할당되지 않은 상태

null

let empty = null;

object

중괄호 저장
let user = { name: 'mangyun', age: 85 }; - 여러 데이터를 key: value 형태로 저장
console.log(user.name);

array

대괄호 저장
let fruits = ['apple', 'banana', 'cherry']; - 배열

변수

let - 재사용가능
let a = 12
a = 999
console.log(a)

const - 재사용안됨

함수

function helloFunc sum(a, b) {
  return a+b
}

익명함수

let world = function() {
  console.log('world')
}
world()

const my = {
  name: 'mangyun',
  age: 25,
  getName: function () {
    return this.name
  }
}
const myName = my.getName
console.log(myName)

DOM

document object model(요소)를 제어하는 명령들

defer - body까지 거쳤다가 다시 실행

<script defer src="./main.js"></script>

querySelector

const boxEl = document.querySelector('.box')//html 요소 가져오기

EventListener

boxEl.addEventListener('click', function () {//인수 '이벤트', 핸들러함수로 넣어서 사용
  console.log('click~!')
})

textContent

console.log(boxEl.textContent) // 해당 내용 추출

class

• 추가
  boxEl.classList.add('active')
• 유무파악
  boxEl.classList.contains('active')
• 제거
  boxEl.classList.remove('active')

querySelectorAll

const boxEls = document.querySelector('.box')//html 요소 전부 가져오기
boxEls.forEach(function (boxEl) {
    boxEl.classList.add('hello')
})