WebDevelop2009. 7. 21. 18:50

웹페이지 로드 - 조금더 빠르게...

개발자라면 누구든 생각하는 부분이지만.. 조금더 빠르게, 최적화된 프로그램을
꿈꾸는것은 당연한것이라고 생각합니다.

웹개발자도 마찬가지입니다.
오히려 일반 어플리케이션보다 웹에서의 페이지 로딩 속도는
서로간의 경쟁이 될정도로(경쟁사이트라면..)  웹개발자의 가장 큰 이슈라고 할수 있다고 생각합니다.

그렇다면 어떻게 해야지 조금더 빠르게..
그리고 최적화된 페이지를 제공할수 있을까요?

제가 정리하지 않았습니다. ^^;

http://www.ibm.com/developerworks/kr/library/wa-speedweb/index.html

위의 링크된 페이지를 가시면 자세한 설명이 나와있습니다.
읽어보시고 적용하시고 차이를 느껴보세요.
알고 있는 사실도 있고, 모르고있던것도 있는데.. 많은 도움이 되었습니다.
저작자표시 비영리 변경금지
Posted by 햇 님
WebDevelop/JavaScript2009. 1. 15. 17:02

parent , opener 헷갈려..

parent[prnt,pr- / pr-]

  • 1. 어버이(아버지 또는 어머니); (~s) 양친.
  • 2. 조상, 선조.
  • ━ 근원[모체]의; 모(母)….
  • ━ …의 어버이 구실을 하다.

자바스크립에서 parent 라는 property가 있다.
흔히 알고 쓰는 단어로 위에서 쓰여진것처럼 아버지를 지칭하는 단어로 잘 알고있고..
자바스크립트에서 쓰일때 언뜻.. 모체의 라는 뜻 때문에..
나는 자주 혼동을 하곤 한다..
새창을 열게되었을때..   window.parent.name  을 alert 으로 보게 되면
내 예상으로는 모체/근원의 뜻으로 보자면 새창에서의 parent는 새창을 여는 링크를 제공하는 페이지가 아닐까?
하는 생각을 하고 죽어라고 찍어보았지만..
결국 나오는건 현재창의 이름만 계속 나왔다..  -_-;
물론 삽질이었다...

내가 원하는 결과를 얻기위해서... 즉 새창을 여는 링크를 제공한 페이지를 제어할 객체는
window.opener   를 사용해야 했다.;

opener[upn]

  • 1. 《복합어로》 여는 사람; 개시하는 사람; 여는 물건[도구], 병[깡통] 따개.
  • 2. (연극 따위의) 최초의 공연물; (스포츠의) 개막전.
뭐 의미로 따지자면.. opener 도 맞는거 같은데;;;

어찌되었든... 매번 헷갈린다..
이젠좀 삽질 안할때도 됐건만...  ㅎㅎ

삽질하기전에 잘 검색해보고 뒤져봐야겠다,,,   좀만 찾아보면 좋은글들이 많고도 많다!! ㅎ



Posted by 햇 님
WebDevelop/JavaScript2008. 9. 24. 17:29

JavaScript 에서 Event 처리


일단은 브라우저별로 이벤트의 처리가 달라진다.
간단하게 인터넷 익스플로러(IE) 와 파이어폭스(F) 에서 이벤트 처리가 틀려진다.

여기서 이벤트란것은..
마우스, 키보드 등과같은 사용자 입력장치를 통해서 브라우저가 인식하는 이벤트
즉, 사용자의 입력에 관한 이벤트가 되겠다.

일단 두 브라우저는 이벤트가 생기고,  생겨난 이벤트를 인식하는 부분에서 차이가있다.

IE 의 경우는 window.event 가
F 의 경우는 event 객체가 인식을 한다.

물론 두 이벤트가 똑같은 속성이나 매소드가 있는지는 잘 모르겟다.
다만 내가 주로 쓰는 keyCode 값에 대해서 생각해보자면..
window.event 와 event 객체값을 잘 설정하면.. IE 에서도 F 에서도 동작할수 있는것이다.

소스는 간단하다 .

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            function doCheckKeyCode(e) {
                var E =    e ? e : window.event;
                alert(E.keyCode);
            }
        </script>
    </head>
    <body>
        <input type="text" onkeydown="doCheckKeyCode(event)" />
    </body>
