구슬이네 IT & Media / IT 와 미디어를 바라봅니다

'IT 개발/HTML&JS'에 해당되는 글 8건

  1. 2013.04.05 셀렉트박스를 동적으로
  2. 2013.02.05 자바스크립트로 trim함수 구현
  3. 2012.02.10 AJAX HttpRequest가 어떻게 통신하는지 분석해보자~
  4. 2011.10.06 [웹표준] 제프리 젤드만의 웹표준 가이드 내용
  5. 2011.07.07 "이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법
  6. 2011.05.26 인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"
  7. 2011.05.17 자바스크립트 form값 접근 총정리
  8. 2011.04.27 td를 클릭하면 관련있는 tr의 배경색이 바뀌는 자바스크립트

셀렉트박스를 동적으로

IT 개발/HTML&JS 2013. 4. 5. 09:18


참고문서 : http://pjcome.tistory.com/131

 

자바스크립트 option 삭제 및 추가

 

        var frm = document.forms.frm;

        var length = frm.exam_date.options.length;

 

        for (var index=0;index<length ;index++)

        {

            frm.exam_date.options.remove(0);

        }

 

        var i = 0;

 

        for (i==0;i<app_exam.length ;i++ )

        {

            var option = new Option();

            option.value = i;

            option.text = app_exam[i];

            frm.exam_date.options.add(option);

        }

 

'IT 개발 > HTML&JS' 카테고리의 다른 글

자바스크립트로 trim함수 구현  (0) 2013.02.05
AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
,

자바스크립트로 trim함수 구현

IT 개발/HTML&JS 2013. 2. 5. 15:51


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

//function으로 사용하기1

function trim(str){

   //정규 표현식을 사용하여 화이트스페이스를 빈문자로 전환

/*

replace(/^\s*|\s*$/g, '')

^ : 문자열의 시작

\s* : 임의의 개수의 공백 문자, \s 가 공백, *가 임의의 개수

| : OR 기호

$ : 문자열의 끝

g : 문자열의 모든 부분에 걸쳐 글로벌하게 치환

'' : 치환할 빈 문자열임. 작은따옴표2개임. 빈 문자열로 치환(replace)하면 문자열 삭제가 됨


즉, 문자열의 첫부분에 붙은 공백들과, 끝부분에 붙은 공백들을 모두 삭제하라는 뜻이 됩니다.

*/

   str = str.replace(/^\s*/,'').replace(/\s*$/, ''); 

   return str; //변환한 스트링을 리턴.

}


//프로토타입에 정의하여 사용하기...



function goClick()

{

//alert(document.all.bb.value);

document.all.cc.value = trim(document.all.bb.value);

}


//-->

</SCRIPT>

 <BODY>

  <textarea name="bb" rows=10 cols=50></textarea>

<input type="button" onclick = "goClick();" value="클릭">


  <textarea name="cc" rows=10 cols=50></textarea>


 </BODY>

</HTML>


'IT 개발 > HTML&JS' 카테고리의 다른 글

셀렉트박스를 동적으로  (0) 2013.04.05
AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
,

AJAX HttpRequest가 어떻게 통신하는지 분석해보자~

IT 개발/HTML&JS 2012. 2. 10. 14:52


Ajax가 신기하다는 것을 뒤늦게 깨닿고 공부중입니다.

그런데 웹사이트를 Refresh하지 않고 데이터를 가져오는게 장점인데. 과연 어떻게 하는 것일까? XML 통신인것 같긴 한데 한번 분석해보자.

우선 패킷 캡쳐를 하기 위해서 와이어샤크 (이전에 이더리얼) 을 사용해서 캡쳐시작.

그리고 예제로 만든 웹주소 실행

http://easystudy.cafe24.com/hp41/test_ajax/ajax_basic1.htm

 

function getServerTime() {
    var myurl = 'ajax_basic1_telltimeXML.php';
    myRand = parseInt(Math.random() * 999999999999999);
    var modurl = myurl + "?rand=" + myRand;
    http.open("GET", modurl, true);
    http.onreadystatechange = useHttpResponse;
    http.send(null);
}

