Web Standard

원본 : https://makeawebsitehub.com/jquery-mega-cheat-sheet/ MakeaWebsiteHub.com 에서 jQuery cheat sheet을 공개했습니다. (번역)크리에이티브와 웹 개발자가 업무 또는 다른 곳에 시간을 더 투자할 수 있도록 jQuery 치트 시트를 만들었습니다. 동료 혹은 이 치트 시트가 유용하다고 생각하는 모든 사람들에게 자유롭게 공유하세요. 고해상도 PDF 다운로드

DataTables 의 language 옵션을 이용하면 쉽게 한글화 할 수 있습니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 // DataTables Default var lang_eng = { "decimal" : "", "emptyTable" : "No data available in table", "info" : "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty" : "Showing 0 to 0 of 0 entries", "infoFiltered" : "(filtered from _MAX_ total entries)",..

DataTables 를 이용해서 테이블을 만든 후 복사하기/엑셀로 저장하기/PDF로 저장하기/프린트 하기 버튼을 달아보자. buttons: [ 'copy', 'excel', 'pdf', 'print' ] 부분을 옵션으로 주면 간단하게 적용할 수 있다. 만약 오류가 발생되거나 아무 버튼도 노출되지 않는다면 필요한 js파일을 모두 정상적으로 불러 왔는지 체크해볼것. 결과물 (좌측 상단의 버튼들) 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 TEST var data..

운영툴을 만드는데 테이블이 필요해서 datatable 을 사용했다. datatable의 장점은 프론트나 서버사이드 개발자가 소팅, 페이징, 검색등을 전혀 신경쓰지 않아도 된다는 점이다. JSON으로 응답받는 정보들은 그냥 전체 리스트를 내려주기만 하면 된다. 그러면 datatable이 알아서 테이블을 그려주고, 일단 테이블이 완성된 이후에는 검색이나 소팅이 굉장히 빠르게 동작한다. (특정 액션을 할때마다 API를 재호출 하는게 아니기 때문)디자인 또한 제공되는 css를 사용해서 별도 스타일을 적용하지 않아도 꽤 괜찮은 모습으로 표현된다. (우리는 semantic ui를 사용했다.)테이블 복사, Excel 다운로드등도 코드 몇줄만 추가해주면 쉽고 편리하게 구현할 수 있다. 단점은 튜닝이 어렵다는 점. 버튼..

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전)새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Template Strings (템플릿) 자바스크립트 자체적으로 템플릿을 지원합니다. 작업하기 훨씬 쉬워졌네요. 대박.변수 할당도 쉬워졌고 원래 \n 으로 처리했던 멀티라인도 지원합니다. 다만 따옴표(')가 아닌 ` 표시를 써야합니다.(키보드 1번 옆에 ~ 쉬프트 누르고) 12345678910111213141516 var name = '이브라', time = '오늘'; var str = `안녕하세요 ${na..

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전) 새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Class (클래스) 자바스크립트에서도 클래스를 본격적으로 사용할 수 있습니다. 객체지향 패턴을 쉽게 구현해보시죠. 클래스는 프로토타입 기반의 상속, 상위클래스 호출(super), 인스턴스, static method와 constructor를 지원합니다. 요거는 JAVA에 대해 빠삭한 분들이면 별 어려움 없이 사용하실 수 있겠네요! 123456789101112131415161718192021222324252..

ECMAScript6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작합니다.(최신버전)새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Arrows (화살표 함수) 화살표는 => 를 이용해 함수를 간략화 할 수 있습니다. (C#, JAVA8, CoffeeScript와 비슷) 함수와 리턴값을 간단한 형태로 정의할 수 있습니다. 예를 참고 하시죠. 인자 => 표현식 123456789101112 //+1 함수var addOne = num => num+1;addOne(1); //2addOne(564); //565 //이것과 동일하게 동작합니다.var..

focusin, focusout : 버블링 발생함focus, blur : 버블링 발생안함 부모가 div고 내부에 input 요소가 있을때 input 요소에 focusin 되면 부모 div에도 그 이벤트가 전달된다. input 요소에 focus 되면 부모 div에는 그 이벤트가 전달되지 않는다. 정리 1. 동일한 결과를 예상하고 싶을때 focusin과 focusout를 함께, focus와 blur를 함께 사용하자. 2. input에 포커스되거나 잃어버렸을때, 부모요소에서 리스너를 동작하고 싶다면 focusin과 focusout을 사용하자. 123 cs 12345678910111213141516 $('.parent').focusin(function(){ console.log('부모 focusin!');});..

각 작품 클릭시 평점이 뜰 수 있게 click 이벤트를 줘봅시다. (ng-click 사용) 12345678910[ html ] {{ ${d}index+1 }} {{ webtoon.title }} {{ webtoon.cartoon.artists[0].name }} Colored by Color Scriptercs 123456789101112[ js ] webtoonApp.controller('webtoonListCtrl', function($scope, $http){ $http.get('json url here..').success(function(data){ $scope.webtoons = data.data.webtoons; }); //평점 메세지 $scope.showScore = function(sco..

$http(XMLHttpRequest)를 이용해 json 데이터를 받아오자. [ guide ]1234567891011121314151617181920212223//Simple GET request example :$http.get('/someUrl'). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response..