</html>
동작 자체는 F 에서 사용하는 것과 같이하여 event 객체를 인자로 넘긴다.
그리고서는 자바스크립트 함수로 넘어간 인자값이 존재하는지 파악하여서..
있으면 인자값을 그대로 변수 E 에 대입하고, 존재하지 않으면 window.event 를 대입한다.

그렇게 되면  IE 든 F 든 keyCode를 동일하게 얻을수 있다.
Posted by 햇 님
WebDevelop/JavaScript2008. 6. 4. 15:45

체크박스 전체선택, 해제 하기

가끔씩보다 보면은 게시판이라던가 주문내역이라던가 하는부분에
전체선택 이라는 기능이 있는것을 본적이 있을것이다.

꽤나 쓸만한 이 기능.. 지금 만들어봅시다~


<HTML>
 <HEAD>
  <TITLE> checkbox 전체선택 </TITLE>
 </HEAD>
<script type="text/javascript">
function doCheckAll(all) {
    var obj = document.getElementsByName("chkTest");
    var val = true;
    if( all.checked == false ) {        // 값이 체크가 안되어져있으면
        val = false;                            // 전체선택을 해제 하게..
    }
    for (var i =0 ; i < obj.length ; i++ ) {
        obj[i].checked = val;
    }
}
</script>
 <BODY>
    <input type="checkbox" name="chkAll" onclick="doCheckAll(this);"> 전체선택 <br />
    <input type="checkbox" name="chkTest" value="1"> 1번 <br />
    <input type="checkbox" name="chkTest" value="2"> 2번 <br />
    <input type="checkbox" name="chkTest" value="3"> 3번 <br />
    <input type="checkbox" name="chkTest" value="4"> 4번 <br />
    <input type="checkbox" name="chkTest" value="5"> 5번 <br />
    <input type="checkbox" name="chkTest" value="6"> 6번 <br />
    <input type="checkbox" name="chkTest" value="7"> 7번 <br />
    <input type="checkbox" name="chkTest" value="8"> 8번 <br />
    <input type="checkbox" name="chkTest" value="9"> 9번 <br />
    <input type="checkbox" name="chkTest" value="10"> 10번 <br />
 </BODY>
</HTML>



이렇게 테스트 코드를 만들어 보았습니다.
음 이건 약간 응용이라고 할 수 있는거죠. 체크박스 하나만 선택되는 것을 배우면서
getElementsByName() 을 써보았으니까요 ^^

실제 응용하게된다면.. 체크된값들만 사용해서 해당되는 value 값의 내용을
DB에 update, delete 할 수도 있겠죠? ^^

Posted by 햇 님
WebDevelop/JavaScript2008. 5. 14. 20:33

select 태그에서 선택된 option 값 알아보기

코드는 아래와 같습니다.

<html>
<head>
<script type="text/javascript">
function getIndex()
  {
  var x=document.getElementById("mySelect");
  alert(x.options[x.selectedIndex].value);
  }
</script>
</head>
<body>
Select your favorite fruit:
<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option">
</body>
</html>

이 소스는 인터넷에 있는 소스를 약간 수정하여서 써보았다.
원본소스는 아래의 링크로 가보면 있다.
http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

EditPlus 혹은 기타 편집기 (Notepad도 좋다.) 에 소스를 복사하여 넣은뒤에
적당한 이름을 붙이고 html 파일로 저장해보자.

그리고 html 파일을 실행하여보면

사용자 삽입 이미지


위의 그림과 같이 셀렉트박스의 내용을  선택하고 버튼을 누르면
선택된 값의 value 값이 출력되는것을 볼 수 있다.

이런저런 응용은 사람마다 틀릴것이지만 기본은 이렇다는것이다. ^^

Posted by 햇 님
MyPlace/FavorutesSite2008. 5. 14. 14:54

gotAPI/HTML - Instant search in HTML and other developer documentation

사용자 삽입 이미지


http://www.gotapi.com/html

이곳은 각종 언어들 및 스크립트 언어 등등 다양한 언어들의 인스턴스 및 함수 등의
내용을 잘 정리하여서 보여주고 있으며,
주로 보는 곳은 HTML/DOM Object 쪽이나.. ORACLE 함수 관련된 부분을
자주 본다. 설명도 있거니와, 그에따른 실제 예제도 적혀있어서
따라하거나 보고 사용하기가 쉽다!

eng)
Quick reference search for HTML (including HTML, CSS, JavaScript, AJAX,  Web2.0)
and other software/technologies

이곳은 영문 사이트다~
Posted by 햇 님

티스토리툴바