function useHttpResponse() {
    if (http.readyState == 4) {
        if(http.status == 200) {
            var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
            document.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
        }
    } else {
        document.getElementById('showtime').innerHTML = '<img src="ajax_basic1_loader.gif">';
    }
}
 
ajax_basic1_telltimeXML.php

<?PHP
header('Content-Type: text/xml');
sleep(1); //화면에 바로 보이기 때문에 약간 딜레이 시킴.
echo "<?xml version=\"1.0\"?><clock1><timenow>".date('H:i:s')."</timenow></clock1>";
?>

분석해보니 추가적으로 데이터를 가져오는 부분도 다른 프로토콜이 아닌 
그냥 HTTP 프로토콜로 해당 페이지를 가져옴 (ajax_basic1_telltimeXML.php) 
하지만 웹브라우저는 그 부분만 알아서 읽고 화면전체를 refresh하지는 않는다. 
image
 

image

 

 

GET /hp41/test_ajax/ajax_basic1_telltimeXML.php?rand=692866095308821 HTTP/1.1

Accept: */*

Accept-Language: ko

Referer: http://easystudy.cafe24.com/hp41/test_ajax/ajax_basic1.htm

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; IPMS/C8280A0A-14F34993EAE-000000464331; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; Tablet PC 2.0)

Host: easystudy.cafe24.com

Connection: Keep-Alive

Cookie: PHPSESSID=f42f176f81df41ca367267e856b133e6; __utmc=210374218; ADMINHOSTINGID=b0dVLzPlD9aOiju6Xg%3D%3D; __utma=210374218.1550145776.1328834340.1328834340.1328847559.2; __utmz=210374218.1328834340.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); cafe24SaveId_chkBox=Y; cafe24SaveId=easystudy

 

HTTP/1.1 200 OK

Server: apache

Date: Fri, 10 Feb 2012 05:33:52 GMT

Content-Type: text/xml

Transfer-Encoding: chunked

Connection: keep-alive

P3P: CP='NOI CURa ADMa DEVa TAIa OUR DELa BUS IND PHY ONL UNI COM NAV INT DEM PRE'

X-Powered-By: PHP/5.2.9p2

 

41

<?xml version="1.0"?><clock1><timenow>14:33:52</timenow></clock1>

0

 

GET /hp41/test_ajax/ajax_basic1_loader.gif HTTP/1.1

Accept: */*

Referer: http://easystudy.cafe24.com/hp41/test_ajax/ajax_basic1.htm

Accept-Language: ko-KR

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; IPMS/C8280A0A-14F34993EAE-000000464331; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3; Tablet PC 2.0)

Accept-Encoding: gzip, deflate

If-Modified-Since: Fri, 10 Feb 2012 05:17:55 GMT

If-None-Match: "26449b-c88-4f34a883"

Host: easystudy.cafe24.com

Connection: Keep-Alive

Cookie: PHPSESSID=f42f176f81df41ca367267e856b133e6; __utmc=210374218; ADMINHOSTINGID=b0dVLzPlD9aOiju6Xg%3D%3D; __utma=210374218.1550145776.1328834340.1328834340.1328847559.2; __utmz=210374218.1328834340.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); cafe24SaveId_chkBox=Y; cafe24SaveId=easystudy

 

var timeValue = http.responseXML.getElementsByTagName("timenow")[0];

여기가 실행되면서

<?xml version="1.0"?><clock1><timenow>14:33:52</timenow></clock1>

여기의 <timenow> 태그 안의 값을 읽어와서 timeValue 변수에 입력

 

여기서 다른 참고글을 읽으면 이해가 간다

http://cafe.naver.com/neloi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=172&

즉 데이터를 요청하는건 똑같이 HTTP 방식이 맞는데 클라이언트인 웹브라우저에서 자바스크립트의 getXMLHTTPRequest 를 이용하면 웹사이트 전체를 refresh하지 않고 내부적으로 데이터를 가져올 수 있고 그 가져온 데이터를 div 태그와 innerHTML 를 이용해서 받은 값을 화면에 표시를 해준다.

