Knowledge Wiki/Javascript (51) 썸네일형 리스트형 [ JavaScript ES 6 ] JavaScript 버전 1. JavaScript 버전 역사 2009: ES5 2015: ES6 (대규모 업데이트) 2016: ES7 [ JavaScript / jQuery ] pan 동작, Hammer.js 1. 터치 이벤트 등을 구현하기 좋은 라이브러리 - Hammer.js 호환성 걱정 X var mng = new Hammer.Manager(img1); mng.add(new Hammer.Pan({threshold: 0})); // threshold: 이벤트 작동 역치(최소값) mng.on('pan', function () { console.log(e.deltaX + ' ' + e.deltaY); }); 2. pan 동작 후 사용자가 마우스를 놓는 순간은 e.isFinal로 캐치 if (e.isFinal) { $('.slide-container').cs('transform', 'translateX(-100vw)'); } [ JavaScript / jQuery ] AJAX 1. AJAX 서버에 데이터를 요청해서 받아오는데 새로고침 없이 받아오기. 새로고침없이 서버에 GET/POST 요청가능. 2. AJAX는 세부 기능들이 많아서 그때그때 필요한 거 찾아쓰면 됨 done() 말고도 always(), fail() 등도 있음. 로딩 화면은 always() 쓰면 좋음 [ JavaScript / jQuery ] DOM과 JavaScript, jQuery 1. DOM (Document Object Model) JavaScript가 HTML 쌩문법을 아는게 아니기 때문에 HTML 정보를 Object화하여 다루어야 한다. 그게 DOM임. 2. HTML 코드가 나오기 전 JavaScript 코드가 HTML 태그를 찾으려하면 오류가 발생한다. JavaScript 입장에서는 아직 DOM이 완성되어있지 않기 때문. 3. jQuery ready() 이벤트리스너 8과 같은 에러가 날 때 사용하면 좋은 함수. ready() 이벤트 리스너는 "HTML을 다 읽어들였는지" 알려준다. HTML을 다 읽고 난 후 구동시켜야되는 자바스크립트 코드들은 여기 적으면 된다. // jQuery 문법 $(document).ready(function(){ // DOM 생성 완료 후 작업 }.. [ JavaScript / jQuery ] 소수점 반올림 1. 자바스크립트 소수점 반올림하기 var myNumber = 99.987; myNumber.toFixed(0); // 100 myNumber.toFixed(3); // 99.987 [ JavaScript / jQuery ] 어레이 1. 어레이 sort() 함수 기본 사용법 arr.sort(function(a, b){ return a - b; }); 2. 어레이 filter()함수 기본 사용법 filter()함수는 리턴되는 새 변수를 사용해야 한다. 기존꺼는 데이터가 안바뀜. var newArr = arr.filter(function(a){ return a < 4; }); 3. 어레이 map() 함수 기본 사용법 map()함수는 리턴되는 새 변수를 사용해야 한다. 기존꺼는 데이터가 안바뀜. var newArr = arr.map(function(a){ return a * 2; }); 4. 어레이 복사할 때는 그냥 대입하면 안된다 var arr = [1,2,3]; var newArr = [...arr]; // 이렇게 해야 어레이 값들이.. [ JavaScript / jQuery ] 웹 개발 방식 1. 웹 개발 방식 1) 서버가 HTML 파일을 완성해서 유저에게 보내는 방식 2) 서버가 빈 HTML파일 + 데이터 보냄, 그 후 JS를 이용해서 채워넣기 (요즘 웹앱 만들 때 트렌드) - 서버에서 데이터를 가져오는 건 AJAX 배우면 됨 [ JavaScript / jQuery ] 문자열, 역따옴표 1. JavaScript에서 역따옴표, 바벨을 쓰면 HTML 태그를 여러 줄에 연달아 쓸 수 있다. ex) `문자 자료형` 2. 기존 HTML 태그 지울 땐 -> $('myDiv').html('') 3. JavaScript에서 HTML element에 데이터를 넣고 싶은 경우 역따옴표를 쓰고 ${} 로 감싸면 된다. var tp = `${myValue}`; 이전 1 2 3 4 5 6 7 다음