함수형 프로그래밍 생각해보야 할 몇 가지.


 1. 함수를 되도록 작게 만들기.

 2. 다형성 높은 함수 만들기.

 3. 상태를 변경하지 않거나 정확히 다루어 부수 효과를 최소화하기.

 4. 동일한 인자를 받으면 동일한 결과를 리턴하는 순수함수 만들기.

 5. 복잡한 객체 하나를 인자로 사용하기보다 되도록 일반적인 값 여러개를 인자로 사용하기.

 6. 큰 로직을 고차 함수로 만들고 세부 로직을 보조 함수로 완성하기.

 7. 어느 곳에서든 바로 혹은 미뤄서 실행할 수 있도록 일반 함수이자 순수 함수로 선언하기.

 8. 모델이나 컬렉션 등의 커스컴 객체보다는 기본 객체를 이용하기.

 9. 로직의 흐름을 최대한 단방향으로 흐르게 하기.

10. 작은 함수를 조합하여 큰 함수 만들기.





-- 출처 : https://www.inflearn.com/course/함수형-프로그래밍/





function roundXL(n, digits) {
  if (digits >= 0) return parseFloat(n.toFixed(digits)); // 소수부 반올림

  digits = Math.pow(10, digits); // 정수부 반올림
  var t = Math.round(n * digits) / digits;

  return parseFloat(t.toFixed(0));
}


자바스크립트 소수점 자리수 계산

사용법 : roundXL(대상,자리수);

출처 : http://blog.naver.com/caesar0342?Redirect=Log&logNo=20120341657

출처: http://www.webmini.net/43964



Hex Code Entity Code Number Code Character Description
  " " " Quotation Mark
  & & & Ampersand
  ⁄ / / Slash
  &lt; &#60; < Less Than Sign
  &gt; &#62; > Greater Than Sign
  &sbquo; &#130; Single Low-9 Quote
  &bdquo; &#132; Double Low-9 Quote
&#x2020; &dagger; &#134; Dagger
  &Dagger; &#135; Double Dagger
  &permil; &#137; Per Mill Sign
  &lsaquo; &#139; Single Left Angle Quote
  &lsquo; &#145; Left Single Quote
  &rsquo; &#146; Right Single Quote
  &ldquo; &#147; Left Double Quote
  &rdquo; &#148; Right Double Quote
  &trade; &#153; Trademark Symbol
  &rsaquo; &#155; Single Right Angle Quote
