'Web' 카테고리의 글 목록

Web

parseInt() 사용시 주의사항 2011.09.27
input type='file' 찾아보기 버튼을 이미지로 바꾸기. 2011.08.11
javascript rollover 2011.07.26
print page break (프린터 인쇄시 다음 페이지로 넘기기) 2011.07.18
javascript 공백제거(trim()), 숫자만 입력가능하게 (onlyNumber()) 2011.07.13
HTML Form 태그 여백 없애기 2011.07.13
Html 테이블 해더 고정하기 2011.07.12
Dom(Document Object Model) 노드 타입 2011.04.18
window.onload 이벤트 작성 2011.02.28
iframe 페이지 로딩시 리사이즈 자바스크립트 2011.02.10

parseInt() 사용시 주의사항

2011. 9. 27. 16:26

parseInt()를 사용시에 변환값으로 "07"과 같이 "0"으로 시작된 숫자를 변환할 경우 8진수로 변환처리하여
원하는 결과와 다른 결과를 리턴하게 된다.

javascript 엔진은 첫번째 스트링이 0x로 시작하면 16진수로, 0으로 시작하면 8진수로 가정하기 때문이다.

parseInt함수의 syntax

parseInt(string[, radix])
- string: 정수로 바꿀 대상 문자열
- radix: 문자열을 바꿀때 사용할 기수(optional)
- returns: 문자열을 parsing한 정수값(10진수) 또는 NaN

10진수인 경우에는 반드시 두번째 매개변수로 parseInt("07",10) 을 넣어줌으로서 명시적으로 10진수 변환

이런 소소한 실수로 인해 원인모를 버그로 고생하지 않길 바란다.

var strNum = "07";
parseInt(strNum, 10); //명시적으로 10진수 변환이란걸 지정하도록 하자.

input type='file' 찾아보기 버튼을 이미지로 바꾸기.

2011. 8. 11. 16:14

file, HTML, image, input

<HTML> 
<HEAD> 
<TITLE> input type='file'  찾아보기버튼을 이미지로 바꾸기 </TITLE> 
</HEAD> 
<BODY> 
<TABLE> 
     <TR> 
             <TD> 
                 <input type='file' name='hideFile' style='display: none;'>
                 <input type='text' name='file' id='file'>
             </TD> 
             <TD><img src='find.gif'  border='0' onclick='document.all.hideFile.click(); document.all.file.value=document.all.hideFile.value'> 
             </TD> 
     </TR> 
</TABLE>
            <script type="text/javascript" src="//t1.daumcdn.net/tiara/js/v1/tiara.min.js"></script>
            <script type="text/javascript">window.tiara = {"svcDomain":"user.tistory.com","section":"\ud648","trackPage":"\ud648_\ubcf4\uae30","page":"\ud648","key":"75479","customProps":{"userId":0,"blogId":"75479","role":"guest","filterTarget":false,"trackPage":"\ud648_\ubcf4\uae30"},"entry":[],"sentryDsn":"https:\/\/a53520229cd744e798d42900d76b0e2a@aem-ingest.onkakao.net\/713","kakaoAppKey":"b8aef3eeb03fa312b81795386484f051","appUserId":null};</script>
            <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-b091bd67f9e0a5d7fd759d3341eea8baec023557/blogs/script/tiara/tiara.min.js?_version_=tistory-b091bd67f9e0a5d7fd759d3341eea8baec023557" defer></script>
                        <script type="text/javascript">
                window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: 'tistory'}];
            </script>
            <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async></script><script type="text/javascript">if(window.console!=undefined){setTimeout(console.log.bind(console,"%cTISTORY","font:8em Arial;color:#EC6521;font-weight:bold"),0);setTimeout(console.log.bind(console,"%c  나를 표현하는 블로그","font:2em sans-serif;color:#333;"),0);}</script><iframe style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//guda.tistory.com/api" id="editEntry"></iframe>            <div class="#menubar menu_toolbar  toolbar_lb">
                                            <h2 class="screen_out">티스토리툴바</h2>
                                            <div class="btn_tool">
                    <button class="btn_menu_toolbar btn_subscription  #subscribe" data-blog-id="75479" data-url="https://guda.tistory.com" data-device="web_pc">
                        <strong class="txt_tool_id">내 남자의 길~!</strong>
                        <em class="txt_state">구독하기</em>
                        <span class="img_common_tistory ico_check_type1"></span>
                    </button>
                </div>
                                       </div>
                                       <div class="#menubar menu_toolbar "></div>
                                       <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-b091bd67f9e0a5d7fd759d3341eea8baec023557/blogs/script/menubar.min.js?_version_=tistory-b091bd67f9e0a5d7fd759d3341eea8baec023557"></script>        <div class="layer_tooltip">
            <div class="inner_layer_tooltip">
                <p class="desc_g"></p>
            </div>
        </div>
        <div id="tistoryEtcLayer" class="layer_post"></div><div id="tistorySnsLayer" class="layer_post"></div></BODY> 
</HTML>

javascript rollover

2011. 7. 26. 10:44

JavaScript, rollover, 롤오버

아래 자바스크립트는 드림위버에서 자동으로 생성시켜 주는 부분이다.
롤오버 이미지 관련 소스인데 웹사이트에 보면 흔히 있는 것을 볼 수 있다.

MM_swapImgRestore() : 원래 이미지로 되돌림.
MM_preloadImages() : 이미지를 미리 로딩해 놓음 (이미지를 바꿔줄때 속도를 빠르게 하기 위해서입니다)
MM_findObj(n, d) : 특정 개체를 찾기 위한 함수
MM_swapImage() : 이미지를 다른걸로 대체.

이를 다른 방법으로 교체하기 위해 아래와 같은 방법으로 변경하면 될듯 하다.^^

