승진이의 세상 살아가는 이야기  
Front Page
Tag | Location | Media | Guestbook | Admin   
 
'승진이와 Web/JavaScript'에 해당하는 글(6)
2013.04.01   String padding 자바스크립트
2013.03.12   jquery selector 셀렉터 표현식으로 찾기
2008.08.07   [STRUTS] From 자바코리아 5. Iterate 3 : ArrayList-HashMap을 이용한...
2008.07.23   자바 스크립트 소스들 모음
2008.07.22   자바스크립트 오버로딩,오버라이딩


String padding 자바스크립트

String.prototype.padding = function(n, c) {
 var val = this.valueOf();       
 if ( Math.abs(n) <= val.length ) {
                 return val;        
}        
var m = Math.max((Math.abs(n) - this.length) || 0, 0);
var pad = Array(m + 1).join(String(c || ' ').charAt(0));
 //      var pad = String(c || ' ').charAt(0).repeat(Math.abs(n) - this.length);       
 return (n < 0) ? pad + val : val + pad;
//      return (n < 0) ? val + pad : pad + val;
};

"1".padding(-2,"0");

결과는 =====  01

"1".padding(2,"0");

결과는 ===== 10

 

 

신고


jquery selector 셀렉터 표현식으로 찾기
$('#yncTable tr[id^="yncTr"]');

$('#yncTable tr[id*="yncTr"]');

$('#tTable tr[id^="yncTr"]');

이렇게 하면 id가 tTable 인 태그 엘레먼트에서 tr 태그 중에 id가 yncTr로 시작되는 엘리먼트들을 찾아라는 뜻.

$("[id*='yncTr']")

yncTr이 있는 id값...

나머지는 또 정리할 예정..


신고


[STRUTS] From 자바코리아 5. Iterate 3 : ArrayList-HashMap을 이용한...
4. Iterate 3 : ArrayList-HashMap을 이용한 Data Collection으로 <logic:iterate> 사용하기 그리고 <logic:notEmpty>태그와<logic:iterate>의 시너지

 
-4강에서는 실전 데이터형태를 사용하고, 예외처리를 하며, 디자인도살짝꾸밈으로서 <logic:iterate>태그를 실전에 적용해보자.
 (본 강좌에 사용된 실전소스는 첨부파일을 다운로드받으세요!)

[작동과정]
1. 입력(조회)페이지가 열린다.
2. 입력하고 submit한다.
3. action에서 쿼리를 수행하여 데이터를 가져온다.(본예제에서는 데이터를 하드코딩함)
4. 가져온 데이터Collection를 리스팅한다.
 
[그림 1,2]
 
3. Action에서는 ArrayList-HashMap조합으로 데이터를 객체화하여 request에 담습니다.
 
     ArrayList al = new ArrayList();
      HashMap row = new HashMap();
      row.put("이름","홍길동");
      row.put("나이","23");
      row.put("주소","서울시 역삼동");
      al.add(row);
      
      HashMap row2 = new HashMap();
      row2.put("이름","백두산");
      row2.put("나이","30");
      row2.put("주소","대구시 수성동");
      al.add(row2);    
 
      HashMap row3 = new HashMap();
      row3.put("이름","진달래");
      row3.put("나이","28");
      row3.put("주소","부산시 남구 우암동");
      al.add(row3);        
     
     request.setAttribute("array",al);
 
4. 리스팅시에 notEmpty태그를 iterate태그와 함께 사용합니다.
<logic:notEmpty name="array" >
   <logic:iterate name="array" type="java.util.HashMap" id="row" indexId="k">
    <tr>
     <td>
      <b><%=(k.intValue()+1)+""%></b>
     </td>
     <td>
      <%=row.get("이름")%>
     </td>
     <td>
      <%=row.get("나이")%>
     </td>
     <td>
      <%=row.get("주소")%>
     </td>              
    </tr>
   </logic:iterate>      
  </logic:notEmpty>
 
