// 최대값

Math.max.apply(null, array);


// 최소값

Math.min.apply(null, array);


ex)

var arrNum = new Array();

arrNum = [80,95,85,78,92,95,79];


var maxNum = Math.max.apply(null, arrNum);

alert(maxNum);


[Result] 95

// 원형은 아래와 같다.
var num = Math.max(5, 10, 15, 20);
alert(num);

[Result] 20


// 모든 브라우저에서 지원함


'Html/Jsp/Javascript' 카테고리의 다른 글

[Javascript] 배열 최대값 / 최소값  (0) 2013.01.23
jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18

jQuery.ajax(options)

 

1. 파라미터

  - options : key/value 쌍으로 이루어진다. 모든 option의 값들은 생략 가능하며, $.ajaxSetup()의 형태로 default 값을 만들어서

                  사용이 가능하다. 아래는 option을 구성하는 값에 대한 설명이다.

       * asyn(Boolean)

            : 모든 request는 기본적으로 비동기 방식이다. 만약 동기 방식을 원한다면, asyn:false의 형식으로 구성하면 된다.

              동기방식의 request인 경우, 응답을 받는 동안 화면이 멈추는 현상과 화면에서 다른 조작을 취할 수 없다.

       * beforeSend(Function)

            : request를 보내기 전에 XMLHttpRequest값의 변경을 가능하게 하는 callback function.XMLHttpRequest는

              beforeSend() function의 입력 값 형태로 사용이 된다. Ajax.Event에서 상세한 내용을 다룬다.

       * cache(Boolean)

            : jQuery 1.2에서 추가되었으며, false일 경우 요청 내용이 화면에 바로 반영되며, true일 경우 browser에 의해 저장된다.

       * complete(Function)

            : 요청이 완료되었을 경우 호출된다.(complete가 호출된 이후에 success 또는 error function이 호출된다. complete가

              XMLHttpRequest 객체와 요청에 대한 성공 여부의 문자열 형식의 값을 입력 값으로 받는다.)

       * contentType(String)

            : 서버로 보내지는 데이터의 content-type. 서버로 전송되는 data는 일정한 형식으로 인코딩되며,

              "application/x-wwwform-urlencoded"는 URL 인코딩이라고 부르며, 별도의 설정을 하지 않은 경우 기본 값으로

              URL 인코딩을 사용한다. URL 인코딩 방식은 대량의 data나 이미지, 파일 등과 같은 바이너리 형식의 data를 전송

              하기에 적합하지 않다. 이런 경우 "multipart/form"와 같은 contentType을 사용한다.

       * data(Object|String)

            : 서버로 보내지는 데이터를 의미하며, 입력 받은 문자열이 &name=value 형식의 값이 아닐 경우 자동변환한다.

              입력 값 중 문자열을 제외한 객체 형식의 입력 값은 key/value 쌍의 값 형태로 되어 있어야 하며, 값이 Array 형태일

              경우 jQuery는 같은 key로 서로 다른 값을 갖게 된다.

       * dataType(String)

            : request에 대한 응답 결과의 형태. dataType:none의 형태로 설정할 경우 XML과 HTTP 형태 중 jQuery가 적합하다고

              판단하는 형식으로 data-type을 정의한다. XML 형식일 경우 responseXML, TEXT 형식일 경우 responseHTTP

              형식으로 변환해서 success() function의 입력 값이 전달된다. success() callback function의 첫 번째 입력 값의

              형태는 다음과 같다.

              (xml, html, script, json, jsonp, text)

       * error(Function)

            : 요청이 실패한 경우 호출된다. error() function은 XMLHttpRequest 객체, error가 발생한 원인에 대한 설명(문자열

              형태) 그리고 exception 객체로 구성되는 3개의 입력 값을 받는다.

       * global(Boolean)

            : ajaxStart() 또는 ajaxStop()등 Ajax를 trigger 할 수 있는 option을 제공한다.

              global:false의 형식으로 설정될 경우 tigger를 못하도록 막는다.

       * ifModified(Boolean)

            : 현재의 응답이 이전의 응답 결과와 다를 경우만 처리하도록 한다. 헤더값에 존재하는 "if-Modified-Since"의 값으로

              처리하며 기본 값은 헤더의 값을 체크하지 않는 false 이다.

       * jsonp(String)

            : jsonp요청에 대한 callback function을 override한다. GET, POST방식에서 value 값이 callback일 경우

              "callback=""로 사용된다. 따라서 {jsonp:'onJsonPLoad'}일 경우 'onJsonPLoad=?'의 형식으로 서버로 보내진다.

       * processData(Boolean)

            : data:{key:"value"}의 형식에서 {key:"value"}의 값들을 query String형식인 &key=value의 형식으로 변경한다.

              DOM Document 형식 또는 query string이 아닌 다른 형태를 원할 경우 processData:false로 설정한다.

       * success(Function)

            : 요청이 성공했을 경우 호출된다. 2개의 입력 값을 받으며, 첫 번째 입력 값은 서버로부터 받은 결과이고 형태는

              'dataType'에서 정의된 형태로 전달되고, 두 번째 입력 값은 상태에 대한 문자열 형식으로 입력된다.

       * timeOut(Number)

            : 요청에 대한 응답 제한 시간을 ms(millisecond)의 단위로 설정한다. $ajaxSetup에서 설정한 time-out 시간을

              override한다. 한 예로 $ajaxSetup에서 정의한 time-out 시간보다 많은 시간이 필요한 페이지에서 적용할 수 있다.

       * url(String)

            : 요청을 보낼 서버의 URL

[출처] jQuery Ajax - jQuery.ajax(options) (System.out.println("Web Developer");) |작성자 돌

[출처] jQuery.ajax(options)|작성자 하루살이

'Html/Jsp/Javascript' 카테고리의 다른 글

[Javascript] 배열 최대값 / 최소값  (0) 2013.01.23
jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
Html,Jsp,Css_10 Html/Jsp/Javascript 2011. 10. 21. 17:12
* 스크롤 배너 만들기

<html>
 <head>
  <title> 스크롤 배너 만들기 </title>
  <style>
	#banner {position:absolute;width:100px;height:100px;
			 top:100px;left:100px;
			 border:1px solid #000000;} 
                        /*본문내용과 관계 없이 위치설정:absolute*/
  </style>
  <script>// 화면크기등이 바뀌어도 같은 값을 유지해야 하므로 함수 생성
  function bannerScroll(){
	// document 크기(윈도우크기)
	winSizeWidth = document.body.clientWidth; // 너비
	winSizeHeight = document.body.clientHeight; // 높이
	// 스크롤바의 위치구하기
	scrollTop = document.body.scrollTop; // X좌표
	scrollLeft = document.body.scrollLeft; // Y좌표

	// 배너의 div 좌표변경
	banner.style.top = winSizeHeight - 220 + scrollTop;
	banner.style.left = winSizeWidth - 140 + scrollLeft;
	setTimeout("bannerScroll()",1);
  }
  </script>
 </head>

 <body onLoad="bannerScroll()"><!--본문 대충-->
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <!--배너 만들기-->
  <div id="banner"><!--div태그내 이미지는 백그라운드가 없을시 투명하게 보임-->
  <a href="#">
  <img src="../html/img/1.jpg" border="0" width="100"></a><br>
  <a href="#">
  <img src="../html/img/1.jpg" border="0" width="100"></a><br>
  </div>
 </body>
</html>

# 결과

 



* div를 이용한 본문내 삽입되는 팝업창 만들기

<html>
 <head>
  <title> Div를 이용한 팝업 </title>  
  <script>
 /* function Close(){
	document.all['pop'].style.visibility="hidden";}
    △ 닫기버튼 클릭시 div가 닫히도록 할때 ② : img에 함수선언 */
moveX=0; moveY=0; // moveXX=0; moveYY=0; 변수선언 없이 바로 입력했으므로 얘도 없앰
divX=100; divY=100;
  function mouseDrag(){
	// 현재 마우스 좌표 (클릭했을 때)
	moveX = event.clientX; // 이동전
	moveY = event.clientY; // 이동전
	// 현재 div의 좌표
	divX = pop.style.pixelLeft; // left 라 치면 오류 pixelLeft로 수정
	divY = pop.style.pixelTop; // top 이라 치면 오류 pixelTop으로 수정
	// 이동이 일어나야만 움직이도록 설정▽
	// document에서 event처리
	document.onmousemove = mouseDragDrop; // document에서 마우스 이동이 일어나면..
	// document로 하면 빨리 움직여도 잘 따라오지만 오른쪽 마우스 클릭 후 왼쪽마우스로
	// 아무영역이나 선택하면 창이 이동해버리는 버그(?)가 있어
	// document를 pop으로 바꾸면 버그는 없으나 클릭 후 조금만 빠르게 움직여도
	// 영역을 벗어나는지 컨트롤이 되지 않는다.
	// 또하나, 본문에 아무 영역이나 마구잡이로 클릭하다 보면 팝업창이 따라온다;;
	// 또.. 팝업안에 이미지를 클릭후 놓지 않고 다른영역으로 포인터 이동시
	// 무작위로 이동한다.
	// mouseDragDrop 호출 : document에서의 함수 호출에는 ()가 없어도 된다
	}

	function mouseDragDrop(){
	if (event.button == 1) // 왼쪽버튼 확인(1:왼쪽,2:오른쪽)
	{
	// 마우스 이동 후 좌표 이걸 변수에 안넣고 바로 적용해보면 오류 해결?
	// moveXX = event.clientX;
	// moveYY = event.clientY;
	// 움직인 거리를 구하여 Div에 Setting
	pop.style.pixelLeft = event.clientX - moveX + divX; 
	// left 라 치면 오류 pixelLeft로 수정
	pop.style.pixelTop = event.clientY - moveY + divY; 
	// top 이라 치면 오류 pixelTop으로 수정
	
	// left=움직이고 난 후의 클릭좌표 moveXX-처음 클릭 좌표 moveX + 현재 div의 좌표 divX
	}}
	
	
  </script>
 </head>

 <body>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <!--최초에 뜨는 팝업의 좌표 및 속성-->
<div id="pop" style="position:absolute; width:300; height:300; top:100; left:100;
	 border:1px solid #33660">
<table width="300" border=0 cellpadding="0" cellspacing="0">
	<tr>
	<td width="300" bgcolor="white" onMouseDown="mouseDrag()"></td>
	<!--△ 마우스 누른상태(onMouseDown)로 이동
		클릭좌표, 이동좌표 체크
		자바스크립트에 이벤트라는 내장 좌표가 있다
		event.clientX=X ..이런식 -->
	<td align="right" bgcolor="white"><img src="x.gif" 
                 onClick="pop.style.visibility='hidden'"></td>
	<!--△ 닫기버튼 클릭시 div가 닫히도록 할때 ①-->
	</tr>
	<tr>
	<td colspan="2"><a href="http://www.hrd.go.kr/jsp/HRDV/index.jsp">
	<img src="1.gif" border="0"></a></td>
	</tr>
	</table>
</div>
  
 </body>
</html>


# 결과

 



* 이미지 클릭하여 큰 이미지 나오는 갤러리 만들기

<html>
 <head>
  <title> 갤러리 </title>  
  <script>
 /* function Close(){
	document.all['pop'].style.visibility="hidden";}
    △ 닫기버튼 클릭시 div가 닫히도록 할때 ② : img에 함수선언 */
moveX=0; moveY=0; // moveXX=0; moveYY=0; 변수선언 없이 바로 입력했으므로 얘도 없앰
divX=100; divY=100;
  function mouseDrag(){
// 현재 마우스 좌표 (클릭했을 때)
moveX = event.clientX; // 이동전
moveY = event.clientY; // 이동전
// 현재 div의 좌표
divX = pop.style.pixelLeft; // left 라 치면 오류 pixelLeft로 수정
divY = pop.style.pixelTop; // top 이라 치면 오류 pixelTop으로 수정
// 이동이 일어나야만 움직이도록 설정▽
// document에서 event처리
document.onmousemove = mouseDragDrop; // document에서 마우스 이동이 일어나면..
// document로 하면 빨리 움직여도 잘 따라오지만 오른쪽 마우스 클릭 후 왼쪽마우스로
// 아무영역이나 선택하면 창이 이동해버리는 버그(?)가 있어
// document를 pop으로 바꾸면 버그는 없으나 클릭 후 조금만 빠르게 움직여도
// 영역을 벗어나는지 컨트롤이 되지 않는다.
// 또하나, 본문에 아무 영역이나 마구잡이로 클릭하다 보면 팝업창이 따라온다;;
// 또.. 팝업안에 이미지를 클릭후 놓지 않고 다른영역으로 포인터 이동시
// 무작위로 이동한다.
// mouseDragDrop 호출 : document에서의 함수 호출에는 ()가 없어도 된다
}
function mouseDragDrop(){
if (event.button == 1) // 왼쪽버튼 확인(1:왼쪽,2:오른쪽)
{
// 마우스 이동 후 좌표 이걸 변수에 안넣고 바로 적용해보면 오류 해결?
// moveXX = event.clientX;
// moveYY = event.clientY;
// 움직인 거리를 구하여 Div에 Setting
pop.style.pixelLeft = event.clientX - moveX + divX; 
// left 라 치면 오류 pixelLeft로 수정
pop.style.pixelTop = event.clientY - moveY + divY; 
// top 이라 치면 오류 pixelTop으로 수정
	
// left=움직이고 난 후의 클릭좌표 moveXX-처음 클릭 좌표 moveX + 현재 div의 좌표 divX
}}
	