&#xA0; &nbsp; &#160;   Non Breaking Space
&#xA1; &iexcl; &#161; ¡ Inverted Exclamation Point
&#xA2; &cent; &#162; ¢ Cent Sign
&#xA3; &pound; &#163; £ Pound Sterling
&#xA4; &curren; &#164; ¤ General Currency Sign
&#xA5; &yen; &#165; ¥ Yen Sign
&#xA6; &brvbar; &#166; ¦ Broken Vertical Bar
&#xA7; &sect; &#167; § Section Sign
&#xA8; &uml; &#168; ¨ Umlaut (Dieresis)
&#xA9; &copy; &#169; © Copyright Symbol
&#xAA; &ordf; &#170; ª Feminine Ordinal
&#xAB; &laquo; &#171; « Left Angle Quote, Left Guillemet
&#xAC; &not; &#172; ¬ Not Sign
&#xAD; &shy; &#173; ­
Soft Hyphen
&#xAE; &reg; &#174; ® Registered Trademark
&#xAF; &macr; &#175; ¯ Macron, Overline
&#xB0; &deg; &#176; ° Degree Sign
&#xB1; &plusmn; &#177; ± Plus or Minus
&#xB2; &sup2; &#178; ² Superscript Two
&#xB3; &sup3; &#179; ³ Superscript Three
&#xB4; &acute; &#180; ´ Acute Accent
&#xB5; &micro; &#181; µ Micro Symbol
&#xB6; &para; &#182; Paragraph Symbol
&#xB7; &middot; &#183; · Middle Dot
&#xB8; &cedil; &#184; ¸ Cedilla
&#xB9; &sup1; &#185; ¹ Superscript One
&#xBA; &ordm; &#186; º Masculine Ordinal
&#xBB; &raquo; &#187; » Right Angle Quote, Right Guillemet
&#xBC; &frac14; &#188; ¼ One Fourth Fraction
&#xBD; &frac12; &#189; ½ One Half Fraction
&#xBE; &frac34; &#190; ¾ Three Forths Fraction
&#xBF; &iquest; &#191; ¿ Inverted Question Mark
&#xC0; &Agrave; &#192; À Capital A with Grave Accent
&#xC1; &Aacute; &#193; Á Capital A with Acute Accent
&#xC2; &Acirc; &#194; Â Capital A with Circumflex Accent
&#xC3; &Atilde; &#195; Ã Capital A with Tilde
&#xC4; &Auml; &#196; Ä Capital A with Dieresis/Umlaut
&#xC5; &Aring; &#197; Å Capital A with Ring
&#xC6; &AElig; &#198; Æ Capital AE Dipthong
&#xC7; &Ccedil; &#199; Ç Capital C with Cedilla
&#xC8; &Egrave; &#200; È Capital E with Grave Accent
&#xC9; &Eacute; &#201; É Capital E with Acute Accent
&#xCA; &Ecirc; &#202; Ê Capital E with Circumflex Accent
&#xCB; &Euml; &#203; Ë Capital E with Dieresis/Umlaut
&#xCC; &Igrave; &#204; Ì Capital I with Grave Accent
&#xCD; &Iacute; &#205; Í Capital I with Acute Accent
&#xCE; &Icirc; &#206; Î Capital I with Circumflex Accent
&#xCF; &Iuml; &#207; Ï Capital I with Dieresis/Umlaut
&#xD0; &ETH; &#208; Ð Capital Eth
&#xD1; &Ntilde; &#209; Ñ Capital N with Tilde
&#xD2; &Ograve; &#210; Ò Capital O with Grave Accent
&#xD3; &Oacute; &#211; Ó Capital O with Acute Accent
&#xD4; &Ocirc; &#212; Ô Capital O with Circumflex Accent
&#xD5; &Otilde; &#213; Õ Capital O with Tilde
&#xD6; &Ouml; &#214; Ö Capital O with Dieresis/Umlaut
&#xD7; &times; &#215; × Multiplication Sign
&#xD8; &Oslash; &#216; Ø Capital O with a Slash
&#xD9; &Ugrave; &#217; Ù Capital U with Grave Accent
&#xDA; &Uacute; &#218; Ú Capital U with Acute Accent
&#xDB; &Ucirc; &#219; Û Capital U with Circumflex Accent
&#xDC; &Uuml; &#220; Ü Capital U with Dieresis/Umlaut
&#xDD; &Yacute; &#221; Ý Capital Ywith Acute Accent
&#xDE; &THORN; &#222; Þ Capital Thorn
&#xDF; &szlig; &#223; ß Small Sharp s
&#xE0; &agrave; &#224; à Small a with Grave Accent
&#xE1; &aacute; &#225; á Small a with Acute Accent
&#xE2; &acirc; &#226; â Small a with Circumflex Accent
&#xE3; &atilde; &#227; ã Small a with Tilde
&#xE4; &auml; &#228; ä Small a with Dieresis/Umlaut
&#xE5; &aring; &#229; å Small a with Ring
&#xE6; &aelig; &#230; æ Small ae Dipthong
&#xE7; &ccedil; &#231; ç Small c with Cedilla
&#xE8; &egrave; &#232; è Small e with Grave Accent
&#xE9; &eacute; &#233; é Small e with Acute Accent
&#xEA; &ecirc; &#234; ê Small e with Circumflex Accent
&#xEB; &euml; &#235; ë Small e with Dieresis/Umlaut
&#xEC; &igrave; &#236; ì Small i with Grave Accent
&#xED; &iacute; &#237; í Small i with Acute Accent
&#xEE; &icirc; &#238; î Small i with Circumflex Accent
&#xEF; &iuml; &#239; ï Small i with Dieresis/Umlaut
&#xF0; &eth; &#240; ð Small eth
&#xF1; &ntilde; &#241; ñ Small n with Tilde
&#xF2; &ograve; &#242; ò Small o with Grave Accent
&#xF3; &oacute; &#243; ó Small o with Acute Accent
&#xF4; &ocirc; &#244; ô Small o with Circumflex Accent
&#xF5; &otilde; &#245; õ Small o with Tilde
&#xF6; &ouml; &#246; ö Small o with Dieresis/Umlaut
&#xF7; &divide; &#247; ÷ Division Sign
&#xF8; &oslash; &#248; ø Small o with a Slash
&#xF9; &ugrave; &#249; ù Small u with Grave Accent
&#xFA; &uacute; &#250; ú Small u with Acute Accent
&#xFB; &ucirc; &#251; û Small u with Circumflex Accent
&#xFC; &uuml; &#252; ü Small u with Dieresis/Umlaut
&#xFD; &yacute; &#253; ý Small y with Acute Accent
&#xFE; &thorn; &#254; þ Small Thorn
&#xFF; &yuml; &#255; ÿ Small y with Dieresis/Umlaut
&#x0192; &fnof; &#402; ƒ Small f with hook
&#x0391; &Alpha; &#913; Α Greek Capital Letter Alpha
&#x0392; &Beta; &#914; Β Greek Capital Letter Beta
&#x0393; &Gamma; &#915; Γ Greek Capital Letter Gamma
&#x0394; &Delta; &#916; Δ Greek Capiral Letter Delta
&#x0395; &Epsilon; &#917; Ε Greek Capital Letter Epsilon
&#x0396; &Zeta; &#918; Ζ Greek Capital Letter Zeta
&#x0397; &Eta; &#919; Η Greek Capital Letter Eta
&#x0398; &Theta; &#920; Θ Greek Capital Letter Theta
&#x0399; &Iota; &#921; Ι Greek Capital Letter Iota
&#x039A; &Kappa; &#922; Κ Greek Capital Letter Kappa
&#x039B; &Lambda; &#923; Λ Greek Capital Letter Lambda
&#x039C; &Mu; &#924; Μ Greek Capital Letter Mu
&#x039D; &Nu; &#925; Ν Greek Capital Letter Nu
&#x039E; &Xi; &#926; Ξ Greek Capital Letter Xi
&#x039F; &Omicron; &#927; Ο Greek Capital Letter Omicron
&#x03A0; &Pi; &#928; Π Greek Capital Letter Pi
&#x03A1; &Rho; &#929; Ρ Greek Capital Letter Rho
&#x03A3; &Sigma; &#931; Σ Greek Capiral Letter Sigma
&#x03A3; &Tau; &#932; Τ Greek Capital Letter Tau
  &Upsilon; &#933; Υ Greek Capital Letter Upsilon
  &Phi; &#934; Φ Greek Capital Letter Phi
  &Chi; &#935; Χ Greek Capital Letter Chi
  &Psi; &#936; Ψ Greek Capital Letter Psi
  &Omega; &#937; Ω Greek Capital Letter Omega
  &alpha; &#945; α Greek Small Letter Alpha
  &beta; &#946; β Greek Small Letter Beta
  &gamma; &#947; γ Greek Small Letter Gamma
  &delta; &#948; δ Greek Small Letter Delta
  &epsilon; &#949; ε Greek Small Letter Epsilon
  &zeta; &#950; ζ Greek Small Letter Zeta
  &eta; &#951; η Greek Small Letter Eta
  &theta; &#952; θ Greek Small Letter Theta
  &iota; &#953; ι Greek Small Letter Iota
  &kappa; &#954; κ Greek Small Letter Kappa
  &lambda; &#955; λ Greek Small Letter Lambda
  &mu; &#956; μ Greek Small Letter Mu
  &nu; &#957; ν Greek Small Letter Nu
  &xi; &#958; ξ Greek Small Letter Xi
  &omicron; &#959; ο Greek Small Letter Omicron
  &pi; &#960; π Greek Small Letter Pi
  &rho; &#961; ρ Greek Small Letter Rho
  &sigmaf; &#962; ς Greek Small Letter Final Sigma
  &sigma; &#963; σ Greek Small Letter Sigma
  &tau; &#964; τ Greek Small Letter Tau
  &upsilon; &#965; υ Greek Small Letter Upsilon
  &phi; &#966; φ Greek Small Letter Phi
  &chi; &#967; χ Greek Small Letter Chi
  &psi; &#968; ψ Greek Small Letter Psi
  &omega; &#969; ω Greek Small Letter Omega
  &thetasym; &#977; ϑ Greek Small Letter Theta Symbol
  &upsih; &#978; ϒ Greek Upsilon with Hook Symbol
  &piv; &#982; ϖ Greek pi Symbol
  &bull; &#8226; Bullet / Black Small Circle
  &hellip; &#8230; Horizontal Ellipsis
  &prime; &#8242; Prime / Minutes / Feet
  &Prime; &#8243; Double Prime / Seconds / Inches
  &oline; &#8254; Overline
  &image; &#8465; Blackletter Capital I / Imaginary Part
  &weierp; &#8472; Script Capital P / Power Set
  &real; &#8476; Blackletter Capital R / Real Part Symbol
  &alefsym; &#8501; Alef Symbol / First Transfinite Cardinal
  &larr; &#8592; Left Arrow
  &uarr; &#8593; Up Arrow
  &rarr; &#8594; Right Arrow
  &darr; &#8595; Down Arrow
  &harr; &#8596; Left-Right Arrow
  &crarr; &#8629; Carrige Return / Downward Left Arrow
  &lArr; &#8656; Double Left Arrow
  &uArr; &#8657; Double Up Arrow
  &rArr; &#8658; Double Right Arrow
  &dArr; &#8659; Double Down Arrow
  &hArr; &#8660; Double Left-Right Arrow
  &forall; &#8704; For All
  &part; &#8706; Partial Differential
  &exist; &#8707; There Exists
  &empty; &#8709; Empty Set
  &nabla; &#8711; Nabla / Backwards Difference
  &isin; &#8712; Element Of
  &notin; &#8713; Not An Element of
  &ni; &#8715; Contains As Member
  &prod; &#8719; Product Sign
  &sum; &#8721; Sumation
  &minus; &#8722; Minus Sign
  &lowast; &#8727; Asterisk Operator
  &radic; &#8730; Square Root / Radical Sign
  &prop; &#8733; Proportional To
  &infin; &#8734; Infinity
  &ang; &#8736; Angle
  &and; &#8743; Logical And / Wedge
  &or; &#8744; Logical Or / Vee
  &cap; &#8745; Inersection / Cap
  &cup; &#8746; Union / Cup
  &int; &#8747; Integral
  &there4; &#8756; Therefore
  &sim; &#8764; Tilde Operator / Similar To / Varies With
  &cong; &#8773; Approximately Equal To
  &asymp; &#8776; Almost Equal To / Asymptotic To
  &ne; &#8800; Not Equal To
  &equiv; &#8801; Identical To
  &le; &#8804; Less Than or Equal To
  &ge; &#8805; Greater Than or Equal To
  &sub; &#8834; Subset Of
  &sup; &#8835; Superset Of
  &nsub; &#8836; Not A Subset Of
  &sube; &#8838; Subset Of Or Equal To
  &supe; &#8839; Superset Of Or Equal To
  &oplus; &#8853; Circled Plus / Direct Sum
  &otimes; &#8855; Circled Times / Vector Product
  &perp; &#8869; Up Tack / Orthogonal To / Perpendicular
  &sdot; &#8901; Dot Operator
  &lceil; &#8968; Left Ceiling / Apl Upstile
  &rceil; &#8969; Right Ceiling
  &lfloor; &#8970; Left Floor / Apl Downstile
  &rfloor; &#8971; Right Floor
  &lang; &#9001; Left-Pointing Angle Bracket / Bra
  &rang; &#9002; Right-Pointing Angle Bracket / Ket
  &loz; &#9674; Lozenge
  &spades; &#9824; Black Spade Suit
  &clubs; &#9827; Black Club Suit
  &hearts; &#9829; Black Heart Suit
  &diams; &#9830; Black Diamond Suit