이렇게 하면 step1에서 본페이지를 열때 array객체가 없더라도 에러가 나지않고 예외를 알리는 String으로 화면을 처리할수 있습니다.
그럼 array객체가 없을때 처리를 해보겠습니다.
  <logic:empty name="array" >
    <tr>
     <td colspan=4 align='center'>
      조회버튼을 클릭하세요.
     </td>              
    </tr>
  </logic:empty>
이와 같이 <logic:empty>를 사용하여 초기화면을 구성할수 있습니다.
여기서 name속성은 iterate와 마찬가지로 request.getAttribute("!!!");에 오는 !!!명이 오면됩니다.
 
[그림 결과화면]
 
[요약]
1. 열-행 방식의 데이터를 ArrayList-HashMap구조와 담아서 <logic:iterate>으로
display하였다.
 
2. <logic:iterate>태그는 자체적으로 null객체일때의 처리가 없으므로, 예외처리를 위해
객체의 존재유무를 체크한다. 그역할을 하는 태그는 <logic:empty><logic:notEmpty>이며 스크립트릿에서
if-else처리에 해당되는 태그이다.
속성중 name은 attribute객체명을 얻는 키이름이다.
신고


자바 스크립트 소스들 모음
신고


자바스크립트 오버로딩,오버라이딩
현재 우리가 사용하고 있는 자바스크립트는 1.5버전을 사용하고 있다. 자바스크립트 2는 현재 Working Draft1까지 나온 상태이다.

내가 자바스크립트를 공부한지 얼마 되지 않았기 때문에 이해를 못하는 부분도 약간 있었다. 대충 이해하고 도움이 될것 같은것 위주로 정리를.. ㅎㅎㅎ

Functions are First-Class Object (Language : javascript)
  1. fucntion sum(a,b) {
  2.     return a + b;
  3. }
  4.  
  5. var sum = function(a, b) {
  6.     return a + b;
  7. }

펑션이 First-Class Object라는 의미는 잘 이해하지 못했지만 두가지형태 모두 사용이 가능하다. 아래 형태는 prototype.js를 사용할 때 익숙치 않아서 이해할때 가장 어려움이 있었던 부분.

Suports functional scope only (Language : javascript)
  1. function showSum(a, b) {
  2.     var c = function() {
  3.         alert(a + b);
  4.     }
  5.     return c;
  6. }
  7.  
  8. var sum = showSum(2, 3);
  9. sum();

제한적인 영역을 가지는 펑션이다. c의 경우에는 리턴을 받는 것 외에는 밖에서 제어할 수가 없다.

Supports closure (Language : javascript)
  1. function add_x(x) {
  2.     return function(y) { return x + y; };
  3. }
  4.  
  5. var f = add_x(3);
  6. f(4);

클로저 지원이다. 말은 들은 적이 있는데 잘 감이 오질 않는다. 저걸 실행하면 f(4)가 7 이란 값을 리턴해준다. 이해는 잘 못하지만 먼가 신기하다. 클로저란게 원래는 3으로 함수를 호출했을때 x가 할당되고 함수가 끝나면 x의 값이 사라져야 되는데 그렇지 않고 남아있게 되는거다. 아직 내공이 부족해서 정학이 어떤 상황에 써야할지는 감이 잘 오질 않는다. 클로저에 대해 알아보려고 찾은 괜찮은 글이 있어서 링크를 건다.


이하는 자바스크립트를 객체지향으로 사용하는 법에 대한 부분이다.

Constructor (Language : javascript)
  1. var car = function(name, cost) {
  2.     this.name = name;
  3.     this.cost = cost;
  4.     this.feature();
  5. }
  6.  
  7. car.prototype.feature = function() {
  8.     alert("name : " + this.name + "\n cost : " + this.cost);
  9. }
  10.  
  11. var sonata = new car("쏘나타", 2000);