[출처] function MM_swapImgRestore() 외 설명|작성자 빛의여행

<p>
    <a href="#" onmouseover="document.btn.src='images/over.gif'" onmouseout="document.btn.src='images/on.gif'">
        <img src="images/on.gif" alt="" name="btn" />
    </a>
</p>
<hr />

<script type="text/javascript">
function over(idname){
    document.getElementById(idname).src = 'images/' + idname + '_over.gif';
}
function out(idname){
    document.getElementById(idname).src = 'images/' + idname + '_on.gif';
}
</script>
<p>
    <a href="#" onmouseover="over('menu1')" onmouseout="out('menu1')">
        <img src="images/menu1_on.gif" alt="" id="menu1" />
    </a>
</p>
<hr />

<script type="text/javascript">
function rollover(imgname){
    var objname    = document.getElementById(imgname);
    objname.onmouseover = function(){
        objname.src = objname.src.replace('_on.gif','_over.gif');
    }
    objname.onmouseout = function(){
        objname.src = objname.src.replace('_over.gif','_on.gif');
    }
}
</script>
<p>
    <a href="#"><img src="images/menu2_on.gif" alt="" id="menu2" /></a>
    <script type="text/javascript">rollover('menu2')</script>
</p>

print page break (프린터 인쇄시 다음 페이지로 넘기기)

2011. 7. 18. 18:17

CSS, print page break, 프린트

웹페이지를 인쇄할때 특정부분에서 다음 페이지로 인쇄하는 방법입니다.

block-level element 사이를 경계로 페이지를 나누기 때문에
반드시 block-level element에 지정해야 한다.
inline-level element인 span에 적용하면 다음 페이지로 넘어가지 않는다.

javascript 공백제거(trim()), 숫자만 입력가능하게 (onlyNumber())

2011. 7. 13. 18:15

JavaScript, onlyNumber, trim

HTML Form 태그 여백 없애기

2011. 7. 13. 17:42

form, HTML, 여백, 태그

HTML에서 Form태그는 기본적으로 Padding 값을 가지고 있다고 한다.
그래서 흔히 따로 여백이 없는데 디자인이 틀어지는 경우가 있다.
스타일에 여백을 없애주는 부분을 넣어주면 공백이 생기는걸 방지할수 있다.

<Form style="margin:0px;padding:0px;"> 또는 스타일 시트 부분에
form {margin:0px;padding:0px;} 이라고 추가 해 놓으면 된다.

Html 테이블 해더 고정하기

2011. 7. 12. 17:50

CSS, HTML, 헤더

Dom(Document Object Model) 노드 타입

2011. 4. 18. 17:27

DOM, JavaScript, 노드 타입

문서객체모델(Document Object Model, DOM)은 HTML과 XML 문서에 대한 프로그래밍 인터페이스
문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 프로그램에서 접근할수 있는 방법 제공

DOM 노드의 유형
1. Node.ELEMENT_NODE는 엘리먼트 노드 유형에 대한 상수
2. Node.ATTRIBUTE_NODE는 애트리뷰트 노드 유형에 대한 상수
3. Node.TEXT_NODE는 텍스트 노드 유형에 대한 상수
4. Node.DOCUMENT_NODE는 문서 노드 유형에 대한 상수

다른 노드 유형들도 많이 있지만 주로 이 네가지 유형을 다루기 때문에 예시 하지 않는다.

nodeType 속성
DOM 노드 유형에 대해 상수로 정의 되어 있으므로 모든 노드에서 사용할수 있는 nodeType 속성을
사용하여 위 상수와 비교 함으로서 노드 타입을 알수 있다.
var someNode = document.documentElement.firstChild; if (someNode.nodeType == Node.ELEMENT_NODE) { alert("We've found an element node named " + someNode.nodeName); } else if (someNode.nodeType == Node.TEXT_NODE) { alert("It's a text node; the text is " + someNode.nodeValue); } else if (someNode.nodeType == Node.ATTRIBUTE_NODE) { alert("It's an attribute named " + someNode.nodeName + " with a value of '" + someNode.nodeValue + "'"); }

Internet Explorer는 자바스크립트에서 Node 상수를 사용할때 에러를 보고 한다.
Internet Explorer 7.0부터 이러한 문제를 정정했다 하지만 보편적으로 사용하는 6.0에서는 정상작동 하지 않는다.
따라서 Node 사용을 피해야 할것이다. 그냥 이런 것이 있다고만 알아 두도록 하자.

window.onload 이벤트 작성

2011. 2. 28. 15:32

페이지 로딩시 실행될 스크립트 선언시 대부분 <body onload="함수명();"> 이렇게 작성하는데

브라우져별로 차이가 있어 정상작동 하지 않는 경우도 있으니 아래 코드처럼 작성하도록 하자.

iframe 페이지 로딩시 리사이즈 자바스크립트

2011. 2. 10. 15:40

iframe, JavaScript, resize

출처 : www.taeyo.net

부모 페이지 자바 스크립트

function reSize()

{

var ParentFrame = papermain.document.body;

var ContentFrame = document.all["papermain"];

ContentFrame.style.height = ParentFrame.scrollHeight + (ParentFrame.offsetHeight -

ParentFrame.clientHeight);

ContentFrame.style.width = ParentFrame.scrollWidth + (ParentFrame.offsetWidth -

ParentFrame.clientWidth);

}

아이프레임 안의 페이지의 자바 스크립트(제일 하단부에 넣으세요)

parent.reSize();

</script>

이렇게 아이프레임을 정했을때..

<IFRAME name=papermain src="post/list.asp?blogid=<%=blogID%>"

frameBorder=0 width=590 scrolling=no height=1024></IFRAME>

PREV 1 2 3 4 5 NEXT