function pIC(n){
	// div의 이미지 파일명 변경 eval 잊지 말자...
	// 일전에 eval 안넣고 왜 안되지 왜 안되지 했네 -_-
	// 경로에 document.ID를 하면 오류가 난다.
	// ID.src = ........
	eval("changeImg.src='img_0"+n+"_big.jpg'");
	pop.style.pixelLeft = event.clientX; 
	// 현재 발생한 이벤트에 X좌표를 입력해서 대입하라
	pop.style.pixelTop = event.clientY
	// 현재 발생한 이벤트에 Y좌표를 입력해서 대입하라
	pop.style.visibility = "visible";
	// pop을 보여라
	}
	
  </script>
 </head>

 <body>
 <!--이미지리스트-->
  <img src="img_01_small.jpg" onClick="pIC('1')">
  <img src="img_02_small.jpg" onClick="pIC('2')">
  <img src="img_03_small.jpg" onClick="pIC('3')">
  <img src="img_04_small.jpg" onClick="pIC('4')"><br>
  <img src="img_05_small.jpg" onClick="pIC('5')">
  <img src="img_06_small.jpg" onClick="pIC('6')">
  <img src="img_07_small.jpg" onClick="pIC('7')">
  <img src="img_08_small.jpg" onClick="pIC('8')">
  <!--최초에 뜨는 팝업의 좌표 및 속성-->
<div id="pop" style="position:absolute; width:300; height:200; top:60; left:60;
	 border:1px solid #33660; visibility:hidden"> <!-- 초기값: 이미지 숨김 -->
	<table width="300" border=0 cellpadding="0" cellspacing="0">
		<tr>
		<td width="300" bgcolor="white" onMouseDown="mouseDrag()"></td>
		<!--△ 마우스 누른상태(onMouseDown)로 이동
			클릭좌표, 이동좌표 체크
			자바스크립트에 이벤트라는 내장 좌표가 있다
			event.clientX=X ..이런식 -->
		<td align="right" bgcolor="white"><img src="../x.gif" 
                        onClick="pop.style.visibility='hidden'"></td>
		<!--△ 닫기버튼 클릭시 div가 닫히도록 할때 ①-->
		</tr>
		<tr height="200">
			<td colspan="2">
			<img src="img_01_big.jpg" border="0" id="changeImg"></td>
			<!-- 함수에서 제어를 위해 changeImg라는 id 부여 -->
		</tr>
	</table>
</div>  
 </body>
</html>

# 결과

작은 사진을 클릭하면 마우스포인터의 현재 위치에 큰 사진이 div팝업창으로 뜨고 그 창의 윗부분을 잡고 움직일 수 있도록 구현
하고 X버튼을 눌러 창을 끌 수 있다. 웹 호스팅 계정이 없어 구현에 이미지 링크를 통한 소스 재작성으로도 어려움이 있어
스크린샷으로 대체함


 

'Html/Jsp/Javascript' 카테고리의 다른 글

[Javascript] 배열 최대값 / 최소값  (0) 2013.01.23
jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
Html,Jsp,Css_09 Html/Jsp/Javascript 2011. 10. 20. 19:12
* Windows객체 (파일없이 새창띄우기) 

<html>
 <head>
  <title> Windows객체(파일없이 새창띄우기) </title>
 <script>  // 새창, 내용
  win = window.open("","w","width=300 height=300");
  // △파일명을 안썼다고해서 에러가 나지 않는다.
 
  win.document.open(); // ◁ win 안에 쓰겠다 : 내용이 대상 시작태그 역할?
     win.document.write("홍길동<br>");
     // △ win 이라는 객체에 홍길동을 출력
     win.document.write("<img src=../html/img/1.jpg>")
  win.document.close(); // ◁ 다 썼다 : 끝 태그 역할?
 
  function winClear(){
    win.document.open();
        // ▽ 팝업창의 내용 지우기 : 기존 파일이 있는 팝업이어도 그 내용까지 삭제
        win.document.clear();
    win.document.close();
  }

  function winClose(){ // 창 자체를 컨트롤 하므로 open/close 필요 없음
        // ▽ 팝업창 닫기
        win.window.close();
  }

  // window.status = "우와 신기하다" // 텍스트만 가능
 
  // 상태표시줄 텍스트가 오른쪽에서 왼쪽으로 움직이듯 보이게 출력하기
  // 텍스트 앞에 공백을 두고 공백을 한칸씩 줄여가며 글자가 오른쪽에서
  // 왼쪽으로 들어오는 것처럼 보이도록 하고 전일 했었던
  // setTimeOut("함수명",밀리초)를 이용하여 속도 조절.

  statusMsg = "☆우★와☆신★기☆하★다☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★"
  space = "";
  for (i=1; i<82; i++)
  {
    space += " ";
  }
  statusMsg = space + statusMsg;
 
  // 반복처리를 위한 함수생성
  ndx = 0;
  function winStatus(){
 
      window.status = statusMsg.substring(ndx);
      if(ndx>statusMsg.length)ndx=0; // index가 글자의 크기보다 크면 초기화 시킨다.
      // 계속 반복되면 글자수보다 큰 값의 위치를 지정하게 되어 에러→그래서 if문삽입
      ndx++;
      setTimeout("winStatus()",100) // 밀리초만큼 대기 후 함수 재 호출=반복 
  }  
    </script>
 </head>

 <body onLoad="winStatus()">
 <img src="../html/img/2.jpg" onClick="winClear()">
 <input type="button" value="팝업창닫기" onClick="winClose()">
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)


이미지 클릭시 팝업창 내용 삭제
팝업창닫기 버튼 누를시 창 사라짐



* 스크롤바 자동이동하기

<html>
 <head>
  <title> ScrollMove.html </title>
<script>
function timer(){
date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
 y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능

 // date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
 m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
 d = date.getDate(); // 일구하기
 h = date.getHours(); // 시간 구하기: 자바에는 s가 없다
 mm = date.getMinutes(); // 분 구하기: 자바에는 s가 없다
 ss = date.getSeconds(); // 초 구하기: 자바에는 s가 없다

window.status = y+"년 "+m+"월 "+d+"일 "+h+"시 "+mm+"분 "+ss+"초"
}

window.setInterval("timer()",1000); // 1초에 한번씩 timer()함수를 실행하여 초가 바뀌도록
   
     // 스크롤바 자동이동하기
     i=0
     function ScrollDelay()
     {
        i++;
        if(i>700){
            clearTimeout("ScrollDelay()");
            i=0; // 다시 위로 갔을 때 작동되도록 i값 초기화
        }
        else{
        window.scrollBy(0,2); // (x,y)
        setTimeout("ScrollDelay()",15);
        }
     }  
</script>
 </head>

 <body onLoad="timer()"><center>
 <input type="button" value="이동" onClick="ScrollDelay()">
 <!-- 이동을 누르면 스크롤바가 움직이도록 하는 함수 이벤트 만들기 △-->
  
 <br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00' align='center'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<a href="#">위로</a>
 </center> 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

스크롤바 이동효과를 보기 위해 <body> 소스에 잡다한 것을 많이 넣었다.
이동 버튼을 누르면 아래로 이동하고 이동 후 위로 올라가 다시 한번 이동버튼을
눌렀을 때 재작동이 용이하도록 if문에 i값을 초기화 시키는 소스를 넣었다.



* Document 객체

<html>
 <head>
  <title> Document 객체 </title>
 </head>

 <body bgcolor="#ff9900">
 <script>
    // document.write(document.속성명) : 속성값 출력
    // document.속성명='색상명' : 속성 적용

    // <body>의 글자색을 알아내겠다!! forground 전경색, 글자색
    document.write("글자색="+document.fgColor);
    // <body>의 배경색을 알아내겠다!! background 배경색
    document.write("<br>배경색="+document.bgColor);
    // <script>에서의 배경색 설정(#99ffff) : <body>설정값 무시?
    document.bgColor='#e0e0e0';
    // <script>에서의 글자색 설정(#9d9d9d) : <body>설정값 무시?
    document.fgColor='#9d9d9d';
    // link(방문이력없음)Color, alink(active:클릭후 놓지 않음)Color, vlink(visited:방문이력있음)Color
    document.linkColor='#cc0000';
    document.alinkColor='#ffcc00';
    document.vlinkColor='#0099ff';

    document.write("<br>link="+document.linkColor)
    document.write("<br>alink="+document.alinkColor)
    document.write("<br>vlink="+document.vlinkColor)
    // lastModified : 이문서가 마지막으로 업데이트된 날짜
    document.write("<br>마지막작성일="+document.lastModified);
    // title : 윈도우의 제목설정
    document.title='자바스크립트 공부중';
    // location : 현재 페이지 주소
    document.write("<br>현재페이지주소="+document.location);
    // select에 해당 색을 선택하면 배경색 바꾸기

    // 여담: 클라이언트 언어는 완벽하게 소스보기를 막을 수는 없다.
    // 방법이 있기 마련?
    // #FF0000 : FF(R)00(G)00(B)
 </script>
<hr>
 <select onChange="document.bgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----배경----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>

 <select onChange="document.fgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----글자----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>
 <hr>자바 Web 프로그래밍<br>
  <img src = "../html/img/sun.jpg"><br>
  <a href="#" target="_blank">링크테스트</a>
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

이미지는 별 의미 없이 썰렁해서 넣은 것으로 엑박이어도 관계 없어 링크가 없다.



* Image 객체

<html>
 <head>
  <title> Image 객체 </title>
 </head>

 <body>
  <!-- 이미지와 관련된 정보를 얻어내겠다!! -->
  <img id="img1" src="../html/img/dog.jpg" name="자신의 개 코스프레" align="center" border="10" hspace="20" vspace="10"> <!--id부여로 스타일시트에서 사용가능-->
<br><br><br><br>

 <script>
  // 이미지의 이름을 구하라 연예인
  document.write("<br>이름 = "+document.img1.name);
  // 파일명 : 이미지를 넣을 때 src= 하고 넣어서 src
  document.write("<br>파일명 = "+document.img1.src);
  // document.img1.src='../html/img/1.jpg'; // 이런식으로 프로그램 중간에 바꿀 수 있다..
  // 너비(width), 높이(height), 좌우여백(hspace),상하여백(vspace)
  document.write("<br>너비 = "+document.img1.width);
  document.write("<br>높이 = "+document.img1.height);
  document.write("<br>좌우여백 = "+document.img1.hspace);
  document.write("<br>상하여백 = "+document.img1.vspace);
  // 정렬(align)
  document.img1.align='right';
  document.write("<br>정렬 = "+document.img1.align);
  // 테두리 두께(border)
  document.write("<br>테두리두께 = "+document.img1.border)
  </script>
 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

 



* onMouseOver시 상세 이미지 뜨는 테이블 작성

<html>
 <head>
  <title> Exam.마우스오버하면 상세 이미지 뜨도록 하기 </title>
 <script>
    function carDetail(n){
        document.aa.img1.src="car/car_b_0"+n+".jpg"}
// 하나의 함수에 여러 값의 결과를 얻기 위해 함수명에 (n)값을 받아 그 n값에
// 해당되는 주소를 출력하도록 하였다.
 </script>
 </head>

 <body>
 <form name="aa"> <!--폼안에 테이블을 넣고 함수에서 폼의 주소값을
 지명하지 않으면 스크립트 오류로 로드되지 않는데 이유를 모르겠다...-->
  <table cellspacing='10' cellpadding='0' border='1'><tr><td><img id='car1_1' src='car/car_a_01.jpg' onMouseOver="carDetail('1')"></td>
<td rowspan='8'><img src='car/car_b_01.jpg' id='img1'></td>

</tr><tr><td><img src='car/car_a_02.jpg' onMouseOver="carDetail('2')"></td></tr>

<tr><td><img src='car/car_a_03.jpg' onMouseOver="carDetail('3')"></td></tr>
<tr><td><img src='car/car_a_04.jpg' onMouseOver="carDetail('4')"></td></tr>
<tr><td><img src='car/car_a_05.jpg' onMouseOver="carDetail('5')"></td></tr>
<tr><td><img src='car/car_a_06.jpg' onMouseOver="carDetail('6')"></td></tr>
<tr><td><img src='car/car_a_07.jpg' onMouseOver="carDetail('7')"></td></tr>
<tr><td><img src='car/car_a_08.jpg' onMouseOver="carDetail('8')"></td></tr>
</table></form>
 </body>
</html>

# 결과

많은 이미지의 링크가 어려워 스크린샷(gif ani)으로 대체



* 페이지 이동 / history 객체

- 메타 태그(meta tag)에서의 페이지 이동
<meta http-equiv="refresh" content="5;url=http://www.daum.net">
: 5초뒤 해당 url로 이동

- 자바스크립트에서의 페이지 이동
<script>
location.href="http://www.google.co.kr"
</script>

- histoty 객체
익스플로러에서 뒤로 앞으로를 눌렀을때 사용자가 왔다 갔다 했던 경로를 저장하고 있듯이 자바스크립트에도 그것을 저장하고 있는 history라는 녀석이 있다고 한다.
실질적으로 테스트 해보진 않았다;;

ex) 홈-회원가입-member.jsp-홈/로그인 : member.jsp 는 페이지 이동시 실행되고
실질적으로도 경로에 남게 되는 것이지만 사용자 측면에서 보면 보여지지 않는 없는 경로일
뿐이다. 이런 경로를 설정해주는데에 history객체가 사용되는 듯 하다.

종류 : 전체일지 대표적인 일부의 예인지 모르겠지만 적는다
history.back() : 전페이지로 이동
history.forward() : 앞페이지로 이동
history.go(n) : n(페이지수)이 양수일땐 앞페이지, 음수일땐 전페이지