추상화(Abstraction)부분이다. prototype.js를 이해하려면 필수적으로 이해해야 할 부분이라고 생각된다. 처음 봤을때는 꽤나 당황했었지만 저런 패턴을 많이 사용하고 복잡한 스크립트일수록 저렇게 객체로 만들어 쓰는건 유용한것 같다. 당연히 OOP는 검증된 패턴이니까....

Overloading (Language : javascript)
  1. var sum = function() {
  2.     var args_len = arguments.length;
  3.     switch(args_len) {
  4.         case 0:
  5.             statement.....;
  6.             break;
  7.         case 1:
  8.             statement.....;
  9.             break;
  10.         ............
  11.     }
  12. }

C할때 지겹도록 배우던(배우기만 지겹게 배웠지 이해는 잘.. ㅋㅋ) 오버로딩이다. 기본적으로 자바스크립트는 오버로딩을 지원하지 않는다. 파라미터 갯수가 달라도 기본적으로 오류가 나지 않고 알아서 해주기 때문에 오버로딩을 해주지 못하는데 그걸 이런식으로 해결한 것이다. 어려운 스크립트는 아니지만 순간 "천잰데?" 하는 생각이 들었다. 아규먼트 갯수를 세어서 오버로딩을 할 수 있게 해준다. 물론 연산자 오버로딩은 안된다. ㅎㅎ

function Overloading (Language : javascript)
  1. switch(args_len) {
  2.     case 0:
  3.         if(typeof(arguments[0]) == "Number") {
  4.             Numeric Operation...
  5.         } else if(typeof(arguments[0]) == "String") {
  6.             String Operation....
  7.         }
  8.     case 1:
  9.         statement.....;
  10.         break;
  11.     ............
  12. }
  13.  

오버로딩을 이런식으로 하면 아규먼트 타입에 따라서도 다르게 할 수 있다. 신기한게 참 많군..

Overriding (Language : javascript)
  1. var car = function(name, cost, gasoline) {
  2.     this.name = name;
  3.     this.cost = cost;
  4.     this.fuel = gasoline;
  5. }
  6.  
  7. car.prototype = {
  8.     use_fuel : function(offset) {
  9.         this.fuel -= offset;
  10.         return this.fuel;
  11.     }
  12. }
  13.  
  14. var avante = new car("avante", 1500, 2000);
  15. var sonata = new car("sonata", 2000, 3000);
  16.  
  17. sonata.use_fuel = function() {
  18.     return this.fuel;
  19. }

OOP의 상속성을 보여주는 부분이다. 이를 위해서 자바사크립트는 prototype이라는 메서드를 제공하고 있다. 그냥 sonata.use_fuel()을 하면 8번라인의 use_fuel이 실행된다. 하지만 17번에서 sonata.use_fuel()을 다른 메서드로 재정의 해 줌으로써 sonata.use_fuel()을 하면 17번 라인의 use_fuel이 실행된다. Overriding된 것이다.

Encaptulation, Data Hiding (Language : javascript)
  1. var car = function(name, cost, gasoline) {
  2.     this.name = name;
  3.     this.cost = cost;
  4.     var fuel = gasoline;
  5.     function use_fuel(offset) {
  6.         fuel -= offset;
  7.     }
  8.     this._useFuel = function(offset) {
  9.         use_fuel(offset);
  10.     }
  11. }
  12.  
  13. var sonata = new car("sonata", 2000, 3000);
  14. sonata._useFuel(10);

캡슐화와 정보은닉화 부분이다. 함수를 이렇게 구성하면 4, 5번라인의 fuel과 use_fuel은 Private Member가 되고 8번줄의 _use을 통해서 Private Member에 접근한다.

이상이 OOP에 대한 부분이고 이하는 그외 몇가지 도움이 될만한 코딩들이다.

Flexibility of Javascript (Language : javascript)
  1. var target = e.srcElement || e.target;
  2.  
  3. var index = (index >= 0) ? index : 0;
  4.  
  5. function oneRun() {
  6.     .................
  7.     .................
  8.     oneRun = function() {}
  9. }

