[Web] Javascript 기초

jquery와 javascript의 차이점 : 선택자의 차이점이 크다

◻️ const

상수 - 재할당 불가능한 변수 (고유한 변수)
최종값을 셋팅할때 사용하며, 대부분의 변수들은 const로 사용한다.

const maxlevel = 99;

maxlevel을 99로 설정해놔서 나중에 다른 값으로 변경해줘도 콘솔에서 변화되지 않는다

◻️ let

재할당 가능한 변수

let curr = 1;
curr = 10;

curr을 1로 할당 후, 10으로 재할당했다

◻️ 단일 선택자

div class=name이 있을때,해당하는 태그에 속성 설정
(각각 다른 선택자에 동일한 설정을 지정할 때도 사용한다)

const name = document.querySelector('.name'); 
name.style.color = '#f00

변수명을 name으로 하여, name태그를 넣어주고
name의 style color을 빨간색으로 지정

querySelector

• CSS선택자로 요소를 선택할 때 사용한다.
  id, name, class, html태그 등 다양한 요소를 선택할 수 있다
• 단, '.name'에 해당하는 첫번째 요소만 선택한다.
  또한, 이름이 같을 경우 최상단의 요소만 선택한다

◻️ 복수 선택자 forEach

div class=name이 2개 이상 있을 때 속성 설정
querySelector은 첫번째 요소만 선택하기 때문에, foreach를 사용해야 한다.

const nameList = document.querySelectorAll('.name'); 
nameList.forEach(el => { 
    el.style.color = '#f00'
});

nameList라는 변수 지정 후, for each를 사용해서 각각의 선택자를 선택하여 적용해준다
el=element

querySelectorAll

• 사용방법은 querySelector()와 동일하게 사용 된다
• HTML요소가 아닌 nodeList형태로 값을 반환하기 때문에, 사용하려면 반복문을 이용해야 한다.
• querySelectorAll("요소명, 요소명")을 사용하면 서로 다른 이름의 요소를 한꺼번에 가져올 수 있다.

◻️ classList.add/remove

el.classList.add로 클래스 추가
el.classList.remove로 클래스 삭제

const nameList = document.querySelectorAll('.name');
nameList.forEach(el => { 
    el.classList.add('active');
    el.classList.remove('active');
});

◻️ contains

제이쿼리의 has calss와 같다
클래스의 유무를 console에 확인하는 것

const nameList = document.querySelectorAll('.name'); 
nameList.forEach(el => { 
    console.log(el.classList.contains('show')) 
});

◻️ text,html로 변환

innerText,HTML을 통해 name에 있던 속성을 변경한다

const name = document.querySelector('.name'); 
name.innerText = 1;
name.innerHTML ='<h1>2</h1>'

◻️ addEventListener - event 부여

제이쿼리의 click과 같다 $(document).on('click',function(){})

const name = document.querySelector('.name');
name.addEventListener('click',()=>{})
//name.addEventListener('click',function(){})

• addEventListener : 이벤트를 등록하는 방식
• function수식은 ()=>{}과 같다

name.addEventListener('click',()=>{
name.innerText = '111';
})

단일 선택자에 이벤트 부여

const nameList = document.querySelectorAll('.name');
nameList.forEach(element => {
    element.addEventListener('click',(e)=>{
        console.log(e.currentTarget);
        //element.style.color = '#f00' 
        e.currentTarget.style.color = '#f00'
        }
      )
    }) 

• 복수 선택자에 이벤트 부여
• 클릭하면 색상이 변경됨
• element.style.color와 e.currentTarget.style.color 은 같은 의미로 사용된다.

◻️ createElement - 요소 추가

const list = document.querySelector('.list');
li = document.createElement('li');
li.innerHTML = '<li>111</li>'; 
list.append(li); 

list라는 변수를 지정하여,
문서에서 li라는 element를 하나 만들어 li라는 요소를 추가해,
li태그를 생성해준 후
class list뒤에 붙인다

버튼을 만들어서 ul 추가하기

const list = document.querySelector('.list');
const addBtn = document.querySelector('.add')
addBtn.addEventListener('click',()=>{
li = document.createElement('li');
li.innerHTML = '<li>111</li>'; 
list.append(li); 
})

addBtn이라는 변수를 만들어서, 버튼 생성

버튼을 눌렀을때 추가되는 ul을 클릭하면 색상 변경

const list = document.querySelector('.list');
const listAll = document.querySelector('li')
const addBtn = document.querySelector('.add')
// 버튼추가
addBtn.addEventListener('click',()=>{
	li = document.createElement('li'); 
	li.innerHTML = '<li id="name">111</li>'; 
	list.append(li); 
})
// 동적 이벤트 부여하여 색상 변경
document.addEventListener('click',(e)=>{ 
	if(e.target && e.target.id == 'name'){
		e.target.style.color = '#f00'
	}
}) 

&& = and

💡 js는 animate가 없다.

자바스크립트에서 slideUp,Down은 없다
대부분 class를 넣었다 뺐다 하는 모션을 구현하기 때문에
css transition으로 모션을 생성하는 것이 좋다