* 롤오버시 변경되는 메뉴 이미지 만들기

<html>
 <head>
  <title> RollOverMenu.html </title>
 <script>
function menu(p,imgN){
    if (p==1){ // over 기능을 수행 : eval내에 싱글따옴표 위치에 주의한다.
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+"_over.gif'");
    }else{ // out 기능을 수행
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+".gif'");
    }// eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
}
 </script>
 </head>

 <body>
 <form name="aa">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><img src="menuimg/menu_back01.gif"></td>
            <!--오버이미지의 p값을 1 / 아웃이미지의 p값을 2로 정하고
                각자의 imgN을 지정하여 하나의 함수에 여러 이미지가 접근이
                가능하도록 한다.-->
            <td onMouseOver="menu(1,1)" onMouseOut="menu(2,1)"><a href="#">
            <img src="menuimg/menu01.gif" border="0" name="m1"></a></td>
            <td onMouseOver="menu(1,2)" onMouseOut="menu(2,2)"><a href="#">
            <img src="menuimg/menu02.gif" border="0" name="m2"></a></td>
            <td onMouseOver="menu(1,3)" onMouseOut="menu(2,3)"><a href="#">
            <img src="menuimg/menu03.gif" border="0" name="m3"></a></td>
            <td onMouseOver="menu(1,4)" onMouseOut="menu(2,4)"><a href="#">
            <img src="menuimg/menu04.gif" border="0" name="m4"></a></td>
            <td onMouseOver="menu(1,5)" onMouseOut="menu(2,5)"><a href="#">
            <img src="menuimg/menu05.gif" border="0" name="m5"></a></td>
            <td onMouseOver="menu(1,6)" onMouseOut="menu(2,6)"><a href="#">
            <img src="menuimg/menu06.gif" border="0" name="m6"></a></td>
            <td onMouseOver="menu(1,7)" onMouseOut="menu(2,7)"><a href="#">
            <img src="menuimg/menu07.gif" border="0" name="m7"></a></td>
            <td onMouseOver="menu(1,8)" onMouseOut="menu(2,8)"><a href="#">
            <img src="menuimg/menu08.gif" border="0" name="m8"></a></td>

            <td><img src="menuimg/menu_back02.gif"></td>
        </tr>
    </table>
 </form>
 </body>
</html>

# 결과

이미지가 많아 링크에 어려움이 있어 스크린샷으로 대체함

'Html/Jsp/Javascript' 카테고리의 다른 글

jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_08 Html/Jsp/Javascript 2011. 10. 19. 19:43

*  String객체의 글꼴관련메소드

<html>
 <head>
  <title> String객체의 글꼴관련메소드 </title>
 </head> <!--컴퓨터에서 문자는 String 글자 한글자는 Character-->
   <!--Java에도 아래의 메소드와 동일한것이 대부분이라 함-->
<body>
  <script>
//  d="감자" : 문자를 d에 대입
//  document.write(d.length); // 문자열의 길이 표시
// 메소드: () 괄호가 있는것 

//* 글꼴 관련 메소드 → document.write(d.charAt(2)) 문자열(또는 대입된 변수).메소드()
// 자바스크립트에서도 html태그를 적용하지 않고도 글자의 속성을 변경이 가능하다
 
  str = "Java Web Programming"

// big() : 글자를 크게
  document.write(str+" = "+str.big()+" : big()<br>");
 
// bold() : 진하게
 document.write(str+" = "+str.bold()+" : bold()<br>");
 
// fontcolor() : 글자색 - RGB코드나 색상명을 따옴표''안에 표기
 document.write(str+" = "+str.fontcolor('red')+" : fontcolor(red)<br>");
 
// fontsize() : 글자크기 - 0~7까지
 document.write(str+" = "+str.fontsize(0)+" : fontsize(0)<br>");
 
// italics() : 기울임꼴
 document.write(str+" = "+str.italics()+" : italics()<br>");
 
// small() : 작게
 document.write(str+" = "+str.small()+" : small()<br>");
 
// strike() : 취소선
 document.write(str+" = "+str.strike()+" : strike()<br>");

 // sub() : 아래첨자
 document.write(str+" = "+str.sub()+" : sub()<br>");
 
// sup() : 위첨자
 document.write(str+" = "+str.sup()+" : sup()<br>");
 
 // 그룹화: 글자색(파랑), 글자크기(5)
 // d.w(변수.속성명('속성값').속성명('속성값'));
 document.write(str.fontcolor('blue').fontsize('5')+"<br>");

 // 링크걸기
 document.write('script:<a href="http://www.daum.net" target="_blank">Next</a><br>');
 
// 지정된 변수에 링크걸기
 document.write('변수link:'+str.link("http://www.daum.net")+"<br>");

 //* 문자열처리 메소드
 // charAt(i) : 인덱스(i=0,1,2....)위치의 한문자를 구한다.
 document.write(str.charAt(5)+'  :  charAt(5)<br>');

 // charCodeAt(i) : index위치의 한문자에 해당하는 아스키코드를 구한다.
 document.write(str.charCodeAt(5)+'  :  charCodeAt(5)<br>');
 
// concat() : 문자열 연결
 document.write(str.concat(" DDDDD")+'  :  concat(" DDDDD")<br>');
 
// indexOf(s) : 문자의 위치구하기 - 같은 문자라면 앞에있는 문자
 document.write(str.indexOf('a')+'  :  IndexOf("a")<br>');

 // lastIndexOf(s) : 문자의 마지막 위치구하기 - 같은 문자라면 뒤에 있는 문자
 // 중간에 있는 문자열 구하는 것은? 스크립트엔 없지만 자바에는 있다고 함

 document.write(str.lastIndexOf('a')+'  :  lastIndexOf("a")<br>');
 
// split() : 문자열 나누기 - 해당 문자열은 사라지며 ,로 구분
 document.write(str.split(" ")+'  :  split(" ")<br>');
 
// substring() : 특정위치의 문자열 구하기
 document.write(str.substring(4)+'  :  substring(4)<br>');
 
// toLowerCase() : 소문자로 변경
 document.write(str.toLowerCase()+'  :  toLowerCase()<br>');
 
// toUpperCase() : 대문자로 변경
 document.write(str.toUpperCase()+'  :  toUpperCase()<br>');
 
</script>
 </body>
</html>

# 결과

Java Web Programming = Java Web Programming : big()
Java Web Programming = Java Web Programming : bold()
Java Web Programming = Java Web Programming : fontcolor(red)
Java Web Programming = Java Web Programming : fontsize(0)
Java Web Programming = Java Web Programming : italics()
Java Web Programming = Java Web Programming : small()
Java Web Programming = Java Web Programming : strike()
Java Web Programming = Java Web Programming : sub()
Java Web Programming = Java Web Programming : sup()
Java Web Programming
script:Next
변수link:Java Web Programming
W  :  charAt(5)
87  :  charCodeAt(5)
Java Web Programming DDDDD  :  concat(" DDDDD")
1  :  IndexOf("a")
14  :  lastIndexOf("a")
Java,Web,Programming  :  split(" ")
Web Programming  :  substring(4)
java web programming  :  toLowerCase()
JAVA WEB PROGRAMMING  :  toUpperCase()


* Math 객체

<html>
 <head>
  <title> Math객체 </title>
 </head>
 <body>
 <script>  // d.w(클래스명.메소드(변수));
 num = 10.5

 // round() : 반올림
 document.write(Math.round(num)+" : round()<br>");

 // floor() : 버림
 document.write(Math.floor(num)+" : floor()<br>");

 // ceil() : 올림
 document.write(Math.ceil(num)+" : ceil()<br>");

 // max(), min() : 큰값, 작은값 구하기
 document.write(Math.max(300,350)+" : max(300,350)<br>");
 document.write(Math.min(300,350)+" : min(300,350)<br>");
 
// pow() : 지수 - 프로그래밍에서는 지수의 연산자가 없어 아래와 같이
// pow() 메소드를 이용해야 한다 
 document.write(Math.pow(3,2)+" : pow(3,2)→3²을 의미한다<br>"); 

 // sqrt() : 제곱근
 document.write(Math.sqrt(10)+" : sqrt(10)<br>");
 
// random() : 난수 - 실수로 표현할 수 있는 0이 아닌 최소의값
// 0.00000..1 ~ 0.99999..9
 for (i=1; i<=10; i++)
 {
 document.write(Math.random()+" : random()<br>");
 }
// 랜덤값이어도 범위 설정이 가능하다
 // 설정방법 :  floor(난수*(큰수-작은수+1))+작은수
 
 bb=0;
 for (i=1; i<10; i++)
 {
 a = Math.floor(Math.random()*(45-1+1))+1;
 document.write(a+'<br>');
// ▽ 범위를 벗어난 값이 있다면 에러표시
 if(a>45 || a<1){bb=bb+1}
 }
 if (bb>0)
 {document.write("Error!!!!")
 }

 </script> 
 </body>
</html>

# 결과

11 : round()
10 : floor()
11 : ceil()
350 : max(300,350)
300 : min(300,350)
9 : pow(3,2)→3²
3.1622776601683795 : sqrt(10)
0.435694593824094 : random()
0.23957019408375624 : random()
0.6215856861777931 : random()
0.3003168975865115 : random()
0.11009055717526667 : random()
0.8536929841696323 : random()
0.1820287439428912 : random()
0.3908089953177582 : random()
0.8486993927286865 : random()
0.5091668366954141 : random()
37
9
10
38
26
22
28
16
22


* random() 을 이용하여 사이트 접속시마다 다른 이미지 보이기

<body>
 <script>
 ran = Math.floor(Math.random()*(8-1+1))+1; //1~8사이의 값 설정
 switch (ran)
 {
 case 1:img="car_b_01.jpg";break;
 case 2:img="car_b_02.jpg";break;
 case 3:img="car_b_03.jpg";break;
 case 4:img="car_b_04.jpg";break;
 case 5:img="car_b_05.jpg";break;
 case 6:img="car_b_06.jpg";break;
 case 7:img="car_b_07.jpg";break;
 case 8:img="car_b_08.jpg";break; 
 }
 document.write("<img src=car/"+img+">");
 </script>
</body>


* Array객체-배열

<html>
 <head>
  <title> Array객체(배열) </title>
 </head>

 <body>
 <script>
 // 배열선언
 arr = new Array(5)
 arr[0] = "홍길동"
 arr[1] = 100
 arr[2] = "김길동"
 arr[3] = 200

 document.write(arr+" : arr");
 document.write("<hr>");
 // strArr[2] : 3번째 값을 출력하라
 str = "임소연,이태석,엄기백,1,2,3";
 strArr = str.split(','); // strArr도 배열
// split(기준값) : 문자열 나누기
 document.write(strArr[2]+' : strArr[2]<br>');

 for (i=0; i<strArr.length; i++) // 배열의 길이보다 작을때까지 반복 
 {
  document.write(strArr[i]+' : strArr[i]<br>');
 }

 // 두 배열을 하나의 배열로 합친다.
 // concat()
 arrConcat = arr.concat(strArr); //arr과 strArr을 연결해라, arrConcat도 배열
// 순서가 바뀌어도 관계 없음 = strArr.concat(arr)
 document.write("<hr>"+arrConcat+' : arrConcat');

 // 배열의 문자를 하나의 문자열로 변경
 // join() : 괄호안에지정된 것으로 구분하여 하나로 묶음
 strJoin = arrConcat.join(", ");
 document.write("<hr>");
 document.write(strJoin+' : strJoin');

 // 배열의 값을 역순으로 정렬 : 역순으로 정렬된 값이 완전히 변수에 저장이 되어버린다.
 // 값을 되돌리려면 reverse()를 한번 더 실행해줘야 한다.
 // reverse()
 strReverse = arrConcat.reverse()
 document.write("<hr>");
 document.write(strReverse+' : strReverse');

 // 배열의 일부만 구한다.
 // slice()
 strSlice = arrConcat.slice(2,5)
// 배열 값의 3번째부터 6번째까지
 document.write("<hr>");
 document.write(strSlice+' : strSlice')

 // 배열의 정렬 : 데이터를 크기 순서대로 정렬 오름차순 (문자기준)
 // sort()
 strSort = arrConcat.sort();
 document.write("<hr>"+strSort+' : strSort')
 
 </script>
 </body>
</html>

# 결과



* 로또 게임기 만들기

 <body>
  <script>

cnt = prompt("몇번할래?","")
document.write("게임수="+cnt+"<br>");
for (i=1; i<=cnt; i++) // 게임수만큼 반복
{   // 난수를 저장할 배열 생성
 ranArr = new Array(6);
 for(j=0; j<ranArr.length; j++){ // 0,1,2,3,4,5

 // 난수생성, 난수를 배열에 대입
 ran = Math.floor(Math.random()*(45-1+1)+1); // 1~45사이의 값
 
 // 난수 같은 값 제외하는 방법
 sw=0;
 for (k=0; k<j; k++)
 {
  if (ranArr[k]==ran)
  {
   j--; sw=1;
   break;
  }
 }
 // 난수 6개의 값 저장 : ranArr[0]~[5]
 if(sw==0)ranArr[j] = ran;
 }
 // 정렬 : sort()가 숫자를 문자를 비교하듯 12, 1 중 1이 크다고 비교해서
 // 이 스크립트에 사용하기 부적절 하여 버블정렬(?) 방법을 써 sort()명령어의
 // 역할을 하는 스크립트를 작성한다
 for(z=0; z<ranArr.length-1; z++){
  for (p=0; p<ranArr.length-1; p++)
  {
   if (ranArr[p]>ranArr[p+1]) // 배열 비교
   { temp = ranArr[p];
    ranArr[p] = ranArr[p+1];
    ranArr[p+1] = temp;
   }
  }
 }
 // 출력
 document.write(i+"게임="+ranArr+"<br>");
}

  </script>
 </body>