'IT 개발 > HTML&JS' 카테고리의 다른 글

셀렉트박스를 동적으로  (0) 2013.04.05
자바스크립트로 trim함수 구현  (0) 2013.02.05
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
,

[웹표준] 제프리 젤드만의 웹표준 가이드 내용

IT 개발/HTML&JS 2011. 10. 6. 08:52



웹표준에 대해서 필요성은 이해가 되지만 구체적인 사항이 궁금했었는데 책을 보면서 궁금증이 조금씩 풀리고 있습니다. 

책의 내용을 다 정리할 순 없고, 제가 평소에 몰랐던 것들을 위주로 정리해보겠습니다. 

1. HTML을 사용하지말고 XHTML로 바꾸자 
현재 사용하는 HTML4 보다는 XHTML로 바꾸자.

2. 구조적으로 요소를 사용하자
div - 문서안에 유일한 id를 가짐
class - 문서안에 여러개의 같은 id를 가질 수 있음


3. 다음 태그를 쓰지말고 다음 태그를 써라

<b> -> <strong> </strong>
<br /> -> <p> </p>
<font>
<bgcolor>

4. css를 사용하라
css에 많은 것들을 정의해라. 


5. table에 요소들을 나열하지 말고 css에 정의하라

테이블 레이아웃을 만들때는 가볍고 접근성이 있으면서, 표준을 지키게 만들어야 한다
css 레이아웃을 잘 만들어서 똑같이 보이게 할 수 있다. 


6. 테이블 없이 이미지 분류하기

테이블에 img 요소를 넣지말고, <div></div> 사이에 <img>요소를 넣어라

7. alt를 사용해라. 

8. id를 사용하라

9. 이미지맵을 사용하지 마라

용량을 많이 차지함

10. css를 잘못 사용하지마라

스타일을 마크업에 직접 사용하는 방법은 전송량이 오히려 더 늘어남





*. XHTML로 바꿀때의 가이드라인

~~~

 

'IT 개발 > HTML&JS' 카테고리의 다른 글

자바스크립트로 trim함수 구현  (0) 2013.02.05
AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
자바스크립트 form값 접근 총정리  (0) 2011.05.17
,

"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법

IT 개발/HTML&JS 2011. 7. 7. 14:04



인터넷 익스플로러에서 자바스크립트의 소요시간이 오래 걸리는 경우에는

이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다

라는 메시지가 나오면서 Y를 눌러야 진행된다. 만약 이 메시지가 나오지 않고 진행되게 하려면 다음과 같은 조치를 해주어야 한다.

그러나 근본적인 해결책은 이런 메시지가 나오지 않도록 하는 것이라고 생각한다. 왜냐하면 이건 아래의 조치를 한 PC에서만 정상동작하기 때문이다. 프로그램을 고쳐서 이 메시지가 안나오게 해야 한다.


클라이언트 입장에서 조치법

(1) 익스플로러에서 - 도구 - 인터넷옵션 - 고급 - 모든 스크립트 오류에 관련된 알림 표시에 체크 해제

(2) 아래의 사이트로 가서 프로그램을 설치하던가 레지스트리를 수동으로 바꿔서 메시지 자체를 무시하도록 하는 방법

MS 사이트 참고문서 : http://support.microsoft.com/kb/175500



'IT 개발 > HTML&JS' 카테고리의 다른 글

AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
자바스크립트 form값 접근 총정리  (0) 2011.05.17
td를 클릭하면 관련있는 tr의 배경색이 바뀌는 자바스크립트  (0) 2011.04.27
,

인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"

IT 개발/HTML&JS 2011. 5. 26. 08:54


페이지나누어출력.htm


<p> 나 <br>이나 <table>등 태그에 style로 적용하면 거기서부터는 새로운 페이지에서 "인쇄가 됨"

다만 테이블이 큰 경우에는 생각대로 안먹는 경우가 있었는데. 그때는 <br style="page-break-before: always;"> 해주니까 잘 구분이됨