<script language="JavaScript">
//모바일 페이지로 이동.
//http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones
var uAgent = navigator.userAgent.toLowerCase();
var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
        'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
for(var i=0;i<mobilePhones.length;i++)
    if(uAgent.indexOf(mobilePhones[i]) != -1)
        document.location = "http://"+ location.host +"/m" + location.pathname;
</script>

//XMLHttpRequest객체를 생성해 주는 getXMLHttpRequest()함수

function getXMLHttpRequest() {
 if (window.ActiveXObject) {
  try {
   return new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    return new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e1) { return null; }
  }
 } else if (window.XMLHttpRequest) {
  return new XMLHttpRequest();
 } else {
  return null;
 }
}


//생성된 XMLHttpRequest객체를 저장할 전역변수
var httpRequest = null;

//XMLHttpRequest객체를 사용해서 지정한방식,지정한 URL, 첨부할 파라미터 값을 사용하여 웹 서버에 요청을 전송

function sendRequest(url, params, callback, method) {
 httpRequest = getXMLHttpRequest();
 var httpMethod = method ? method : 'GET';
 if (httpMethod != 'GET' && httpMethod != 'POST') {
  httpMethod = 'GET';
 }
 var httpParams = (params == null || params == '') ? null : params;
 var httpUrl = url;
 if (httpMethod == 'GET' && httpParams != null) {
  httpUrl = httpUrl + "?" + httpParams;
 }
 httpRequest.open(httpMethod, httpUrl, true);
 httpRequest.setRequestHeader( //컨텐트 타입 지정
  'Content-Type', 'application/x-www-form-urlencoded');
 httpRequest.onreadystatechange = callback; //readyState값이 바뀔 때 호출 될 콜백 함수 지정
 httpRequest.send(httpMethod == 'POST' ? httpParams : null); //Http요청 방식이 'POST'이면 send()함수를 통해 파라미터 파라미터 전송
}
출처 : http://naver.catchstyle.net/90091110491


   <script language = 'javascript' >
    opener.location.reload();
    if(navigator.appVersion.indexOf("MSIE 7.0") >= 0 ){  //익스플로러 체크
     window.open("RNCheckRequest.jsp","_self").close();
    }else if(navigator.appVersion.indexOf("MSIE 8.0") >= 0){    //보안 alert! 방지
     window.open("RNCheckRequest.jsp","_self").close();
    }else{
     self.close();
    }
   </script>

self.close() 시 사용했던 소스. 자기 자신의 파일명을 써줬던 것 같다.



출처 : http://naver.catchstyle.net/90091110491
출처 : http://webstandards.or.kr/html5


http://skyunoe.blog.me/20108801554


