전체보기399 [javascript] 배열 요소 더하기 문자 연결하기 reduce 개발을 하다 보면 배열 안의 요소를 하나의 문자열로 연결해주거나 모든 값을 더해야하는 상황이 있을 것이다. 심지어, 배열로 이루어진 객체들의 값만 더해야하는 상황도 온다. 배열의 각각의 요소를 이용하여 하나의 값을 구하고 싶을때는 reduce 함수를 사용하면 된다. reduce는 자바스크립트에서 배열 각 요소에 대해서 작성한 함수를 적용하며 하나의 값으로 줄여주는 함수이다. reduce의 사용법이다. [].reduce(function (preValue, currentValue, Index, array) { }, initialValue); preValue : 이전에 반환한 값이다. 처음 시작할 때 initialValue가 존재하지 않으면 index가 0인 요소부터 실행하고, 존재한다면 initialValu.. 2018. 8. 11. [javascript] 글자 수 제한 및 체크하기 javascript로 입력란에 글자 수를 바이트 단위로 세고, 제한하는 방법을 작성하겠다. 아 참고로 바이트가 아닌 글자 수로 제한하고자 한다면 입력 태그에 maxlength 속성을 추가해주면 된다. 영어와 한글은 차지하는 바이트 수가 다르다. 한글은 2바이트, 영어는 1바이트를 차지하고 있다.그러므로 총 바이트를 계산하고자 한다면 이 점을 고려해야 한다. 우선 결과부터 보도록 하자. 0/0 스크립트를 처음 실행하면 글의 최대 바이트 수를 설정한다. 그리고 입력을 할때마다 한글은 2, 영어는 1로 계산이 된다. 이제 30byte 넘게 써보면 alert 창이 뜨면서 다시 내용에 30byte 까지 재작성 된다. 이제 코드를 보자. 0/0 언제나 그렇듯 html코드는 간단 명료 하다. 단지 특별하다면 바이트 .. 2018. 8. 11. [javascript] 자바스크립트 기반의 pagination 만들기 2편 이전 포스팅에서 스크립트로 작동하는 pagination을 봤다. 이제 그 코드를 파헤쳐 보자.우선 html 부터 보자.보시는 바와 같이 특별한 코드는 없다. 테이블을 만들어주는 table코드안에 필요한 내용들을 넣은 것 뿐이다.하지만 테이블 머릿글은 고정하고 내용만 계속 갱신해주어야 하기 때문에thead와 tbody를 통해 구분해주었다. 번호 내용 이제 스크립트 코드를 순서대로 파헤쳐 보자. 우선 테이블 안에 들어갈 내용부터 객체들로 이루어진 배열로 만들자. 글 내용은 독자들이 편한대로 설정하면 된다 var list = [ {num: 1, content: '가'}, {num: 2, content: '나'}, {num: 3, content: '다'}, {num: 4, content: '라'}, {num: .. 2018. 8. 11. [javascript] 자바스크립트 기반의 pagination 만들기 1편 보통은 페이징 처리는 서버에서 이루어진다. 하지만 필자는 스크립트에 데이터를 들고 있으면서 페이지 이동 없는 페이징처리가 필요했다. 어쩔 수 없이 자바스크립트로 페이징 처리를 해야겠다. 자바스크립트로 pagination을 적용해보겠다. 우선 결과 부터 보자. 번호 내용 현재 글은 총 31개이고 한페이지에 보여주는 글 수는 5개, 한 블럭에 보여지는 페이지는 3페이지로 설정해보았다.이 설정은 다음 포스팅을 통해 원하는대로 변경이 가능하다는 걸 알 수 있다. 테이블의 머릿글에 체크박스와 번호 내용을 넣었다. 체크 박스를 넣은 이유는 보통 개발하면서 전체 선택을 많이 사용하기 때문에 예시로 넣어 보았다. (사실 번호와 내용만 보여주기에 너무 비어 보여서 추가했다.) 이 포스트에는 pagination을 위한 포.. 2018. 8. 11. 이전 1 ··· 92 93 94 95 96 97 98 ··· 100 다음