# 결과

 



* 이미지 스크롤 :
marquee영역에 마우스 롤오버시 멈추고 영역 벗어날시 다시 움직임

<body>
<marquee bgcolor="#e3e3e3" onMouseOver="this.scrollAmount=0"
onMouseOut="this.scrollAmount=10"> // 현재 페이지를 가르키므로 this
<a href="#"><img src="car/car_a_01.jpg" border="0"></a>
<a href="#"><img src="car/car_a_02.jpg" border="0"></a>
<a href="#"><img src="car/car_a_03.jpg" border="0"></a>
<a href="#"><img src="car/car_a_04.jpg" border="0"></a>
<a href="#"><img src="car/car_a_05.jpg" border="0"></a>
<a href="#"><img src="car/car_a_06.jpg" border="0"></a>
<a href="#"><img src="car/car_a_07.jpg" border="0"></a>
<a href="#"><img src="car/car_a_08.jpg" border="0"></a>
</marquee>
 </body>

# 결과




* window 객체
버튼을 생성하여 팝업창 컨트롤 하기

 <head>
  <title> Window 객체 </title>
 <script>
// 페이지 로드시 팝업창을 자동으로 띄운다. win변수에 지정하여 함수에서도 활용
  win = window.open("이미지스크롤.html","w","width=300,height=300");
 
  function Move(x,y){
 win.moveBy(x,y); // x축과 y축의 픽셀값 입력으로 팝업창의 위치 이동
  }

  function Size(w,h){
  // 창의 크기 조절 w,h
 win.resizeBy(w,h); // 너비와 높이의 픽셀값 입력으로 팝업창의 크기 조절
  }

  cnt=0
  function autoResize(){ // 페이지 로드시 작동
 win.resizeBy(1,1);
 if(cnt<500){ // 너비,높이를 1픽셀씩 500번 늘림: 500px씩 늘림
 cnt++;
 setTimeout("autoResize()",1); // 밀리초(1초=1000밀리초)만큼 대기 후 실행: 반복
// setTimeout("함수명",밀리초) : 해당 함수의 실행에 대기시간 부여
 }
  }
// 테스트 해보니 간단하게 for문으로도 같은(?) 구현이 가능하다.
// for(i=0; i<300; i++){win.resizeBy(1,1)}
  cnt=0;
  cnt2=0;
  function autoMove(){ // 페이지 로드시 작동
 win.moveBy(-1,0); // 왼쪽 1pixel 이동
 win.moveBy(0,1); // 아래쪽 1pixel 이동
 if(cnt<1000){ // 왼쪽 밑으로 대각선 방향으로 1000번 움직인다
 cnt++;
 setTimeout("autoMove()",1); // 1/1000 초 동안 대기 후 실행:반복
 }
 
  }
 </script>
 </head>

 <body onLoad="autoResize(),autoMove()"> 
// 페이지 로드시 작동되는 함수 body태그에 삽입
 <br><br><br><br>
 <center>
 <input type="button" value="위로" onClick="Move(0,-20)"><br>
 <input type="button" value="왼쪽" onClick="Move(-20,0)">
 <input type="button" value="오른쪽" onClick="Move(20,0)"><br>
 <input type="button" value="아래" onClick="Move(0,20)"><br>
 <input type="button" value="늘리기" onClick="Size(50,50)">
 <input type="button" value="줄이기" onClick="Size(-50,-50)"><br>
</center>
 
</body>

# 결과



* 백그라운드 스크롤

<head>
  <title> 백그라운드 스크롤 </title>
  <script>
  bgSet = 0; 
  bgImg = eval('document.body')
  // eval:문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
  function bg_scroll(max){
 bgSet+=1; // 계속 증가하므로 ↘
 if(bgSet > max) bgSet=0; // 임의로 초기셋팅값으로 되돌림
 document.body.style.backgroundPosition = bgSet+"  "+bgSet //포지션에서 y값이 계속 바뀜
  }
  window.setInterval("bg_scroll(9000)",50); // 50밀리초동안 대기 후 "함수"을 실행
 
  </script>
 </head>

 <body background="../html/img/1.jpg">
  <br><br><br><br><br><br>
  <center>
  <img src="../html/img/xbox.gif">
  </center>
 </body>

# 결과


'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (0) 2011.10.17
Html,Jsp,Css_07 Html/Jsp/Javascript 2011. 10. 18. 19:50

어제에 이어 회원가입 폼 만들기 추가정리

* head태그 안에 script태그

function totChk(){
 
 // memId 입력유무확인
 if(frm.memId.value.length<4){
  alert("아뒤는 4~12글자 까지 입니다.");
  return false;
 }

 // memId에 문자,숫자 혼합확인
 // 비교기준: 아스키코드값
 cnt=0; // 숫자의 갯수를 구하기 위해서 cnt라는 변수 선언, 0초기화
 for (i=0; i<frm.memId.value.length; i++) //9글자 라면 0부터 8까지
 { // go75ma 라면 6글자 이므로 012345
  str = frm.memId.value.charAt(i); // 초기값이 0이므로 1번째 글자가 된다
  if (str>='0' && str<='9') // 한글자 떼어서 비교 : 반복
  { // 아스키코드로 입력시 따옴표 없이 입력
   cnt=cnt+1; // 숫자일때만 cnt값 증가
  
  }


 } // 아래의 소스가 for문을 벗어나야 cnt값이 0이어도 alert가 없다.
 if (cnt == 0) // 숫자를 한개도 쓰지 않았다면
  {
   alert("아이디는 문자와 숫자 혼용해야 합니다!!!");
   frm.memId.value=""; //기존에 입력한 text 삭제
   frm.memId.focus(); // 커서 이동
   return false;
  }
 // 비밀번호 검색하기
 // 대,소,숫자 혼용하기
 pwdLng = frm.memPwd.value.length; // 비밀번호 문자길이
 charCnt = 0; // 소문자 갯수구하기
 CharCnt = 0; // 대문자 갯수구하기
 numCnt = 0;  // 숫자   갯수구하기
 etcCnt = 0;  // 기타   갯수구하기
 for (i=0; i<pwdLng; i++)
 {
  str = frm.memPwd.value.charAt(i);
  // str = frm.memPwd.value.charCodeAt(i);
  // 아스키코드 입력시 위처럼 변경
  if (str>='a' && str<='z') // 소문자
  {
   charCnt++;
  }else if (str>='A' && str<='Z') // 대문자
  {
   CharCnt++;
  }else if (str>='0' && str<='9'){ // 숫자
   numCnt++;
  }else{
   etcCnt++; // 그외의 것
  }
 }

 if (charCnt == 0 || CharCnt == 0 || numCnt ==0)
 {
  alert("비번은 대문자,소문자,숫자를 혼용해야 합니다!");
  frm.memPwd.value="";
  return false;
 }
 if (etcCnt>0)
 {
  alert("특수문자는 사용할 수 없습니다");
  frm.memPwd.value="";
  return false;
 }
 if(document.frm.memPwdChk.value == "")
 {
    alert("비밀번호를 다시한번 입력해주세요")
    document.frm.memPwdChk.focus();
    return false;
    }
 if(document.frm.memName.value == "")
    {
    alert("이름이 없는건가..")
    document.frm.memName.focus();
    return false;
    }
 if(document.frm.memJumin01.value == "" || frm.memJumin02.value == "")
    {
    alert("주민등록번호를 입력하세요")
    document.frm.memJumin01.focus();
    return false;
    }
 // 성별입력유무확인
 if (frm.memSung[0].checked==false && frm.memSung[1].checked==false)
 {
  alert("성별을 선택하세요");
  return false;
 }
 // email검사하기 : 골뱅이=atMark
 atMark = frm.memEmail.value.indexOf('@');
 dot = frm.memEmail.value.indexOf('.');
 len = frm.memEmail.value.length;
 if (atMark==-1 || dot==-1 || (dot-atMark)<=1 ||
 atMark==0 || dot==0 || atMark==len-1 || dot==len-1) // 없는 글자
 { alert("이메일 형식에 어긋한 주소 입니다.");
 }
 return true;
 // 취미 체크 여부 검사 : 체크 최소한 두개 이상 확인


}
function jumin1Length(){
 // 주민번호 입력하기
 
 if(frm.memJumin01.value.length==6){
  frm.memJumin02.focus();
 }
}
function jumin2Length(){
 // 앞자리6, 뒷자리7일 경우
 // 생년월일, 성별, 이메일 포커스이동
 if (frm.memJumin01.value.length==6 && frm.memJumin02.value.length==7)
 {
  jumin1 = frm.memJumin01.value;
  jumin2 = frm.memJumin02.value;
  //생년월일
  //년
  f = jumin2.substring(0,1); // 주민번호 뒷자리의 첫번째 글자
  if (f==1 || f==2) //1900년대사람
  {
   frm.memBirth01.value = "19"+jumin1.substring(0,2);
  }else{ //2000년대사람
   frm.memBirth01.value = "20"+jumin1.substring(0,2);
  }
  //월
  frm.memBirth02.value = jumin1.substring(2,4); // 2번째부터 4번째 앞까지
  //일
  frm.memBirth03.value = jumin1.substring(4); // 4번째부터 끝까지
  //성별
  if (f==1 || f==3) // 남자
  { frm.memSung[0].checked = true;
  }else{ // 여자
   frm.memSung[1].checked = true;
  }
  frm.memEmail.focus();
 }

}
//숫자키 입력검사하기
function numChk(){
 if (!(event.keyCode>=48 && event.keyCode<=57)) // 숫자의 범위를 벗어났을 때 
 // event.keyCode : 지금 눌러진 키에 대한 아스키 코드를 구한다.
 { event.returnValue=false; // returnValue라는 변수에 화면에 문자출력취소
 }
}

* body태그안에 form 태그

<form action="#" method="post" name="frm" submit="totChk()">

<table border="0" cellpadding="0" cellspacing="0"> <!-- cellpadding과 cellspacing 값을 0으로 초기화 해주지 않으면 테이블내부의 행/열 간 간격이 벌어진다. -->
<caption align="left">
<font color="white">..</font><font color="red">*</font><font id="s">표시 항목은 필수 입력 항목입니다.</font></caption>
 <tr height="60">
  <td align="right" width="100" bgcolor="#efefef">아&nbsp;이&nbsp;디&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*&nbsp;</font></td>
  <td width="600"> 
   <input type="text" name="memId" size="16" maxlength="12" value="goguma777" onClick="this.style.backgroundColor='black'; this.value='',this.style.color='white'" onBlur="this.style.backgroundColor='gray'; this.style.borderColor='red'"> <!--스타일시트가 인라인방식일때-를뺀다
   this.style.backgroundColor C대문자-->
   <!--▲ this.:현재인풋태그영역을 가르킨다. -->


   <tr height="30">
  <td align="right" bgcolor="#efefef">주민등록번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memJumin01" size="7" maxlength="6" onKeyUp="jumin1Length()" onKeyPress="numChk()">-
  <input type="text" name="memJumin02" size="7" maxlength="7" onKeyUp="jumin2Length()" onKeyPress="numChk()">
  </td> </tr>
 
 <tr height="30">
  <td align="right" bgcolor="#efefef">생년월일&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memBirth01" size="4" maxlength="4">년
  <input type="text" name="memBirth02" size="3" maxlength="2">월
  <input type="text" name="memBirth03" size="3" maxlength="2">일
 </tr> 

 <tr height="30">
  <td align="right" bgcolor="#efefef">성<font color="white">....</font>별&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="radio" name="memSung" value="man">남자&nbsp;
  <input type="radio" name="memSung" value="woman">여자
 </tr> 

 <tr height="30">
  <td align="right" bgcolor="#efefef">E - mail&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="text" name="memEmail" size="28">
  </td>
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">메일수신&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="radio" name="memEmailYes" value="mailYes" checked>수신동의&nbsp;
   <input type="radio" name="memEmailNo" value="mailNo">수신거부
  </td> 
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">우편번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memZipCode01" size="4" maxlength="3">-
  <input type="text" name="memZipCode02" size="4" maxlength="3">
  <input type="button" value="검색" onClick="zipChk()">
  </td> 
 </tr>

 <tr>
  <td align="right" bgcolor="#efefef">주<font color="white">....</font>소&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="text" name="memAddr1" size="28"><br>
   <input type="text" name="memAddr2" size="16">
  </td>
 </tr>


<!--
  - keyEvent 종류
    onKeyPress : 키를 누르고 있을 때 발생
    onKeyUp : 키를 누른 후 놓았을 때 발생
    onKeyDown : 키를 입력했을 때 발생

  - mouseEvent 종류
    onMouseOver : 마우스포인터가 지정 범위안에 있을 때
    onMouseOut : 마우스포인터가 지정 범위 바깥으로 나갈 때
    onClick : 마우스 클릭시
    onBlur : 영역이 클릭이 된 상태에서 다른곳을 클릭하여 포커스가 범위를 벗어났을 때
    onMouseUp : 마우스를 눌렀다 놨을 때
    onMouseDown : 마우스를 누르고 있을 때
    onDbClick : 마우스를 더클클릭시
    onDragDrop : 마우스 드래그시

    onChange : 입력값이 변경시
    onReset : 재시작시
    onMove : 윈도우가 이동시
    onLoad : 대상이 열렸을 때
    onUnLoad : 대상이 닫혔을 때
    onResize : 윈도우의 크기가 변경됐을 때
    onSelect : 입력양식에서 선택했을 때
    onSubmit : 입력양식을 서버로 전송할 때
