2021-07-10 Part(1)_ch(9) JS선행

[JS구문종류]
dash-case 하이푼사용
snake_case 언더바사용
camelCase 첫단어는소문자후 단어첫단어는대문자로
PascalCase 모든단어 첫글자는 대문자로

String 문자 "abc"
Number 숫자 123
Boolean 불린데이터 true, false

 

[함수선언 VS 함수표현]
기명함수/함수선언!
function hello( ) {console.log("a")}

익명함수/함수표현!
let world=function( ) {console.log("a")}

getName:function() {return this.name}
this란 자기가포함한 데이터들{ }사이에서 .name를 찾는다.

 

[DOM API]

요소1개찾기
변수 = document.querySelector('.box')

요소모두찾기
변수 = document.querySelectorAll('.box')

찾은 여러요소들에 반복적으로 함수 실행
변수.forEach(function(반복매개변수, index) { 함수내용 })

index생략가능
반복매개변수에는 앞 변수의 여러요소를 하나하나 나눈거 하나씩을 넣고 index는 0부터 순서대로 번호가 써진다.

핸들러-특정동작감지시 특정동작하기
변수.addEventListner(1,2)
청취하고있다가
1번 동작시 예를들면 "click"같은 마우스 좌 클릭
2번 익명함수 등 인수 실행 예를들면 function( ) {boxel.classList.add("active")} // active클래스를 boxel에 넣음

특정변수에 클래스 추가하기
변수.classList.add("active")

특정변수에서 클래스 삭제하기
변수.classList.remove("active")

특정클래스가 있나 없나 boolean으로 저장하기
let 변수=boxEl.classList.contains('active')
contains를 써서 있나 없나 확인하며 let으로 선언한 변수에는 True 또는 False 저장

text만 출력하기
.textContent 이며 이것은 값을 지정도 할수 있다.

 

메소드 체이닝(문자)
a.split('값')
'값'을 기준으로 앞뒤로 나누어 배열로 만듬
값을 안넣을시 a 문자 하나하나 배열로만듬

a.reverse()
a 값을 거꾸로 만듬

a.join('값')
배열된 a 값들에 '값'을 사이 사이넣어 하나의 문자로 합침