Ajax를 구현하는 핵심 JavaScript 객체는 XMLHttpRequest이다.

Ajax가 추구하는 새롭고 놀라운 기능을 실제로 구현하기 위해서는 이 객체에 대해 완전히 익숙해 져야 한다.

 

아래는 XMLHttpRequest객체가 지원하는 Method 및 Properties들을 정리한 것이다.

 

Method

  • open(): 새로운 요청을 서버에 설정함.
  • send(): 요청을 서버에 전송함.
  • abort(): 현 요청에서 벗어남.
  • readyState: 현 HTML 준비상태를 제공함.
  • responseText: 요청에 응답하기 위해 서버에서 재전송하는 텍스트.

Properties

  • onreadystatechange : XMLHttpRequest객체의 상태가 변할 때 실행할 핸들러를 지정 한다.
  • readyState : XMLHttpRequest객체의 생태가 변할 때 각 상태값을 반환한다.
    • 0: (open()을 호출하기 전에는) 요청이 초기화 되지 않는다.
    • 1: (send()를 호출하기 전에는) 요청은 설정은 되지만 보내지지 않는다.
    • 2: 요청이 보내지고 처리 중에 있다. (이 시점에서 응답에서 콘텐트 헤더를 얻을 수 있다.)
    • 3: 요청이 처리 중에 있다. 부분적인 데이터를 응답에서 사용할 수 있지만 서버는 이 응답으로는 종료되지 않는다.
    • 4: 응답이 완료된다. 서버의 응답을 받고 이를 사용한다.
  • responseText : HTTP 요청결과를 문자열 형태로 반환한다.
  • responseXML: HTTP 요청결과를 XMLDocument 오브젝트로 반환한다.
  • responseBody
  • status: HTTP 응답코드를 반환한다. 성공일 경우 200
  • statusText: HTTP 응답문자열을 반환한다. 성공인 경우 OK

 

사용법

 

1. 요청생성

 

  function getXMLHttpRequest() {


       var xmlreq = false;
       if (window.XMLHttpRequest) {
           // Create XMLHttpRequest object in non-Microsoft browsers
          xmlreq = new XMLHttpRequest();


       } else if (window.ActiveXObject) {
         
 // Create XMLHttpRequest via MS ActiveX
           try {
             
 // Try to create XMLHttpRequest in later versions
               // of Internet Explorer

               xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e1) {
               // Failed to create required ActiveXObject
               try {
                 
 // Try version supported by older versions
                   // of Internet Explorer

                   xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (e2) {
                  
// Unable to create an XMLHttpRequest with ActiveX
               }
           }
       }


       return xmlreq;
   }

 

 

2. 요청

 

    function ajaxRequest() {


                // req 객체반환
                req = getXMLHttpRequest();
 
                // 응답이 완료되면 자동으로 실행되도록 JavaScript 콜백 함수를 정의
                var handlerFunction = "";
                req.onreadystatechange = handlerFunction;
 
                // 요청처리
                req.open("POST", "test.php", true);
 
                // 헤더 설정
                req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
                // POST일 경우 send에 아래와 같이 변수를 입력하고 GET일 경우 null입력
                req.send("변수=값");

    }

 

 

3. CallBack (요청에 대한 응답 처리)

 

    function ajaxResponse() {

            // only if req shows "loaded"
            if (req.readyState == 4) {
                 // only if "OK"
                 if (req.status == 200) {
                    // do something...
                 } else {
                    alert("There was a problem retrieving the XML data:\n" + req.statusText);
                 }
            }

    }

 

[출처] [Ajax] XMLHttpRequest객체|작성자 깡통

- 섹션 요소를 사용할 때는 항상 아웃라인을 염두할 것.

- 아웃라인과는 상관없는 범위를 지정할 때는 div 요소를 사용할 것.

- article 요소를 사용할 것인가 말 것인가는 해당 콘텐츠를 페이지에서 분리해 사용할 수 있는가에 따라 결정.

- aside 요소는 없어도 문제없을 섹션에 사용.





출처 : HTML5 & API 입문 (프리렉, 시라이시 슌페이 지음)
body
details
fieldset
td
figure
blockquote

요소 자체가 섹션을 구성한다.
요소 바깥쪽 아웃라인에는 영향을 주지 않는다.

'HTML/JS/CSS' 카테고리의 다른 글

Ajax XMLHttpRequest  (0) 2010.09.17
HTML5 - 아웃라인을 의식한 마크업  (0) 2010.08.12
HTML5 - 섹션루트  (0) 2010.08.11
HTML5 - 없어진 요소(비표준 포함)  (0) 2010.07.14
HTML5 - 종료태그를 기술해서는 안되는 요소  (0) 2010.07.14
css - display : block  (0) 2010.07.13

applet - embed/object

acronym - abbr

dir - ul

frame, frameset, noframes - iframe과 CSS 이용 / 서버 사이드로 컨텐츠 결합

isindex - form과 텍스트 필드 조합

listing , xmp - pre / code

noembed - 폴백이 필요하다면 object

plaintext - MIME 타입 "text/plain"  사용

rb - ruby

basefont, big, blink, center, font, marquee, s, spacer, strike, tt, u - CSS를 사용

bgsound - audio


사라진요소 - 대체방법



출처 : HTML5 & API 입문 (프리렉)


'HTML/JS/CSS' 카테고리의 다른 글

HTML5 - 아웃라인을 의식한 마크업  (0) 2010.08.12
HTML5 - 섹션루트  (0) 2010.08.11
HTML5 - 없어진 요소(비표준 포함)  (0) 2010.07.14
HTML5 - 종료태그를 기술해서는 안되는 요소  (0) 2010.07.14
css - display : block  (0) 2010.07.13
[JS] KeyCode 값.  (2) 2009.11.16
area
base
br
col
command
embed
hr
img
input
keygen
link
meta
param
source


출처 : HTML5 & API 입문 (프리렉)


'HTML/JS/CSS' 카테고리의 다른 글

HTML5 - 섹션루트  (0) 2010.08.11
HTML5 - 없어진 요소(비표준 포함)  (0) 2010.07.14
HTML5 - 종료태그를 기술해서는 안되는 요소  (0) 2010.07.14
css - display : block  (0) 2010.07.13
[JS] KeyCode 값.  (2) 2009.11.16
getBoundingClientRect - 개체 좌표 구하기.  (0) 2009.11.13

block과 inline의 차이점은 줄바꿈만은 아니다.
block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.

block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.


div 의 display 기본속성 : block

span 의 display 기본속성 : inline


출처 : http://www.dimdol.com/61?expandComment=1#comment9460382

출처 : http://dsdstudio.springnote.com/pages/380935?print=1  (ㅋㅋ 검색해서 가져와보니 dasida네 스프링노트였네..^^)





←(백스페이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18

PAUSEBREAK = 19
CAPSLOOK = 20

한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32

PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

INSERT = 45
DELETE = 46

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93

0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105

.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109

F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123

NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

  1. Favicon of http://dsdstudio.tistory.com BlogIcon DSD군 2009.11.26 00:29 신고

    할퀴.. 저거슨 어디서 많이보던 ㅋ


예를 들어.

<input id ="test" value="이건 테스트여요" />

라는 개체의 좌표를 구하고자 한다면,

<script>

obj = document.getElementById("test");

left = obj.getBoundingClientRect().left
top = obj.getBoundingClientRect().top
bottom = obj.getBoundingClientRect().bottom;
right = obj.getBoundingClientRect().right;

</script>

뭐 요런식으로 구해지더라.....
[출처] HTML Input text 한글/영문/숫자 입력설정|작성자 날로먹자



<input type="text" name="" value="" style="ime-mode:disabled;">

 ime-mode option

auto : 한/영 변환 자유로움
active : 한글 기본/ 한/영 변환 자유로움
inactive : 영문기본 한/영 변환 자유로움
disabled : 영문기본, 한/영변환 않됨 . 영문/숫자만 입력가능


출처 : http://www.devpia.com/MAEUL/Contents/Detail.aspx?BoardID=57&MAEULNO=22&no=1882&page=1
파일첨부



[출처] javascript replaceall|작성자 셩이
http://blog.naver.com/soo02da?Redirect=Log&logNo=150046790484

자바스크립트에는 replaceall 함수가 없습니다.

replace 함수가 있지만 replace는 조건에 대해서 한번만 치환을 하기 때문에, replaceall 의 기능을 수행하기는 어렵습니다.

예)

var a = '2009-10-01';

var b = a.replace("-","");

alert(b);

결과 값 : 200910-01

 

split과 join 함수를 이용하면 replaceall과 같은 효과를 낼 수 있습니다.

예)