-->

* 닉네임 중복검사 팝업창 만들기

<head>
  <title> 닉네임 중복 검사 </title>
 <script src="nickScript.js"> // 외부파일 링크
 </script>
 </head>

 <body>
  <form name="nickFrm">
 대화명 : <input type="text" name="nick"><br>
 <input type="button" value="닉네임사용하기" onClick="nickClose()">
 
 
 </body>

* 닉네임 중복검사 팝업창의 외부파일(nickScript.js)

function nickClose(){
opener.document.frm.memNic.value=nickFrm.nick.value;
window.close();
}

* 주소 검색 팝업창 만들기

 <head>
  <title> 주소 검색 </title>
 <script>
 function zipChkClose()
 {
 if(zipFrm.addr.value==""){ // == 주의
  alert("상세주소를 입력하세요!!!")
  return; // 리턴이 나오는 순간 함수 종료 지점으로 이동
    // 밑에 명령어들을 건너뛰기 때문에 창이 닫히지 않는다
  }
 opener.document.frm.memZipCode01.value="123";
 opener.document.frm.memZipCode02.value="456";
 opener.document.frm.memAddr1.value="서울시 영등포구 당산동";
 opener.document.frm.memAddr2.value=zipFrm.addr.value;
 window.close();
}
 </script>
 </head>

 <body>
 <form name="zipFrm">
 우편번호 : 123-456<br>
 주소 : 서울시 영등포구 당산동<br>
 상세주소 : <input type="text" name="addr"><br>
 <input type="button" value="주소사용하기" onClick="zipChkClose()">
 </form>
 </body>

* 아이디 중복검사 팝업창 만들기

 <head>
  <title> 아이디 중복검사 </title>
 <script>
 function idChkClose()
 { // 메인폼에 검색한 아이디를 표시
  opener.document.frm.memId.value="myID"  
   // 현재창 닫기
  window.close();
  //self.close();
  }
 </script>
 </head>
<body>
  당신이 입력한 아이디는 사용가능한 <br>아이디 입니다.
  <p>
  <input type="button" value="Close" onClick="idChkClose()">
 </body>

* 특정 문자의 위치/글자수 구하는 함수

<script>
 id = "goguma777@nate.com"
 // 글자의 길이 구하기
 document.write(id.length+"<br>"); // 글자수를 구하는 변수(?):length
        // 괄호가 없는건 변수
 
 // 한글자 구하기
 document.write(id.charAt(5)+"<br>"); // 괄호안의 인덱스 의미:특정위치의 글자를
 // 꺼냈다 보면 된다. id.charAt(5)는 5번째 글자를 얻어내는 메소드
 // 괄호가 있으면 메소드 없으면 변수
 // 제일 앞글자는 0이라는 위치값, 순서대로 1234...
 // 공백도 한글자 차지

 // 문자열 구하는 함수
 document.write(id.substring(3)+"<br>");
 // 여러글자, 필요한만큼 글자를 얻어내는 메소드
 // 3이라 입력하면 3번째 글자의 위치부터 끝까지~

 document.write(id.substring(3,6)+"<br>");
 // 3인덱스에 있는 문자부터 6인덱스 위치의 앞 문자까지

 // 특정문자의 위치구하기
 // index값을 구하며 찾을 문자가 없으면 -1을 리턴한다
 document.write(id.indexOf('.'));
</script>

* for문을 활용한 구구단 소스 재정리

<script language="JavaScript">
document.write("<table border=1 align=center><caption>=구구단=</caption>");
for (i=2; i<=9; i+=4) // 2, 6
{
 // 제목출력 : 2단 3단 4단 ..
 document.write("<tr>");
 for (dan=i; dan<=i+3; dan++)
 { //     2        5
   //     6        9
   document.write("<td width=100>"+dan+"단</td>")
 }
 document.write("</tr>");
 for (j=2; j<=9; j++)
 { document.write("<tr>");
  for (dan=i; dan<=i+3; dan++)
  { document.write("<td>"+dan+"*"+j+"="+dan*j);
  }
  document.write("</td>")
 }
}
document.write("</table>");
</script>

* 자바스크립트 함수, id와 마우스액션을 이용한 이미지 border 효과
-쉽게 말해 롤오버 이미지효과

<html>
 <head>
  <title> New Document </title>
<script>
 function backImg(ColorName){
  document.all['bImg'].style.borderColor=ColorName;
 }
</script>
 </head>

 <body>
 
 <table cellpadding="0" cellspacing="0" border=1 align=center>
 <tr height="150">
 
 <td width="50" bgcolor="#454545" onMouseOver="backImg('#454545')" onMouseOut="backImg('black')">
 <td width="50" bgcolor="#515151" onMouseOver="backImg('#515151')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#5a5a5a" onMouseOver="backImg('#5a5a5a')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#686868" onMouseOver="backImg('#686868')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#757575" onMouseOver="backImg('#757575')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#808080" onMouseOver="backImg('#808080')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#8b8b8b" onMouseOver="backImg('#8b8b8b')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#999898" onMouseOver="backImg('#999898')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#a7a6a6" onMouseOver="backImg('#a7a6a6')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#b9b9b9" onMouseOver="backImg('#b9b9b9')" onMouseOut="backImg('#ffffff')">
 <td width="50" bgcolor="#cccbcb" onMouseOver="backImg('#cccbcb')" onMouseOut="backImg('white')">
  </tr>
 <tr>
 <td align="center" colspan="11">
 <img id="bImg" src = "../html/img/1.gif"
 border="10">
 </td>
 </tr>
 </table>
 <p></p>
 <center>
 </center>
 </body>
</html>

 

'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (0) 2011.10.17
[Test] 회원가입 폼 만들기  (1) 2011.10.16


 

<!--
2단 ~ 9단까지 출력(반복문) 테이블에 넣어서

출력결과
   ==구구단==
 2단  3단  4단  5단  
 2*2=2 3*2=6 4*2=8 5*2=10
 2*3=6 3*3=9 4*3=12 5*3=15
 2*4=8 3*4=12 4*4=16 5*4=20
 2*5=10 3*5=15 4*5=20 5*5=25
 2*6=12 3*6=18 4*6=24 5*6=30
 2*7=14 3*7=21 4*7=28 5*7=35
 2*8=16 3*8=24 4*8=32 5*8=40
 2*9=18 3*9=27 4*9=36 5*9=45

 6단  7단  8단  9단
 6*2=12 7*2=14 8*2=16 9*2=18
 :  :  :  :


-->

<script language="JavaScript">

// FOR문 사용 ▽▽▽▽▽▽▽▽▽▽▽▽▽
 document.write("<table border=10 width=360 height=600 cellspacing=0 cellpadding=0>");
 document.write("<caption align=center><h2>== 구구단 ==</h2></caption>");
 document.write("<tr>");

  for (n=2; n<6; n++) // 첫째줄 2단~5단 표시
  {
   document.write("<td align=center>"+n+" 단</td>"); // n=2,3,4,5 / 4번 반복해서 4열
  }
  document.write("</tr>"); // 행 닫고

  for (a=1; a<10; a++) // 단에 곱해질 숫자 : 행 1,2,3,4,5,6,7,8,9
  {
   document.write("<tr>"); // 행 열고
   for (b=2; b<6; b++) // 단에 해당되는 숫자 : 열 2,3,4,5
   {
    document.write("<td align=center>"+b+" * "+a+" = "+b*a+"</td>");
   }      
  }
  document.write("</tr><tr height=20><td></td></tr><tr>"); // 분리선 역할
  
  for (c=6; c<10; c++) // 두번째 시작의 6~9단 표시
  {
   document.write("<td align=center>"+c+" 단</td>") // c=6,7,8,9 / 4번 반복해서 4열
  }
  document.write("</tr>"); // 행 닫고

  for (a=1; a<10; a++) // 단에 곱해질 숫자 다시 초기화 : 행 1,2,3,4,5,6,7,8,9
  {
   document.write("<tr>"); // 행 열고
   for (b=6; b<10; b++) // 단에 해당되는 숫자 초기화 : 열 6,7,8,9
   {
    document.write("<td align=center>"+b+" * "+a+" = "+b*a+"</td>");
   }
   document.write("</tr>"); // 행 닫고
  }
  document.write("</table>"); // 테이블 닫고


document.write("<br><br><br>");
// WHILE문 사용 ▽▽▽▽▽▽▽▽▽▽▽▽▽

document.write("<table border=10 width=360 height=600 cellspacing=0 cellpadding=0>");
document.write("<caption align=center><h2>== 구구단 ==</h2></caption>");
document.write("<tr>");

n=2;
while (n<6)
  {
   document.write("<td align=center>"+n+" 단</td>");
   n++;
  }
  document.write("</tr>");

  a=1;
  while (a<9)
  {
   document.write("<tr>");
   a++;
   b=2;
   while (b<6)
   {
    document.write("<td align=center>"+b+" * "+a+" = "+b*a+"</td>");
    b++;
   }      
  }
  document.write("</tr><tr height=20><td></td></tr><tr>");
  
  c=6;
  while (c<10)
  {
   document.write("<td align=center>"+c+" 단</td>")
   c++;
  }
  document.write("</tr>");

  a=1;
  while (a<9)
  {
   document.write("<tr>");
   a++;
   b=6;
   while (b<10)
   {
    document.write("<td align=center>"+b+" * "+a+" = "+b*a+"</td>");
    b++;
   }
   document.write("</tr>");
  }
  document.write("</table>");
</script>

