espriter

[예제 내용 소개] HTML DOM 구조를 이해하기 위한 구구단 출력 예제입니다 DOCTYPE html> Insert title here window.onload = function() { document.getElementById("selDan").addEventListener("change", process, false); document.getElementById("del").addEventListener("click", delprocess, false); } function process() { var sel = Number(frm.sel.options[frm.sel.selectedIndex].value); //제목 추가 var col = addCol(sel + "단"); var row = doc..

Development/JS 2018. 2. 9. 16:36

[예제 내용 소개] HTML DOM 구조를 연습하는 예제입니다. DOCTYPE html> ** DOM Test ** window.onload = function() { document.getElementById("sel").onchange = function(){ var sangpum=comment=""; var sel = frm.sel.options[frm.sel.selectedIndex].value; var sang = frm.sel.options[frm.sel.selectedIndex].text; //alert(sel + " " + sang); if(sel === '1000'){ sangpum = sang; comment = "볼펜은 모나미"; }else if(sel === '2000'){ sang..

Development/JS 2018. 2. 8. 18:22

[예제 내용 소개] 자바스크립트를 활용하여 달력을 만드는 예제입니다. DOCTYPE html> 자바스크립트 - 달력 만들기 예제 window.onload = function() { //document.getElementById("btnShow").onclick = func; : 아래 이벤트 리스너도 동일하게 작용 document.getElementById("btnShow").addEventListener("click", func, false); } function func() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var day = now.getDate(); //alert(year + "." + m..

Development/JS 2018. 2. 8. 14:12

[예제 내용 소개] 입력부분에서 입력된 값을 jsp로 넘겨받는 예제입니다. - String irum / id / email... 을 통해서 입력값을 받음 - 의 형태로 입력 값을 출력- form.jsp 와 입력 파일은 동일 경로에 위치시킬 것- 입력(html) 파일 예제는 바로가기에서 확인 DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Insert title here [전달받은 자료] 이름 : 아이디 : 이메일 : 나이 : [결과 Console ] [사용 환경] OS : Windows 7 IDE : Eclipse Oxygen JAVA : JDK 9 [예제 파일] 본 포스팅..

Development/JS 2018. 2. 7. 18:11

[예제 내용 소개] 이름이나 나이를 입력할 때 유효한지 검사(나이 form은 숫자만 입력하는 식으로)하는 양식입니다. - 이름은 문자만 허용하고, 숫자는 불허 - ID는 4글자 이상만 허용 - 이메일은 정해진 규칙에 따라 @와 .가 포함될 경우에만 가능 - 나이는 숫자, 그리고 2자리까지만 허용 - 자료 전송 버튼 클릭시 > 유효성 검사가 완료된다면 form.jsp로 post해서 내보냄 - 내용 삭제 버튼을 누르면 clsData로 넘어가서 입력값을 모두 초기화 후 메시지 출력 - form.jsp로 데이터를 넘길 것이기 때문에 form.jsp의 경로를 수정해주거나 동일 경로상에 위치 시켜야만 함- jsp 파일 예제는 바로가기에서 확인 DOCTYPE html> espriter 실습 - 회원 가입 양식에서 유..

Development/JS 2018. 2. 7. 18:09

[예제 내용 소개] 시간에 따라서 이미지가 계속 변동되도록 설정하는 예제입니다. DOCTYPE html> espriter 실습 - 일정한 간격(시간)으로 함수 호출 window.onload = function(){ myImage = document.getElementById("mainImage"); imgArr = ["book1.jpg", "book2.jpg", "book3.jpg"]; // 이미지 경로 재설정 필요 imgIndex = 0; } function myFunc(){ myImage.setAttribute("src", "image/" + imgArr[imgIndex]); //img src라는 값을 imgIndex(즉 0번째 출발)로 변경/ image/는 경로 부여) imgIndex++; if(i..

Development/JS 2018. 2. 7. 18:05

[예제 내용 소개] 버튼 클릭으로 이벤트를 출력하는 예제입니다 - 흰색/녹색/적색 : 버튼을 누르면 배경화면 색상이 변경됨 - 인사하기 : 버튼을 클릭하면 '출력장소1'에 문구가 출력 - 계산하기 : 버튼을 더블클릭하면 '출력장소1'에 문구가 출력 - 이름알기 : 커서를 마우스 위에 올리면 문구가 출력 / 커서를 떼면 문구 비노출 - 앵커 태그 클릭 : 메시지 출력 후 홈페이지 이동 (현재는 tag 고유 기능 해제로 인해 a 태그 비활성화) - 한글자 씩 출력 : 지정된 시간 단위(500)로 한 글자 씩 잘라서 '출력장소2' 에 문구 출력 - 프로그래머/프로게이머/웹디자이너 : 클릭이나 스크롤로 선택 문구가 변경되면 '출력장소1'에 문구 출력 DOCTYPE html> espriter 실습 - 이벤트 경험..

Development/JS 2018. 2. 7. 13:28

[예제 내용 소개] 버튼에 이벤트를 장착하여 실행 / 해제하는 예제입니다. DOCTYPE html> espriter - 이벤트 처리하기 실습 function func1() { document.getElementById("show").innerHTML = "전통적인 이벤트 처리"; } var a = 10; var b = {// 객체형 변수 funcNew : function() { document.getElementById("show").innerHTML = "b 객체 변수의 메소드처럼 사용"; }, funcNew2 : function() { document.getElementById("show").innerHTML = "b 객체 변수의 멤버로 처리"; } } window.onload = function()..

Development/JS 2018. 2. 7. 12:03