주의사항은 css로 제어하기 때문에 웹 브라우저의 종류에 따라서 동작이 틀릴 위험성이 상당히 높음. 그래서 관리자 기능이라던가 한정된 사용자가 이용할때만 사용하는 것이 좋음


 <p style="page-break-before: always;">

Value별 설명 (* 출처 : Hooney - http://hooney.net/docs/Css/Page-break-before)
auto : 자동으로 계산하도록 지정
always : 앞에서 항상 분리하도록 지정
avoid : 앞에서 절대 분리되지 않도록 지정
left : 앞에서 분리된 페이지가 왼쪽 면에 위치하도록 지정
right : 앞에서 분리된 페이지가 오른쪽 면에 위치하도록 지정
inherit : 부모 요소의 값을 상속하도록 지정

 
* ie7에서 안먹힐 때

http://djawl_2.blog.me/50081360095

* 크롬에서 태그가 안먹는 문제

http://fendee.egloos.com/10711272

'IT 개발 > HTML&JS' 카테고리의 다른 글

AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
자바스크립트 form값 접근 총정리  (0) 2011.05.17
td를 클릭하면 관련있는 tr의 배경색이 바뀌는 자바스크립트  (0) 2011.04.27
,

자바스크립트 form값 접근 총정리

IT 개발/HTML&JS 2011. 5. 17. 15:20



HTML 안에서 요소의 접근

 

폼값에 접근하는 방법 : form의 이름 또는 div 등은 바로 접근가능, form밑에는 계층적으로 접근해야 함

document.all.폼이름.폼안에요소.value <-- form의 이름 또는 div 등은 바로 접근가능, form밑에는 계층적으로 접근해야 함
var frm = document.forms.폼이름;
alert(frm.속성이름.value);

한 페이지안의 모든 속성에 접근하는 방법 : getElementById("필드명") 으로 접근함

document.getElementById("LTSF1").value

parent.document.view.location.href="http://www.yahoo.co.kr"; <-- iframe에서 부모.다른프레임 속석 접근

 
프레임, 아이프레임 간의 속성들의 접근 


location.reload();    // 새로고침 

top.document.프레임이름.location.reload();    // 프레임 새로고침 

top.document.location.reload();    // 프레임 전체 새로고침 

opener.location.reload();    // 부모창 새로 고침

<iframe name="INPUTLIST_VIEW" frameborder="0" height="500" marginheight="0" marginwidth="0"
src="./inputproduct/view_admin_todayinputlist_tree.php" width="500" topmargin="0"></iframe>

INPUTLIST_VIEW.location.href="./marketpaper/view_clientlist.php"; 이렇게 쓰면된다




 

 


 

'IT 개발 > HTML&JS' 카테고리의 다른 글

AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
td를 클릭하면 관련있는 tr의 배경색이 바뀌는 자바스크립트  (0) 2011.04.27
,

td를 클릭하면 관련있는 tr의 배경색이 바뀌는 자바스크립트

IT 개발/HTML&JS 2011. 4. 27. 21:32




 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function goFind(key)
{
 eval("document.all."+key+".style.backgroundColor = '#CC0000'");
}
//-->
</SCRIPT>
 <BODY>
 <TABLE border="1" width="500">
 <TR>
 <TD>1</TD>
 <TD onclick="goFind('D20110415')";>20110405</TD>
 <TD>3</label></TD>
 </TR>
 <TR id ="D20110415">
 <TD>4</TD>
 <TD>5</TD>
 <TD>20110405</TD>
 </TR>
 <TR>
 <TD>7</TD>
 <TD>8</TD>
 <TD>9</TD>
 </TR>
 </TABLE>
 </BODY>
</HTML>

'IT 개발 > HTML&JS' 카테고리의 다른 글

AJAX HttpRequest가 어떻게 통신하는지 분석해보자~  (0) 2012.02.10
[웹표준] 제프리 젤드만의 웹표준 가이드 내용  (0) 2011.10.06
"이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다" 대처법  (0) 2011.07.07
인쇄시 html 태그로 다음 페이지로 넘기기 style="page-break-before: always;"  (0) 2011.05.26
자바스크립트 form값 접근 총정리  (0) 2011.05.17
,

티스토리툴바