'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (0) 2011.10.17
[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_06 Html/Jsp/Javascript 2011. 10. 17. 19:20

* 중첩 for문(반복문내에 또다른 반복문이 존재)의 사용-1

# 출력형식
  1 2 3 4 5
  1 2 3 4 5
  1 2 3 4 5
  1 2 3 4 5
  1 2 3 4 5


<script>
 for (i=1; i<=5; i++) // 행지정시 사용됨이 일반적
 {
  for (j=1; j<=5; j++) // 열지정시 사용됨이 일반적
  {
   document.write(j+"&nbsp;"); // j를 i로 바꾸면 결과가 달라지는 규칙을 보며 이해한다.
   }
  document.write("<br>");
 }
</script>

* 중첩 for문의 사용-2

# 출력형식
  1 2 3 4 5
  1 2 3 4 5
  1 2 3 4 5
  1 2 3 4 5
  1 2 3 4 5


<script>
 for (i=1; i<=5; i++)
 {
  for (j=1; j<=5; j++)
  {
   document.write("<img src=../html/img/blog_img.gif>"); 
 // 위의 예제와 같지만 이미지를 로딩한 경우  
  }
  document.write("<br>");
 }
</script>

* 중첩 for문의 사용 -3 

# 출력형식
  1
  1 2
  1 2 3
  1 2 3 4
  1 2 3 4 5
 
<script>
 for (i=1; i<=5; i++)
 {
  for (j=1; j<=i; j++)
// 조건식에서 값을 고정하지 않고 내가 필요로 하는 변수가 있다면 대입 가능
  {
  document.write(j+"&nbsp");
  }
  document.write("<br>");
 }
document.write("<br>");
document.write("<br>");
</script>

* 중첩 for문의 사용 -4

# 출력형식
  1
  2 2
  3 3 3
  4 4 4 4
  5 5 5 5 5

<script>
 for (i=1; i<=5; i++)
 {
  for (j=1; j<=i; j++) // 조건식에서 값을 고정하지 않고 내가 필요로 하는 변수가 있다면 대입 가능
  {
  document.write(i+"&nbsp");
  }
  document.write("<br>");
 }

document.write("<br>");
document.write("<br>");

* 중첩 for문의 사용 -5

# 출력형식
  1 2 3 4 5
  1 2 3 4
  1 2 3
  1 2
  1

<script> 
 for (i=5; i>=1; i--) // 5행이기때문에 5번만 반복되도록 조건식을 짜주면 되고 중첩 for문에서
 // 변수에 지정된 값을 활용하기 위해 변수의 초기값과 조건식과 증감조건을 설정
 {
  for (j=1; j<=i; j++) // i값에 따라 출력되는 열의 수가 달라진다보면 된다.
  // 5에서 1까지 내려가므로 첫번째 출력은 j값1로 시작하여 1 2 3 4 5
  // 두번째는 i값이 4가 되어 j값의 출력은 1 2 3 4
  // :
  // i값이 1이 되며 j값은 1번만 출력되고 j값과 i값이 같아 for문 종료
  {
   document.write(j+"&nbsp;");
  }
  document.write("<br>");
 }

document.write("<br>");
document.write("<br>");
</script>

* 중첩 for문의 사용 -6

# 출력형식 (살짝 삐뚤어졌다;)
                1
             1 2
          1 2 3
       1 2 3 4
    1 2 3 4 5 

<script>
for (i=1; i<=5; i++) // 5행, i값은 1→5까지 순차적으로 1씩 증가
{
 for (k=1; k<=5-i; k++) // 공백을 띄워주는 조건 설정
 // i가 1일때 k는 4번 공백 반복 후
 {
  document.write("&nbsp;&nbsp;");
 }
 for (j=1; j<=i; j++) // 여기로 와서 j값 1 출력 j가 1증가하면 조건식이 거짓이므로
 {
  document.write(j+"&nbsp;");
 }
 
 document.write("<br>"); // 줄내리기 실행, 그리고 다시 for문의 시작으로 가서 i값 1증가하여
 // 2가 되고 k값은 5-2=3이 되어 공백3번 반복 후 1<=2 가 참이므로 2번 반복하고 여기로 와서 또 줄내림
}
</script>

* 중첩 for문의 사용 -7

# 출력형식 (살짝 삐둘어졌다;)
 1 2 3 4 5
    1 2 3 4
       1 2 3
          1 2
             1

<script>
for (i=5; i>=1; i--)
{
 for (k=1; k<=5-i; k++) // 공백설정: i의 초기값이 5이므로 1<=0은 거짓
 {
  document.write("&nbsp;&nbsp;");
 }
 for (j=1; j<=i; j++) // 1<=5 참이므로 j값 5번 출력 후 종료
 {
  document.write(j+"&nbsp;");
 }
 document.write("<br>"); // 줄내림 실행 후 처음 for문으로 다시 시작하여
 // i값이 4가 되고 두번째 for문이 1번 실행되서 공백이 한번 생기고
 // 세번째 for문이 4번 출력 후 줄내림.. 이런식으로 1에서 종료.
}
</script>

* 중첩 for문의 사용 -8

# 출력형식
            ★
         ★★★
      ★★★★★
   ★★★★★★★
★★★★★★★★★

// 공백이 없는 소스를 먼저 작성
// 즉 이런 모양
//★
//★★★
//★★★★★
//★★★★★★★
//★★★★★★★★★

<script>
for (i=1; i<=9; i+=2) // 1 3 5 7 9
{
 for (j=1; j<=i; j++) // i가 1일때 j를 1번 반복, 3일때 3번 5일때 5번 7일때 7번 9일때 9번 반복
 {
  document.write("★");
 }
 document.write("<br>");
}
</script>

// 위처럼 작성 후 아래처럼 수정/작성 하면 이해하기가 조금 쉬워(?)진다
<script>
for (i=1; i<=9; i+=2) // 1 3 5 7 9
{
 for (k=1; k<=(9-i)/2; k++) // 규칙을 잘 찾아내는 것이 중요하다
 // (9-1)/2=4, (9-3)/2=3, (9-5)/2=2, (9-7)/2=1, (9-9)/2=0
 // 1<=4 → 4번 아래공백4번반복
 {
  document.write("&nbsp;&nbsp;");
 }
 for (j=1; j<=i; j++)
 {
  document.write("★"); // 4번공백 반복 후 1<=1 이므로 한번 출력 후
 }
 document.write("<br>"); // 줄내림 & 최상단 다시 반복
}
</script>

** while 반복문

for 문처럼 (초기값; 조건식; 증감값)으로 초기값과 증감값이 한문장에 다 들어가는데 반해
while문은 조건식만 괄호안에 들어가고 초기값/증감값은 그 외의 공간에 기술 한다.

while(조건식){
반복문안에 조건식의 변수의 변화되는 수식을 넣지 않으면 무한반복
}

** while문의 사용 -1

# 출력형식
1
2
3
4
5
6
7
8
9
10

<script>
a=1 // a의 변수선언과 동시에 값을 1로 초기화
while (a<=10) // 1부터 10까지 출력
{
  document.write(a+"<br>");
  a++; // 1의 값을 먼저 출력 후 증가 
}
</script>

** while문의 사용 -2

# 출력형식
1
2
3
4
5
6
7
8
9
10


<script>
a=0 // 0일때 0을 출력하고 싶지않다면
while (a<10) // 같거나 작을 때에 같거나=를 빼고
{
 a++; // 증가수식의 위치를 위로 바꿔 값이 미리 증가되고 출력되도록 한다
 document.write(a+"<br>");
 }
</script>

** while문의 사용 -3

// 단을 입력받아 그 단을 출력: 구구단
<script>
dan = prompt("단을 입력하세요(1~9단)","");
d=1;
while (d<10)
{
 document.write(dan+" x "+d+" = "+dan*d+"<br>");
 d++;
}
</script>

** while문의 사용 -4

# 출력형식
12345
12345
12345
12345
12345

<script>
a=0
b=0
while (a<5) // 1. 0<5 참 이므로 다음을 실행, 10. 1<5 참 이므로 앞으로 4번더 실행해서 총 5행 출력
{
 b=0
 while (b<5) // 2. 0<5 참 이므로 다음을 실행, 5. 1<5 참이므로 실행,
 {
  b++; // 3. b=1이 된다. 6. b=2
  document.write(b+"&nbsp"); // 4. 1출력, 7. 2 .. 5까지 출력 후 5<5 거짓이므로
   
 }
 document.write("<br>"); // 8. 줄내림
 a++; // 9. a값 1증가하여 1
}
</script>

※ 연산자 우선순위

1. () 괄호가 최우선순위    
2. 사칙연산자(* / + -) 같은 우선순위의 연산자끼리는 왼쪽부터 
3. 관계연산자(> < >= <= == !=)는 사칙연산보다 우선순위가 낮다.
4. 논리연산자(&& || !)는 관계연산자보다 우선순위가 낮다.

∴ 괄호 > 사칙연산자 > 관계연산자 > 논리연산자

*** do~while 문 : do 다음의 {} 안의 소스는 무조건 실행하며 다음에 위치하는 while은
조건식이 참일 때 조건식 다음에 위치하는 {}안의 증감값을 반복.. 한다랄까..
do
{
 무조건 실행
}
while (조건식); 조건식이 참이면 반복

*** do~while문의 사용 -1

# 출력형식
1
2
3
4
5
6
7
8
9
10

<script>
a=1 // a값을 1로 초기화
do // 다음의 문장을 무조건 실행
{
 document.write(a+"<br>"); 
 a++; // 1출력 후 1증가
}
while (a<=10); // a가1일때 조건식이 참이고 10 이상일 때 거짓이 되므로 1~10까지 출력
</script>

**** for문 while문 예제 -1

# 출력형식
임의의 수(su)를 입력받아 그 수까지의 합을 구하라.
1~su까지의 합은 xxx


<script> // for문 이용
su=prompt("수를 입력하세요","");
hap=0;
for (i=1; i<=su; i++)
{
 hap=hap+i; // i값만큼 증가하는 것을 반복
}
document.write("for 문에서의 1~"+su+"까지의 합은 "+hap+"<br>");
</script>

------------------------------------------------------------------

<script> // while문 이용
su=prompt("수를 입력해봐","");
hap=0;
i=1
while (i<=su)
{
 hap=hap+i;
 i++;
}
document.write("while문에서의 1~"+su+"까지의 합은 "+hap+"<br>");
</script>

**** for문 예제 -2

# 출력형식
임의의 수(su)를 입력받아 그 수까지의 짝수의 합을 구하라.

<script>
su=prompt("수를 입력하세요","");
hap=0;
for (i=2; i<=su; i+=2) // i를 1이 아닌 2로 만들고 증가값을 2로 하여 2,4,6,8.. 짝수만 i값으로 초기화 되도록 설정
{
 hap=hap+i // 0+2, 2+4, 6+6.... 이런식이 되도록하여 합을 누적한다
}
 document.write("1~"+su+"까지의 짝수의 합은 <b><font size='30'>"+hap+"</font></b>");
</script>

**** for문 예제 -3

# 출력형식
임의의 수(su)를 입력받아 그 수까지의 짝수의 합과 홀수의 합을 구하라.

<script>
su=prompt("숫자 넣어봐","");
hsum=0; jsum=0;
for(i=1; i<=su; i++)
{
 if (su%2==0) // 짝수
 { jsum+=i;
 }else // 홀수
 {
 } hsum+=i;
}
document.write("1~"+su+"까지의 짝수의 합은 "+jsum+"<br>");
document.write("1~"+su+"까지의 홀수의 합은 "+hsum);
</script>

***** break 
반복문에서는 break앞에 어떤 조건을 주고 그 조건이 만족할 시 반복문 종료

***** break 사용 예제(for문) -1

# 출력형식
1부터 임의의 수까지의 합이 2011보다 크거나 같을 때 break

<script>
sum=0;
 for (i=1; i<=100; i++)
 {
  sum += i; // 1부터 100까지의 합을 sum에 누적
  if (sum>=2011) break;  // sum의 값이 2011보다 크거나 같을 때 멈춤
  }
 document.write("1~"+i+"까지의 합은 "+sum);
</script>

***** break 사용 예제(while문) -2

# 출력형식
1부터 임의의 수까지의 합이 2011보다 크거나 같을 때 break

<script>
sum=0;
 i=1;
 while (true) // 어떤 상황이 될지 몰라 논리식을 무조건 참으로 설정?
 {
  sum += i;
  if (sum>=2011)
  { break;
  }i++
 } 
 document.write("1~"+i+"까지의 합은 "+sum);
</script>

****** continue
반복문내에 사용하며 continue다음의 문장(들)을 skip

****** continue 사용 예제 -1

# 출력형식
1~100사이의 값중에 3의 배수와 5의 배수를 제외한 나머지 값의 합을 구하장

<script>
hap=0;
for (i=1; i<=100; i++)
{
 if(i%3==0 || i%5==0) continue;
 hap += i;
}
document.write(hap);
</script>

******* 회원가입 폼: 아이디 검색창/대화명 검사창/우편번호 검사창 띄우기
(함수선언)

<head><script> // 함수 선언 스크립트는 <head>태그안에 넣는 것이라 하던데 설명을 못들음
function winOpen(){
 window.open("idChk.html","w","width=300, height=100, resizable=yes");
 /* 속성에 빈칸으로 구분했으면 계속 빈칸, 콤마로 구분했으면 계속 콤마
  1. 새창에 표시될 파일명
  2. 창이름: 없을 때도 "" 따옴표는 해줘야한다.
  이름이 없다면 팝업창이 계속 열린다. 이름이라는 것이 
  중복으로 띄움을 방지하도록 체크하는 역할
  3. 속성 width: 창너비, height: 창높이
      location: 주소표시줄, menubar: 메뉴표시
      resizable : 창의 크기조절여부
      scrollbars : 스크롤바 표시여부
      toolbar : 툴바표시여부
      속성은 yes / no 로 표시
 */
// 대화명 검사창 띄우기 닉네임 입력되고 창 닫힘
function nickChk(){window.open("nickChk.html","n","width=300, height=100")}
// 우편번호 검사창 띄우기 3칸이 입력되고 창 닫힘
function zipChk(){window.open("zipChk.html","n","width=300, height=400")}
</script></head>

******* 회원가입 폼: 아이디 검색창/대화명 검사창/우편번호 검사창 띄우기
(onClick이벤트 설정)

<body>
<!-- 중간 소스 생략 -->
<input type="button" value="ID중복검사" onClick="winOpen()">
<!-- 중간 소스 생략 -->
<input type="button" value="중복검사" onClick="nickChk()">
<!-- 중간 소스 생략 -->
<input type="button" value="검색" onClick="zipChk()">
<!-- 중간 소스 생략 -->
</body>

******* 회원가입 폼: 해당 팝업창 개별 html파일 작성

<html>
 <head>
  <title> 아이디 중복검사 </title>
 <script>
 function idChkClose()
 { // 메인폼에 검색한 아이디를 표시
   // 팝업창에서 팝업을 뜨게 만든 부모페이지를 가르키는 것: opener
  opener.document.frm.memId.value="myID"  
   // 현재창 닫기
  window.close();
  //self.close();
 }
 </script>
 </head>
 <body>
  당신이 입력한 아이디는 사용가능한 <br>아이디 입니다.
  <p>
  <input type="button" value="Close" onClick="idChkClose()">
 </body>
</html>

-----------------------------------------------------------------

<html>
 <head>
  <title> 닉네임 중복 검사 </title>
 <script src="nickScript.js"> // 외부파일 링크
 </script>
 </head>

 <body>
  <form name="nickFrm">
 대화명 : <input type="text" name="nick"><br>
 <input type="button" value="닉네임사용하기" onClick="nickClose()">
 
 
 </body>
</html>

-----------------------------------------------------------------

<html>
 <head>
  <title> 주소 검색 </title>
 <script>
 function zipChkClose()
 {
 if(zipFrm.addr.value==""){ // == 주의
  alert("상세주소를 입력하세요!!!")
  return; // 리턴이 나오는 순간 함수 종료 지점으로 이동
    // 밑에 명령어들을 건너뛰기 때문에 창이 닫히지 않는다
  }
 opener.document.frm.memZipCode01.value="123";
 opener.document.frm.memZipCode02.value="456";
 opener.document.frm.memAddr1.value="서울시 영등포구 당산동";
 opener.document.frm.memAddr2.value=zipFrm.addr.value;
 window.close();
}
 </script>
 </head>

 <body>
 <form name="zipFrm">
 우편번호 : 123-456<br>
 주소 : 서울시 영등포구 당산동<br>
 상세주소 : <input type="text" name="addr"><br>
 <input type="button" value="주소사용하기" onClick="zipChkClose()">
 </form>
 </body>
</html>

'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (0) 2011.10.17
[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13

 


<!-- 실행되는 폼이 아닌 입력유무 확인용
memRegDate : 등록일(날짜) 라니, jsp파일에 전송될 회원번호와 같이 입력될
값 같지만 아직 잘 모르겠음...-->
<html>
 <head>
  <title> 회원가입 폼 만들기 </title>
 <style>
 #s {font-size:8pt}
 TABLE {font-size:9pt; font-family:굴림체}
 </style>
 <script>
// 아이디 검색창 띄우기
function winOpen(){
 window.open("idChk.html","w","width=300, height=100, resizable=yes");
 /* 속성에 빈칸으로 구분했으면 계속 빈칸, 콤마로 구분했으면 계속 콤마
 // 1. 새창에 표시될 파일명
 // 2. 창이름: 없을 때도 "" 따옴표는 해줘야한다.
 // 이름이 없다면 팝업창이 계속 열린다. 이름이라는 것이
 // 중복으로 띄움을 방지하도록 체크하는 역할
 // 3. 속성 width: 창너비, height: 창높이
      location: 주소표시줄, menubar: 메뉴표시
      resizable : 창의 크기조절여부
      scrollbars : 스크롤바 표시여부
      toolbar : 툴바표시여부
 // 속성은 yes / no 로 표시
 */
}
// 대화명 검사창 띄우기 닉네임 입력되고 창 닫힘
function nickChk(){window.open("nickChk.html","n","width=300, height=100")}
// 우편번호 검사창 띄우기 3칸이 입력되고 창 닫힘
function zipChk(){window.open("zipChkClose.html","n","width=300, height=100")}
 </script>
 </head>

 <body>
<script language = "javascript">
function memChk() // 데이터 입력유무 확인 스크립트
{
  if(document.frm.memId.value == "")
  {
   alert("아이디를 입력하세요")
   document.frm.memId.focus();
   return false;
  }
  if(document.frm.memPwd.value == "")
  {
   alert("비밀번호를 입력하세요")
   document.frm.memPwd.focus();
   return false;
  }
  if(document.frm.memPwdChk.value == "")
  {
   alert("비밀번호를 다시한번 입력해주세요")
   document.frm.memPwdChk.focus();
   return false;
  }
  if(document.frm.memPwd.value != frm.memPwdChk.value)
  {
   alert("비밀번호가 다릅니다.");
   document.frm.memPwd.value = "";
   document.frm.memPwdChk.value = "";
   document.frm.memPwd.focus();
   return false;
  }
  if(document.frm.memName.value == "")
  {
   alert("이름이 없는건가..")
   document.frm.memName.focus();
   return false;
  }
  // 대화명을 이름으로 대체하는건 모르겠음...
  if(document.frm.memJumin01.value == "" || frm.memJumin02.value == "")
  {
   alert("주민등록번호를 입력하세요")
   document.frm.memJumin01.focus();
   return false;
  }
  if(document.frm.memBirth01.value == "" || frm.memBirth02.value == "" || frm.memBirth03.value == "")
  {
   alert("생년월일을 입력하세요.")
   document.frm.memBirth01.focus();
   return false;
  }
  /* if(document.frm.memSung.value == "")
  {
   alert("성별을 선택하세요")
   return false;
  } 라디오버튼값 체크 유무 확인 방법??*/
  if(document.frm.memEmail.value == "")
  {
   alert("이메일을 입력하세요")
   document.frm.memEmail.focus();
   return false;
  }
  // 메일 수신은 수신동의 selected
  if(document.frm.memZipCode01.value == "" || frm.memZipCode02.value == "")
  {
   alert("우편번호를 입력하세요")
   document.frm.memZipCode01.focus();
   return false;
  }
  if(document.frm.memAddr1.value == "")
  {
   alert("주소를 입력하세요")
   document.frm.memAddr1.focus();
   return false;
  }
  if(document.frm.memAddr2.value == "")
  {
   alert("상세 주소를 입력하세요")
   document.frm.memAddr2.focus();
   return false;
  }
  if (document.frm.memTel01.value == "")
  {
   alert("전화번호를 선택하세요")
   return false;
  }
  if (document.frm.memTel02.value == "")
  {
   alert("전화번호를 입력하세요")
   document.frm.memTel02.focus();
   return false;
  }
  if (document.frm.memTel03.value == "")
  {
   alert("전화번호를 입력하세요")
   document.frm.memTel03.focus();
   return false;
  }
  if (document.frm.memMobile01.value == "Not")
  {
   alert("핸드폰번호를 선택하세요")
   return false;
  }
  if (document.frm.memMobile02.value == "")
  {
   alert("핸드폰번호를 입력하세요")
   document.frm.memMobile02.focus();
   return false;
  }
  if (document.frm.memMobile03.value == "")
  {
   alert("핸드폰번호를 입력하세요")
   document.frm.memMobile03.focus();
   return false;
  }
  /* if (document.frm.memHobby.value == "" )
  {
   alert("취미를 선택해주세요")
   return false;
  } 체크박스값 체크여부 확인방법?? */

  document.frm.submit(); // 버튼으로 쓸 땐 return true; 대신 이걸 쓰고 form시작 구문에 onsubmit="return memChk()" 는 불필요하여 삭제

 }
 </script>

<form action="#" method="post" name="frm">

<table border="0" cellpadding="0" cellspacing="0"> <!-- cellpadding과 cellspacing 값을 0으로 초기화 해주지 않으면 테이블내부의 행/열 간 간격이 벌어진다. -->
<caption align="left">
<font color="white">..</font><font color="red">*</font><font id="s">표시 항목은 필수 입력 항목입니다.</font></caption>
 <tr height="60">
  <td align="right" width="100" bgcolor="#efefef">아&nbsp;이&nbsp;디&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*&nbsp;</font></td>
  <td width="600"> 
   <input type="text" name="memId" size="16">&nbsp;&nbsp;
   <input type="button" value="ID중복검사" onClick="winOpen()"><br> 
   <font id="s">아이디는 영문,숫자 조합으로 하셔야 합니다.[4자리이상 12자리이하]<br>
   아이디는 <font color="red">소문자</font>로 저장 됩니다.</font>
  </td> <!-- 중복검사............ㅡ,.ㅡa -->
 </tr>

 <tr height="45">
  <td align="right" bgcolor="#efefef">암<font color="white">....</font>호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="password" name="memPwd" size="16"><br>
   <font id="s">비밀번호는 4자리이상 12자리이하로 입력해주세요.</font>
  </td> <!-- 비밀번호 문자와 숫자 혼합사용 체크....? -ㅅ-a -->
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">암호확인&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="password" name="memPwdChk" size="16">
  </td>
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">이<font color="white">....</font>름&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memName" size="16" maxlength="28">
  </td>
 </tr>

 <tr>
  <td align="right" bgcolor="#efefef">대 화 명&nbsp;</td>
  <td valign="top">&nbsp;</td>
  <td>
  <input type="text" name="memNic" size="16" maxlength="10">&nbsp;&nbsp;
  <input type="button" value="중복검사" onClick="nickChk()"><br>
  <font id="s">대화명을 지정하지 않으시면 회원님의 이름으로 대화명이 지정됩니다.<br>
  대화명은 한글, 영문 관계없이 10글자 이내로 하셔야 합니다.
  </td> <!-- 미입력시 이름이 대화명으로 지정...? -ㅅ-a -->
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">주민등록번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memJumin01" size="7" maxlength="6">-
  <input type="text" name="memJumin02" size="7" maxlength="7">
  </td> <!-- 주민등록 번호 유효성체크 -.-a -->
 </tr>
 
 <tr height="30">
  <td align="right" bgcolor="#efefef">생년월일&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memBirth01" size="4" maxlength="4">년
  <input type="text" name="memBirth02" size="3" maxlength="2">월
  <input type="text" name="memBirth03" size="3" maxlength="2">일
 </tr> <!-- 주민번호 입력에 따른 생년월일 적용 체크 -.-a -->

 <tr height="30">
  <td align="right" bgcolor="#efefef">성<font color="white">....</font>별&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="radio" name="memSung" value="man">남자&nbsp;
  <input type="radio" name="memSung" value="woman">여자
 </tr> <!-- 주민번호 입력에 따른 남녀 성별 체크 -.-a -->

 <tr height="30">
  <td align="right" bgcolor="#efefef">E - mail&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="text" name="memEmail" size="28">
  </td>
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">메일수신&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="radio" name="memEmailYes" value="mailYes" checked>수신동의&nbsp;
   <input type="radio" name="memEmailNo" value="mailNo">수신거부
  </td> <!-- 이메일 검사...-.-? -->
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">우편번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
  <input type="text" name="memZipCode01" size="4" maxlength="3">-
  <input type="text" name="memZipCode02" size="4" maxlength="3">
  <input type="button" value="검색" onClick="zipChk()">
  </td> <!-- 우편번호 검색 ...? -->
 </tr>

 <tr>
  <td align="right" bgcolor="#efefef">주<font color="white">....</font>소&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="text" name="memAddr1" size="28"><br>
   <input type="text" name="memAddr2" size="16">
  </td>
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">전화번호&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <select name="memTel01">
   <option value="02">02</option>
   <option value="033">033</option>
   <option value="032">032</option>
   <option value="043">043</option>
   <option value="042">042</option>
   <option value="041">041</option>
   <option value="062">062</option>
   <option value="063">063</option>
   <option value="053">053</option>
   <option value="061">061</option>
   <option value="052">052</option>
   <option value="054">054</option>
   <option value="051">051</option>
   <option value="055">055</option>
   <option value="031">031</option>
   <option value="064">064</option>
   </select>-
   <input type="text" name="memTel02" size="5" maxlength="4">
   -
   <input type="text" name="memTel03" size="5" maxlength="4">
  </td> <!-- 숫자만 입력가능?? -.-a -->
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">핸 드 폰&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <select name="memMobile01">
   <option value="010">010</option>
   <option value="011">011</option>
   <option value="016">016</option>
   <option value="017">017</option>
   <option value="018">018</option>
   <option value="019">019</option>
   <option value="0130">0130</option>
   </select>-
   <input type="text" name="memMobile02" size="5" maxlength="4">
   -
   <input type="text" name="memMobile03" size="5" maxlength="4">
  </td> <!-- 숫자만 입력가능?? -.-a -->
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">직<font color="white">....</font>업&nbsp;</td>
  <td valign="top">&nbsp;</td>
  <td>
   <select name="memJob">
   <option value="Not">선택하세요</option>
   <option value="j1">관리</option>
   <option value="j2">건설</option>
   <option value="j3">경비</option>
   <option value="j4">청소</option>
   <option value="j5">경영</option>
   <option value="j6">회계</option>
   <option value="j7">사무</option>
   <option value="j8">교육</option>
   <option value="j9">자연과학</option>
   <option value="j10">사회과학</option>
   <option value="j11">연구</option>
   <option value="j12">군인</option>
   <option value="j13">금융</option>
   <option value="j14">보험</option>
   <option value="j15">기계</option>
   <option value="j16">농림어업</option>
   <option value="j17">문화</option>
   <option value="j18">예술</option>
   <option value="j19">디자인</option>
   <option value="j20">방송</option>
   <option value="j21">미용</option>
   <option value="j22">숙박</option>
   <option value="j23">여행</option>
   <option value="j24">오락</option>
   <option value="j25">스포츠</option>
   <option value="j26">법률</option>
   <option value="j27">경찰</option>
   <option value="j28">소방</option>
   <option value="j29">교도</option>
   <option value="j30">보건</option>
   <option value="j31">의료</option>
   <option value="j32">사회복지</option>
   <option value="j33">종교</option>
   <option value="j34">섬유</option>
   <option value="j35">의복</option>
   <option value="j36">식품가공</option>
   <option value="j37">영업</option>
   <option value="j38">판매</option>
   <option value="j39">운전</option>
   <option value="j40">운송</option>
   <option value="j41">음식</option>
   <option value="j42">재료</option>
   <option value="j43">전기</option>
   <option value="j44">전자</option>
   <option value="j45">정보통신</option>
   <option value="j46">환경</option>
   <option value="j47">인쇄</option>
   <option value="j48">목재</option>
   <option value="j49">가구</option>
   <option value="j50">공예</option>
   <option value="j51">화학</option>
   <option value="j52">학생</option>
   <option value="j53">무직</option>
   <option value="j54">기타</option>
   </select>
 </tr>

 <tr height="30">
  <td align="right" bgcolor="#efefef">취<font color="white">....</font>미&nbsp;</td>
  <td valign="top">&nbsp;&nbsp;<font color="red">*</font></td>
  <td>
   <input type="checkbox" name="memHobby" value="sports">스포츠&nbsp;
   <input type="checkbox" name="memHobby" value="shopping">쇼핑&nbsp;
   <input type="checkbox" name="memHobby" value="internet">인터넷&nbsp;
   <input type="checkbox" name="memHobby" value="travel">여행&nbsp;
   <input type="checkbox" name="memHobby" value="reading">독서&nbsp;
   <input type="checkbox" name="memHobby" value="movie">영화감상&nbsp;
   <input type="checkbox" name="memHobby" value="music">음악감상&nbsp;
  </td> <!-- 취미 2개 이상 선택 하도록 선택 어떻게.....-.-? -->
 </tr>

 <tr height="85">
  <td align="right" bgcolor="#efefef">자기소개&nbsp;</td>
  <td valign="top"></td> <!-- 자기소개 10글자 이상 어떻게?? -->
  <td>
   <textarea name="memIntro" rows="4" cols="65"></textarea>
  </td>
 </tr>

 <tr align="center">
  <td colspan="3">
   <input type="button" value="등록" onClick="memChk()">
   <!-- 핸드폰까지 입력 후 등록버튼을 누르면
   함수의 액션(action="#")이 실행되어 버린다.
   #이 실행되면 reset이 됨...;
   이유인즉 직업은 필수 선택이 아니고
   취미에 체크박스의 선택 유무를 따져 value값을
   넘겨받아 메시지를 띄우는 방법을 모르기 때문...
   인터넷을 찾아봐도 무슨말인지 영 모르겠다;;
   그래서 onClick="memChk()" 을 빼야 중간에 리셋이 안되지만
   그렇다고 빼면 데이터 입력유무값이 체크가 안된다...
 
   알게 되면 추가하여 올릴예정!-->
   <font color="white">...</font>
   <input type="reset" value="취소">
  </td>
 </tr>
</table>
</form>
 </body>
</html>

 

'Html/Jsp/Javascript' 카테고리의 다른 글

[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (0) 2011.10.17
[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13
Html,Jsp,Css_03  (0) 2011.10.12
Html,Jsp,Css_05 Html/Jsp/Javascript 2011. 10. 14. 18:02

전일에 이어 <script>문 작성

*) if 문 : 만약에 ~ 하다면... 
 
  범위의 조건을 설정하여 조건이 참이면 실행, 거짓일 땐 else구문을 실행한다. 
 
  연산식(A=500/2같은)에서는 아닌 경우도 있지만(오른쪽 먼저계산)
  기본적으로 코드 작성의 순차는 위에서 아래, 왼쪽에서 오른쪽이다.
  허나 if문에서는 상황에 따라 왔다 갔다 하는 속성을 가진다고 볼 수 있겠다.

*-I) if 문의 학점 구하기 : 결과값이 참이어도 다음 문구를 반복 실행한다

<script>
jum=prompt("점수를 입력하세요(0~100점 사이의 값",""); // 사용자로부터 숫자 입력받음

// 입력받을 숫자의 범위 설정 ▽

if(jum<0 || jum>100) // ←범위를 벗어난 경우  
 // if(!(jum>=0 && jum<=100)) ← 앞에 not이 붙어 있으므로 범위를 벗어난 경우
 // if(jum>=0 && jum<=100) ←정상범위
 // ||는 둘중 하나 &&는 둘다 실행, ||가 실행 속도면에서 유리
 {
  alert(jum+"(은)는 점수의 범위를 벗어났습니다.");
 }

// 정상적인 범위의 값이 들어온 경우 ▽
else{
if(jum>=90){ // 만약 95 입력시
   document.write(jum+" = A학점: 고생많았네"); // true: 결과 출력
  }
  if(jum>=80 && jum<90){
   document.write(jum+" = B학점: 나름했군"); // 별개의 문장이므로 결과 나왔지만 비교
  }
  if(jum>=70 && jum<80){
   document.write(jum+" = C학점: 잤나?"); // 또 비교
  }
  if(jum>=60 && jum<70){
   document.write(jum+" = D학점: 잤군"); // 또
  }
  if(jum<60){
   document.write(jum+" = F학점: 나가"); // 또;; 비효율적이다. 그래서 나온것이 else if
  }
</script>

*-II) if else문을 이용한 학점구하기: if문의 결과가 참이면 종료 거짓일때 else if 실행

<script>
jum=prompt("점수를 입력하세요(0~100점 사이의 값",""); // 사용자로부터 숫자 입력받음

// 입력받을 숫자의 범위 설정 ▽

if(jum<0 || jum>100) // ←범위를 벗어난 경우  
 // if(!(jum>=0 && jum<=100)) ← 앞에 not이 붙어 있으므로 범위를 벗어난 경우
 // if(jum>=0 && jum<=100) ←정상범위
 // ||는 둘중 하나 &&는 둘다 실행, ||가 실행 속도면에서 유리
 {
  alert(jum+"(은)는 점수의 범위를 벗어났습니다.");
 }

// 정상적인 범위의 값이 들어온 경우 ▽
if(jum>=90){ // A학점
  document.write(jum+" = A학점: 고생많았네"); // 참이면 여기서 else{} 끝으로 이동: 끝 거짓은 다음으로
 }else if(jum>=80){
  document.write(jum+" = B학점: 나름했군");
 }else if(jum>=70){
  document.write(jum+" = C학점: 잤나?");
 }else if(jum>=60){
  document.write(jum+" = D학점: 잤군");
 }else{
  document.write(jum+" = F학점: 나가");
 } // 참이 나오면 끝. 안나오면 else{}안의 실행
// → → → → → → → → → → → → → → → → → → → 참을 만족할 때 여기로 와서 끝남
</script>

# 결과(*) (*-I과 *-II 결과는 동일)



**) switch문의 구조

<script>
s="su" // 조건
  switch(s){          // (변수or상수)에 있는 값과
   case "월":document.write("<img src='aaa.jpg'>");
   // case "상수": 에 있는 값이 같으면 해당case의 :다음을 출력한다.
   // 조건이 맞는것이 없을땐(default가 없다는 전제로 그냥 종료)
    break; // case가 반복일때 멈춤
   case "5":documnet.write(10*10);
    break; // break가 없다면 다음 case까지 연속으로 실행된다
   case "su":document.write(s+"요일"); //su요일
    break;
   default:document.write("잘못들어온 값"); // case에 해당값이 없다면 :다음을 출력,필요 없으면 생략해도 됨 
  }
</script>

**-I) switch문을 이용한 학점 구하기

⊙ 특정 수를 정수화시키는 method : parseInt
    ex) document.write(parseInt(95/10)); → 9

