jQuery
jquery
<jquery가 점점 쇠퇴하는 이유>
1. 자바스크립트 엔진이 버전업 하면서 문법이 쉬워짐
2. 느림. 엔진 무거움
3. Single Page Application 웹사이트 구현 못
<이벤트 위임으로 이미지 변경하는 실습 -jquery 이용>
//jquery
$('.navigation').on('click', 'li', function(e){ //이벤트명, 찾을요소
e.preventDefault();
const index = $(this).attr('data-index');
$('.visual img').attr('src', `./assets/part01/${data[index-1].src}`);
$('.visual img').attr('alt', data[index-1].alt)
$('.navigation > li').removeClass('is-active'); // 네비게이션 뒤에 li 에 클래스 지워줘
$(this).addClass('is-active');
// return false //e.preventDefault() 기능을 한다.
});
<각각의 요소에 이벤트 걸기 (이벤트위임x)>
$('.navigation > li').on('click',function(e){
e.preventDefault();
const index = $(this).index();
$('.navigation > li').removeClass('is-active');
$(this).addClass('is-active');
$('.visual img').attr({
'src':`./assets/part01/${data[index].src}`,
'alt':data[index].alt
})
})
Swiper
swiper 사용법
https://swiperjs.com/ 접속하여 cdn 코드 붙여넣고,
swiper에 제공해주는 클래스로 변경 진행한다.
api 에서 필요한 요소들을 검색하여 사용하면 된다.
*슬라이드 예제 많이 풀어보는 것이 중요하다.*
calculator 만들기 실습
<일반 노드 잡아서 처리 >
//1. input value값 가져오기
let first = getNode('#firstNumber');
let second = getNode('#secondNumber');
let result = getNode('.result');
let clear = getNode('#clear');
function handleInput() {
const firstValue = Number(first.value);
const secondValue = Number(second.value);
const total = firstValue + secondValue;
clearContents(result);
result.textContent = '';
insertLast(result, total)
}
first.addEventListener('input', handleInput);
second.addEventListener('input', handleInput);
//2. 두 수의 합 더하기
function handleClear(e) {
e.preventDefault();
clearContents(first);
clearContents(second);
result.textContent= '-';
}
clear.addEventListener('click', handleClear);
<위임 처리>
const calculator = getNode('.calculator');
const result = getNode('.result');
const clear = getNode('#clear');
const numberInputs = Array.from(getNodes('input:not(#clear)')) //모든 input을 잡으면서, clear는 제외
function handleInput(){
const total = numberInputs.reduce((acc,cur)=> {
return acc + Number(cur.value);
}, 0);
clearContents(result);
insertLast(result, total);
}
function handleClear(e) {
e.preventDefault();
numberInputs.forEach(clearContents);
result.textContent = '-';
}
calculator.addEventListener('input', handleInput);
clear.addEventListener('click', handleClear);
모듈프로그래밍
1. html 파일 상단에 main.js 파일에 type="module" 입력
<script src="./main.js" type="module"></script>
2. 유틸함수 export
export function getNode(node,context = document){
if(typeof node !== 'string'){
throw new Error('getNode 함수의 인수는 문자 타입 이어야 합니다.');
}
if(context.nodeType !== 9){
context = document.querySelector(context);
}
return context.querySelector(node);
}
export function getNodes(node,context = document){
if(typeof node !== 'string'){
throw new Error('getNodes 함수의 인수는 문자 타입 이어야 합니다.');
}
if(context.nodeType !== document.DOCUMENT_NODE){
context = document.querySelector(context);
}
return context.querySelectorAll(node)
}
3. 사용할 js 파일에서 import
import {getNode, getNodes} from "./li/dom/getNode.js";
그런데,
>> 유틸함수에서 export한 파일들을 index.js 라는 파일에 모두 받는다면 ??
4. index.js에 re-export 작성
export * from './getNode.js';
export * from './insert.js';
export * from './attr.js';
export * from './clear.js';
5. main.js 에서 필요한 함수 import
import {getNode, getNodes, insertLast} from "./li/dom/index.js";
6. 중간중간 유틸함수에서 필요한 경우 함수를 따로 import 해준다.
(이제 각각 독립된 모듈로써 활용되기 떄문에)
import { getNode } from "./getNode.js";
7. 단일 함수를 내보낼 때
모듈프로그래밍에서 내보내는 방법은 2가지,
1) export 입력하여 이름 내보내기 <<= 여러개 내보내기
2) export default [함수이름] 기본 내보내기 << =하나만 내보내기
function clearContents(node) {
if(typeof node === 'string') node = getNode(node);
if(node.tagName ==='INPUT' || node.tagName === 'TEXTAREA'){
node.value = ''
return;
}
node.textContent = '';
}
export default clearContents
ㄴ clearContents밖에 없으므로 기본 내보내기를 해준다.
8. export default 받는 법 (이름 내보내기와는 또 다르다!)
import [함수이름] from [경로]
import clearContents from "./lib/dom/clear.js";
9.error 들에 관한 유틸함수를 따로 모으는 index.js 만들기
refError
expert function refError(message) {
throw new Error (message);
}
typeError
expert function typeError(message){
throw new TypeError(message);
}
index.js
export * from './refError';
export * from './typeError';
main.js 에 작성
import {refError} from "./lib/error/refError.js"
최종 엔트리 파일로 관리하기 (중간엔트리)
<최종엔트리>
export * from './dom/index.js';
export * from './error/index.js'
dom에 있는 index.js와
error에 있는 index.js
중간 엔트리 들을 최종엔트리에서 내보낸다.
main.js
import {getNode, getNodes, insertLast, refError} from "./lib/index.js";
최종적으로 사용될 이름함수들을 작성한다.