var a = '2009-10-01';

var b = a.split("-").join("");

alert(b)

결과 값 : 20091001

 
출처: http://blog.naver.com/siva6?Redirect=Log&logNo=120007837429

정말 좋은 스크립트다..

얼른 이해해 버려야겠다.

  1. Favicon of http://siva6.pe.kr BlogIcon siva6 2009.09.30 10:06 신고

    오래된 소스인데 참조해서 사용하신다니 기쁘네요. ^^
    당시에는 ie만을 기준으로 작업했기 때문에 요즘은 사용하기 어려운 소스입니다.
    고려해서 보세요.
    만들어 놓고 실제로 프로젝트에 적용하지는 않았다는...


행 삭제인 경우는.. 체크박스 있는 로우일 때만.ㅋ

/**
 * Row추가
 *
 * @param obj   :  테이블 ID
 * @param cellNum  :  추가될 Row의 Cell (td tag) 개수
 * @param htmlValue  :  cell에 innerHtml로 들어갈 htmlTag (배열)
 * @param rowAttr  :  row (tr tag 속성)
 *
 * 사용예
 *
 * @return
 */

function addRow(tableId,cellNum,htmlValue,rowAttr){
 
 /**
  *  obj    
  *  cellNum      
  *  cellText(배열) 
  *  rowAttr   
  * 
  *  사용예
  * 
  *  function test(obj){
  * 
  *   
  *   var htmlValue = new Array();
  * 
  *   htmlValue[0]  = "<input type='checkbox' size='15' name='chk' />";   
  *   htmlValue[1]  = "<input type='text' size='15' name='id' />";    
  * 
  *      var rowAttr  = "#ffffff,25";  (색상, 높이)
  * 
  *   addRow(obj,htmlValue.length,htmlValue,rowAttr);  * 
  * 
  *  }
  */
 
 
 if(typeof(tableId) == "undefined"){
  
  alert("JAVASCRIPT ERROR : 호출한 테이블 ID 가 없습니다.");
  
  return false;
  
 }else{
 
  var RecentRow  = tableId.rows.length;    // 현재 TableRow 수
  var newRow    = tableId.insertRow(RecentRow); // row추가.
  var rowAttrArray = rowAttr.split(',');
  
  newRow.bgColor  = rowAttrArray[0];   // Row 속성
  newRow.height  = rowAttrArray[1];
  
  for(var i=0;i<cellNum;i++){      // 새로운 Row에 cell 생성후, htmlValue 값을 사용하여 innerHtml 
   
   newRow.insertCell(i);
   
   newRow.cells[i].innerHTML = htmlValue[i];
   
  }
  
 }
 
}

/**
 *
 * @param tableId   - tableId     (Object)
 * @param checkBoxName  - checkboxName (text)
 *
 * 사용예 -
 *  function del(tableId,checkBoxName){

  deleteRow(tableId,checkBoxName);

 }
 *
 * @return
 */

function deleteRow(tableId, checkBoxName){
 
 if(typeof(tableId) == "undefined"){
  
  alert("JAVASCRIPT ERROR : 호출한 테이블 ID 가 없습니다.");
  
  return false;
  
 }else{
  
  var RecentRow  = tableId.rows.length-1;
  
  for (RecentRow ; RecentRow > 0 ; RecentRow--){
   
  
   if (tableId.rows[RecentRow].all.namedItem(checkBoxName).checked == true)
         {
    // row가 1개 일때와 2개 이상일 때 구분해줄것.
          
    tableId.deleteRow(RecentRow);

         }
  }
  
 }
 
}

 

사용예제


