JavaScript 기본

Export & Import

1. html 파일에서 .js 파일을 Import하는 경우

html 파일에 다음과 같이 작성
<script src="파일이름.js"></script>

2. js파일에서 다른 js파일의 function을 쓰고 싶은 경우
a. export default 기본

export default function functionName() {
	내용
}//default를 쓰는 경우 functionName 생략 가능
//가지고 와서 쓰려는 파일 맨 위에서 아래와 같이 명시해 주고 사용할 수 있다. 
import 함수이름 from './export하는파일이름.확장자' 

export default를 쓰는 경우 한 파일당 한개의 export default만 존재 할 수 있다.
여기서 함수 이름은 import받는 파일에서만 해당 function을 지칭하는 이름으로 원래 함수 이름과 다르게 다시 지어도 된다.
b. export *

export function functionName() {
	내용
}
export const user={
	name:'me"
}
//가지고 와서 쓰려는 파일 맨 위에서 아래와 같이 명시해 주고 사용할 수 있다. 
import {functionName, user as 새이름} from './export하는파일이름' 

from 이하 './export하는파일이름.확장자'의 확장자가 .js라면 확장자를 생략하고 './export하는파일이름' 까지만 써도 되지만 .json 처럼 다른 모든 파일은 확장자를 명시해줘야 한다.

3. .json 파일을 Import하는 경우
json 형식은 기본적으로 문자열로 취급 된다.

//myJson.json에서 
{
  lang: "kor",
  say: "An_young"
}
///////////////
//.js에서
import mydata from './myJson.json'

const hello{
  lang: "eng",
  say: "hi"
}

const str = JSON.stringify(hello);//obj -> string(json)
const obj = JSON.parse(mydata); //string(json) -> obj

;

자바스크립트에서는 명령문 후에 ; 를 필수로 입력 하지 않을 수 있다.

DOM API

1) querySelector(class이름); : html에서 요소를 검색해 데이터를 받아온다.
2) addEventListener('click',function(){}); : 첫번째 arg 이벤트가 실행되면 두번째 arg 함수를 실행한다.
3)E.classList.add('class이름'); : E라는 element에 class 요소를 추가한다.
4).classList.contains('class이름'); : class가 포함되어 있는지 확인

const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false

5).forEach(function () {}); : 찾은 요소들 반복해서 함수 실행.

// 첫 번째 매개변수(boxEl): 반복 중인 요소.
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});
// 출력!
boxEls.forEach(function (boxEl, index) {
	boxEl.classList.add(`order-${index + 1}`);//보간법은 grave 표기
	console.log(index, boxEl);
});

6).textContent : E.textContent 라고 하면 E클라스에 있는 값(value 말고 text)을 가지고 오는 getter, E.textContent='넣고싶은텍스트' 면 setter