'프로그래밍/JavaScript' 카테고리의 글 목록

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function insertP(){
var newP = document.createElement("p");//p태그 생성
newP.setAttribute("style", "background:blue");
var txt = document.createTextNode("새로운 라인");
newP.appendChild(txt);
var rootDiv = document.getElementById("root");
rootDiv.appendChild(newP);//마지막 자식노드에 추가해라
// rootDiv.insertBefore(newP, rootDiv.firstChild)//맨 첫 노드로 삽입
// rootDiv.insertBefore(newP, rootDiv.firstChild.nextSibling.nextSibling);//주석도 노드로 읽혀서 한번더 넣어줘야한다.

}
function deleteP(){
var rootDiv = document.getElementById("root");
rootDiv.removeChild(rootDiv.lastChild);//끝에 있는 노드 삭제
}
function deleteAllP(){
//div내에 있는 모든 자식노드 삭제
var rootDiv = document.getElementById("root");
while(rootDiv.hasChildNodes()){//노드가 있는 동안
rootDiv.removeChild(rootDiv.firstChild);// 처음 노드 지우기
}

}
function deleteAllP2(){
//div내에 있는 모든 자식노드 삭제
var rootDiv = document.getElementById("root");
rootDiv.parentNode.removeChild(rootDiv);

}
function modifyP(){
var rootDiv = document.getElementById("root");

}
function innerHTML_test(){
//innerHTML은 태그면 태그 텍스트면 텍스트까지 전부 보내줌
//하지만 innerText는 텍스트만 전부 보내줌
var rootDiv = document.getElementById("root");
var html = rootDiv.innerHTML;
alert(html);
document.getElementById("layer").innerHTML = html;
//document.getElementById("layer").innerHTML = "<font color=red>안녕</font>";
}
function innerText_test(){
// innerText는 텍스트만 전부 보내줌
var rootDiv = document.getElementById("root");
var html = rootDiv.innerText;
alert(html);

}
</script>
</head>
<body>
<div id="layer"></div>
--------------------------------------------------

<div id="root">
<p style="background: gray;">1번라인</p>
<p style="background: skyblue;">2번라인</p>
<p style="background: green;">3번라인</p>
<p style="background: red;">4번라인</p>
</div>
--------------------------------------------------<br>
<button onclick="insertP()">p태그추가</button>
<button onclick="deleteP()">p태그라스트삭제</button>
<button onclick="deleteAllP()">p태그자식모두삭제</button>
<button onclick="deleteAllP2()">p태그div삭제</button>
<button onclick="modifyP()">p태그수정</button>
<button onclick="innerHTML_test()">innerHTML</button>
<button onclick="innerText_test()">innerText</button>
</body>
</html>