매번 그냥 쓰다가; 내가 왜 이러고 싶나 해서 만들었다;

  1. Favicon of http://gtdream.tistory.com BlogIcon 나의둥근바다 2009.10.19 17:59 신고

    올레~~
    감사합니다. 잘쓰겠습니다.

    • 오우.. 내가 만든걸 다른 사람이 쓰기도 하는군요;

      부족한 부분이 있을껀데..적절히 잘 수정해서 사용하세요^^


 function setComma(n){
   return Number(String(n).replace(/\..*|[^\d]/g,"")).toLocaleString().slice(0,-3);
 }

 function removeComma(n){
  str = parseInt(n.replace(/,/g, ""));
  alert(str);
       
 }

  1. Favicon of http://dsdstudio.tistory.com BlogIcon DSD군 2008.12.24 02:43 신고

    언제봐도 골때리는 정규표현식 @_@

  2. 요호히 2009.03.24 15:55 신고

    .toLocaleString()는 IE에서만 콤마를 찍어주는 것 같네요 ^^;

출처 : http://cafe.naver.com/bigcase.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=188


<SCRIPT LANGUAGE="JavaScript">
        function storeCaret (textel){
                if (textel.createTextRange){
                  textel.caretPos = document.selection.createRange().duplicate();
                }
        }
        function insertatcaret (textel, text){
          //text = "<b>" + text + "</b>";
          text = text;        
                if (textel.createTextRange && textel.caretPos){
                  var caretPos = textel.caretPos;
                  caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
                }else{
                  textel.value  = textel.value  + text;
                }
        }
  </SCRIPT>

<form>
<textarea name="admin_contents_sms_value" ROWS="10" COLS="50" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);">원하는 위치에 원하는 문자 삽입</textarea>
<br>
<input type=text name=tem_Code value='입력하세요'>
<input type="button" value="삽입" onClick="insertatcaret(this.form.admin_contents_sms_value,this.form.tem_Code.value);">
</form>


주어진 텍스트 범위의 모체 엘레멘트를 반환한다.

Script [oVal=]TextRange.parentElement()
인수/파라메터
object
필수적인 요소이며, objectTextRange 개체의 이름이다.
파라메터
파라메터는 없다.
반환값

반환값 oVal은 성공적이면 모체 엘레멘트이고, 실패하면null을 반환한다.

특기

모체 엘레멘트는 텍스트 범위를 완전히 감싼 엘레멘트이다.

만일 텍스트 범위가 한개의 엘레멘트 이상으로 확장되어 있으면, 이 메서드는 모든 엘레멘트를 포함하는 가장 작은 엘레멘트를 반환한다. 만일 여러개의 엘레멘트에 걸쳐 텍스트를 삽입하려면, 포함된 어떤 엘레멘트 보다 그 엘레멘트들을 포함하는 모체 엘레멘트에 넣어야 한다.

이 기능은 Microsoft 아닌 Win32 플래트폼에서는 작용하지 않을 수 있다.

적용
개체 script IE
TextRange TextRange.parentElement() IE4.0(win16,win32,ce,unix)


가끔은 쓸모가 있~는데~


다음 번 등위개체와 연결하기 위해서 nextSibling 이라는 속성이 있으며

그 하위개체들과 연결하기위해 childNodes 라는 속성도 있답니다.

출처 : http://www.cyworld.com/kjynim12/734260


/////////////////////// HTML / Javascript ////////////////////////

1. 용어 정리
 (1) HTML (Hypertext Markup Language)
  웹페이지를 표시하는 기본언어
  최신의 HTML 표준은 4.01이지만 HTML을 XML과 결합한
  XHTML(eXtensible Hypertext Markup Language)이 권고안으로 나와있다.

 (2) CSS(Cascading Style Sheets)
  CSS 는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며
  CSS 를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열
  람할 수 있다. CSS 를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이
  블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수 있다.

 (3) XML(eXtensible Markup Language)
  XML(eXtensible Markup Language)은 HTML이나 CSS로서 표현되지 못하는 영역을
  DTD를 이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 메타 마크업
  언어이다.

 (4) DOM(Document Object Model)
  DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여
  이를 자유 자재로 사용할 수 있도록 만든 것이다.

 (5) ECMAScript (Javascript)
  자바 스크립트는 W3C 표준으로 제정된 것은 아니다. 자바 스크립트는 주석 코드를
  사용하여 비 호환성의 웹 브라우저로부터 숨겨져야 한다. 자바 스크립트는
  HTML 문서의 Head 내에 위치해야 제대로 동작한다 따라서 문서의 Body 내에 자바 스
  크립트를 위치시키는 것은 피해야 한다.


2. 웹 표준 검사
 http://validation.w3.org

3. XHTML 사용해야 하는 이유
 (1) 호환성 및 확장 가능성이 좋다.
 (2) 유지비용 감소 및 재생산성 확대
 (3) 경량의 로딩속도

4. DOCTYPE 문서형식
 (1) HTML 2.0 표준문서 형식
  <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
 (2) HTML 3.2 표준 문서 형식
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 (3) HTML 4.01 표준 문서 형식
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
 (4) XHTML 1.0 표준 문서 형식
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 (5) XHTML 1.1 표준 문서 형식
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5. 일반 형식(Transitional)과 엄격한 형식(Strict)
 HTML 4.01 Transitional은 예전에 있었거나 없어진 태그도 지원하며,
 <font>에 지정된 스타일도 제대로 표현하여 준다.
 
 HTML 4.01 Strict은 HTML을 엄격하게 적용한다.
 <font> 태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현 해야 한다.

 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다.

6. XHTML 일반 문법 준수
 (1) 정확한 문서 구조 준수
  문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
  <html xmlns="http://www.w3.org/1999/xhtml">
  표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는
  head, title 및 frameset 구조 요소가 포함되어야 한다

 (2) 모든 요소는 완벽하게 중첩되어야 한다.
  <p>This is a <i>bad example.</p></i>
  <p>This is a <i>good example.</i></p>
 
 (3) 모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
  <a href=http://sample.com>틀린 경우</A>
  <a href="http://sample.com">맞는 경우</a>
 
 (4) 모든 요소와 속성은 소문자여야 한다.
  <A HREF="http://sample.com">틀린 경우</A>
  <a href="http://sample.com">맞는 경우</a>
 
 (5) 모든 요소는 닫아야 한다.
  XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다
  (예: <br/>가 아니라 <br />)
 
 (6) 모든 속성값은 속성이 함께 선언되어야 한다.
  <option value="wrong" selected>틀린 경우</option>
  <option value="right" selected="selected">맞는 경우</option>
 
 (7) 모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
  <script type="text/javascript” language="javscript"></script>
  <style type="text/css"></style>
 
 (8) 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
 
 (9) 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
  <script type="text/javascript">
  <!--
  // 틀린 표현!
  document.write("</P>");
  // -->
  </script>

  <script type="text/javascript">
  <!--
  // 맞는 표현!
  document.write("<\/P>");
  // -->
  </script>

  <script type="text/javascript">
  <![CDATA[
  ... <h1>데이터</h1> ...
  ]]>
  </script>

 (10) 모든 문서 내 URL에서 &를 쓰면 안 된다.
  <!.에러! --> <a href="foo.cgi?chapter=1&section=2">...</a>
  <!.적합! --> <a href="foo.cgi?chapter=1&amp;section=2">...</a>
 
 보너스
 테이블 구성시 <table><form></form></table> 식으로 form의 여백을 일부러
 없애는 경우가 있는데 이것은 css로 바로 해결 가능.
 form { margin: 0; }

