javascript & HTML2006. 9. 27. 22:18

오늘 몰라서..한참을 헤멨던 것....-_-;;

1. 하고자 했던 것은, 평소에는 Mouse Over, Out 시에 이미지가 바뀌는 버튼이 선택되고 나면 바뀌지 않고 선택된 채로 남아있게 하는 . Onmouseover이벤트에 함수가 있는것을 지우는 것은 간단했다. onmouseover=null; 했더니 바로 없어졌으니까. 그런데 이렇게 null버튼에 다시 이벤트를 주는 것에서문제가 발생했다. 처음 코드는 어땠냐면..


button.onmouseover = "changeImage()";


하지만, 이렇게 하면.. changeImage()함수가 아니라, 문자열로 인식되기 때문에 아무런 효과가 없다..-_-;;

구글에서 한참 뒤진 결과..방법을 알게 되었다.


button.onmouseover = function() { changeImage() };


이렇게 function() 붙여줘야, 함수라는 개체로 인식이 된다는 것...


2. 그런데, 이것보다 좋은 방법을 조금 있다가 누군가에게서 배워서 알게 되었다는 것...-_-;;;

attachEvent() 라는 메서드를 쓰면 된다.


,


button.attachEvent('onmouseover',changeImage);

* 그런데, attachEvent는.. IE에서만 된다...FireFox를 생각한다면 쓰면 안 됨...(현재 프로젝트는 Outlook에 있는 IE만을 Target으로 하고 있기 때문에 그냥 뒀다..)

Posted by kkongchi
javascript & HTML2006. 9. 9. 23:21

Span 태그와 Div 태그는 실제로 아주 비슷하고 기능상으로 거의 차이가 없다. 하지만 이 두 개의 태그는 사실 매우 다르다. http://webdesign.about.com/od/htmltags/a/aa011000a.htm - 여기에 매우 설명이 잘 되어 있다.

이 문서에 의하면,

The <div> tag defines logical divisions in your Web page. In terms of layout, the <div> tag does only one thing, it determines the alignment of that section of your page.
Div 태그는 웹 페이지에서 논리적인 구획을 정의한다. 레이아웃 적인 측면으로 보면, Div 태그는 한 가지 일만을 하는데, 그것은 바로 페이지의 페이지의 섹션 정렬을 지정하는 것이다.

The <span> tag has very similar properties to the <div> tag, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes.
Span 태그는 div 태그와 매우 비슷한 속성을 가지는데, 그것이 감싸고 있는 텍스트들의 스타일에 영향을 준다. Span 태그 안의 아이템들은 특정한 스타일 속성을 가지게 되거나 정렬될 수 있다.

The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts as a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style and align rules to whatever is within the <span>.
Span 태그와 div 태그의 가장 큰 차이는, span 태그는 자체로는 어떤 기능도 하지 않는다는 것이다. Div 태그는 마치 한 문단처럼 행동하는데, 문서의 논리적인 구획을 정의하기 때문이다. Span 태그는 그 내부의 요소들이 특정한 스타일이나 정렬 규칙을 가진다는 것을 브라우저에게 알려줄 뿐이다.

그래서 (내가 몇 번 겪었던 일이긴 한데) Div 태그를 두 개 연속으로 쓸 경우에는 줄나눔이 발생을 하게 된다.

자, 그래서

<div>div1-text</div><div>div2-text</div>
<br>
<br>
<span>span1-text   </span><span>span2-text</span>

이렇게 작성된 HTML의 경우, 이렇게 보인다.






요즘은 Ajax 때문에...HTML에 관심이 많다...ㅎㅎㅎ

Posted by kkongchi
javascript & HTML2006. 3. 11. 22:58
화면을 프레임으로 분할하는 것은,
사용자 편의성이나 네트워크 전송량을 줄이기 위해서 흔히들 쓰는 방법이다.

그런데 이렇게 프레임으로 분할했을 때,
상위 프레임의 요소를 자바 스크립트로 접근해야 할 때가 있다.

즉, 프레임셋을 구성하는 페이지의소스 중에서 id가 HiddenValue라는 요소가 있어서,
그 하위 프레임에서 그 값을 읽어서 사용해야 한다라고 가정을 하자.

이럴 때는 아래 코드처럼
window.parent.document를 사용해서 상위 프레임을 접근해야 한다.

function btnTest_onclick
{
  alert(window.parent.document.all.item("hdHiddenValue").value);
}

Posted by kkongchi
javascript & HTML2006. 3. 11. 15:05

javascript에는 Left, Right 함수가 없다.. 하지만, 코딩하다보면 필요한 때가 가끔..있다..

http://www.devx.com/tips/Tip/15222 - 요 사이트에서 찾았다.
당연히 저작권은 devx 와 article의 저자에게..

  1. function Left(str, n){
  2. if (n <= 0)
  3.   return "";
  4. else if (n > String(str).length)
  5.   return str;
  6. else
  7.   return String(str).substring(0,n);
  8. }
  9. function Right(str, n){
  10.   if (n <= 0)
  11.      return "";
  12.   else if (n > String(str).length)
  13.      return str;
  14.   else {
  15.      var iLen = String(str).length;
  16.      return String(str).substring(iLen, iLen - n);
  17.   }
  18. }
 
Posted by kkongchi
javascript & HTML2006. 3. 10. 17:35

아래 코드는 XmlHttp를 사용해서, 웹 페이지를 Post 방식으로 호출하는 아주 간단한 코드이다.

이런 방식을 사용해서

웹사이트 자동 로그인을 한다거나(아래 코드처럼),

혹은 웹 페이지의 특정 데이터를 Scrapping해올 수 있다.


var xml;

xml = new ActiveXObject('Microsoft.XMLHTTP');

xml.Open("POST", "http://www.test.com/login.aspx", false);

xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xml.Send("id=kkongchi&pw=kkongchipw");


Get방식을 사용할 때는 이렇게...


var xml;

xml = new ActiveXObject('Microsoft.XMLHTTP');

xml.Open("GET", "http://www.test.com/data.aspx?id=1", false);

xml.Send();

Posted by kkongchi