<script>
jum=prompt("점수를 입력하세요(0~100점 사이의 값",""); // 사용자로부터 숫자 입력받음

// 입력받을 숫자의 범위 설정 ▽

if(jum<0 || jum>100) // ←범위를 벗어난 경우  
 // if(!(jum>=0 && jum<=100)) ← 앞에 not이 붙어 있으므로 범위를 벗어난 경우
 // if(jum>=0 && jum<=100) ←정상범위
 // ||는 둘중 하나 &&는 둘다 실행, ||가 실행 속도면에서 유리
 {
  alert(jum+"(은)는 점수의 범위를 벗어났습니다.");
 }

// if 문을 사용할때와 아래 목적은 같다. (학점 출력)
switch (parseInt(jum/10)) // 입력받은 jum의 값을 10으로 나눈 몫
 {
 case 10:
 case 9:hak="A학점: 고생했네";break
// △ 몫이 10 또는 9일 때의 hak의 변수선언 동시에 따옴표안의 내용이 변수에 저장?
// 좀더 쉬운말이 생각이 나지 않는다..
 아래도 같은 의미!?
 case 8:hak="B학점: 나름했군";break
 case 7:hak="C학점: 잤나?";break
 case 6:hak="D학점: 잤군";break
 default:hak="F학점: 나가";break
 }
 document.write(jum+" = "+hak); 
 }
  </script>