1번은 둘중에 유효한 값이 자동으로 들어간다. (이거 꽤 유용할듯..)
나도 3항연산자는 잘 안쓰는 편이데 3항연산자로 변수할당도 가독성도 괜찮고 간단히 짤수 있어서 좋은듯...
5번줄의 oneRun은 괜찮은 아이디어같다. 이게 머냐하면 단 한번만 실행이 되어야 하는 메서드이다. 메서드를 다 실행안다음에 자신은 empty로 초기화 시켜버림으로써 단 한번만 실행할 수 있게 한다.(fake overliding)


innerHTML (Language : javascript)
  1. var strHTML = "<div id = 'abcd'>";
  2. strHTML += " HTML 텍스트....";
  3. ............
  4. strHTML += "</div>";

innerHTML을 쓸때 보통 위와 같은 형태로 string을 만들어서 사용하는데 이것은 상당히 부하가 크다. 과정을 설명하자면 1번줄에서 공간을 확보하고 string을 할당하고 2번줄에서 추가되기 때문에 이전꺼는 지운다음에 string을 이어붙힌 만큼의 공간을 다시 확보하고 할당한다. 이과정이 계속 반복되는 것이다. 그래서 아래와 같이 사용하는 것이 더 좋단다.

innerHTML (Language : javascript)
  1. var strHTML = new Array();
  2. strHTML.push("html 텍스트");
  3. ..........
  4. return strHTML.join("");

스트링을 배열로 만든 뒤에 join()으로 스트링을 이어붙힌 것이다. join은 인자로 각 배열을 스트링으로 이어붙혀주느데 인자로 아무것도 주지 않았으므로 text가 그냥 이어붙혀진다. 이렇게 사용할 경우 IE에서는 더 빠르고 Firefox에서는 두 방법의 속도가 비슷하다고 한다.


(Language : javascript)
  1. var value = document.getElementById("inputbox").value;
  2. var diabled = document.getElementById("inputbox").disabled;
  3. value = "검색어";
  4. disabled = true;

객체의 속성을 사용할때 반족될 경우 위처럼 사용한 것 보다는
(Language : javascript)
  1. var oInput = document.getElementById("inputbox");
  2. oInput.value = "검색어";
  3. oInput.disabled = true;

이렇게 변수에 할당해서 하는 것이 더 빠르다. 전자의 경우는 매번 찾는 과정을 반복하게 된다.


form submit handler의 올바른 사용법 (Language : javascript)
  1. <form onsubmit="return handler();">
  2.     <input type="image" ...>
  3. </form>
  4.  
  5. function handler() {
  6.     if(condition) {
  7.         return false;
  8.     }
  9.     return true;
  10. }

이부분은 약간 태그의 올바른 사용법에 해당하는 부분이다. 우리팀도 웹표준에 대한 부분이 잘 정립이 안되어 있기 때문에 이렇게 사용안하고 inpu type=button에다가 onclick="checkValid();"를 주어서 값이 맞을 경우에만 form.submit을 한다. 근데 이건 동작은 기본적으로(?) 같기는 하지만 올바른 방법은 아니다. 왜나하면 type=submit이란 태그가 존재하고 이를 사용하면 자동으로 submit으로 동작을 하니까...(type=image도 똑같은 submit이다. 이미지버튼이란 점 빼고...) 이부분은 약간 애매하긴 하지만 올바르게 용도대로 사용할 때의 이점도 있다. 이부분에 대해선 따로 포스팅하겠다.

submit버튼을 사용하면 자동으로 submit이 되므로 Validation체크를 할 시간이 없기 때문에 onsubmit핸들러를 통해서 Validation체크를 해주도록 하는 것이다.


또한 프레임워크 사용에 대해서도 약간 주의를 주었다. prototype.js를 사용하면서 $()만 사용하는 경우도 많은데 이럴결우 몸짓만 커지고 느려질수가 있다.(내가 그렇다. ㅡ..ㅡ $와 $F만...) 프레임워크를 사용하려면 최대한 활용을 하자...
신고


