jQuery를 사용하여 팝업 배경에 뿌연 효과를 부여한 레이어 팝업 레이어 팝업을 사용할 때 팝업 배경에 뿌연 효과를 부여한 후 레이어 팝업을 출력하기 위한 방법 ■ 레이어 팝업에 사용할 태그 구성 <div id="layerpopup"> <div class="mask"></div> <div class="window"> 확인 / <span class="close">x닫기</span> </div> <div class="uplink">시작하기<.. Java Script & DOM/jQuery 2011.02.22
트리구조를 활용해 자식 노드에 접근하는 방법 HTML 문서는 트리구조로 이루어져 있다. 트리구로를 활용해 자식 노드에 접근할 수 있는데 방법은 아래와 같다. ■ HTML 문서 구성 <ul onclick="test(this);"> <li> <a> 텍스트 </a> </li> </ul> ■ 위 HTML 문서의 구조상 자식에 접근하는 방법 ul을 기준으로 첫번째 자식에 접근하기 위해서는 .. Java Script & DOM/HTML DOM 2011.01.13
객체에 대한 정보를 확인하는 방법 DOM 객체를 사용하여 노드의 정보를 확인할 수 있다. 방법은 아래와 같다. ■ HTML 태그 구성 <input type="text" name="nameAtt" value="valueAtt" onclick="test(this);" /> input 엘레멘트에 마우스 클릭 이벤트를 연결해 노드의 정보를 출력한다. ■ 자바스크립트 함수 구성 function test(obj) { var txt = ""; // 객체의 기본 정보.. Java Script & DOM/HTML DOM 2011.01.13
이벤트와 함수를 연결할 때 'this'를 인자를 주는 방법 이벤트와 자바스크립트 함수를 연결할 때 함수의 인자를 'this'를 사용하면 이벤트가 발생한 노드를 전달한다. 태그 이벤트와 함수를 연결할 때 함수의 인자로 'this'를 준다. <a onclikc="testSelf(this)">자신을 전달하는 노드</a> 스크립트 함수는 아래와 같다. function testSelf( obj ) { var txt = obj.innerHTML; al.. Java Script & DOM/Java Script 2011.01.06
팝업창 생성 방법 브라우저에서 새로운 팝업창을 생성하기 위해서는 window 객체의 open()메소드를 사용한다. open()메소드의 파라미터 open("url", "name", "윈도우 속성 문자열"); ‘url’은 새로운 팝업창이 출력한 내용을 가진 페이지의 주소를 나타내며, ‘name‘은 팝업창이 출력되는 타겟를 지정하는데 링크와 같이 _blank는 새.. Java Script & DOM/Java Script 2010.12.16
Form 객체 Form은 서버에 데이터를 전송하기 위해 사용되는 HTML 엘레멘트이다. form객체는 HTML문서의 form을 나타낸다. form는 사용자의 입력값의 수집을 위해 사용되며 input 엘레멘트에는 텍스트 필드(text field), 체크박스(checkbox), 라디오 버튼(radio button), 서밋 버튼(submit) 등이 있다. 또한 폼은 선택 메뉴(select menu), 텍.. Java Script & DOM/HTML DOM 2010.12.16
문서내에서 주어진 엘레멘트를 모두 반환하는 getElementsByTagName() getElementsByTagName() 메소드는 태그의 이름을 매개변수로 하여 태그요소의 배열을 반환하는 메소드입니다. 반환된 배열을 통해 노드에 접근하는 예제입니다. <html> <head> <title>Insert title here</title> <script type="text/javascript"> // 태그요소의 ID를 알아보는 함수. 출력은 경고창으로 나타냄 f.. Java Script & DOM/HTML DOM 2010.12.16
HTML 엘레멘트의 텍스트 노드를 가리키는 innerHTML 속성 innerHTML 속성은 태그의 텍스트 내용을 쉽게 접근하기 위한 HTMLElement 객체의 속성이다. innerHTML 속성을 사용하면 텍스트 노드의 내용을 변경하거나 반환할 때 보다 쉽게 접근할 수 있다. 또한, innerHTML 속성을 사용하면 웹 페이지를 더욱 동적으로 변경할 수 있다. <html> <head> <script type="text/javascr.. Java Script & DOM/HTML DOM 2010.12.16
HTML DOM을 사용하여 HTML 문서의 노드에 접근하기 HTML DOM은 노드에 접근하기 위해 document 객체의 메소드를 사용한다. ■ getElementById("id"); document.getElementById("id") 문서 안에 있는 노드 중에 파라미터로 전달한 id속성의 값을 사용하는 노드를 반환하는 메소드이다. 이 때 문서에 해당 id 속성을 가진 태그가 존재해야 한다. 없다면 객체 오류를 발생한다. id .. Java Script & DOM/HTML DOM 2010.12.16
HTML 엘레멘트를 나타내는 HTMLElement 객체 DOM은 모든 HTML 엘레멘트를 객체(Object) 또는 노드(Node)로 본다. 객체는 프로퍼티와 메소드를 가지고 있다. DOM에서는 HTML 엘레멘트 객체를 HTMLElement Object라고 부르며, 엘레멘트 객체가 가지는 속성과 메소드는 다음과 같다. HTMLElement 객체 컬렉션 컬렉션 설명 attributes[] 엘레멘트가 가진 속성의 배열을 반환.. Java Script & DOM/HTML DOM 2010.12.16