* 결과보기

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-25 노드추가 (0)	2012.05.25
2012-5-24 DOM 다루기 - 노드의 생성, 삽입 (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(단거리 접근) (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근) (0)	2012.05.24
2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기 (0)	2012.05.23

Posted by 조은성

,

2012-5-24 DOM 다루기 - 노드의 생성, 삽입

프로그래밍/JavaScript 2012. 5. 24. 11:27

5

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-25 노드추가 (0)	2012.05.25
2012-5-24 DOM다루기[실습] (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(단거리 접근) (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근) (0)	2012.05.24
2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기 (0)	2012.05.23

Posted by 조은성

,

2012-5-24 DOM 다루기 - 노드접근(단거리 접근)

프로그래밍/JavaScript 2012. 5. 24. 11:15

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM다루기[실습] (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드의 생성, 삽입 (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근) (0)	2012.05.24
2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기 (0)	2012.05.23
2012-5-23 text객체와 textarea객체 정의 (1)	2012.05.23

Posted by 조은성

,

2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근)

프로그래밍/JavaScript 2012. 5. 24. 09:55

* 실습

javascript
get_element.html

* 결과

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM 다루기 - 노드의 생성, 삽입 (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(단거리 접근) (0)	2012.05.24
2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기 (0)	2012.05.23
2012-5-23 text객체와 textarea객체 정의 (1)	2012.05.23
2012-5-23 select태그 정의[실습] (0)	2012.05.23

Posted by 조은성

,

2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기

프로그래밍/JavaScript 2012. 5. 23. 17:28

member_servlet_fc.zip

member_servlet_fc

register_form.jsp
login_form.jsp
search_form.jsp
modify_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function mileageSearchFormCheck(){
var startMileage = document.mileage_search_form.startMileage;
var endMileage = document.mileage_search_form.endMileage;

if(startMileage.value==""){
  alert("시작 마일리지를 입력해 주세요.");
  startMileage.focus();
  return false;
}
if(endMileage.value==""){
  alert("끝마일리지를 입력해 주세요.");
  endMileage.focus();
  return false;
}
if(parseInt(startMileage.value)>parseInt(endMileage.value)){
  alert("시작마일리지가 끝마일리지보다 작아야 합니다. 다시 입력해 주세요.");
  startMileage.focus();
  return false;

}
if(isNaN(startMileage.value)||isNaN(endMileage.value)){
  alert("마일리지는 숫자를 입력하십시오.");

  return false;
}

}

* 결과보기

register_form.jsp

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM 다루기 - 노드접근(단거리 접근) (0)	2012.05.24
2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근) (0)	2012.05.24
2012-5-23 text객체와 textarea객체 정의 (1)	2012.05.23
2012-5-23 select태그 정의[실습] (0)	2012.05.23
2012-5-23 라디오버튼 테스트[성별 체크여부 실습] (0)	2012.05.23

Posted by 조은성

,

2012-5-23 text객체와 textarea객체 정의

프로그래밍/JavaScript 2012. 5. 23. 16:53

DOM 객체 (브라우저 내장객체)를 통한 Form 처리

• text객체 :

– <input type=“text”> 객체
– form의 하위 객체
– 접근 방법
• window.document.form_name.text_name.속성,
window.document.form_name.text_name.메소드

• textarea객체 :

– <textarea> 객체
– form의 하위 객체
– 접근 방법
• window.document.form_name.textarea_name.속성,
window.document.form_name.textarea_name.메소드

* text실습

* 결과

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근) (0)	2012.05.24
2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기 (0)	2012.05.23
2012-5-23 select태그 정의[실습] (0)	2012.05.23
2012-5-23 라디오버튼 테스트[성별 체크여부 실습] (0)	2012.05.23
2012-5-23 DOM객체를 이용한 Form처리(javascript를 이용한 submit보내기 및 체크박스 테스트) (0)	2012.05.23

Posted by 조은성

,

2012-5-23 select태그 정의[실습]

프로그래밍/JavaScript 2012. 5. 23. 15:25

* DOM 객체 (브라우저 내장객체)를 통한 Form 처리

• select 객체 :
– <select> 객체
– form의 하위 객체
– Select 태그의 값은 <option> 태그에 있다. 값에 접근하기 위해서는 select
를 통해 option 객체로 접근한다.
– 접근 방법
• window.document.form_name.select_name.속성,
window.document.form_name.select_name.메소드
값에 접근 : window.document.form.select.options[0].text

* DOM 객체 (브라우저 내장객체)를 통한 Form 처리

• option 객체 :
– select 내의 <option> 태그 객체
– select 객체의 options 속성을 통해 배열로 받아 접근한다.

* select 실습

* 결과

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기 (0)	2012.05.23
2012-5-23 text객체와 textarea객체 정의 (1)	2012.05.23
2012-5-23 라디오버튼 테스트[성별 체크여부 실습] (0)	2012.05.23
2012-5-23 DOM객체를 이용한 Form처리(javascript를 이용한 submit보내기 및 체크박스 테스트) (0)	2012.05.23
2012-5-22 주소창 테스트 (0)	2012.05.22

Posted by 조은성

,

2012-5-23 라디오버튼 테스트[성별 체크여부 실습]

프로그래밍/JavaScript 2012. 5. 23. 14:55

* 결과보기

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 text객체와 textarea객체 정의 (1)	2012.05.23
2012-5-23 select태그 정의[실습] (0)	2012.05.23
2012-5-23 DOM객체를 이용한 Form처리(javascript를 이용한 submit보내기 및 체크박스 테스트) (0)	2012.05.23
2012-5-22 주소창 테스트 (0)	2012.05.22
2012-5-22 javascript_jquery PDF,PPT (0)	2012.05.22

Posted by 조은성

,

2012-5-23 DOM객체를 이용한 Form처리(javascript를 이용한 submit보내기 및 체크박스 테스트)

프로그래밍/JavaScript 2012. 5. 23. 11:13

Dynamic_Project
name : javascript_ajax_class

WebContent : 폴더
javascript

html
form.html
res.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function submitForm(){
//form 객체에 action, method설정 후 전홍송
var form = document.form1;//<-같은 구문 window.document.form1
alert("form.action : "+form.action);//form.action 조회 후 action을 변경해서 res.jsp를 호출
form.action = "res.jsp";
form.method = "post";//post방식으로 보내서 url뒤에 파라미터 값이 붙지 않는 것을 볼 수 있다.
form.submit();//전송
}
function resetForm(){
alert("폼을 초기화 합니다.");
document.form1.reset();
}
function ckTest(){
var chkbox = document.form2.menu;//checkbox배열 객체
var cnt = 0;

for(i=0;i<chkbox.length;i++){
  if(chkbox[i].checked){
   cnt++;
   alert(chkbox[i].value+" : check됨");

  }
}
alert("체크 개수 : "+cnt);
}
//전체 체크하기
function allCheck(){
var chkbox = document.form2.menu;//checkbox배열 객체
var allchkbox = document.form2.allchk.checked;
//메뉴 체크박스의 상태를 allchk의 상태와 같도록 설정한다.
for(i=0;i<chkbox.length;i++){
  chkbox[i].checked = allchkbox;

}
}
//click()이용
function allCheck2(){
//메뉴 체크박스 배열 조회
var menu = document.form2.menu;
//allcheck의 체크 상태
var allchk = document.form2.allchk.checked;
//메뉴 체크박스 중 allchk의 상태와 다른 것들을 클릭시킨다.
for(i=0;i<menu.length;i++){
  if(menu[i].checked != allchk){
   menu[i].click();
  }
}
}

* 결과보기

- checkbox 결과보기

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 select태그 정의[실습] (0)	2012.05.23
2012-5-23 라디오버튼 테스트[성별 체크여부 실습] (0)	2012.05.23
2012-5-22 주소창 테스트 (0)	2012.05.22
2012-5-22 javascript_jquery PDF,PPT (0)	2012.05.22
2012-5-22 window내장객체 사용하기[실습] (0)	2012.05.22

Posted by 조은성

,

은성이의 프로그램X파일

'프로그래밍/JavaScript'에 해당되는 글 17건

2012-5-25 노드추가

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM다루기[실습]

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM 다루기 - 노드의 생성, 삽입

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM 다루기 - 노드접근(단거리 접근)

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-24 DOM 다루기 - 노드접근(태그,id로 접근)

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 member_servet_fc(회원관리) 자바스크립트를 사용해서 폼체크하기

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 text객체와 textarea객체 정의

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 select태그 정의[실습]

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 라디오버튼 테스트[성별 체크여부 실습]

'프로그래밍 > JavaScript' 카테고리의 다른 글

2012-5-23 DOM객체를 이용한 Form처리(javascript를 이용한 submit보내기 및 체크박스 테스트)

'프로그래밍 > JavaScript' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

글 보관함

달력

링크

티스토리툴바


	by 조은성