7. CSS
 http://csszengarden.com
 http://phonophunk.com/

 (1) CSS의 선언
  <1> Selector 와 선언부 (p.text : Selector, {} : 선언부)
   p.text {
    margin: 0;
   }
  <2> Selector는 ,로 구분할 수 있다.  
   p.text,
   span.name {
    color: #666;
   }
  <3> 일반 선택자
   - 공용 선택자 * : 모든 태그 지정
    div.search * {
     vertical-align: middle
    } --> div.search 안의 모든 엘리먼트가 다 적용
   - 타입 선택자 A : 태그 A 지정
   - 클래스 선택자 .A : 클래스가 A인 태그를 지정
   - ID 선택자 #A : 아이디가 A인 태그를 지정
  <4> 복합 선택자
   - 하위 선택자 A B : 태그 A로 감싸져 있는 모든 태그 B 지정
    <ul id="list">
     <li><a href="list.html?id=34&amp;type=blah">item 34</a></li>
     <li><a href="list.html?id=35&amp;type=blah">item 35</a></li>
     ...
     ...
     <li><a href="list.html?id=99&amp;type=blah">item 99</a></li>
    </ul>
    --> a 태그에 속성 지정시
    ul#list a:link,
    ul#list a:visited {
     color: #999;
    }
    ul#list a:hover,
    ul#list a:active {
     color: #000;
    }
    --> 한방에 해결
   - 자식 선택자 A > B : 태그 A로 감싸져 있는 바로 하위단계 B만 지정
    <ul class="depth1">
     <li>
      <a href="about.html">Company</a>
      <ul class="depth2">
       <li>
        <a href="overview.html">Overview</a>
       </li>
       <li>
        <a href="ceo.html">Ceo.html</a>
       </li>
      </ul>
     </li>
    </ul>
    ul.depth1 li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
    ul.depth1>li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
   - 인접 선택자 A + B : 태그 A와 B가 연속으로 나와 있는 것을 지정
    <h2>브라우져 워</h2>

    <p>웹스탠다드를 보다 잘 이해하기 위해서는 브라우져 워에 대해서 짚어볼 필요가
    있습니다.</p>

    <h2>어쩌고 저쩌고</h2>

    <p>또다시 어쩌고 저쩌고</p>

    --> 제목 뒤 첫글자만 크게 하고 싶다면??
    h2+p:first-letter {
     float: left;
     font-size: 2.2em;
    }
  <5> 가상 클래스 선택자
   - :first-child선택자 A:first-child : 태그 A로 감싸져 있는 가장 처음 태그 지정
   - 언어선택자 A:lang(B) : 태그 A중 언어가 B인 태그 지정
   - 링크선택자 A:link : 태그 A중 링크가 걸려있는 것 지정
          A:visited : 태그 A중 링크가 걸려있고, 사용자가 이미 클릭한 태그 지정
   - 동적선택자 A:active : 태그 A중 사용자가 마우스를 누르고 있는 태그 지정
       A:hover : 태그 A중 사용자가 마우스 포인터를 위에 올려놓은 태그 지정
       A:focus : 태그 A중 사용자의 키보드 입력을 받는 태그 지정
  <6> 동적 선택자
   - :first-line선택자 A:first-line : 태그 A의 문단중 첫번째 줄 지정
   - :first-letter선택자 A:first-letter : 태그 A의 문단중 첫번째 글자 지정
   - :before선택자 A:before : 태그 A의 문단 앞을 지정
   - :after선택자 A:after : 태그 A의 문단 뒤를 지정

 (2) CSS 선언 방법
  <1> 외부 선언 (external css) - 우선순위가 낮다.
   <link rel="stylesheet" type="text/css" href="myCss.css" />
  <2> 엘리먼트에 직접 선언 (inline css)
   <div style="padding: 10px; border: 1px solid #eee;">
    <p>contents</p>
   </div>
  <3> 사용자 정의 스타일 (user defined css)
   가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이
   용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다.
 
 (3) CSS 적용의 체크 포인트 4가지
  <1> XHTML이 표준 문법이어야 한다.
  <2> XHTML 문서가 의미와 구조적으로 구성되어야 한다.
  <3> CSS가 표준 문법이어야 한다.
  <4> CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.

 (4) CSS Editor Firefox plugin
  <1> Web Developer 확장 기능
  <2> HTML Tidy