BLOG main image
항상 0에서 시작한다는 자세를 갖고 앞으로 나에게 가장 유리한 것이 무엇인지를 찾아라.
 Notice
 Category
분류 전체보기 (228)
승진이 이야기 (29)
승진이 공부중 (16)
승진이 자료실 (1)
승진이와 Android (1)
승진이와 Java (49)
승진이와 DB (10)
승진이와 영어 (3)
승진이와 책 (8)
승진이와 C (6)
승진이와 Web (15)
승진이와 정보 (68)
승진이와 XML (3)
승진이와 Q&A (2)
승진이의 Logs (0)
승진이와 사진 (1)
승진이와 Android (0)
승진이와 자동차 (4)
승진이와 이클립스 RCP (6)
승진이와 프로젝트들 (0)
승진이와 JavaScript (2)
승진이와 쉘프로그래밍 (0)
Flex (0)
 TAGS
자격증 디렉토리 변경 쉘스크립트 넷빈즈 오라클 리눅스 팁 pk fk 조회 리눅스 특수 문자 펀드 쓰레드 IzPack LPIC 디렉토리명 c Android C언어 검색 객체 참조 문자열 검색 얼린 문 열기 에러 문자열 SDK Setup.exe 신협중앙회 java.lang.NoClassDefFoundError java install.xml 수식 엑셀 스윙 자바 뒤로가기 버튼 surge informix 새창으로 열기 크로스 브라우저 FTP업로드 Preference
 Calendar
«   2017/07   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
 Recent Entries
ORA-32039: 순환 WITH 절에는 열 별칭 목록..
rexpert 오라클 접속 설정 방법
간단한 코드 테이블 설계
String padding 자바스크립트
jquery selector 셀렉터 표현식으로 찾기
이광영 부장판사 솜방망이 처벌 관련 링크들
sql 디벨로퍼 각주 제거 생성 단축키
jquery 이용하여 프린트 1
테이블 자동 줄바꿈 처리 방법
문자 찍는 함수 CHR() 함수와 ASCII()함수
 Recent Comments
5년이란 시간동안 my..
은성훈 - 2014
한국새끼들이 이래서..
qweqwe - 2014
mysql도 rollup기능..
ㄴㄴㄴ - 2014
감사합니다
고마워요 - 2012
헐.. 정말인가요? 사..
BreathAir - 2011
저는 이제서야 관련..
originkim - 2011
아주 막장 그자체라..
기술자 - 2010
request의 parameter..
님 짱!! - 2010
제가 목격한 건데요...
^^ - 2010
네 도대체 왜 그렇게..
BreathAir - 2010
 Recent Trackbacks
スタッドレスタイヤ..
スタッドレスタイヤ..
野球ス ミズノ
野球ス ミズノ
ve may bay
ve may bay
visit this web page..
visit this web page..
timeshare vacation..
timeshare vacation..
joogle.in
joogle.in
arassegaf.com
arassegaf.com
new Software techno..
new Software techno..
www.douloschurch.com
www.douloschurch.com
fix DBF file
fix DBF file
 Archive
2013/12
2013/11
2013/04
2013/03
2012/09
 Link Site
내 마음속 폭풍은 아직 아..
괴짜 프로그래머의 일상사~..
Joel on Software
Android 개발자 커뮤니티 ,..
developer.com
Jace\'s Blog
오라클 10g Documentation
Programing Note (승만이)
실용주의를 꿈꾸며(이클립..
http://pragmatic.kr
자바 누리 기술 문서 / 매..
Reflect
Java API 6.0 한글번역
eclipse resources 문서 링..
자바 관련 소스 많은 곳
미디어 파일 (무제한 웹하드)
http://younghoe.info/
Open Knowledge Share Drea..
키스포토 (사진강좌와 사진..
외국 드라마 TV show 자막..
무료 ebooks
지금샵
 Visitor Statistics
Total : 226,350
Today : 26
Yesterday : 41
rss
 

티스토리 툴바