# 결과 (**-1)
상단의 결과 (*)과 동일 

**-II) switch문을 이용한 날짜 구하기

⊙ 아래 예제에서 볼 수 있는 method를 정리해볼까..

- 일단 method란? Javascript의 Object에 속해 있어 특별한 기능을 수행하는 함수
   ex) Objectname.method() <--메소드 표현
         Objectname.properties <--속성 표현
- new Date() : 이것도 메소드..? 인가? 여튼 시스템상의 날짜를 가져오는 역할을 한다
- get : 단어 뜻 그대로 앞에 붙은 변수명에 해당되는 객체에서 정보(?)를 가져오는 역할
- set : 앞에 붙은 변수명에 해당되는 객체의 값을 초기화 하는 역할
          (예제를 더 봐야 알겠지만 아직 set에 대해 확실히 감이 안온다)

<script>
// 시스템의 날짜와 시간정보 얻어오기
 date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
 y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능

 // date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
 m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
 d = date.getDate(); // 일구하기
 w = date.getDay(); // 요일구하기 : 0-일, 1-월, 2-화, 3-수, 4,-목, 5-금, 6-토
 h = date.getHours(); // 시간 구하기
 mm = date.getMinutes(); // 분 구하기
 // 초 구하기 : s = date.getSeconds(); // 자바에서는 시/분/초 에 s가 없다.

// 현재 요일을 찾아 document.write로 현재 날짜 시분 출력 
 switch (w) // w= 0~6 (일~토)
 {
 case 0:wStr="일";break; // 자바스크립트에서는 명령문 안에서 (wStr같은) 변수선언 가능
 case 1:wStr="월";break;
 case 2:wStr="화";break;
 case 3:wStr="수";break;
 case 4:wStr="목";break;
 case 5:wStr="금";break;
 case 6:wStr="토";break;
 }
 document.write(y+"년 "+m+"월 "+d+"일 "+wStr+"요일 "+h+"시 "+mm+"분<br>")
 // 여러 케이스에서 변수를 대체함으로 출력명령은 하나로도 가능
 
 // 위와 같지만 요일에 해당되는 이미지 출력 (케이스별 출력)
 switch (w)
  {
  case 0:document.write("<img src='../html/img/week/sun.jpg'>");
  break;
  case 1:document.write("<img src='../html/img/week/mon.jpg'>");
  break;
  case 2:document.write("<img src='../html/img/week/tue.jpg'>");
  break;
  case 3:document.write("<img src='../html/img/week/wed.jpg'>");
  break;
  case 4:document.write("<img src='../html/img/week/thu.jpg'>");
  break;
  case 5:document.write("<img src='../html/img/week/fri.jpg'>");
  break;
  case 6:document.write("<img src='../html/img/week/sat.jpg'>");
  }
 
</script>

# 결과 (**-II)

△ 윈도우상의 날짜를 변경함으로 다른 이미지 출력가능


*** 반복문 for

⊙  for (초기값; 최종값(조건); 증가/감소)

(△ 본인의 생각일뿐; 설명이 잘못되었다면 지적바람)

<script>
 img = "<img src=../html/img/blog_img.GIF>";
 for ( cnt=1; cnt<=3; cnt++ ) // 자바 스크립트는 변수값으로 자동으로 형선언이 된다.
 {
  document.write(img);
 }
 document.write("<p>");
 
 // 1~50까지 홀수 출력
 for ( n=1; n<100; n+=2) // 초기값1에서 2씩 증가시켜 홀수 출력
 {
  document.write(n+"&nbsp;");
 }

 document.write("<p>");
 
// 1~50까지 홀수 출력: table에 넣어서
 document.write("<table border=1>");
 document.write("<tr>");
 for ( n=1; n<100; n+=2)
 {
  document.write("<td width=50 align=center>"+n+"</td>");// width는 브라우저크기에 맞춰짐
  if((n+1)%10==0) document.write("</tr><tr>"); // 추가: if문으로 조건문, 행내리기..
 } // (9+1)%10==0 이므로 9에서 다음줄로 넘어가는 방식
// 규칙(조건문)을 잘 찾아내는 능력 중요.
 document.write("</tr></table>");
 </script>

# 결과


***-I) for문 연습1: 숫자를 입력받아 구구단 출력

<script>
 dan = prompt("숫자를 입력하세요","");  
  document.write("<table border=1>");
  document.write("<caption>== "+dan+"단 ==</caption>");
  
 for (d=1; d<10 ; d++)
 {
  if (d%2==0)
  {
   document.write("<tr bgcolor=#ffcc00>");
  }
  else {
   document.write("<tr>");
  }
  document.write("<td align=center>"+dan+" * "+d+" = "+dan*d+"</td></tr>");
 }
  document.write("</table>");
 </script>

# 결과 (***-I)
 



***-II) for문 연습2: 자바스크립트로 달력만들기


<script>
// 1. 조건 설정하기
 now = new Date(); //오늘날짜와시간에 관한 정보
 y = now.getYear(); //현재 연도
 m = now.getMonth()+1; //현재 월 : 1월이 0으로 시작하여 +1
 d = now.getDate();
 w = now.getDay();

 now.setDate(1); // 금일 날짜를 1일로 바꾼다
 w = now.getDay(); // 1일에 대한 요일 구하기
 
// 그달의 마지막 날 구하기
// 현재 연도를 4로 나눈 값의 나머지가 0 이고
// 100으로 나눈 값의 나머지가 0 
// 또는 현재 연도를 400으로 나눈 값의 나머지가 0 일 때
// 2월의 말일을 구할 수 있다? 라는 것 같다.
// y%4 == 0 && y%100 != 0 || y%400 == 0
// 위와 같이 입력되는게 정석일까?
 switch(m){
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12: lDay=31; break;
  case 2:
   if (y%4 == 0) // 위에서 말한걸 간단히 적용 
   {
   lDay=29; // 나머지가 0일때 말일은 29일
   }
   else {
   lDay=28; // 나머지가 0이 아닐때 말일은 28일
   }
   break;
   default : lDay = 30; // 4월은 항상 30일 이라던데...상식부족?!
 }
 document.write("<table border=1>");
 document.write("<caption>"+y+"년 "+m+"월</caption>");
 document.write("<tr><td><img src=../html/img/c.gif></td></tr>");

 document.write("<tr><td>");
 // 달력날짜 시작▽
 document.write("<table width=100%>");
 document.write("<tr><td>일<td>월<td>화<td>수<td>목<td>금<td>토</tr> <tr>");
 for (space=1; space<=w; space++)
 {
  document.write("<td></td>") // 1일 출력전공백
 }

 // 날짜
 cnt = w;
 for (day=1; day<=lDay; day++)
 {
  document.write("<td>"+day+"</td>");
  cnt++;
  if (cnt==7)
  {
   document.write("</tr><tr>");
   cnt=0;
  }
 }

 document.write("</tr></table>");
 // 달력날짜 △
 document.write("</td></tr>");
 
document.write("</table>");
 </script>

# 결과 (***-II)
 


※ 작성된 소스만 읽어보면 이해도 되고 재밌다 싶으면서도 직접 해보세요 하면..
할줄은 모르는 상태?

'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_06  (0) 2011.10.17
[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13
Html,Jsp,Css_03  (0) 2011.10.12
Html_02  (0) 2011.10.11