8. DOM / Script
 문서 객체 모델(DOM; Document Object Model)은 HTML내에 들어 있는 요소를 구조화
 객체 모델로 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를
 표현하는 W3C 표준 모델이 기반이 된다.

 (1) 객체 접근방법
  <1> document.getElementById(aId)
  <2> document.getElementByTagName(aTagName)
  <3> 기존방식 밖에 지원안하는 IE 지원
   function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId) {
     return document.getElementById(objectId); // check W3C DOM
    }
    else if (document.all && document.all(objectID) {
     return document.all(objectID); // IE4
    }
    else if (document.layers && document.layers[objectID] {
     return document.layer[objectID]; // NN4
    }
    else {
     return false;
    }
   }
 (2) 객체 사용 방법
  구성요소의 내용을 바꾸거나 수정하는 innerText, innerHTML, outerText, outerHTML을
  사용하는 것은 원래 잘못된 것이다. 왜냐하면 이는 W3C DOM 표준이 아니고 MS DOM 이기 때문이다.
  firefox에서는 innerHTML만이 지원된다. 나머지는 지원불가!
  
  속성 사용
  1. x.id 나 x.style 같은 방법으로 먼저 속성을 찾는다.
  2. 값이 나오지 않으면 x.getAttribute(“align”)나 x.getAttributeNode(“align”).value 로 찾는다.
  3. 그래도 나오지 않으면 다른 속성 인터페이스를 시도하되, attributes[]는 절대 사용하지 않는다.
 

   function btn_add_onClick()   // Row 추가 function
    {
        tableID            = document.all.tb_title; // 테이블 ID
        var rowNum        = tableID.rows.length;
        var tableCell    = 7; //  테이블 셀 개수. (<td></td> 의 개수라고 보면됨)
        var newRowNum    = tableID.insertRow(rowNum);

        for(var j=0; j < tableCell ; j++)
        {
            newRowNum.insertCell(j);
        }

        newRowNum.className    = "table_content";  // sytle.css 에 정의되어있는..
        newRowNum.align             = "center";
        //newRowNum.style.background  = "#F0F0F0";
        newRowNum.height           = "24";
        newRowNum.cells[0].innerHTML  = "<input type='checkbox' name='chkbox'>";
        newRowNum.cells[1].innerHTML 
         = "<input type='text' value='正規Card' readonly style='border:0'
        onclick='btn_int_onClick ("+rowNum+");' style='cursor:hand' size='5'>";

        newRowNum.cells[2].innerHTML  = "<input type='text' name='emp_nm_"+rowNum+"'
        value='' readonly style='border:0' size='6' >"+
        "<input type='hidden' name='emp_no_"+rowNum+"' value='' readonly >"+
        "<input type='hidden' name='tel_no_"+rowNum+"' value='' readonly >";

        newRowNum.cells[3].innerHTML 
         = "<input type='text' name='dpt_nm_"+rowNum+"' value='' readonly style='border:0'
        size='15' >"+
         "<input type='hidden' name='dpt_cd_"+rowNum+"' value='' readonly >";

        newRowNum.cells[4].innerHTML  
        = "<input type='text' name='rank_nm_"+rowNum+"' value='' readonly style='border:0'
        size='5' >"+
        "<input type='hidden' name='rank_cd_"+rowNum+"' value='' readonly style='border:0'
        size='5' >";

        newRowNum.cells[5].innerHTML  
        = "<input type='text' name='floor_nm_"+rowNum+"' value='' readonly style='border:0' >"+
        "<input type='hidden' name='floor_cd_"+rowNum+"' value='' readonly style='border:0'  >";
       
        newRowNum.cells[6].innerHTML  
        = "<input type='text' name='inout_dept_nm_"+rowNum+"' value='' readonly style='border:0'
        size='25' >"+
        "<input type='hidden' name='inout_dept_cd_"+rowNum+"' value='' readonly >"+
        "<input type='hidden' name='approve_stat_"+rowNum+"' value='N'/>"+
        "<input type='hidden' name='issueReason_"+rowNum+"'value='' />"+
        "<input type='hidden' name='cardIssueTyp_"+rowNum+"' value='N' />"+
        "<input type='hidden' name='inouter_compnyNm_"+rowNum+"' value='' />";

          // cells[] 의 배열을 TableCell 변수와 맞게 조절한다.


    function btn_del_onClick()   // row 삭제 function
    {
        var count = 0;
        tableID       = document.all.tb_title;
        var rowNum    = tableID.rows.length;
   
        if(rowNum > 1){
            if(tableID.rows[1].cells.length == 1){
                alert("삭제 대상이 없습니다.");
                return false;
            }
        }
   
        for (var rowNum ; rowNum>1 ; rowNum--)
        {
            if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
            {
                count++;
            }
        }
        if( count ==0 ){
            alert("삭제할 항목이 없습니다.");
            return;
        }
        if(!confirm("삭제하시겠습니까?")) return;
   
        rowNum    = tableID.rows.length;
        for (var rowNum ; rowNum>1 ; rowNum--)
        {
            if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
            {
                tableID.deleteRow(rowNum-1);          // 체크된 Row 를 삭제
            }
        }
    }

----------------------------  여기까지 javascript Function 정의 --------------------------

<html>
<head></head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="BEC8D3" id="tb_title">
    <tr>
      <td>..</td>..<td>..</td> ....... 생략...
    </tr>
</table>
</body>
</html>

// function 에서 정의해준 table id 를 가진 테이블 하나가 있으면 됩니다.
각 option 에는 하나의 value 값을 가지게 되지만

value = "abc,bde,fag,e232,"

이런식으로 값을 줘서 넘긴 다음

" , " 를 기준으로 잘라서 쓰면 여러개의 value 를 넘기는 효과를 가질 수 있다.

<INPUT TYPE="text" NAME="text" size="8" style="border:0" READONLY>
출처 : http://www.cginjs.com

// 부모창에 들어 갈 내용


<script language="javascript">
// 이부분부터  수정할 필요 없습니다.
function getCookie(name) {
 var Found = false
 var start, end
 var i = 0
 
  while(i <= document.cookie.length) {
   start = i
   end = start + name.length
 
  if(document.cookie.substring(start, end) == name) {
   Found = true
   break
   }
   
   i++
   
  }
 
  if(Found == true) {
   start = end + 1
   end = document.cookie.indexOf(";", start)
    if(end < start)
    end = document.cookie.length
   return document.cookie.substring(start, end)
   }
  return ""
}
// 이부분 까지는 수정할 필요 없습니다.
 
function openPopup()
{
 var noticeCookie=getCookie("popexpire");  // 쿠키네임 지정
  if (noticeCookie != "no")
  window.open('pop.jsp','pop','width=350,height=400,top=50,left=150');
  // window.open('팝업창 웹페이지','윈도우명','width=350,height=400,top=50,left=150');
 }
 openPopup();  // 자동으로 팝업 띄우기
 
</script>



// 팝업된 창에 들어갈 내용

<script language="JavaScript"> 
 function setCookie( name, value, expiredays )
 {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
 }
 
 function closeWin()  {
 {
  if ( document.pop.notice.checked )  // 폼네임 cnjform 은 동일해야 합니다.
  setCookie("popexpire", "no" , 1);   // 부모창에서 지정한 쿠키네임과 일치 해야 합니다.
 }
 top.close();
 }
</script>

</head>
<body>

<form name="pop">
<input type="checkbox" name="notice" onclick="closeWin()">체크하면 오늘 하룻동안 페이지를 열지 않습니다.
</form>

+ Recent posts