javascript 기초

▶ 요소 선택하기

document.querySelector();

 

▶ 변수 만드는 방법

const 변수명 = document.querySelector();

 

- const: 절대 변하지 않는 값일 때

- let: 값이 변하는 변수일 때

 

 

▶ for 반복문

for(let item of items){

        반복실행할 구문

    }

for(let "반복하는 요소가 담길 변수") of "반복시킬 그룹"{

        반복실행할 구문

    }

 

for(let i=0; i<items.length; i++){

        반복실행할 구문

    }

for(let "반복하는 순서가 담길 변수"; 반복할 횟수의 최대값; 증감연산자){

        반복실행할 구문

    }

    

변수 items : li그룹

let i=0 : 반복을 위한 초기순서값

i<items.length : items변수에 담긴 그룹 요소의 갯수를 자동으로 계산하여 해당 개수보다 작을경우 반복

i++ : 1씩 증가

 

 

 

▶ 반복되는 요소에 이벤트 설정하기

 - for문을 이용해 list 안에 들어있는 li들을 한개씩 불러와 이벤트를 설정할 수 있다

const list = document.querySelectorAll('.list li');
console.log(list);

for (let el of list){
    el.addEventListener('click', (e)=>{
        e.preventDefault();
        console.log(e.currentTarget.innerText);
        // e.currentTarget.innerText = 'Click';
    });
}

// e.currentTarget : 클릭한 요소
// 선택자.innertext : 선택한 요소의 텍스트 탐색
// 선택자.innerText = '변경할 텍스트'; : 선택한 요소의 텍스트 변경

 

▶ 부모요소 선택하기 - 직계부모 탐색

요소.parentElement

 

▶ 제일 가까운 상위 부모 요소 선택하기

요소.closest()

 

▶ 형제요소 선택하기

요소.previousElementSibling

요소.nextElementSibling

 

▶ 자식요소 선택하기

요소.children

 

▶ 클릭이벤트 지정하기

요소명.addEventListener("이벤트", (전달될 값)=>{

    실행될 구문

});

 

- 자주 쓰이는 이벤트 종류 : 'click', 'mouseenter', 'mouseleave'

 

 

▶ 문자 안에 변수 삽입하기

`문자.. ${변수명} 문자..`

백틱(``)으로 텍스트를 감싸고 변수부분은 ${변수}로 감싸준다.

 

 

▶ 조건문

if(조건문){

    조건문이 참이라면 실행할 구문

} else{

    조건문이 거짓이라면 실행할 구문

}

 

▶ 클래스 제어하기

요소.classList.add('클래스명');

요소.classList.remove('클래스명');

요소.classList.toggle('클래스명');

 

 

▶ 함수 : 자주 실행하는 코드를 function 키워드와 임의의 이름을 붙여져 정의한 코드의 묶음

 

// 함수정의

function 함수명(매개변수1, 매개변수2){

    console.log(전달받은값1, 전달받은값2)

}

 

// 함수호출

함수명(인수값1, 인수값2);

 

매개변수는 함수 외부에서 내부로 값을 전달하는 통로

해당 매개변수를 통해 실제 전달되는 값을 인수라고 함

 

함수호출시 입력된 인수값이 매개변수를 통해 함수 내부로 전달됨

 

 

▶ 부모요소.innerHTML ="생성할 태그";

      - 부모요소에 문자열로 작성한 태그를 동적으로 생성

      - 기존 부모요소 안쪽의 내용을 지우면서 새로 생성

 

▶ 마우스커서의 위치값 구하기

    e.pageX : 마우스 커서의 가로축 위치

    e.pageY : 마우스 커서의 세로축 위치

 

▶ 백분율 구하는 공식  (현재 수치값 / 전체 수치값 * 100)

 

            정수 : 소수점 이하가 없는 수

            실수 : 소수점 이하가 있는 수

 

            parsInt(변환할 수);

                : 실수를 정수로 변환