300x250
반응형

Front-End/JavaScript 5

[JQuery] li 태그의 data 속성을 이용해서 정렬하는 방법(jquery sort() 함수 사용)

어떤 경우에 사용했나? 보통 리스트성 데이터는 DB에서 조회해서 가져올 때 'order by' 를 이용해서 정렬된 데이터를 가지고 옵니다. 목록 데이터에 대한 정렬기준을 여러가지 제공하는 경우 매번 request를 요청하는건 불필요한 행위지요. 이럴 경우에는 jquery의 sort 함수를 이용해서 쉽게 정렬을 변경할 수 있습니다. html 기본구조 node.js에서 ejs 템플릿 엔진을 이용해서 html을 만든 예제입니다. 정렬의 기준이 되는 데이터를 html의 data 속성을 이용해서 각 li 태그에 설정해놓아야 합니다. (정렬을 위해 루프를 돌 때 정렬 기준 데이터를 가져올 수 있는 방법으로 세팅합니다.) //테스트 목록 //정렬 버튼 최신순 인기순 javascript 부분 $("#btnCreatDt..

[JavaScript] datepicker 달력 생성하고 제어하기(단일달력, 연결된 달력)

이번 포스팅에선 달력 라이브러리를 하나 다뤄볼까 합니다. air - datepicker라는 녀석이고 jqeury가 필요합니다. 아래는 공식 홈페이지입니다. 다양한 예제와 사용법이 정리되어 있습니다. http://t1m0n.name/air-datepicker/docs/ Air Datepicker Datepicker's language. If string is passed, then language will be searched inDatepicker.languageobject. If object is passed, then data will be taken from this object directly. If some fields are missing, they will be taken from defau..

[JavaScript] 변수의 선언 방식(var, const, let)

자바스크립트 변수의 선언 방법을 var, const, let으로 나누어 살펴보고자 한다. 자바는 int, String, long... 자바스크립트는 그런 거 상관없이 무조건 var~! 이것이 지금까지 주먹구구식으로 배운 나의 얕은 자바스크립트에 대한 지식이었다. 물론, var 외에 const, let 변수는 다른 분들이 코딩해놓은 소스에서는 종종 봤던 것 같다. var는 그렇다 쳐도 const, let... 도대체 이것은 무엇을 의미하는 것일까? 본격적으로 변수의 선언 방식에 대해 알아보기 전, '스코프'의 개념부터 공부해봤다. ※ Scope(스코프)란? - 우리말로 번역하면 범위로, 자바스크립트에서는 변수에 접근할 수 있는 범위를 의미한다. - 전역과 지역, 함수와 블록으로 구분하여 알아본다. ㅁ 전역..

[JavaScript]자바스크립트로 텍스트 하이라이트 처리 (검색)

var mystring = "hello world test world"; var find = "world"; var regex = new RegExp(find, "g"); mystring.replace(regex, "" + find + ""); // highlight class 위와 같은 코드에 highlight 클래스를 꾸미는 css 만 작성하면 된다. ex) .highlight { font-weight : bold; color:#FF0000; } 출처 : https://stackoverflow.com/questions/542232/in-javascript-how-can-i-perform-a-global-replace-on-string-with-a-variable-insi/21148153 In Java..

[JavaScript] 검색 기능 만들기

결과물 사용 에디터 Atom Editor 요구사항 1. 키를 입력할 때마다 검색 결과가 동적으로 변하기 HTML Search A Apple O Orange M Mandarin S Strawberry W Watermelon G Grape P Pear C Cherry CSS body{ margin: 0; padding: 0; font-family: "Montserrat"; } .searchbox{ width: 90%; margin: 10px auto; } .header{ background: #ECDFBF; overflow: hidden; padding: 20px; text-align: center; } .header h1{ text-transform: uppercase; color: white; margi..

300x250
반응형